-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: use data-service sessions endpoint #3296
Changes from 3 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
/*! | ||
* Copyright 2024 - Swiss Data Science Center (SDSC) | ||
* A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and | ||
* Eidgenössische Technische Hochschule Zürich (ETHZ). | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | ||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
|
||
import { displaySlice } from "../features/display"; | ||
import useAppDispatch from "../utils/customHooks/useAppDispatch.hook"; | ||
import useAppSelector from "../utils/customHooks/useAppSelector.hook"; | ||
import { useGetSessionLogsV2 } from "../utils/customHooks/UseGetSessionLogs"; | ||
import { EnvironmentLogsPresent } from "./Logs"; | ||
|
||
/** | ||
* Sessions logs container integrating state and actions V2 | ||
* | ||
* @param {string} name - server name | ||
*/ | ||
interface EnvironmentLogsPropsV2 { | ||
name: string; | ||
} | ||
export default function EnvironmentLogsV2({ name }: EnvironmentLogsPropsV2) { | ||
const displayModal = useAppSelector( | ||
({ display }) => display.modals.sessionLogs | ||
); | ||
const { logs, fetchLogs } = useGetSessionLogsV2( | ||
displayModal.targetServer, | ||
displayModal.show | ||
); | ||
const dispatch = useAppDispatch(); | ||
const toggleLogs = function (target: string) { | ||
dispatch( | ||
displaySlice.actions.toggleSessionLogsModal({ targetServer: target }) | ||
); | ||
}; | ||
|
||
return ( | ||
<EnvironmentLogsPresent | ||
fetchLogs={fetchLogs} | ||
toggleLogs={toggleLogs} | ||
logs={logs} | ||
name={name} | ||
title="Logs" | ||
/> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -105,15 +105,11 @@ function UpdateSessionEnvironmentModal({ | |||||
environmentId: environment.id, | ||||||
container_image: data.container_image, | ||||||
name: data.name, | ||||||
default_url: data.default_url.trim() ? data.default_url : "", | ||||||
description: data.description.trim() ? data.description : "", | ||||||
default_url: data.default_url?.trim() ? data.default_url : "", | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It seems this can be done here as well:
Suggested change
|
||||||
description: data.description?.trim() ? data.description : "", | ||||||
port: data.port ?? undefined, | ||||||
working_directory: data.working_directory.trim() | ||||||
? data.working_directory | ||||||
: undefined, | ||||||
mount_directory: data.mount_directory.trim() | ||||||
? data.mount_directory | ||||||
: undefined, | ||||||
working_directory: data.working_directory?.trim() || undefined, | ||||||
mount_directory: data.mount_directory?.trim() || undefined, | ||||||
uid: data.uid ?? undefined, | ||||||
gid: data.gid ?? undefined, | ||||||
command: commandParsed.data, | ||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,84 +1,91 @@ | ||
import { skipToken } from "@reduxjs/toolkit/query"; | ||
import { SerializedError } from "@reduxjs/toolkit"; | ||
import { FetchBaseQueryError, skipToken } from "@reduxjs/toolkit/query"; | ||
import cx from "classnames"; | ||
import { useMemo } from "react"; | ||
import { Link, generatePath } from "react-router-dom-v5-compat"; | ||
import { Col, ListGroup, Row } from "reactstrap"; | ||
|
||
import { Loader } from "../../components/Loader"; | ||
import { EnvironmentLogs } from "../../components/Logs"; | ||
import EnvironmentLogsV2 from "../../components/LogsV2"; | ||
import { RtkErrorAlert } from "../../components/errors/RtkErrorAlert"; | ||
import { NotebooksHelper } from "../../notebooks"; | ||
import { NotebookAnnotations } from "../../notebooks/components/session.types"; | ||
import { useGetSessionsQuery as useGetSessionsQueryV2 } from "../../features/sessionsV2/sessionsV2.api"; | ||
import "../../notebooks/Notebooks.css"; | ||
import { ABSOLUTE_ROUTES } from "../../routing/routes.constants"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you keep the CSS imports as the last ones? They semantically different from the other ones, so we should make them stand out. Also keep the associated comment. |
||
import useAppSelector from "../../utils/customHooks/useAppSelector.hook"; | ||
import { useGetProjectsByProjectIdQuery } from "../projectsV2/api/projectV2.enhanced-api"; | ||
import { useGetSessionsQuery } from "../session/sessions.api"; | ||
import { Session } from "../session/sessions.types"; | ||
import { filterSessionsWithCleanedAnnotations } from "../session/sessions.utils"; | ||
import ActiveSessionButton from "../sessionsV2/components/SessionButton/ActiveSessionButton"; | ||
import { | ||
SessionStatusV2Description, | ||
SessionStatusV2Label, | ||
} from "../sessionsV2/components/SessionStatus/SessionStatus"; | ||
|
||
// Required for logs formatting | ||
import "../../notebooks/Notebooks.css"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you keep this comment here? Otherwise there is no indication that removing the |
||
import { SessionList, SessionV2 } from "../sessionsV2/sessionsV2.types"; | ||
|
||
export default function DashboardV2Sessions() { | ||
const { data: sessions, error, isLoading } = useGetSessionsQuery(); | ||
const { data: sessions, error, isLoading } = useGetSessionsQueryV2(); | ||
|
||
const v2Sessions = useMemo( | ||
() => | ||
sessions != null | ||
? filterSessionsWithCleanedAnnotations<NotebookAnnotations>( | ||
sessions, | ||
({ annotations }) => annotations["renkuVersion"] === "2.0" | ||
) | ||
: {}, | ||
[sessions] | ||
); | ||
if (isLoading) { | ||
return <LoadingState />; | ||
} | ||
|
||
if (error) { | ||
return <ErrorState error={error} />; | ||
} | ||
|
||
if (!sessions || sessions.length === 0) { | ||
return <NoSessionsState />; | ||
} | ||
|
||
return <SessionDashboardList sessions={sessions} />; | ||
} | ||
|
||
const noSessions = isLoading ? ( | ||
function LoadingState() { | ||
return ( | ||
<div className={cx("d-flex", "flex-column", "mx-auto")}> | ||
<Loader /> | ||
<p className={cx("mx-auto", "my-3")}>Retrieving sessions...</p> | ||
</div> | ||
) : error ? ( | ||
); | ||
} | ||
|
||
function ErrorState({ | ||
error, | ||
}: { | ||
error: FetchBaseQueryError | SerializedError | undefined; | ||
}) { | ||
return ( | ||
<div> | ||
<p>Cannot show sessions.</p> | ||
<RtkErrorAlert error={error} /> | ||
</div> | ||
) : !sessions || | ||
(Object.keys(sessions).length == 0 && | ||
Object.keys(v2Sessions).length == 0) ? ( | ||
<div>No running sessions.</div> | ||
) : null; | ||
); | ||
} | ||
|
||
if (noSessions) return <div>{noSessions}</div>; | ||
function NoSessionsState() { | ||
return <div>No running sessions.</div>; | ||
} | ||
|
||
function SessionDashboardList({ | ||
sessions, | ||
}: { | ||
sessions: SessionList | undefined; | ||
}) { | ||
return ( | ||
<ListGroup flush data-cy="dashboard-session-list"> | ||
{Object.entries(v2Sessions).map(([key, session]) => ( | ||
<DashboardSession key={key} session={session} /> | ||
{sessions?.map((session) => ( | ||
<DashboardSession key={session.name} session={session} /> | ||
))} | ||
</ListGroup> | ||
); | ||
} | ||
|
||
interface DashboardSessionProps { | ||
session: Session; | ||
session: SessionV2; | ||
} | ||
function DashboardSession({ session }: DashboardSessionProps) { | ||
const displayModal = useAppSelector( | ||
({ display }) => display.modals.sessionLogs | ||
); | ||
const { image } = session; | ||
const annotations = NotebooksHelper.cleanAnnotations( | ||
session.annotations | ||
) as NotebookAnnotations; | ||
const projectId = annotations.projectId; | ||
const { image, project_id: projectId } = session; | ||
const { data: project } = useGetProjectsByProjectIdQuery( | ||
projectId ? { projectId: projectId } : skipToken | ||
projectId ? { projectId } : skipToken | ||
); | ||
|
||
const projectUrl = project | ||
|
@@ -147,10 +154,7 @@ function DashboardSession({ session }: DashboardSessionProps) { | |
</Row> | ||
</Col> | ||
</Row> | ||
<EnvironmentLogs | ||
name={displayModal.targetServer} | ||
annotations={annotations} | ||
/> | ||
<EnvironmentLogsV2 name={displayModal.targetServer} /> | ||
</Link> | ||
); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Similar to the comment on
AddSessionEnvironmentButton
: