feat: use data service sessions api

.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

@@ -33,7 +33,9 @@ import { displaySlice } from "../features/display";
 import { NotebooksHelper } from "../notebooks";
 import { LOG_ERROR_KEY } from "../notebooks/Notebooks.state";
 import { NotebookAnnotations } from "../notebooks/components/session.types";
-import useGetSessionLogs from "../utils/customHooks/UseGetSessionLogs";
+import useGetSessionLogs, {
+  useGetSessionLogsV2,
+} from "../utils/customHooks/UseGetSessionLogs";
 import useAppDispatch from "../utils/customHooks/useAppDispatch.hook";
 import useAppSelector from "../utils/customHooks/useAppSelector.hook";
 import {
@@ -346,6 +348,39 @@ const EnvironmentLogs = ({ name, annotations }: EnvironmentLogsProps) => {
   );
 };
 
+/**
+ * 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 (
+    <EnvironmentLogsPresent
+      fetchLogs={fetchLogs}
+      toggleLogs={toggleLogs}
+      logs={logs}
+      name={name}
+    />
+  );
+};
+
 /**
  * Simple environment logs container
  *
@@ -356,7 +391,7 @@ const EnvironmentLogs = ({ name, annotations }: EnvironmentLogsProps) => {
  * @param {object} annotations - list of annotations
  */
 interface EnvironmentLogsPresentProps {
-  annotations: Record<string, unknown>;
+  annotations?: Record<string, unknown>;
   fetchLogs: IFetchableLogs["fetchLogs"];
   logs?: ILogs;
   name: string;
@@ -371,12 +406,12 @@ const EnvironmentLogsPresent = ({
 }: EnvironmentLogsPresentProps) => {
   if (!logs?.show || logs?.show !== name || !logs) return null;
 
-  const cleanAnnotations = NotebooksHelper.cleanAnnotations(
-    annotations
-  ) as NotebookAnnotations;
+  const cleanAnnotations =
+    annotations &&
+    (NotebooksHelper.cleanAnnotations(annotations) as NotebookAnnotations);
 
-  const modalTitle = !cleanAnnotations.renkuVersion && (
-    <div className="fs-5 fw-normal">
+  const modalTitle = cleanAnnotations && !cleanAnnotations.renkuVersion && (
+    <div className={cx("fs-5", "fw-normal")}>
       <small>
         {cleanAnnotations["namespace"]}/{cleanAnnotations["projectName"]} [
         {cleanAnnotations["branch"]}@

client/src/features/admin/SessionEnvironmentsSection.tsx

@@ -40,7 +40,6 @@ import AddSessionEnvironmentButton from "./AddSessionEnvironmentButton";
 import DeleteSessionEnvironmentButton from "./DeleteSessionEnvironmentButton";
 import UpdateSessionEnvironmentButton from "./UpdateSessionEnvironmentButton";
 import { useGetSessionEnvironmentsQuery } from "./adminSessions.api";
-import { safeStringify } from "../sessionsV2/session.utils";
 
 export default function SessionEnvironmentsSection() {
   return (

client/src/features/dashboardV2/DashboardV2Sessions.tsx

@@ -1,84 +1,84 @@
-import { skipToken } from "@reduxjs/toolkit/query";
+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/Logs";
 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";
+import { SerializedError } from "@reduxjs/toolkit";
 
 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 +147,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 && (