[wip] feat: use data-service sessions

.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 {
@@ -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,64 @@ 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}
+//     />
+//   );
+// };
+
+/**
+ * Sessions logs container integrating state and actions
+ *
+ * @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 +416,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 +431,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"]} [

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>
   );
 };

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 {

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>
   );
 }

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 && (