From fbc0695f980d9453f6ba9bb07e2c329c4a231f7c Mon Sep 17 00:00:00 2001
From: Andrea Cordoba <dandrea.cordoba@gmail.com>
Date: Thu, 5 Sep 2024 16:58:25 +0200
Subject: [PATCH] feat: use data service sessions api

---
 client/src/components/Logs.tsx                |  41 ++++-
 .../dashboardV2/DashboardV2Sessions.tsx       |  47 ++----
 .../session/components/SessionHibernated.tsx  |  11 +-
 .../session/components/ShowSession.tsx        |   2 +-
 .../components/StartSessionProgressBar.tsx    |  36 ++++
 .../session/useWaitForSessionStatus.hook.ts   |  41 +++++
 .../sessionsV2/LazyShowSessionPage.tsx        |   2 +-
 .../sessionsV2/PauseOrDeleteSessionModal.tsx  |  67 +++-----
 .../sessionsV2/SessionList/SessionItem.tsx    |   5 +-
 .../SessionList/SessionItemDisplay.tsx        |  29 ++--
 .../SessionShowPage/SessionFrame.tsx          |  83 ++++++++++
 .../{ => SessionShowPage}/ShowSessionPage.tsx |  82 ++++-----
 .../features/sessionsV2/SessionStartPage.tsx  |  33 ++--
 .../sessionsV2/SessionView/SessionView.tsx    |  11 +-
 client/src/features/sessionsV2/SessionsV2.tsx |  46 +++---
 .../SessionButton/ActiveSessionButton.tsx     | 124 ++++++--------
 .../SessionStatus/SessionStatus.tsx           | 156 ++++++++++--------
 .../src/features/sessionsV2/session.utils.ts  |  14 +-
 .../src/features/sessionsV2/sessionsV2.api.ts |  91 +++++++++-
 .../features/sessionsV2/sessionsV2.types.ts   |  68 ++++++++
 .../sessionsV2/useSessionLaunchState.hook.ts  |  34 ++--
 .../utils/customHooks/UseGetSessionLogs.ts    |  30 ++++
 .../handlers/sessionStatusHandlerV2.ts        |  34 ++++
 client/src/websocket/index.ts                 |  16 ++
 server/src/api-client/index.ts                |  15 ++
 server/src/utils/index.ts                     |  52 ++++++
 server/src/websocket/handlers/sessionsV2.ts   |  99 +++++++++++
 server/src/websocket/index.ts                 |  12 ++
 28 files changed, 915 insertions(+), 366 deletions(-)
 create mode 100644 client/src/features/sessionsV2/SessionShowPage/SessionFrame.tsx
 rename client/src/features/sessionsV2/{ => SessionShowPage}/ShowSessionPage.tsx (84%)
 create mode 100644 client/src/websocket/handlers/sessionStatusHandlerV2.ts
 create mode 100644 server/src/websocket/handlers/sessionsV2.ts

diff --git a/client/src/components/Logs.tsx b/client/src/components/Logs.tsx
index 0e75078aeb..10ab35cb87 100644
--- 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/features/dashboardV2/DashboardV2Sessions.tsx b/client/src/features/dashboardV2/DashboardV2Sessions.tsx
index ec2da1f281..1393c9a378 100644
--- 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,9 +33,7 @@ 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;
 
@@ -58,27 +41,24 @@ export default function DashboardV2Sessions() {
 
   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
index 9b3bac00a9..bbaa2ec230 100644
--- 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
index 5c1febd503..9ea644eadd 100644
--- 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
index 67d276c647..b5661f2c59 100644
--- 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.Indeterminate}
+        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[] {
diff --git a/client/src/features/session/useWaitForSessionStatus.hook.ts b/client/src/features/session/useWaitForSessionStatus.hook.ts
index 2844e856af..8470e57134 100644
--- a/client/src/features/session/useWaitForSessionStatus.hook.ts
+++ b/client/src/features/session/useWaitForSessionStatus.hook.ts
@@ -18,6 +18,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import { useGetSessionsQuery } from "./sessions.api";
+import { useGetSessionsQuery as useGetSessionsQueryV2 } from "../sessionsV2/sessionsV2.api";
 import { SessionStatusState } from "./sessions.types";
 
 const DEFAULT_POLLING_INTERVAL_MS = 5_000;
@@ -68,3 +69,43 @@ export default function useWaitForSessionStatus({
 
   return { isWaiting, session };
 }
+
+export function useWaitForSessionStatusV2({
+  desiredStatus,
+  pollingInterval = DEFAULT_POLLING_INTERVAL_MS,
+  sessionName,
+  skip,
+}: UseWaitForSessionStatusArgs) {
+  const [isWaiting, setIsWaiting] = useState(false);
+
+  const result = useGetSessionsQueryV2(undefined, {
+    pollingInterval,
+    skip: skip || !isWaiting,
+  });
+  const session = useMemo(() => {
+    if (result.data == null) {
+      return undefined;
+    }
+    return Object.values(result.data).find(({ name }) => name === sessionName);
+  }, [result.data, sessionName]);
+
+  useEffect(() => {
+    if (skip) {
+      setIsWaiting(false);
+    }
+  }, [skip]);
+
+  useEffect(() => {
+    if (skip) {
+      return;
+    }
+    const desiredStatuses =
+      typeof desiredStatus === "string" ? [desiredStatus] : desiredStatus;
+    const isWaiting =
+      (session != null && !desiredStatuses.includes(session.status.state)) ||
+      (session == null && !desiredStatuses.includes("stopping"));
+    setIsWaiting(isWaiting);
+  }, [desiredStatus, session, skip]);
+
+  return { isWaiting, session };
+}
diff --git a/client/src/features/sessionsV2/LazyShowSessionPage.tsx b/client/src/features/sessionsV2/LazyShowSessionPage.tsx
index d367ce793e..7cc4b476cd 100644
--- a/client/src/features/sessionsV2/LazyShowSessionPage.tsx
+++ b/client/src/features/sessionsV2/LazyShowSessionPage.tsx
@@ -20,7 +20,7 @@ import { Suspense, lazy } from "react";
 
 import PageLoader from "../../components/PageLoader";
 
-const ShowSessionPage = lazy(() => import("./ShowSessionPage"));
+const ShowSessionPage = lazy(() => import("./SessionShowPage/ShowSessionPage"));
 
 export default function LazyShowSessionPage() {
   return (
diff --git a/client/src/features/sessionsV2/PauseOrDeleteSessionModal.tsx b/client/src/features/sessionsV2/PauseOrDeleteSessionModal.tsx
index 139266224c..b02da4d23d 100644
--- a/client/src/features/sessionsV2/PauseOrDeleteSessionModal.tsx
+++ b/client/src/features/sessionsV2/PauseOrDeleteSessionModal.tsx
@@ -19,7 +19,7 @@
 import { SerializedError } from "@reduxjs/toolkit";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
 import cx from "classnames";
-import { Duration } from "luxon";
+import { DateTime } from "luxon";
 import { useCallback, useContext, useEffect, useState } from "react";
 import {
   generatePath,
@@ -31,28 +31,25 @@ import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
 import { InfoAlert } from "../../components/Alert";
 import { Loader } from "../../components/Loader";
 import { User } from "../../model/renkuModels.types";
-import { NotebooksHelper } from "../../notebooks";
-import { NotebookAnnotations } from "../../notebooks/components/session.types";
 import { NOTIFICATION_TOPICS } from "../../notifications/Notifications.constants";
 import { NotificationsManager } from "../../notifications/notifications.types";
 import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";
 import AppContext from "../../utils/context/appContext";
 import useLegacySelector from "../../utils/customHooks/useLegacySelector.hook";
-import { toHumanDuration } from "../../utils/helpers/DurationUtils";
-import UnsavedWorkWarning from "../session/components/UnsavedWorkWarning";
+import { toHumanRelativeDuration } from "../../utils/helpers/DurationUtils";
 import {
   usePatchSessionMutation,
   useStopSessionMutation,
 } from "../session/sessions.api";
-import { Session } from "../session/sessions.types";
-import useWaitForSessionStatus from "../session/useWaitForSessionStatus.hook";
+import { useWaitForSessionStatusV2 } from "../session/useWaitForSessionStatus.hook";
 
 import styles from "../session/components/SessionModals.module.scss";
+import { SessionV2 } from "./sessionsV2.types";
 
 interface PauseOrDeleteSessionModalProps {
   action?: "pause" | "delete";
   isOpen: boolean;
-  session: Session | undefined;
+  session: SessionV2 | undefined;
   sessionName: string;
   toggleAction: () => void;
   toggleModal: () => void;
@@ -119,7 +116,7 @@ function AnonymousDeleteSessionModal({
     setIsStopping(true);
   }, [sessionName, stopSession]);
 
-  const { isWaiting } = useWaitForSessionStatus({
+  const { isWaiting } = useWaitForSessionStatusV2({
     desiredStatus: "stopping",
     sessionName,
     skip: !isStopping,
@@ -234,7 +231,7 @@ function PauseSessionModalContent({
     setIsStopping(true);
   }, [patchSession, sessionName]);
 
-  const { isWaiting } = useWaitForSessionStatus({
+  const { isWaiting } = useWaitForSessionStatusV2({
     desiredStatus: "hibernated",
     sessionName,
     skip: !isStopping,
@@ -257,22 +254,14 @@ function PauseSessionModalContent({
     }
   }, [backUrl, isSuccess, isWaiting, navigate]);
 
-  const annotations = session
-    ? (NotebooksHelper.cleanAnnotations(
-        session.annotations
-      ) as NotebookAnnotations)
-    : null;
-  const hibernatedSecondsThreshold = parseInt(
-    annotations?.hibernatedSecondsThreshold ?? "",
-    10
-  );
-  const duration = isNaN(hibernatedSecondsThreshold)
-    ? Duration.fromISO("")
-    : Duration.fromObject({ seconds: hibernatedSecondsThreshold });
-  const hibernationThreshold = duration.isValid
-    ? toHumanDuration({ duration })
-    : "a period";
-
+  //TODO ANDREA CHECK hibernation format
+  const now = DateTime.utc();
+  const hibernationThreshold = session?.status?.will_hibernate_at
+    ? toHumanRelativeDuration({
+        datetime: session?.status?.will_hibernate_at,
+        now,
+      })
+    : 0;
   return (
     <>
       <ModalBody>
@@ -281,12 +270,13 @@ function PauseSessionModalContent({
           session (new and edited files) will be preserved while the session is
           paused.
         </p>
-        {hibernatedSecondsThreshold > 0 && (
-          <InfoAlert dismissible={false} timeout={0}>
-            Please note that paused session are deleted after{" "}
-            {hibernationThreshold} of inactivity.
-          </InfoAlert>
-        )}
+        {session?.status?.will_hibernate_at &&
+          session?.status?.will_hibernate_at?.length > 0 && (
+            <InfoAlert dismissible={false} timeout={0}>
+              Please note that paused session are deleted after{" "}
+              {hibernationThreshold} of inactivity.
+            </InfoAlert>
+          )}
         <div className="my-2">
           <Button
             className={cx("float-right", "p-0")}
@@ -328,7 +318,6 @@ function PauseSessionModalContent({
 }
 
 function DeleteSessionModalContent({
-  session,
   sessionName,
   toggleAction,
   toggleModal,
@@ -351,7 +340,7 @@ function DeleteSessionModalContent({
     setIsStopping(true);
   }, [sessionName, stopSession]);
 
-  const { isWaiting } = useWaitForSessionStatus({
+  const { isWaiting } = useWaitForSessionStatusV2({
     desiredStatus: "stopping",
     sessionName,
     skip: !isStopping,
@@ -374,12 +363,6 @@ function DeleteSessionModalContent({
     }
   }, [backUrl, isSuccess, isWaiting, navigate]);
 
-  const annotations = session
-    ? (NotebooksHelper.cleanAnnotations(
-        session.annotations
-      ) as NotebookAnnotations)
-    : null;
-
   return (
     <>
       <ModalBody>
@@ -387,13 +370,13 @@ function DeleteSessionModalContent({
         <p className="fw-bold">
           Deleting a session will permanently remove any unsaved work.
         </p>
-        {session != null && annotations != null && (
+        {/* {session != null && (
           <UnsavedWorkWarning
             annotations={annotations}
             sessionName={sessionName}
             status={session.status.state}
           />
-        )}
+        )} */}
         <div className="my-2">
           <Button
             className={cx("float-right", "p-0")}
diff --git a/client/src/features/sessionsV2/SessionList/SessionItem.tsx b/client/src/features/sessionsV2/SessionList/SessionItem.tsx
index df93d2fb65..d054cabbe6 100644
--- a/client/src/features/sessionsV2/SessionList/SessionItem.tsx
+++ b/client/src/features/sessionsV2/SessionList/SessionItem.tsx
@@ -28,14 +28,13 @@ import {
   SessionStatusV2Description,
   SessionStatusV2Label,
 } from "../components/SessionStatus/SessionStatus";
-import { SessionLauncher } from "../sessionsV2.types";
-import { Session } from "../../session/sessions.types";
+import { SessionLauncher, SessionV2 } from "../sessionsV2.types";
 
 interface SessionItemProps {
   launcher?: SessionLauncher;
   name?: string;
   project: Project;
-  session?: Session;
+  session?: SessionV2;
   toggleSessionDetails: () => void;
 }
 export default function SessionItem({
diff --git a/client/src/features/sessionsV2/SessionList/SessionItemDisplay.tsx b/client/src/features/sessionsV2/SessionList/SessionItemDisplay.tsx
index 98df67b1a6..511c9feb46 100644
--- a/client/src/features/sessionsV2/SessionList/SessionItemDisplay.tsx
+++ b/client/src/features/sessionsV2/SessionList/SessionItemDisplay.tsx
@@ -17,10 +17,8 @@
  */
 import { useMemo, useState } from "react";
 
-import { NotebookAnnotations } from "../../../notebooks/components/session.types";
 import { Project } from "../../projectsV2/api/projectV2.api";
-import sessionsApi from "../../session/sessions.api";
-import { filterSessionsWithCleanedAnnotations } from "../../session/sessions.utils";
+import { useGetSessionsQuery as useGetSessionsQueryV2 } from "../sessionsV2.api.ts";
 import { SessionView } from "../SessionView/SessionView";
 import { SessionLauncher } from "../sessionsV2.types";
 import SessionItem from "./SessionItem";
@@ -35,24 +33,21 @@ export function SessionItemDisplay({
 }: SessionLauncherDisplayProps) {
   const { name } = launcher;
   const [toggleSessionView, setToggleSessionView] = useState(false);
-  const { data: sessions } = sessionsApi.endpoints.getSessions.useQueryState();
+  const { data: sessions } = useGetSessionsQueryV2();
+
   const filteredSessions = useMemo(
     () =>
       sessions != null
-        ? filterSessionsWithCleanedAnnotations<NotebookAnnotations>(
-            sessions,
-            ({ annotations }) =>
-              annotations["renkuVersion"] === "2.0" &&
-              annotations["projectId"] === project.id &&
-              annotations["launcherId"] === launcher.id
+        ? sessions.filter(
+            (session) =>
+              session.launcher_id === launcher.id &&
+              session.project_id === project.id
           )
-        : {},
+        : [],
     [launcher.id, project.id, sessions]
   );
-  const filteredSessionsLength = useMemo(
-    () => Object.keys(filteredSessions).length,
-    [filteredSessions]
-  );
+  const filteredSessionsLength = filteredSessions?.length ?? 0;
+
   const toggleSessionDetails = () => {
     setToggleSessionView((open: boolean) => !open);
   };
@@ -60,9 +55,9 @@ export function SessionItemDisplay({
   return (
     <>
       {filteredSessionsLength > 0 ? (
-        Object.entries(filteredSessions).map(([key, session]) => (
+        filteredSessions.map((session) => (
           <SessionItem
-            key={`session-item-${key}`}
+            key={`session-item-${session.name}`}
             launcher={launcher}
             name={name}
             project={project}
diff --git a/client/src/features/sessionsV2/SessionShowPage/SessionFrame.tsx b/client/src/features/sessionsV2/SessionShowPage/SessionFrame.tsx
new file mode 100644
index 0000000000..349c6819f7
--- /dev/null
+++ b/client/src/features/sessionsV2/SessionShowPage/SessionFrame.tsx
@@ -0,0 +1,83 @@
+/*!
+ * Copyright 2023 - 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 cx from "classnames";
+import { useLocation } from "react-router";
+import { appendCustomUrlPath } from "../../../utils/helpers/url";
+import { SessionV2 } from "../sessionsV2.types";
+
+interface SessionFrameProps {
+  height: string;
+  isSessionReady: boolean;
+  session: SessionV2;
+}
+
+export default function SessionFrame({
+  height,
+  isSessionReady,
+  session,
+}: SessionFrameProps) {
+  const location = useLocation<{ filePath?: string } | undefined>();
+
+  if (session.status.state !== "running") {
+    return null;
+  }
+
+  const locationFilePath = location.state?.filePath;
+  const notebookUrl = locationFilePath
+    ? appendCustomUrlPath({
+        notebookUrl: session.url,
+        customUrlPath: `/lab/tree/${locationFilePath}`,
+      })
+    : session.url;
+
+  const secureUrl = ensureHttps(notebookUrl);
+
+  const style = !isSessionReady
+    ? ({
+        position: "absolute",
+        top: 0,
+        visibility: "hidden",
+      } as const)
+    : {};
+
+  return (
+    <iframe
+      className={cx("d-block", "w-100")}
+      height={height}
+      id="session-iframe"
+      referrerPolicy="origin"
+      sandbox="allow-downloads allow-forms allow-modals allow-popups allow-same-origin allow-scripts"
+      src={secureUrl}
+      style={style}
+      title="session iframe"
+    />
+  );
+}
+
+function ensureHttps(url: string): string {
+  try {
+    const parsedUrl = new URL(url);
+    if (parsedUrl.protocol !== "https:") {
+      parsedUrl.protocol = "https:";
+    }
+    return parsedUrl.toString();
+  } catch (error) {
+    return url; // Return the original URL if it's invalid
+  }
+}
diff --git a/client/src/features/sessionsV2/ShowSessionPage.tsx b/client/src/features/sessionsV2/SessionShowPage/ShowSessionPage.tsx
similarity index 84%
rename from client/src/features/sessionsV2/ShowSessionPage.tsx
rename to client/src/features/sessionsV2/SessionShowPage/ShowSessionPage.tsx
index dc64336f0c..ccbba30edc 100644
--- a/client/src/features/sessionsV2/ShowSessionPage.tsx
+++ b/client/src/features/sessionsV2/SessionShowPage/ShowSessionPage.tsx
@@ -43,34 +43,34 @@ import {
   UncontrolledTooltip,
 } from "reactstrap";
 
-import RenkuFrogIcon from "../../components/icons/RenkuIcon";
-import { User } from "../../model/renkuModels.types";
-import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";
-import useLegacySelector from "../../utils/customHooks/useLegacySelector.hook";
-import useWindowSize from "../../utils/helpers/UseWindowsSize";
-import { resetFavicon, setFavicon } from "../display";
-import SessionHibernated from "../session/components/SessionHibernated";
-import SessionJupyter from "../session/components/SessionJupyter";
-import SessionUnavailable from "../session/components/SessionUnavailable";
-import StartSessionProgressBar from "../session/components/StartSessionProgressBar";
-import { useGetSessionsQuery } from "../session/sessions.api";
-import PauseOrDeleteSessionModal from "./PauseOrDeleteSessionModal";
-import { getSessionFavicon } from "./session.utils";
+import RenkuFrogIcon from "../../../components/icons/RenkuIcon";
+import { User } from "../../../model/renkuModels.types";
+import { ABSOLUTE_ROUTES } from "../../../routing/routes.constants";
+import useLegacySelector from "../../../utils/customHooks/useLegacySelector.hook";
+import useWindowSize from "../../../utils/helpers/UseWindowsSize";
+import { resetFavicon, setFavicon } from "../../display";
+import SessionHibernated from "../../session/components/SessionHibernated";
+import SessionUnavailable from "../../session/components/SessionUnavailable";
+import { StartSessionProgressBarV2 } from "../../session/components/StartSessionProgressBar";
+import PauseOrDeleteSessionModal from "../PauseOrDeleteSessionModal";
+import { getSessionFavicon } from "../session.utils";
 
 import { skipToken } from "@reduxjs/toolkit/query";
-import { Loader } from "../../components/Loader";
-import { EnvironmentLogs } from "../../components/Logs";
-import { TimeCaption } from "../../components/TimeCaption";
-import { CommandCopy } from "../../components/commandCopy/CommandCopy";
-import { NotebooksHelper } from "../../notebooks";
-import { NotebookAnnotations } from "../../notebooks/components/session.types";
-import useAppDispatch from "../../utils/customHooks/useAppDispatch.hook";
-import { displaySlice } from "../display";
-import { useGetProjectsByNamespaceAndSlugQuery } from "../projectsV2/api/projectV2.enhanced-api";
-import { SessionRowResourceRequests } from "../session/components/SessionsList";
-import styles from "../session/components/ShowSession.module.scss";
-import { Session } from "../session/sessions.types";
-import { useGetProjectSessionLaunchersQuery } from "./sessionsV2.api";
+import { Loader } from "../../../components/Loader";
+import { TimeCaption } from "../../../components/TimeCaption";
+import { CommandCopy } from "../../../components/commandCopy/CommandCopy";
+import useAppDispatch from "../../../utils/customHooks/useAppDispatch.hook";
+import { displaySlice } from "../../display";
+import { useGetProjectsByNamespaceAndSlugQuery } from "../../projectsV2/api/projectV2.enhanced-api";
+import { SessionRowResourceRequests } from "../../session/components/SessionsList";
+import styles from "../../session/components/ShowSession.module.scss"; // TODO create own file"../session/components/ShowSession.module.scss";
+import {
+  useGetProjectSessionLaunchersQuery,
+  useGetSessionsQuery,
+} from "../sessionsV2.api";
+import { EnvironmentLogsV2 } from "../../../components/Logs";
+import SessionFrame from "./SessionFrame";
+import { SessionV2 } from "../sessionsV2.types";
 
 export default function ShowSessionPage() {
   const dispatch = useAppDispatch();
@@ -93,7 +93,7 @@ export default function ShowSessionPage() {
     if (sessions == null) {
       return undefined;
     }
-    return Object.values(sessions).find(({ name }) => name === sessionName);
+    return sessions.find(({ name }) => name === sessionName);
   }, [sessionName, sessions]);
 
   useEffect(() => {
@@ -171,35 +171,30 @@ export default function ShowSessionPage() {
       toggleModal={togglePauseOrDeleteSession}
     />
   );
-  const logs = thisSession && (
-    <EnvironmentLogs
-      name={sessionName}
-      annotations={thisSession?.annotations}
-    />
-  );
+  const logs = thisSession && <EnvironmentLogsV2 name={sessionName} />;
 
   const content =
     !isLoading && thisSession == null ? (
       <SessionUnavailable />
     ) : thisSession?.status.state === "hibernated" ? (
-      <SessionHibernated session={thisSession} />
+      <SessionHibernated sessionName={thisSession.name} />
     ) : thisSession != null ? (
       <>
         {!isTheSessionReady && (
-          <StartSessionProgressBar
+          <StartSessionProgressBarV2
             includeStepInTitle={false}
             session={thisSession}
             toggleLogs={toggleModalLogs}
           />
         )}
-        <SessionJupyter
+        <SessionFrame
           height={`${iframeHeight}px`}
           isSessionReady={isTheSessionReady}
           session={thisSession}
         />
       </>
     ) : (
-      <StartSessionProgressBar
+      <StartSessionProgressBarV2
         includeStepInTitle={false}
         toggleLogs={toggleModalLogs}
       />
@@ -386,7 +381,7 @@ function SessionDetails({
   namespace,
   slug,
 }: {
-  session?: Session;
+  session?: SessionV2;
   namespace?: string;
   slug?: string;
 }) {
@@ -395,12 +390,9 @@ function SessionDetails({
     if (session == null) {
       return { projectId: undefined, launcherId: undefined };
     }
-    const annotations = NotebooksHelper.cleanAnnotations(
-      session.annotations
-    ) as NotebookAnnotations;
     return {
-      projectId: annotations.projectId,
-      launcherId: annotations.launcherId,
+      projectId: session.project_id,
+      launcherId: session.launcher_id,
     };
   }, [session]);
 
@@ -484,9 +476,7 @@ function SessionDetails({
               <Cloud className={cx("bi", "me-2")} />
               Session resources requested:
             </div>
-            <SessionRowResourceRequests
-              resourceRequests={session.resources.requests}
-            />
+            <SessionRowResourceRequests resourceRequests={session.resources} />
           </div>
           <div
             className={cx(
diff --git a/client/src/features/sessionsV2/SessionStartPage.tsx b/client/src/features/sessionsV2/SessionStartPage.tsx
index 736bbd6253..857ecef468 100644
--- a/client/src/features/sessionsV2/SessionStartPage.tsx
+++ b/client/src/features/sessionsV2/SessionStartPage.tsx
@@ -38,14 +38,15 @@ import useAppDispatch from "../../utils/customHooks/useAppDispatch.hook";
 import useAppSelector from "../../utils/customHooks/useAppSelector.hook";
 
 import { resetFavicon, setFavicon } from "../display";
-import { storageDefinitionFromConfig } from "../project/utils/projectCloudStorage.utils";
 import type { Project } from "../projectsV2/api/projectV2.api";
 import { useGetProjectsByNamespaceAndSlugQuery } from "../projectsV2/api/projectV2.enhanced-api";
-import { useStartRenku2SessionMutation } from "../session/sessions.api";
 import type { SessionLaunchModalCloudStorageConfiguration } from "./SessionStartCloudStorageSecretsModal";
 import SessionStartCloudStorageSecretsModal from "./SessionStartCloudStorageSecretsModal";
 import { SelectResourceClassModal } from "./components/SessionModals/SelectResourceClass";
-import { useGetProjectSessionLaunchersQuery } from "./sessionsV2.api";
+import {
+  useGetProjectSessionLaunchersQuery,
+  useLaunchSessionMutation,
+} from "./sessionsV2.api";
 import { SessionLauncher } from "./sessionsV2.types";
 import startSessionOptionsV2Slice from "./startSessionOptionsV2.slice";
 import {
@@ -70,32 +71,24 @@ function SessionStarting({
   const dispatch = useAppDispatch();
 
   const [
-    startSession,
-    { data: session, error, isLoading: isLoadingStartSession },
-  ] = useStartRenku2SessionMutation();
+    startSessionV2,
+    { data: session, error: error, isLoading: isLoadingStartSession },
+  ] = useLaunchSessionMutation();
 
   // Request session
   useEffect(() => {
-    startSession({
-      projectId: project.id,
-      launcherId: launcher.id,
-      repositories: startSessionOptionsV2.repositories,
-      cloudStorage: startSessionOptionsV2.cloudStorage
-        .filter((cs) => cs.active)
-        .map((cs) => storageDefinitionFromConfig(cs)),
-      defaultUrl: startSessionOptionsV2.defaultUrl,
-      environmentVariables: {},
-      image: containerImage,
-      lfsAutoFetch: false,
-      sessionClass: startSessionOptionsV2.sessionClass,
-      storage: startSessionOptionsV2.storage,
+    startSessionV2({
+      launcher_id: launcher.id,
+      disk_storage: startSessionOptionsV2.storage,
+      resource_class_id: startSessionOptionsV2.sessionClass,
+      cloudstorage: undefined, //TODO ANDREA pending to do in ds
     });
     dispatch(setFavicon("waiting"));
   }, [
     containerImage,
     launcher.id,
     project.id,
-    startSession,
+    startSessionV2,
     startSessionOptionsV2,
     dispatch,
   ]);
diff --git a/client/src/features/sessionsV2/SessionView/SessionView.tsx b/client/src/features/sessionsV2/SessionView/SessionView.tsx
index 2109c391e6..17e11a1f9e 100644
--- a/client/src/features/sessionsV2/SessionView/SessionView.tsx
+++ b/client/src/features/sessionsV2/SessionView/SessionView.tsx
@@ -46,7 +46,6 @@ import { RepositoryItem } from "../../ProjectPageV2/ProjectPageContent/CodeRepos
 import { Project } from "../../projectsV2/api/projectV2.api";
 import { useGetStoragesV2Query } from "../../projectsV2/api/storagesV2.api";
 import { SessionRowResourceRequests } from "../../session/components/SessionsList";
-import { Session, Sessions } from "../../session/sessions.types";
 import { SessionV2Actions, getShowSessionUrlByProject } from "../SessionsV2";
 import StartSessionButton from "../StartSessionButton";
 import ActiveSessionButton from "../components/SessionButton/ActiveSessionButton";
@@ -57,7 +56,7 @@ import {
   SessionStatusV2Title,
 } from "../components/SessionStatus/SessionStatus";
 import { DEFAULT_URL } from "../session.utils.ts";
-import { SessionLauncher } from "../sessionsV2.types";
+import { SessionLauncher, SessionV2 } from "../sessionsV2.types";
 import MembershipGuard from "../../ProjectPageV2/utils/MembershipGuard";
 import {
   useGetResourceClassByIdQuery,
@@ -108,7 +107,7 @@ function SessionCard({
   session,
   project,
 }: {
-  session: Session;
+  session: SessionV2;
   project: Project;
 }) {
   return (
@@ -123,9 +122,7 @@ function SessionCard({
         />
       }
       contentResources={
-        <SessionRowResourceRequests
-          resourceRequests={session.resources.requests}
-        />
+        <SessionRowResourceRequests resourceRequests={session.resources} />
       }
     />
   );
@@ -190,7 +187,7 @@ function getSessionColor(state: string) {
 
 interface SessionViewProps {
   launcher?: SessionLauncher;
-  sessions?: Sessions;
+  sessions?: SessionV2[];
   toggleSessionView: boolean;
   setToggleSessionView: () => void;
   project: Project;
diff --git a/client/src/features/sessionsV2/SessionsV2.tsx b/client/src/features/sessionsV2/SessionsV2.tsx
index 14a55bcafa..d4e608a9a1 100644
--- a/client/src/features/sessionsV2/SessionsV2.tsx
+++ b/client/src/features/sessionsV2/SessionsV2.tsx
@@ -32,21 +32,20 @@ import {
 
 import { Loader } from "../../components/Loader";
 import { RtkErrorAlert } from "../../components/errors/RtkErrorAlert";
-import { NotebookAnnotations } from "../../notebooks/components/session.types";
 import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";
 import AccessGuard from "../ProjectPageV2/utils/AccessGuard";
 import useProjectAccess from "../ProjectPageV2/utils/useProjectAccess.hook";
 import type { Project } from "../projectsV2/api/projectV2.api";
-import { useGetSessionsQuery } from "../session/sessions.api";
-import { Session } from "../session/sessions.types";
-import { filterSessionsWithCleanedAnnotations } from "../session/sessions.utils";
 import AddSessionLauncherButton from "./AddSessionLauncherButton";
 import DeleteSessionV2Modal from "./DeleteSessionLauncherModal";
 import { SessionItemDisplay } from "./SessionList/SessionItemDisplay";
 import { SessionView } from "./SessionView/SessionView";
 import UpdateSessionLauncherModal from "./components/SessionModals/UpdateSessionLauncherModal";
-import { useGetProjectSessionLaunchersQuery } from "./sessionsV2.api";
-import { SessionLauncher } from "./sessionsV2.types";
+import {
+  useGetProjectSessionLaunchersQuery,
+  useGetSessionsQuery as useGetSessionsQueryV2,
+} from "./sessionsV2.api";
+import { SessionLauncher, SessionV2 } from "./sessionsV2.types";
 import SessionItem from "./SessionList/SessionItem";
 import { ButtonWithMenuV2 } from "../../components/buttons/Button";
 
@@ -81,7 +80,7 @@ export default function SessionsV2({ project }: SessionsV2Props) {
     data: sessions,
     error: sessionsError,
     isLoading: isLoadingSessions,
-  } = useGetSessionsQuery();
+  } = useGetSessionsQueryV2();
 
   const isLoading = isLoadingLaunchers || isLoadingSessions;
   const error = launchersError || sessionsError;
@@ -89,15 +88,13 @@ export default function SessionsV2({ project }: SessionsV2Props) {
   const orphanSessions = useMemo(
     () =>
       launchers != null && sessions != null
-        ? filterSessionsWithCleanedAnnotations<NotebookAnnotations>(
-            sessions,
-            ({ annotations }) =>
-              annotations["renkuVersion"] === "2.0" &&
-              annotations["projectId"] === projectId &&
-              launchers.every(({ id }) => annotations["launcherId"] !== id)
+        ? sessions.filter(
+            (session) =>
+              launchers.every(({ id }) => session.launcher_id !== id) &&
+              session.project_id === projectId
           )
-        : {},
-    [launchers, projectId, sessions]
+        : [],
+    [launchers, sessions, projectId]
   );
 
   const loading = isLoading && (
@@ -110,8 +107,7 @@ export default function SessionsV2({ project }: SessionsV2Props) {
   const errorAlert = error && <RtkErrorAlert error={error} />;
 
   const totalSessions =
-    (launchers ? launchers?.length : 0) +
-    Object.entries(orphanSessions)?.length;
+    (launchers ? launchers?.length : 0) + orphanSessions.length;
   return (
     <Card>
       <CardHeader
@@ -144,15 +140,14 @@ export default function SessionsV2({ project }: SessionsV2Props) {
         />
       </CardHeader>
       <CardBody>
-        {loading}
         {errorAlert}
         <p>
           {totalSessions > 0
             ? "Session launchers are available to everyone who can see the project. Running sessions are only accessible to you."
             : "Define interactive environments in which to do your work and share it  with others."}
         </p>
-
-        {totalSessions > 0 && (
+        {loading}
+        {totalSessions > 0 && !isLoading && (
           <ListGroup flush>
             {launchers?.map((launcher) => (
               <SessionItemDisplay
@@ -161,9 +156,9 @@ export default function SessionsV2({ project }: SessionsV2Props) {
                 project={project}
               />
             ))}
-            {Object.entries(orphanSessions).map(([key, session]) => (
+            {orphanSessions?.map((session) => (
               <OrphanSession
-                key={`orphan-${key}`}
+                key={`orphan-${session.name}`}
                 session={session}
                 project={project}
               />
@@ -235,15 +230,12 @@ export function SessionV2Actions({
 }
 
 interface OrphanSessionProps {
-  session: Session;
+  session: SessionV2;
   project: Project;
 }
 
 function OrphanSession({ session, project }: OrphanSessionProps) {
   const [toggleSessionView, setToggleSessionView] = useState(false);
-  const sessions = {
-    [session.name]: session,
-  };
   const openSessionDetails = () => {
     setToggleSessionView((open) => !open);
   };
@@ -256,7 +248,7 @@ function OrphanSession({ session, project }: OrphanSessionProps) {
         toggleSessionDetails={openSessionDetails}
       />
       <SessionView
-        sessions={sessions}
+        sessions={[session]}
         project={project}
         setToggleSessionView={openSessionDetails}
         toggleSessionView={toggleSessionView}
diff --git a/client/src/features/sessionsV2/components/SessionButton/ActiveSessionButton.tsx b/client/src/features/sessionsV2/components/SessionButton/ActiveSessionButton.tsx
index 2024e15610..967b080682 100644
--- a/client/src/features/sessionsV2/components/SessionButton/ActiveSessionButton.tsx
+++ b/client/src/features/sessionsV2/components/SessionButton/ActiveSessionButton.tsx
@@ -19,7 +19,7 @@
 import { SerializedError } from "@reduxjs/toolkit";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
 import cx from "classnames";
-import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import {
   BoxArrowUpRight,
   CheckLg,
@@ -46,11 +46,9 @@ import {
 
 import { WarnAlert } from "../../../../components/Alert";
 import { Loader } from "../../../../components/Loader";
-import { EnvironmentLogs } from "../../../../components/Logs";
+import { EnvironmentLogsV2 } from "../../../../components/Logs";
 import { ButtonWithMenuV2 } from "../../../../components/buttons/Button";
 import { User } from "../../../../model/renkuModels.types";
-import { NotebooksHelper } from "../../../../notebooks";
-import { NotebookAnnotations } from "../../../../notebooks/components/session.types";
 import { NOTIFICATION_TOPICS } from "../../../../notifications/Notifications.constants";
 import { NotificationsManager } from "../../../../notifications/notifications.types";
 import AppContext from "../../../../utils/context/appContext";
@@ -61,22 +59,26 @@ import { useGetResourcePoolsQuery } from "../../../dataServices/computeResources
 import { ResourceClass } from "../../../dataServices/dataServices.types";
 import { toggleSessionLogsModal } from "../../../display/displaySlice";
 import { SessionRowResourceRequests } from "../../../session/components/SessionsList";
-import UnsavedWorkWarning from "../../../session/components/UnsavedWorkWarning";
 import { SessionClassSelectorV2 } from "../../../session/components/options/SessionClassOption";
+import { SessionStatusState } from "../../../session/sessions.types";
+import { useWaitForSessionStatusV2 } from "../../../session/useWaitForSessionStatus.hook";
 import {
-  usePatchSessionMutation,
-  useStopSessionMutation,
-} from "../../../session/sessions.api";
-import { Session, SessionStatusState } from "../../../session/sessions.types";
-import useWaitForSessionStatus from "../../../session/useWaitForSessionStatus.hook";
+  SessionResources,
+  SessionStatus,
+  SessionV2,
+} from "../../sessionsV2.types.ts";
 import {
   ErrorOrNotAvailableResourcePools,
   FetchingResourcePools,
 } from "../SessionModals/ResourceClassWarning";
+import {
+  usePatchSessionMutation,
+  useStopSessionMutation,
+} from "../../sessionsV2.api";
 
 interface ActiveSessionButtonProps {
   className?: string;
-  session: Session;
+  session: SessionV2;
   showSessionUrl: string;
 }
 
@@ -98,14 +100,6 @@ export default function ActiveSessionButton({
     dispatch(toggleSessionLogsModal({ targetServer: session.name }));
   }, [dispatch, session.name]);
 
-  const annotations = NotebooksHelper.cleanAnnotations(
-    session.annotations
-  ) as NotebookAnnotations;
-  const cleanAnnotations = useMemo(
-    () => NotebooksHelper.cleanAnnotations(annotations) as NotebookAnnotations,
-    [annotations]
-  );
-
   const displayModal = useAppSelector(
     ({ display }) => display.modals.sessionLogs
   );
@@ -117,10 +111,10 @@ export default function ActiveSessionButton({
     { isSuccess: isSuccessResumeSession, error: errorResumeSession },
   ] = usePatchSessionMutation();
   const onResumeSession = useCallback(() => {
-    resumeSession({ sessionName: session.name, state: "running" });
+    resumeSession({ session_id: session.name, state: "running" });
     setIsResuming(true);
   }, [resumeSession, session.name]);
-  const { isWaiting: isWaitingForResumedSession } = useWaitForSessionStatus({
+  const { isWaiting: isWaitingForResumedSession } = useWaitForSessionStatusV2({
     desiredStatus: ["starting", "running"],
     sessionName: session.name,
     skip: !isResuming,
@@ -153,14 +147,15 @@ export default function ActiveSessionButton({
     { isSuccess: isSuccessHibernateSession, error: errorHibernateSession },
   ] = usePatchSessionMutation();
   const onHibernateSession = useCallback(() => {
-    hibernateSession({ sessionName: session.name, state: "hibernated" });
+    hibernateSession({ session_id: session.name, state: "hibernated" });
     setIsHibernating(true);
   }, [hibernateSession, session.name]);
-  const { isWaiting: isWaitingForHibernatedSession } = useWaitForSessionStatus({
-    desiredStatus: ["hibernated"],
-    sessionName: session.name,
-    skip: !isHibernating,
-  });
+  const { isWaiting: isWaitingForHibernatedSession } =
+    useWaitForSessionStatusV2({
+      desiredStatus: ["hibernated"],
+      sessionName: session.name,
+      skip: !isHibernating,
+    });
   useEffect(() => {
     if (isSuccessHibernateSession && !isWaitingForHibernatedSession) {
       setIsHibernating(false);
@@ -182,7 +177,7 @@ export default function ActiveSessionButton({
   // Optimistically show a session as "stopping" when triggered from the UI
   const [isStopping, setIsStopping] = useState<boolean>(false);
   const onStopSession = useCallback(() => {
-    stopSession({ serverName: session.name });
+    stopSession({ session_id: session.name });
     setIsStopping(true);
   }, [session.name, stopSession]);
   useEffect(() => {
@@ -209,8 +204,8 @@ export default function ActiveSessionButton({
     (sessionClass: number, resumeSession: boolean) => {
       const status = session.status.state;
       const request = modifySession({
-        sessionName: session.name,
-        sessionClass,
+        session_id: session.name,
+        resource_class_id: sessionClass,
       });
       if (resumeSession && status === "hibernated") {
         request.then(() => {
@@ -395,7 +390,6 @@ export default function ActiveSessionButton({
       {logsAction}
 
       <ConfirmDeleteModal
-        annotations={annotations}
         isOpen={showModalStopSession}
         isStopping={isStopping}
         onStopSession={onStopSession}
@@ -404,23 +398,19 @@ export default function ActiveSessionButton({
         toggleModal={toggleStopSession}
       />
       <ModifySessionModal
-        annotations={annotations}
         isOpen={showModalModifySession}
         onModifySession={onModifySession}
         resources={session.resources}
-        status={status}
+        status={session.status}
         toggleModal={toggleModifySession}
+        resource_class_id={session.resource_class_id}
       />
-      <EnvironmentLogs
-        name={displayModal.targetServer}
-        annotations={cleanAnnotations}
-      />
+      <EnvironmentLogsV2 name={displayModal.targetServer} />
     </ButtonWithMenuV2>
   );
 }
 
 interface ConfirmDeleteModalProps {
-  annotations: NotebookAnnotations;
   isOpen: boolean;
   isStopping: boolean;
   onStopSession: () => void;
@@ -430,12 +420,9 @@ interface ConfirmDeleteModalProps {
 }
 
 function ConfirmDeleteModal({
-  annotations,
   isOpen,
   isStopping,
   onStopSession,
-  sessionName,
-  status,
   toggleModal,
 }: ConfirmDeleteModalProps) {
   const onClick = useCallback(() => {
@@ -457,11 +444,11 @@ function ConfirmDeleteModal({
             <p className="fw-bold">
               Deleting a session will permanently remove any unsaved work.
             </p>
-            <UnsavedWorkWarning
-              annotations={annotations}
-              sessionName={sessionName}
-              status={status}
-            />
+            {/*<UnsavedWorkWarning*/}
+            {/*  annotations={annotations}*/}
+            {/*  sessionName={sessionName}*/}
+            {/*  status={status}*/}
+            {/*/>*/}
           </Col>
         </Row>
       </ModalBody>
@@ -489,21 +476,21 @@ function ConfirmDeleteModal({
 }
 
 interface ModifySessionModalProps {
-  annotations: NotebookAnnotations;
   isOpen: boolean;
   onModifySession: (sessionClass: number, resumeSession: boolean) => void;
-  resources: Session["resources"];
-  status: SessionStatusState;
+  resources: SessionResources;
+  status: SessionStatus;
   toggleModal: () => void;
+  resource_class_id: string;
 }
 
 function ModifySessionModal({
-  annotations,
   isOpen,
   onModifySession,
   resources,
   status,
   toggleModal,
+  resource_class_id,
 }: ModifySessionModalProps) {
   return (
     <Modal
@@ -515,35 +502,32 @@ function ModifySessionModal({
     >
       <ModalHeader toggle={toggleModal}>Modify Session Resources</ModalHeader>
       <ModifySessionModalContent
-        annotations={annotations}
         onModifySession={onModifySession}
         resources={resources}
         status={status}
         toggleModal={toggleModal}
+        resource_class_id={resource_class_id}
       />
     </Modal>
   );
 }
 
 interface ModifySessionModalContentProps {
-  annotations: NotebookAnnotations;
   onModifySession: (sessionClass: number, resumeSession: boolean) => void;
-  resources: Session["resources"];
-  status: SessionStatusState;
+  resources: SessionResources;
+  status: SessionStatus;
   toggleModal: () => void;
+  resource_class_id: string;
 }
 
 function ModifySessionModalContent({
-  annotations,
   onModifySession,
   resources,
   status,
   toggleModal,
+  resource_class_id,
 }: ModifySessionModalContentProps) {
-  const currentSessionClassId = useMemo(() => {
-    const raw = parseInt(annotations?.resourceClassId ?? "", 10);
-    return isNaN(raw) ? undefined : raw;
-  }, [annotations?.resourceClassId]);
+  const { state } = status;
 
   const {
     data: resourcePools,
@@ -577,12 +561,12 @@ function ModifySessionModalContent({
   useEffect(() => {
     const currentSessionClass = resourcePools
       ?.flatMap((pool) => pool.classes)
-      .find((c) => c.id === currentSessionClassId);
+      .find((c) => `${c.id}` == resource_class_id);
     setCurrentSessionClass(currentSessionClass);
-  }, [currentSessionClassId, resourcePools]);
+  }, [resource_class_id, resourcePools]);
 
   const message =
-    status === "failed" ? (
+    state === "failed" ? (
       <>
         <WarnAlert dismissible={false}>
           This session cannot be started or resumed at the moment.
@@ -617,9 +601,7 @@ function ModifySessionModalContent({
             <p>
               <span className="fw-bold me-3">Current resources:</span>
               <span>
-                <SessionRowResourceRequests
-                  resourceRequests={resources.requests}
-                />
+                <SessionRowResourceRequests resourceRequests={resources} />
               </span>
             </p>
             <div className="field-group">{selector}</div>
@@ -627,7 +609,7 @@ function ModifySessionModalContent({
         </Row>
       </ModalBody>
       <ModalFooter>
-        {status === "hibernated" && (
+        {state === "hibernated" && (
           <Button
             disabled={
               isLoading ||
@@ -635,8 +617,8 @@ function ModifySessionModalContent({
               resourcePools.length == 0 ||
               isError ||
               currentSessionClass == null ||
-              (currentSessionClassId != null &&
-                currentSessionClassId === currentSessionClass?.id)
+              (resource_class_id != null &&
+                resource_class_id === `${currentSessionClass?.id}`)
             }
             onClick={onClick({ resumeSession: true })}
             type="submit"
@@ -646,15 +628,15 @@ function ModifySessionModalContent({
           </Button>
         )}
         <Button
-          className={cx(status === "hibernated" && "btn-outline-rk-green")}
+          className={cx(state === "hibernated" && "btn-outline-rk-green")}
           disabled={
             isLoading ||
             !resourcePools ||
             resourcePools.length == 0 ||
             isError ||
             currentSessionClass == null ||
-            (currentSessionClassId != null &&
-              currentSessionClassId === currentSessionClass?.id)
+            (resource_class_id != null &&
+              resource_class_id === `${currentSessionClass?.id}`)
           }
           onClick={onClick({ resumeSession: false })}
           type="submit"
diff --git a/client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx b/client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx
index 9d0a9cbd74..e0002bc680 100644
--- a/client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx
+++ b/client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx
@@ -15,21 +15,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import cx from "classnames";
-import { Duration } from "luxon";
-import { ReactNode, useMemo } from "react";
+import { ReactNode } from "react";
 import { CircleFill, Clock } from "react-bootstrap-icons";
-import { Badge } from "reactstrap";
+import {
+  Badge,
+  PopoverBody,
+  PopoverHeader,
+  UncontrolledPopover,
+} from "reactstrap";
 
 import { Loader } from "../../../../components/Loader";
 import { TimeCaption } from "../../../../components/TimeCaption";
-import { NotebooksHelper } from "../../../../notebooks";
-import { SessionListRowStatusExtraDetails } from "../../../../notebooks/components/SessionListStatus";
-import { NotebookAnnotations } from "../../../../notebooks/components/session.types";
-import { ensureDateTime } from "../../../../utils/helpers/DateTimeUtils";
+import { PrettySessionErrorMessage } from "../../../session/components/status/SessionStatusBadge.tsx";
 import { MissingHibernationInfo } from "../../../session/components/status/SessionStatusText";
-import { Session, SessionStatusState } from "../../../session/sessions.types";
-import { SessionLauncher } from "../../sessionsV2.types";
+import {
+  SessionLauncher,
+  SessionStatus,
+  SessionV2,
+} from "../../sessionsV2.types";
 
 export function SessionBadge({
   children,
@@ -45,27 +51,21 @@ export function SessionBadge({
   );
 }
 interface ActiveSessionV2Props {
-  session: Session;
+  session: SessionV2;
 }
 interface ActiveSessionDescV2Props extends ActiveSessionV2Props {
   showInfoDetails?: boolean;
 }
 interface ActiveSessionTitleV2Props {
-  session: Session;
+  session: SessionV2;
   launcher?: SessionLauncher;
 }
 export function SessionStatusV2Label({ session }: ActiveSessionV2Props) {
-  const { annotations, status } = session;
-
-  const cleanAnnotations = useMemo(
-    () => NotebooksHelper.cleanAnnotations(annotations) as NotebookAnnotations,
-    [annotations]
-  );
+  const { status, image } = session;
   const state = status.state;
-  const defaultImage = cleanAnnotations.default_image_used;
 
   const badge =
-    state === "running" && defaultImage ? (
+    state === "running" && !image ? (
       <SessionBadge className={cx("border-warning", "bg-warning-subtle")}>
         <CircleFill className={cx("bi", "me-1", "text-warning-emphasis")} />
         <span className="text-warning-emphasis">Running Session</span>
@@ -123,15 +123,7 @@ export function SessionStatusV2Description({
   session,
   showInfoDetails = true,
 }: ActiveSessionDescV2Props) {
-  const { annotations, started, status } = session;
-
-  const cleanAnnotations = useMemo(
-    () => NotebooksHelper.cleanAnnotations(annotations) as NotebookAnnotations,
-    [annotations]
-  );
-
-  const details = { message: session.status.message };
-
+  const { started, status } = session;
   return (
     <div
       className={cx(
@@ -142,21 +134,54 @@ export function SessionStatusV2Description({
         "align-items-center"
       )}
     >
-      <SessionStatusV2Text
-        annotations={cleanAnnotations}
-        startTimestamp={started}
-        status={status.state}
-      />
+      <SessionStatusV2Text startTimestamp={started} status={status} />
       {showInfoDetails && (
-        <SessionListRowStatusExtraDetails
-          details={details}
-          status={status.state}
+        <SessionListRowStatusExtraDetailsV2
+          status={status}
           uid={session.name}
         />
       )}
     </div>
   );
 }
+
+interface StatusExtraDetailsV2Props {
+  status: SessionStatus;
+  uid: string;
+}
+export function SessionListRowStatusExtraDetailsV2({
+  status,
+  uid,
+}: StatusExtraDetailsV2Props) {
+  if (!status.message) return null;
+
+  const popover = (
+    <UncontrolledPopover target={uid} trigger="legacy" placement="bottom">
+      <PopoverHeader>Kubernetes pod status</PopoverHeader>
+      <PopoverBody>
+        <PrettySessionErrorMessage message={status.message} />
+      </PopoverBody>
+    </UncontrolledPopover>
+  );
+
+  if (status.state == "failed")
+    return (
+      <>
+        {" "}
+        <span id={uid} className="text-muted cursor-pointer">
+          (Click here for details.)
+        </span>
+        {popover}
+      </>
+    );
+  return (
+    <>
+      {" "}
+      <FontAwesomeIcon id={uid} icon={faInfoCircle} />
+      {popover}
+    </>
+  );
+}
 export function SessionStatusV2Title({
   session,
   launcher,
@@ -182,66 +207,65 @@ export function SessionStatusV2Title({
   return text ? <p className={cx("fst-italic", "mb-2")}>{text}</p> : null;
 }
 interface SessionStatusV2TextProps {
-  annotations: NotebookAnnotations;
   startTimestamp: string;
-  status: SessionStatusState;
+  status: SessionStatus;
 }
 function SessionStatusV2Text({
-  annotations,
   startTimestamp,
   status,
 }: SessionStatusV2TextProps) {
+  const { state, will_hibernate_at, will_delete_at } = status;
   const startTimeText = (
     <TimeCaption datetime={startTimestamp} enableTooltip noCaption />
   );
   const hibernationTimestamp =
-    status === "hibernated" ? annotations["hibernationDate"] ?? "" : null;
-  const hibernationDateTime = hibernationTimestamp
-    ? ensureDateTime(hibernationTimestamp)
-    : null;
+    state === "hibernated" ? will_hibernate_at ?? "" : null;
+  // const hibernationDateTime = hibernationTimestamp
+  //   ? ensureDateTime(hibernationTimestamp)
+  //   : null;
 
-  const hibernatedSecondsThreshold =
-    status === "hibernated"
-      ? parseInt(annotations?.hibernatedSecondsThreshold ?? "", 10)
-      : null;
-  const hibernationThresholdDuration =
-    !hibernatedSecondsThreshold || isNaN(hibernatedSecondsThreshold)
-      ? Duration.fromISO("")
-      : Duration.fromObject({ seconds: hibernatedSecondsThreshold });
-  const hibernationCullTimestamp =
-    hibernationDateTime &&
-    hibernationThresholdDuration &&
-    hibernationThresholdDuration.isValid &&
-    hibernationThresholdDuration.valueOf() > 0
-      ? hibernationDateTime.plus(hibernationThresholdDuration)
-      : null;
+  // const hibernatedSecondsThreshold =
+  //   state === "hibernated"
+  //     ? parseInt(will_hibernate_at ?? "", 10)
+  //     : null;
+  // const hibernationThresholdDuration =
+  //   !hibernatedSecondsThreshold || isNaN(hibernatedSecondsThreshold)
+  //     ? Duration.fromISO("")
+  //     : Duration.fromObject({ seconds: hibernatedSecondsThreshold });
+  // const hibernationCullTimestamp =
+  //   hibernationDateTime &&
+  //   hibernationThresholdDuration &&
+  //   hibernationThresholdDuration.isValid &&
+  //   hibernationThresholdDuration.valueOf() > 0
+  //     ? hibernationDateTime.plus(hibernationThresholdDuration)
+  //     : null;
 
-  return status === "running" ? (
+  return state === "running" ? (
     <div className={cx("d-flex", "align-items-center", "gap-2")}>
       <Clock size="16" className="flex-shrink-0" />
       <span>Launched {startTimeText}</span>
     </div>
-  ) : status === "starting" ? (
+  ) : state === "starting" ? (
     <div className={cx("d-flex", "align-items-center", "gap-2")}>
       <Clock size="16" className="flex-shrink-0" />
       <span>Created {startTimeText}</span>
     </div>
-  ) : status === "stopping" ? (
+  ) : state === "stopping" ? (
     <>Deleting Session...</>
-  ) : status === "hibernated" && hibernationCullTimestamp ? (
+  ) : state === "hibernated" && will_delete_at ? (
     <div className={cx("d-flex", "align-items-center", "gap-2")}>
       <Clock size="16" className="flex-shrink-0" />
       <span>
         Session will be deleted in{" "}
         <TimeCaption
-          datetime={hibernationCullTimestamp}
+          datetime={will_delete_at}
           enableTooltip
           noCaption
           suffix=" "
         />
       </span>
     </div>
-  ) : status === "hibernated" && hibernationTimestamp ? (
+  ) : state === "hibernated" && hibernationTimestamp ? (
     <div className={cx("d-flex", "align-items-center", "gap-2")}>
       <Clock size="16" className="flex-shrink-0" />
       <span>
@@ -249,7 +273,7 @@ function SessionStatusV2Text({
         <TimeCaption datetime={hibernationTimestamp} enableTooltip noCaption />
       </span>
     </div>
-  ) : status === "hibernated" ? (
+  ) : state === "hibernated" ? (
     <div className={cx("d-flex", "align-items-center", "gap-2")}>
       <Clock size="16" className="flex-shrink-0" />
       <span>
@@ -257,7 +281,7 @@ function SessionStatusV2Text({
         <MissingHibernationInfo />
       </span>
     </div>
-  ) : status === "failed" ? (
+  ) : state === "failed" ? (
     <div className={cx("d-flex", "align-items-center", "gap-2")}>
       <Clock size="16" className="flex-shrink-0" />
       <span>
diff --git a/client/src/features/sessionsV2/session.utils.ts b/client/src/features/sessionsV2/session.utils.ts
index eec94584d7..f68c54ed3a 100644
--- a/client/src/features/sessionsV2/session.utils.ts
+++ b/client/src/features/sessionsV2/session.utils.ts
@@ -170,11 +170,21 @@ export function getFormattedEnvironmentValues(
         mount_directory,
         uid,
         gid,
-        command: command?.length > 0 ? [`${command}`] : undefined,
-        args: args?.length > 0 ? [`${args}`] : undefined,
+        //command: command?.length > 0 ? [`${command}`] : undefined,
+        command: command.length > 0 ? getJSONvalue(`${command}`) : undefined,
+        args: args.length > 0 ? getJSONvalue(`${args}`) : undefined,
+        // args: args?.length > 0 ? [`${args}`] : undefined,
       };
 }
 
+function getJSONvalue(toParse: string) {
+  try {
+    return JSON.parse(toParse);
+  } catch (error) {
+    return [toParse];
+  }
+}
+
 export function getLauncherDefaultValues(launcher: SessionLauncher) {
   return {
     name: launcher.name,
diff --git a/client/src/features/sessionsV2/sessionsV2.api.ts b/client/src/features/sessionsV2/sessionsV2.api.ts
index 5901963350..c2bc6a12b3 100644
--- a/client/src/features/sessionsV2/sessionsV2.api.ts
+++ b/client/src/features/sessionsV2/sessionsV2.api.ts
@@ -21,10 +21,18 @@ import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 import {
   AddSessionLauncherParams,
   DeleteSessionLauncherParams,
+  DockerImage,
+  GetLogsParams,
   GetProjectSessionLaunchersParams,
+  LaunchSessionParams,
+  PatchSessionParams,
   SessionEnvironmentList,
+  SessionImageParams,
   SessionLauncher,
   SessionLauncherList,
+  SessionList,
+  SessionV2,
+  StopSessionParams,
   UpdateSessionLauncherParams,
 } from "./sessionsV2.types";
 
@@ -33,7 +41,7 @@ const sessionsV2Api = createApi({
   baseQuery: fetchBaseQuery({
     baseUrl: "/ui-server/api/data",
   }),
-  tagTypes: ["Environment", "Launcher"],
+  tagTypes: ["Environment", "Launcher", "SessionsV2"],
   endpoints: (builder) => ({
     getSessionEnvironments: builder.query<SessionEnvironmentList, void>({
       query: () => {
@@ -110,15 +118,96 @@ const sessionsV2Api = createApi({
       },
       invalidatesTags: ["Launcher"],
     }),
+    getSessions: builder.query<SessionList, void>({
+      query: () => ({ url: "sessions" }),
+      providesTags: (result) =>
+        result
+          ? [
+              ...result.map(({ name }) => ({
+                type: "SessionsV2" as const,
+                name,
+              })),
+              "SessionsV2",
+            ]
+          : ["SessionsV2"],
+    }),
+    launchSession: builder.mutation<SessionV2, LaunchSessionParams>({
+      query: ({
+        launcher_id,
+        disk_storage,
+        resource_class_id,
+        cloudstorage,
+      }) => {
+        const body = {
+          launcher_id,
+          disk_storage,
+          resource_class_id,
+          cloudstorage,
+        };
+        return {
+          body,
+          method: "POST",
+          url: "/sessions",
+        };
+      },
+    }),
+    patchSession: builder.mutation<null, PatchSessionParams>({
+      query: ({ session_id, state, resource_class_id }) => ({
+        method: "PATCH",
+        url: `sessions/${session_id}`,
+        body: {
+          ...(state ? { state } : {}),
+          ...(resource_class_id ? { resource_class_id } : {}),
+        },
+      }),
+      transformResponse: () => null,
+      invalidatesTags: (_result, _error, { session_id }) => [
+        { id: session_id, type: "SessionsV2" },
+      ],
+    }),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getLogs: builder.query<any, GetLogsParams>({
+      query: ({ session_id, max_lines }) => {
+        return {
+          url: `sessions/${session_id}/logs`,
+          params: { max_lines },
+        };
+      },
+      keepUnusedDataFor: 0,
+    }),
+    stopSession: builder.mutation<boolean, StopSessionParams>({
+      query: ({ session_id }) => ({
+        method: "DELETE",
+        url: `sessions/${session_id}`,
+      }),
+      invalidatesTags: ["SessionsV2"],
+    }),
+    invalidateSessions: builder.mutation<null, void>({
+      queryFn: () => ({ data: null }),
+      invalidatesTags: ["SessionsV2"],
+    }),
+    getDockerImage: builder.query<DockerImage, SessionImageParams>({
+      query: ({ image_url }) => ({
+        method: "GET",
+        url: "sessions/images",
+        params: { image_url },
+      }),
+    }),
   }),
 });
 
 export default sessionsV2Api;
 export const {
+  useGetSessionsQuery,
   useGetSessionEnvironmentsQuery,
   useGetSessionLaunchersQuery,
   useGetProjectSessionLaunchersQuery,
   useAddSessionLauncherMutation,
   useUpdateSessionLauncherMutation,
   useDeleteSessionLauncherMutation,
+  useLaunchSessionMutation,
+  usePatchSessionMutation,
+  useStopSessionMutation,
+  useGetLogsQuery,
+  useGetDockerImageQuery,
 } = sessionsV2Api;
diff --git a/client/src/features/sessionsV2/sessionsV2.types.ts b/client/src/features/sessionsV2/sessionsV2.types.ts
index 21d009b233..26511f4675 100644
--- a/client/src/features/sessionsV2/sessionsV2.types.ts
+++ b/client/src/features/sessionsV2/sessionsV2.types.ts
@@ -17,6 +17,7 @@
  */
 
 import { ResourceClass } from "../dataServices/dataServices.types";
+import { CloudStorageDetailsOptions } from "../project/components/cloudStorage/projectCloudStorage.types.ts";
 
 export interface SessionEnvironment {
   container_image: string;
@@ -118,3 +119,70 @@ export interface SessionLauncherForm {
   command: string[];
   args: string[];
 }
+
+export interface SessionResources {
+  cpu: number;
+  gpu: number;
+  memory: number;
+  storage: number;
+}
+
+export interface SessionStatus {
+  message?: string;
+  state: "running" | "starting" | "stopping" | "failed" | "hibernated";
+  will_hibernate_at?: string;
+  will_delete_at?: string;
+  ready_containers: number;
+  total_containers: number;
+}
+
+export type SessionList = SessionV2[];
+export interface SessionV2 {
+  image: string;
+  name: string;
+  resources: SessionResources;
+  started: string;
+  status: SessionStatus;
+  url: string;
+  project_id: string;
+  launcher_id: string;
+  resource_class_id: string;
+}
+
+export interface SessionCloudStorageV2 {
+  configuration: CloudStorageDetailsOptions;
+  readonly: boolean;
+  source_path: string;
+  storage_id: string;
+  target_path: string;
+}
+
+export interface LaunchSessionParams {
+  launcher_id: string;
+  disk_storage?: number; //storage: number;
+  cloudstorage?: SessionCloudStorageV2[]; // TODO: fix typo in ds
+  resource_class_id?: number; // sessionClass: number;
+}
+
+export interface PatchSessionParams {
+  session_id: string;
+  state?: Extract<"running" | "hibernated", SessionStatus["state"]>;
+  resource_class_id?: number;
+}
+
+export interface GetLogsParams {
+  session_id: string;
+  max_lines: number;
+}
+
+export interface StopSessionParams {
+  session_id: string;
+}
+export interface SessionImageParams {
+  image_url: string;
+}
+
+export interface DockerImage {
+  image: string;
+  available: boolean;
+}
diff --git a/client/src/features/sessionsV2/useSessionLaunchState.hook.ts b/client/src/features/sessionsV2/useSessionLaunchState.hook.ts
index 9c33b86205..f8948e3f27 100644
--- a/client/src/features/sessionsV2/useSessionLaunchState.hook.ts
+++ b/client/src/features/sessionsV2/useSessionLaunchState.hook.ts
@@ -27,14 +27,14 @@ import {
   RCloneOption,
   useGetStoragesV2Query,
 } from "../projectsV2/api/storagesV2.api";
-import { useGetDockerImageQuery } from "../session/sessions.api";
 import { SESSION_CI_PIPELINE_POLLING_INTERVAL_MS } from "../session/startSessionOptions.constants";
-import { DockerImageStatus } from "../session/startSessionOptions.types";
+// import { DockerImageStatus } from "../session/startSessionOptions.types";
 import { DEFAULT_URL } from "./session.utils";
 import { SessionLauncher } from "./sessionsV2.types";
 import startSessionOptionsV2Slice from "./startSessionOptionsV2.slice";
 import type { SessionStartCloudStorageConfiguration } from "./startSessionOptionsV2.types";
 import useSessionResourceClass from "./useSessionResourceClass.hook";
+import { useGetDockerImageQuery } from "./sessionsV2.api";
 
 interface StartSessionFromLauncherProps {
   launcher: SessionLauncher;
@@ -73,7 +73,7 @@ export default function useSessionLauncherState({
     useGetDockerImageQuery(
       containerImage !== "unknown"
         ? {
-            image: containerImage,
+            image_url: containerImage,
           }
         : skipToken,
       {
@@ -114,18 +114,22 @@ export default function useSessionLauncherState({
 
   // Set the image status
   useEffect(() => {
-    const newStatus: DockerImageStatus = isLoadingDockerImageStatus
-      ? "unknown"
-      : dockerImageStatus == null
-      ? "not-available"
-      : dockerImageStatus.available
-      ? "available"
-      : "not-available";
-    if (newStatus !== startSessionOptionsV2.dockerImageStatus) {
-      dispatch(
-        startSessionOptionsV2Slice.actions.setDockerImageStatus(newStatus)
-      );
-    }
+    // TODO ANDREA: wait until the endpoint getDockerImage is ready in ds
+    // const newStatus: DockerImageStatus = isLoadingDockerImageStatus
+    //   ? "unknown"
+    //   : dockerImageStatus == null
+    //   ? "not-available"
+    //   : dockerImageStatus.available
+    //   ? "available"
+    //   : "not-available";
+    // if (newStatus !== startSessionOptionsV2.dockerImageStatus) {
+    //   dispatch(
+    //     startSessionOptionsV2Slice.actions.setDockerImageStatus(newStatus)
+    //   );
+    // }
+    dispatch(
+      startSessionOptionsV2Slice.actions.setDockerImageStatus("available")
+    );
   }, [
     dispatch,
     dockerImageStatus,
diff --git a/client/src/utils/customHooks/UseGetSessionLogs.ts b/client/src/utils/customHooks/UseGetSessionLogs.ts
index af0b8ec0df..f303d99b83 100644
--- a/client/src/utils/customHooks/UseGetSessionLogs.ts
+++ b/client/src/utils/customHooks/UseGetSessionLogs.ts
@@ -17,6 +17,7 @@
  */
 import { useEffect, useState } from "react";
 import { useGetLogsQuery } from "../../features/session/sessions.api";
+import { useGetLogsQuery as useGetLogsQueryV2 } from "../../features/sessionsV2/sessionsV2.api";
 import { ILogs } from "../../components/Logs";
 
 /**
@@ -51,4 +52,33 @@ function useGetSessionLogs(serverName: string, show: boolean | string) {
   return { logs, fetchLogs };
 }
 
+export function useGetSessionLogsV2(
+  serverName: string,
+  show: boolean | string
+) {
+  const { data, isFetching, isLoading, error, refetch } = useGetLogsQueryV2(
+    { session_id: serverName, max_lines: 250 },
+    { skip: !serverName }
+  );
+  const [logs, setLogs] = useState<ILogs | undefined>(undefined);
+  const fetchLogs = () => {
+    return refetch().then((result) => {
+      if (result.isSuccess)
+        return Promise.resolve(result.data as ILogs["data"]);
+      return Promise.reject({} as ILogs["data"]);
+    }) as Promise<ILogs["data"]>;
+  };
+
+  useEffect(() => {
+    setLogs({
+      data,
+      fetched: !isLoading && !error && data,
+      fetching: isFetching,
+      show: show ? serverName : false,
+    });
+  }, [data, error, show, isFetching, isLoading, serverName]);
+
+  return { logs, fetchLogs };
+}
+
 export default useGetSessionLogs;
diff --git a/client/src/websocket/handlers/sessionStatusHandlerV2.ts b/client/src/websocket/handlers/sessionStatusHandlerV2.ts
new file mode 100644
index 0000000000..09f9187475
--- /dev/null
+++ b/client/src/websocket/handlers/sessionStatusHandlerV2.ts
@@ -0,0 +1,34 @@
+/*!
+ * Copyright 2022 - 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 sessionsV2Api from "../../features/sessionsV2/sessionsV2.api";
+import { StateModel } from "../../model";
+
+function handleSessionsStatusV2(
+  data: Record<string, unknown>,
+  _webSocket: WebSocket,
+  model: StateModel
+) {
+  if ((data.message as boolean) && model) {
+    model.reduxStore.dispatch(
+      sessionsV2Api.endpoints.invalidateSessions.initiate()
+    );
+  }
+}
+
+export { handleSessionsStatusV2 };
diff --git a/client/src/websocket/index.ts b/client/src/websocket/index.ts
index 5071d9271a..4431231172 100644
--- a/client/src/websocket/index.ts
+++ b/client/src/websocket/index.ts
@@ -38,6 +38,7 @@ import type { KgInactiveProjectsState } from "../features/inactiveKgProjects/";
 import { ActivationStatusProgressError } from "../features/inactiveKgProjects/";
 import { StateModel } from "../model";
 import APIClient from "../api-client";
+import { handleSessionsStatusV2 } from "./handlers/sessionStatusHandlerV2";
 
 const timeoutIntervalMs = 45 * 1000; // ? set to 0 to disable
 const reconnectIntervalMs = 10 * 1000;
@@ -107,6 +108,13 @@ const messageHandlers: Record<string, Record<string, Array<MessageData>>> = {
         handler: handleSessionsStatus,
       },
     ],
+    sessionStatusV2: [
+      {
+        required: null,
+        optional: ["message"],
+        handler: handleSessionsStatusV2,
+      },
+    ],
   },
 };
 
@@ -151,6 +159,12 @@ function setupWebSocket(
     );
   }
 
+  function startPullingSessionStatusV2(targetWebSocket: WebSocket) {
+    targetWebSocket.send(
+      JSON.stringify(new WsMessage({}, "pullSessionStatusV2"))
+    );
+  }
+
   function resumePendingKgActivation(model: any, socket: any) {
     const state = model?.reduxStore?.getState();
     if (state == null) return;
@@ -195,6 +209,8 @@ function setupWebSocket(
       model.setObject({ open: true, error: false, lastReceived: null });
       // request session status
       startPullingSessionStatus(webSocket);
+      // request session status V2
+      startPullingSessionStatusV2(webSocket);
       // resume running processes
       resumePendingProcesses(fullModel, webSocket);
     }
diff --git a/server/src/api-client/index.ts b/server/src/api-client/index.ts
index 22c35ac3dc..c103e0dd47 100644
--- a/server/src/api-client/index.ts
+++ b/server/src/api-client/index.ts
@@ -47,6 +47,21 @@ class APIClient {
     return this.clientFetch(sessionsUrl, options, RETURN_TYPES.json);
   }
 
+  /**
+   * Fetch session status
+   *
+   */
+  async getSessionStatusV2(
+    authHeathers: Record<string, string>
+  ): Promise<Response> {
+    const sessionsUrl = `${this.gatewayUrl}/data/sessions`;
+    logger.debug(`Fetching session status.`);
+    const options = {
+      headers: new Headers(authHeathers),
+    };
+    return this.clientFetch(sessionsUrl, options, RETURN_TYPES.json);
+  }
+
   /**
    * Fetch kg activation status by projectId
    *
diff --git a/server/src/utils/index.ts b/server/src/utils/index.ts
index a55de1a26c..e35df1857f 100644
--- a/server/src/utils/index.ts
+++ b/server/src/utils/index.ts
@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { SessionV2 } from "src/websocket/handlers/sessionsV2";
 import urlJoin from "./url-join";
 
 /**
@@ -156,9 +157,59 @@ function sortObjectProperties(
     );
 }
 
+interface SessionFlattedV2 {
+  image: string;
+  name: string;
+  started: string;
+  url: string;
+  project_id: string;
+  launcher_id: string;
+  resource_class_id: string;
+  "resources.cpu": SessionV2["resources"]["cpu"];
+  "resources.gpu": SessionV2["resources"]["gpu"];
+  "resources.memory": SessionV2["resources"]["memory"];
+  "resources.storage": SessionV2["resources"]["storage"];
+
+  // Flatten the nested status object
+  "status.message": SessionV2["status"]["message"];
+  "status.state": SessionV2["status"]["state"];
+  "status.will_hibernate_at": SessionV2["status"]["will_hibernate_at"];
+  "status.will_delete_at": SessionV2["status"]["will_delete_at"];
+  "status.ready_containers": SessionV2["status"]["ready_containers"];
+  "status.total_containers": SessionV2["status"]["total_containers"];
+}
+
+function flattenSessionV2(session: SessionV2): SessionFlattedV2 {
+  return {
+    // Flatten the top-level properties
+    image: session.image,
+    name: session.name,
+    started: session.started,
+    url: session.url,
+    project_id: session.project_id,
+    launcher_id: session.launcher_id,
+    resource_class_id: session.resource_class_id,
+
+    // Flatten the nested resources object
+    "resources.cpu": session.resources.cpu,
+    "resources.gpu": session.resources.gpu,
+    "resources.memory": session.resources.memory,
+    "resources.storage": session.resources.storage,
+
+    // Flatten the nested status object
+    "status.message": session.status.message,
+    "status.state": session.status.state,
+    "status.will_hibernate_at": session.status.will_hibernate_at,
+    "status.will_delete_at": session.status.will_delete_at,
+    "status.ready_containers": session.status.ready_containers,
+    "status.total_containers": session.status.total_containers,
+  };
+}
+
 export {
   clamp,
   convertType,
+  flattenSessionV2,
   getCookieValueByName,
   getRelease,
   serializeCookie,
@@ -166,4 +217,5 @@ export {
   simpleHash,
   sleep,
   urlJoin,
+  SessionFlattedV2,
 };
diff --git a/server/src/websocket/handlers/sessionsV2.ts b/server/src/websocket/handlers/sessionsV2.ts
new file mode 100644
index 0000000000..940d2c0c27
--- /dev/null
+++ b/server/src/websocket/handlers/sessionsV2.ts
@@ -0,0 +1,99 @@
+/*!
+ * Copyright 2022 - 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 logger from "../../logger";
+import { Channel } from "../index";
+import APIClient from "../../api-client";
+import * as util from "util";
+import { WsMessage } from "../WsMessages";
+import { flattenSessionV2, SessionFlattedV2, simpleHash } from "../../utils";
+
+export interface SessionResources {
+  cpu: number;
+  gpu: number;
+  memory: number;
+  storage: number;
+}
+
+export interface SessionStatus {
+  message?: string;
+  state: "running" | "starting" | "stopping" | "failed" | "hibernated";
+  will_hibernate_at?: string;
+  will_delete_at?: string;
+  ready_containers: number;
+  total_containers: number;
+}
+
+export interface SessionV2 {
+  image: string;
+  name: string;
+  resources: SessionResources;
+  started: string;
+  status: SessionStatus;
+  url: string;
+  project_id: string;
+  launcher_id: string;
+  resource_class_id: string;
+}
+
+function handlerRequestSessionStatusV2(
+  data: Record<string, unknown>,
+  channel: Channel
+): void {
+  channel.data.set("sessionStatusV2", null);
+}
+
+function sendMessage(data: string, channel: Channel) {
+  const info = new WsMessage({ message: data }, "user", "sessionStatusV2");
+  channel.sockets.forEach((socket) => socket.send(info.toString()));
+}
+
+function heartbeatRequestSessionStatusV2(
+  channel: Channel,
+  apiClient: APIClient,
+  authHeathers: Record<string, string>
+): void {
+  const previousStatuses = channel.data.get("sessionStatusV2") as string;
+  apiClient
+    .getSessionStatusV2(authHeathers)
+    .then((response) => {
+      const statusFetched = response as unknown as SessionV2[];
+      const sessions = statusFetched ?? [];
+      const sessionFlatted = sessions
+        .slice()
+        .map((session) => flattenSessionV2(session));
+      const sortSessions = (a: SessionFlattedV2, b: SessionFlattedV2) =>
+        a.name.localeCompare(b.name);
+      const sortedSessions = sessionFlatted.slice().sort(sortSessions);
+      const currentHashedSessions = simpleHash(
+        JSON.stringify(sortedSessions)
+      ).toString();
+      // only send message when something change
+      if (!util.isDeepStrictEqual(previousStatuses, currentHashedSessions)) {
+        sendMessage("true", channel);
+        channel.data.set("sessionStatusV2", currentHashedSessions);
+      }
+    })
+    .catch((e) => {
+      logger.warn("There was a problem while trying to fetch sessions");
+      if (e.message) logger.warn(e.message);
+      logger.warn(e);
+    });
+}
+
+export { handlerRequestSessionStatusV2, heartbeatRequestSessionStatusV2 };
diff --git a/server/src/websocket/index.ts b/server/src/websocket/index.ts
index adc8e0b72c..5ee1891e6c 100644
--- a/server/src/websocket/index.ts
+++ b/server/src/websocket/index.ts
@@ -40,6 +40,10 @@ import {
   handlerRequestSessionStatus,
   heartbeatRequestSessionStatus,
 } from "./handlers/sessions";
+import {
+  handlerRequestSessionStatusV2,
+  heartbeatRequestSessionStatusV2,
+} from "./handlers/sessionsV2";
 
 // *** Channels ***
 // No need to store data in Redis since it's used only locally. We can modify this if necessary.
@@ -81,6 +85,13 @@ const acceptedMessages: Record<string, Array<MessageData>> = {
       handler: handlerRequestSessionStatus,
     } as MessageData,
   ],
+  pullSessionStatusV2: [
+    {
+      required: null,
+      optional: null,
+      handler: handlerRequestSessionStatusV2,
+    } as MessageData,
+  ],
   ping: [
     {
       required: null,
@@ -104,6 +115,7 @@ const longLoopFunctions: Array<Function> = [heartbeatRequestServerVersion];
 const shortLoopFunctions: Array<Function> = [
   heartbeatRequestSessionStatus,
   heartbeatRequestActivationKgStatus,
+  heartbeatRequestSessionStatusV2,
 ];
 
 /**