feat: use data service sessions api

SwissDataScienceCenter · Oct 1, 2024 · 897bad1 · 897bad1
1 parent db7b8a6
commit 897bad1
Show file tree

Hide file tree

Showing 32 changed files with 993 additions and 385 deletions.
diff --git a/.github/workflows/acceptance-tests.yml b/.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:

diff --git a/client/src/components/Logs.tsx b/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 {
@@ -317,7 +319,7 @@ function SessionLogs(props: LogBodyProps) {
  * @param {object} annotations - list of cleaned annotations
  */
 interface EnvironmentLogsProps {
-  annotations: Record<string, unknown>;
+  annotations?: Record<string, unknown>;
   name: string;
 }
 const EnvironmentLogs = ({ name, annotations }: EnvironmentLogsProps) => {
@@ -346,6 +348,31 @@ const EnvironmentLogs = ({ name, annotations }: EnvironmentLogsProps) => {
   );
 };
 
+export const EnvironmentLogsV2 = ({ name }: EnvironmentLogsProps) => {
+  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 +383,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,11 +398,11 @@ 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 && (
+  const modalTitle = cleanAnnotations && !cleanAnnotations.renkuVersion && (
     <div className="fs-5 fw-normal">
       <small>
         {cleanAnnotations["namespace"]}/{cleanAnnotations["projectName"]} [

diff --git a/client/src/components/progress/Progress.tsx b/client/src/components/progress/Progress.tsx
@@ -16,7 +16,9 @@
  * limitations under the License.
  */
 
+import cx from "classnames";
 import "./Progress.css";
+import { Loader } from "../Loader.tsx";
 
 /**
  *  renku-ui
@@ -28,6 +30,7 @@ import "./Progress.css";
 export enum ProgressType {
   Determinate = "Determinate",
   Indeterminate = "Indeterminate",
+  Spinner = "Spinner",
 }
 
 export enum ProgressStyle {
@@ -73,13 +76,15 @@ const ProgressIndicator = ({
         <div className="progress-bar-determinate-auto"></div>
         <div className="progress-bar-indeterminate"></div>
       </div>
-    ) : (
+    ) : type === ProgressType.Determinate ? (
       <div className="progress-bar">
         <div
           className="progress-bar-determinate"
           style={{ width: `${percentage ?? 0}%` }}
         ></div>
       </div>
+    ) : (
+      <Loader inline={true} size={24} />
     );
 
   const percentageLabel =
@@ -91,20 +96,29 @@ const ProgressIndicator = ({
     <div className={`progress-box progress-box--${style}`}>
       <h2 className="progress-title">{title}</h2>
       <p className="pb-2">{description}</p>
-      <div className="progress-indicator">
-        <div
-          className={`progress-bar-box ${
-            style === ProgressStyle.Light ? "progress-bar-box--light" : ""
-          }`}
-        >
+      {type === ProgressType.Spinner ? (
+        <div className={cx("d-flex", "gap-3")}>
           {progressBar}
+          <div>{feedback}</div>
         </div>
-        <p className="pt-1">
-          {currentStatus}
-          {percentageLabel}
-        </p>
-      </div>
-      <p className="pt-1">{feedback}</p>
+      ) : (
+        <>
+          <div className="progress-indicator">
+            <div
+              className={`progress-bar-box ${
+                style === ProgressStyle.Light ? "progress-bar-box--light" : ""
+              }`}
+            >
+              {progressBar}
+            </div>
+            <p className="pt-1">
+              {currentStatus}
+              {percentageLabel}
+            </p>
+          </div>
+          <p className="pt-1">{feedback}</p>
+        </>
+      )}
     </div>
   );
 };

diff --git a/client/src/components/progress/ProgressSteps.tsx b/client/src/components/progress/ProgressSteps.tsx
@@ -30,6 +30,7 @@ import "./Progress.css";
 export enum ProgressType {
   Determinate = "Determinate",
   Indeterminate = "Indeterminate",
+  Spinner = "Spinner",
 }
 
 export enum ProgressStyle {

diff --git a/client/src/features/dashboardV2/DashboardV2Sessions.tsx b/client/src/features/dashboardV2/DashboardV2Sessions.tsx
@@ -1,20 +1,15 @@
 import { 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 { RtkErrorAlert } from "../../components/errors/RtkErrorAlert";
-import { NotebooksHelper } from "../../notebooks";
-import { NotebookAnnotations } from "../../notebooks/components/session.types";
 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 { useGetSessionsQuery as useGetSessionsQueryV2 } from "../../features/sessionsV2/sessionsV2.api.ts";
 import ActiveSessionButton from "../sessionsV2/components/SessionButton/ActiveSessionButton";
 import {
   SessionStatusV2Description,
@@ -23,20 +18,10 @@ import {
 
 // Required for logs formatting
 import "../../notebooks/Notebooks.css";
+import { SessionV2 } from "../sessionsV2/sessionsV2.types.ts";
 
 export default function DashboardV2Sessions() {
-  const { data: sessions, error, isLoading } = useGetSessionsQuery();
-
-  const v2Sessions = useMemo(
-    () =>
-      sessions != null
-        ? filterSessionsWithCleanedAnnotations<NotebookAnnotations>(
-            sessions,
-            ({ annotations }) => annotations["renkuVersion"] === "2.0"
-          )
-        : {},
-    [sessions]
-  );
+  const { data: sessions, error, isLoading } = useGetSessionsQueryV2();
 
   const noSessions = isLoading ? (
     <div className={cx("d-flex", "flex-column", "mx-auto")}>
@@ -48,37 +33,32 @@ export default function DashboardV2Sessions() {
       <p>Cannot show sessions.</p>
       <RtkErrorAlert error={error} />
     </div>
-  ) : !sessions ||
-    (Object.keys(sessions).length == 0 &&
-      Object.keys(v2Sessions).length == 0) ? (
+  ) : !sessions || sessions.length == 0 ? (
     <div>No running sessions.</div>
   ) : null;
 
   if (noSessions) return <div>{noSessions}</div>;
 
   return (
     <ListGroup flush data-cy="dashboard-session-list">
-      {Object.entries(v2Sessions).map(([key, session]) => (
-        <DashboardSession key={key} session={session} />
-      ))}
+      {sessions &&
+        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 +127,7 @@ function DashboardSession({ session }: DashboardSessionProps) {
           </Row>
         </Col>
       </Row>
-      <EnvironmentLogs
-        name={displayModal.targetServer}
-        annotations={annotations}
-      />
+      <EnvironmentLogs name={displayModal.targetServer} />
     </Link>
   );
 }
diff --git a/client/src/features/session/components/SessionHibernated.tsx b/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);
 

diff --git a/client/src/features/session/components/ShowSession.tsx b/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 && (

diff --git a/client/src/features/session/components/StartSessionProgressBar.tsx b/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 ProgressIndicator from "../../../components/progress/Progress";
+import { SessionV2 } from "../../sessionsV2/sessionsV2.types";
 
 interface StartSessionProgressBarProps {
   includeStepInTitle?: boolean;
@@ -59,6 +61,40 @@ export default function StartSessionProgressBar({
   );
 }
 
+interface StartSessionProgressBarV2Props {
+  includeStepInTitle?: boolean;
+  session?: SessionV2;
+  toggleLogs: () => void;
+}
+export function StartSessionProgressBarV2({
+  includeStepInTitle,
+  session,
+  toggleLogs,
+}: StartSessionProgressBarV2Props) {
+  const statusData = session?.status;
+  const title = "Starting Session";
+  const logButton = (
+    <Button className="mt-3" color="outline-primary" onClick={toggleLogs}>
+      Open Logs
+    </Button>
+  );
+
+  const readyNumContainers = statusData?.ready_containers || 0;
+  const totalNumContainers = statusData?.total_containers || 1;
+  return (
+    <div className={cx("progress-box-small", "progress-box-small--steps")}>
+      <ProgressIndicator
+        description="Starting the containers for your session"
+        type={ProgressType.Spinner}
+        style={ProgressStyle.Light}
+        title={includeStepInTitle ? `Step 2 of 2: ${title}` : title}
+        feedback={`${readyNumContainers} of ${totalNumContainers} containers ready`}
+      />
+      <div className={cx("progress-box", "pt-0")}>{logButton}</div>
+    </div>
+  );
+}
+
 function getStatusData(
   status: Pick<SessionStatus, "details" | "state"> | undefined
 ): StepsProgressBar[] {