feat: use data-service sessions endpoint

.github/workflows/acceptance-tests.yml

@@ -32,6 +32,7 @@ jobs:
       renku-notebooks: ${{ steps.deploy-comment.outputs.renku-notebooks}}
       renku-data-services: ${{ steps.deploy-comment.outputs.renku-data-services}}
       amalthea: ${{ steps.deploy-comment.outputs.amalthea}}
+      amalthea-sessions: ${{ steps.deploy-comment.outputs.amalthea-sessions}}
       test-enabled: ${{ steps.deploy-comment.outputs.test-enabled}}
       extra-values: ${{ steps.deploy-comment.outputs.extra-values}}
     steps:
@@ -90,6 +91,7 @@ jobs:
           renku_notebooks: "${{ needs.check-deploy.outputs.renku-notebooks }}"
           renku_data_services: "${{ needs.check-deploy.outputs.renku-data-services }}"
           amalthea: "${{ needs.check-deploy.outputs.amalthea }}"
+          amalthea_sessions: "${{ needs.check-deploy.outputs.amalthea-sessions }}"
           extra_values: "${{ needs.check-deploy.outputs.extra-values }}"
 
   selenium-acceptance-tests:

client/src/components/Logs.tsx

@@ -42,9 +42,9 @@ import {
 } from "../utils/helpers/HelperFunctions";
 import { Loader } from "./Loader";
 
-import "./Logs.css";
-import { ArrowRepeat, FileEarmarkArrowDown } from "react-bootstrap-icons";
 import cx from "classnames";
+import { ArrowRepeat, FileEarmarkArrowDown } from "react-bootstrap-icons";
+import "./Logs.css";
 
 export interface ILogs {
   data: Record<string, string>;

client/src/components/LogsV2.tsx

@@ -0,0 +1,96 @@
+/*!
+ * 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 { Modal, ModalBody, ModalHeader } from "reactstrap";
+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 { IFetchableLogs, ILogs, SessionLogs } from "./Logs";
+
+/**
+ * Sessions logs container integrating state and actions V2
+ *
+ * @param {string} name - server name
+ */
+interface EnvironmentLogsPropsV2 {
+  name: string;
+}
+export const 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 (
+    <EnvironmentLogsPresentV2
+      fetchLogs={fetchLogs}
+      toggleLogs={toggleLogs}
+      logs={logs}
+      name={name}
+    />
+  );
+};
+interface EnvironmentLogsPresentV2Props {
+  fetchLogs: IFetchableLogs["fetchLogs"];
+  logs?: ILogs;
+  name: string;
+  toggleLogs: (name: string) => unknown;
+}
+const EnvironmentLogsPresentV2 = ({
+  logs,
+  name,
+  toggleLogs,
+  fetchLogs,
+}: EnvironmentLogsPresentV2Props) => {
+  if (!logs?.show || logs?.show !== name || !logs) return null;
+
+  return (
+    <Modal
+      isOpen={!!logs.show}
+      className="modal-xl"
+      scrollable={true}
+      toggle={() => {
+        toggleLogs(name);
+      }}
+    >
+      <ModalHeader
+        className="header-multiline"
+        toggle={() => {
+          toggleLogs(name);
+        }}
+      >
+        <div>Logs</div>
+      </ModalHeader>
+      <ModalBody>
+        <div className="mx-2">
+          <SessionLogs fetchLogs={fetchLogs} logs={logs} name={name} />
+        </div>
+      </ModalBody>
+    </Modal>
+  );
+};

client/src/features/dashboardV2/DashboardV2Sessions.tsx

@@ -1,84 +1,83 @@
-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";
 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";
+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 />;
+  }
 
-  const noSessions = isLoading ? (
-    <div className={cx("d-flex", "flex-column", "mx-auto")}>
-      <Loader />
-      <p className={cx("mx-auto", "my-3")}>Retrieving sessions...</p>
-    </div>
-  ) : error ? (
-    <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 (error) {
+    return <ErrorState error={error} />;
+  }
 
-  if (noSessions) return <div>{noSessions}</div>;
+  if (!sessions || sessions.length === 0) {
+    return <NoSessionsState />;
+  }
 
-  return (
-    <ListGroup flush data-cy="dashboard-session-list">
-      {Object.entries(v2Sessions).map(([key, session]) => (
-        <DashboardSession key={key} session={session} />
-      ))}
-    </ListGroup>
-  );
+  return <SessionDashboardList sessions={sessions} />;
 }
 
+const LoadingState = () => (
+  <div className={cx("d-flex", "flex-column", "mx-auto")}>
+    <Loader />
+    <p className={cx("mx-auto", "my-3")}>Retrieving sessions...</p>
+  </div>
+);
+
+const ErrorState = ({
+  error,
+}: {
+  error: FetchBaseQueryError | SerializedError | undefined;
+}) => (
+  <div>
+    <p>Cannot show sessions.</p>
+    <RtkErrorAlert error={error} />
+  </div>
+);
+
+const NoSessionsState = () => <div>No running sessions.</div>;
+
+const SessionDashboardList = ({
+  sessions,
+}: {
+  sessions: SessionList | undefined;
+}) => (
+  <ListGroup flush data-cy="dashboard-session-list">
+    {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 +146,7 @@ function DashboardSession({ session }: DashboardSessionProps) {
           </Row>
         </Col>
       </Row>
-      <EnvironmentLogs
-        name={displayModal.targetServer}
-        annotations={annotations}
-      />
+      <EnvironmentLogsV2 name={displayModal.targetServer} />
     </Link>
   );
 }

client/src/features/session/components/SessionButton.tsx

@@ -755,7 +755,7 @@ function ModifySessionModalContent({
           <Col>
             {message}
             <p>
-              <span className="fw-bold me-3">Current resources:</span>
+              <span className={cx("fw-bold", "me-3")}>Current resources:</span>
               <span>
                 <SessionRowResourceRequests
                   resourceRequests={resources.requests}

client/src/features/session/components/SessionHibernated.tsx

@@ -32,13 +32,14 @@ import AppContext from "../../../utils/context/appContext";
 import useLegacySelector from "../../../utils/customHooks/useLegacySelector.hook";
 import { Url } from "../../../utils/helpers/url";
 import { usePatchSessionMutation } from "../sessions.api";
-import { Session } from "../sessions.types";
 
 interface SessionHibernatedProps {
-  session: Session;
+  sessionName: string;
 }
 
-export default function SessionHibernated({ session }: SessionHibernatedProps) {
+export default function SessionHibernated({
+  sessionName,
+}: SessionHibernatedProps) {
   const location = useLocation<{ filePath?: string } | undefined>();
   const locationFilePath = location.state?.filePath;
 
@@ -57,9 +58,9 @@ export default function SessionHibernated({ session }: SessionHibernatedProps) {
   const [isResuming, setIsResuming] = useState(false);
 
   const onResumeSession = useCallback(() => {
-    patchSession({ sessionName: session.name, state: "running" });
+    patchSession({ sessionName: sessionName, state: "running" });
     setIsResuming(true);
-  }, [patchSession, session.name]);
+  }, [patchSession, sessionName]);
 
   const { notifications } = useContext(AppContext);
 

client/src/features/session/components/ShowSession.tsx

@@ -239,7 +239,7 @@ function ShowSessionFullscreen({ sessionName }: ShowSessionFullscreenProps) {
     !isLoading && thisSession == null ? (
       <SessionUnavailable />
     ) : thisSession?.status.state === "hibernated" ? (
-      <SessionHibernated session={thisSession} />
+      <SessionHibernated sessionName={thisSession.name} />
     ) : thisSession != null ? (
       <>
         {!isTheSessionReady && (

client/src/features/session/components/StartSessionProgressBar.tsx

@@ -25,6 +25,8 @@ import ProgressStepsIndicator, {
 } from "../../../components/progress/ProgressSteps";
 import cx from "classnames";
 import { Button } from "reactstrap";
+import { SessionV2 } from "../../sessionsV2/sessionsV2.types";
+import { Loader } from "../../../components/Loader";
 
 interface StartSessionProgressBarProps {
   includeStepInTitle?: boolean;
@@ -59,6 +61,39 @@ export default function StartSessionProgressBar({
   );
 }
 
+interface StartSessionProgressBarV2Props {
+  session?: SessionV2;
+  toggleLogs: () => void;
+}
+export function StartSessionProgressBarV2({
+  session,
+  toggleLogs,
+}: StartSessionProgressBarV2Props) {
+  const statusData = session?.status;
+  const description =
+    statusData?.ready_containers && statusData?.total_containers
+      ? `${statusData?.ready_containers} of ${statusData?.total_containers} containers ready`
+      : "Loading containers status";
+
+  return (
+    <div className={cx("progress-box-small", "progress-box-small--steps")}>
+      <div>
+        <h4 className="fw-bold">Starting Session</h4>
+        <p className="pb-2">Starting the containers for your session</p>
+        <div className={cx("d-flex", "gap-3")}>
+          <Loader inline={true} size={24} />
+          <div>{description}</div>
+        </div>
+      </div>
+      <div className={cx("progress-box", "pt-0")}>
+        <Button className="mt-3" color="outline-primary" onClick={toggleLogs}>
+          Open Logs
+        </Button>
+      </div>
+    </div>
+  );
+}
+
 function getStatusData(
   status: Pick<SessionStatus, "details" | "state"> | undefined
 ): StepsProgressBar[] {