feat: use data service sessions api

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

Hide file tree

Showing 5 changed files with 68 additions and 27 deletions.
diff --git a/client/src/components/Logs.tsx b/client/src/components/Logs.tsx
@@ -348,7 +348,40 @@ const EnvironmentLogs = ({ name, annotations }: EnvironmentLogsProps) => {
   );
 };
 
-export const EnvironmentLogsV2 = ({ name }: 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
   );

diff --git a/client/src/features/sessionsV2/PauseOrDeleteSessionModal.tsx b/client/src/features/sessionsV2/PauseOrDeleteSessionModal.tsx
@@ -141,13 +141,20 @@ function AnonymousDeleteSessionModal({
 
   return (
     <Modal className={styles.sessionModal} isOpen={isOpen} toggle={toggleModal}>
-      <ModalHeader toggle={toggleModal}>Delete Session</ModalHeader>
+      <ModalHeader toggle={toggleModal}>Shut Down Session</ModalHeader>
       <ModalBody>
-        <p>Are you sure you want to delete this session?</p>
+        <p>Are you sure you want to shut down this session?</p>
       </ModalBody>
       <ModalFooter>
         <Button
-          color="outline-primary"
+          color="outline-danger"
+          disabled={isStopping}
+          onClick={toggleModal}
+        >
+          Back to Session
+        </Button>
+        <Button
+          color="danger"
           data-cy="delete-session-modal-button"
           disabled={isStopping}
           type="submit"
@@ -156,15 +163,12 @@ function AnonymousDeleteSessionModal({
           {isStopping ? (
             <>
               <Loader className="me-1" inline size={16} />
-              Deleting session
+              Shutting down session
             </>
           ) : (
-            <>Delete Session</>
+            <>Shut down session</>
           )}
         </Button>
-        <Button color="primary" disabled={isStopping} onClick={toggleModal}>
-          Back to Session
-        </Button>
       </ModalFooter>
     </Modal>
   );
@@ -181,7 +185,7 @@ function LoggedPauseOrDeleteSessionModal({
   return (
     <Modal className={styles.sessionModal} isOpen={isOpen} toggle={toggleModal}>
       <ModalHeader toggle={toggleModal}>
-        {action === "pause" ? "Pause Session" : "Delete Session"}
+        {action === "pause" ? "Pause Session" : "Shut Down Session"}
       </ModalHeader>
       {action === "pause" ? (
         <PauseSessionModalContent
@@ -366,9 +370,9 @@ function DeleteSessionModalContent({
   return (
     <>
       <ModalBody>
-        <p>Are you sure you want to delete this session?</p>
+        <p>Are you sure you want to shut down this session?</p>
         <p className="fw-bold">
-          Deleting a session will permanently remove any unsaved work.
+          Shutting down a session will permanently remove any unsaved work.
         </p>
         {/* {session != null && (
           <UnsavedWorkWarning
@@ -390,7 +394,14 @@ function DeleteSessionModalContent({
       </ModalBody>
       <ModalFooter>
         <Button
-          color="outline-primary"
+          color="outline-danger"
+          disabled={isStopping}
+          onClick={toggleModal}
+        >
+          Back to Session
+        </Button>
+        <Button
+          color="danger"
           data-cy="delete-session-modal-button"
           disabled={isStopping}
           type="submit"
@@ -399,15 +410,12 @@ function DeleteSessionModalContent({
           {isStopping ? (
             <>
               <Loader className="me-1" inline size={16} />
-              Deleting session
+              Shutting down session
             </>
           ) : (
-            <>Delete Session</>
+            <>Shut down session</>
           )}
         </Button>
-        <Button color="primary" disabled={isStopping} onClick={toggleModal}>
-          Back to Session
-        </Button>
       </ModalFooter>
     </>
   );

diff --git a/client/src/features/sessionsV2/SessionShowPage/ShowSessionPage.tsx b/client/src/features/sessionsV2/SessionShowPage/ShowSessionPage.tsx
@@ -348,7 +348,7 @@ function DeleteSessionBtn({ openDeleteSession }: DeleteSessionBtnProps) {
   const ref = useRef<HTMLButtonElement>(null);
 
   const buttonId = "delete-session-button";
-  const tooltip = "Delete session";
+  const tooltip = "Shut down session";
 
   return (
     <div>

diff --git a/client/src/features/sessionsV2/components/SessionButton/ActiveSessionButton.tsx b/client/src/features/sessionsV2/components/SessionButton/ActiveSessionButton.tsx
@@ -256,7 +256,7 @@ export default function ActiveSessionButton({
     status === "stopping" || isStopping ? (
       <Button color="primary" data-cy="stopping-btn" disabled>
         <Loader className="me-1" inline size={16} />
-        Deleting
+        Shutting down
       </Button>
     ) : isHibernating ? (
       <Button color="primary" data-cy="stopping-btn" disabled>
@@ -340,7 +340,7 @@ export default function ActiveSessionButton({
       onClick={logged ? toggleStopSession : onStopSession}
     >
       <Trash className={cx("bi", "me-1")} />
-      Delete session
+      Shut down session
     </DropdownItem>
   );
 
@@ -433,16 +433,16 @@ function ConfirmDeleteModal({
   return (
     <Modal size="lg" centered isOpen={isOpen} toggle={toggleModal}>
       <ModalHeader className="text-danger" toggle={toggleModal}>
-        Delete Session
+        Shut Down Session
       </ModalHeader>
       <ModalBody>
         <Row>
           <Col>
             <p className="mb-1">
-              Are you sure you want to delete this session?
+              Are you sure you want to shut down this session?
             </p>
             <p className="fw-bold">
-              Deleting a session will permanently remove any unsaved work.
+              Shutting down a session will permanently remove any unsaved work.
             </p>
             {/*<UnsavedWorkWarning*/}
             {/*  annotations={annotations}*/}
@@ -468,7 +468,7 @@ function ConfirmDeleteModal({
           type="submit"
           onClick={onClick}
         >
-          <Trash className={cx("bi", "me-1")} /> Delete this session
+          <Trash className={cx("bi", "me-1")} /> Shut down this session
         </Button>
       </ModalFooter>
     </Modal>

diff --git a/client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx b/client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx
@@ -91,7 +91,7 @@ export function SessionStatusV2Label({ session }: ActiveSessionV2Props) {
           className={cx("me-1", "text-warning-emphasis")}
           inline
         />
-        <span className="text-warning-emphasis">Deleting Session</span>
+        <span className="text-warning-emphasis">Shutting down session</span>
       </SessionBadge>
     ) : state === "hibernated" ? (
       <SessionBadge className={cx("border-dark-subtle", "bg-light")}>
@@ -251,7 +251,7 @@ function SessionStatusV2Text({
       <span>Created {startTimeText}</span>
     </div>
   ) : state === "stopping" ? (
-    <>Deleting Session...</>
+    <>Shutting down session...</>
   ) : state === "hibernated" && will_delete_at ? (
     <div className={cx("d-flex", "align-items-center", "gap-2")}>
       <Clock size="16" className="flex-shrink-0" />