Fixes: Workbench not editable for a little while after it's stopped (#…

…1551)
opendatahub-io · Aug 17, 2023 · 8b97fdf · 8b97fdf
1 parent d61c590
commit 8b97fdf
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 15 deletions.
diff --git a/frontend/src/pages/projects/notebook/NotebookStatusToggle.tsx b/frontend/src/pages/projects/notebook/NotebookStatusToggle.tsx
@@ -8,7 +8,7 @@ import { computeNotebooksTolerations } from '~/utilities/tolerations';
 import { useAppContext } from '~/app/AppContext';
 import { currentlyHasPipelines } from '~/concepts/pipelines/elyra/utils';
 import { NotebookState } from './types';
-import useRefreshNotebookUntilStart from './useRefreshNotebookUntilStart';
+import useRefreshNotebookUntilStartOrStop from './useRefreshNotebookUntilStartOrStop';
 import StopNotebookConfirmModal from './StopNotebookConfirmModal';
 import useStopNotebookModalAvailability from './useStopNotebookModalAvailability';
 import NotebookStatusText from './NotebookStatusText';
@@ -24,12 +24,12 @@ const NotebookStatusToggle: React.FC<NotebookStatusToggleProps> = ({
   doListen,
   enablePipelines,
 }) => {
-  const { notebook, isStarting, isRunning, refresh } = notebookState;
+  const { notebook, isStarting, isRunning, isStopping, refresh } = notebookState;
   const gpuNumber = useNotebookGPUNumber(notebook);
   const { size } = useNotebookDeploymentSize(notebook);
   const [isOpenConfirm, setOpenConfirm] = React.useState(false);
   const [inProgress, setInProgress] = React.useState(false);
-  const listenToNotebookStart = useRefreshNotebookUntilStart(notebookState, doListen);
+  const listenToNotebookStart = useRefreshNotebookUntilStartOrStop(notebookState, doListen);
   const [dontShowModalValue] = useStopNotebookModalAvailability();
   const { dashboardConfig } = useAppContext();
   const notebookName = notebook.metadata.name;
@@ -42,8 +42,8 @@ const NotebookStatusToggle: React.FC<NotebookStatusToggleProps> = ({
   let label = '';
   if (isStarting) {
     label = 'Starting...';
-  } else if (inProgress) {
-    label = isChecked ? 'Starting...' : 'Stopping...';
+  } else if (isStopping) {
+    label = 'Stopping...';
   } else {
     label = isRunning ? 'Running' : 'Stopped';
   }
@@ -72,7 +72,7 @@ const NotebookStatusToggle: React.FC<NotebookStatusToggleProps> = ({
     setInProgress(true);
     stopNotebook(notebookName, notebookNamespace).then(() => {
       refresh().then(() => setInProgress(false));
-      listenToNotebookStart(false);
+      listenToNotebookStart(true, true);
     });
   }, [notebookName, notebookNamespace, refresh, listenToNotebookStart, fireNotebookTrackingEvent]);
 
@@ -82,7 +82,7 @@ const NotebookStatusToggle: React.FC<NotebookStatusToggleProps> = ({
         <FlexItem>
           <Switch
             aria-label={label}
-            isDisabled={inProgress}
+            isDisabled={inProgress || isStopping}
             id={`${notebookName}-${notebookNamespace}`}
             isChecked={isChecked}
             onClick={() => {

diff --git a/frontend/src/pages/projects/notebook/service.ts b/frontend/src/pages/projects/notebook/service.ts
@@ -34,6 +34,8 @@ export const getNotebooksStatus = async (
           notebook: notebooks[i],
           isStarting: !isStopped && !podsReady,
           isRunning: !isStopped && podsReady,
+          isStopping: isStopped && podsReady,
+          isStopped: isStopped && !podsReady,
           runningPodUid: pods[0]?.metadata?.uid || '',
         },
       ];

diff --git a/frontend/src/pages/projects/notebook/types.ts b/frontend/src/pages/projects/notebook/types.ts
@@ -5,6 +5,8 @@ export type NotebookDataState = {
   notebook: NotebookKind;
   isStarting: boolean;
   isRunning: boolean;
+  isStopping: boolean;
+  isStopped: boolean;
   runningPodUid: string;
 };
 

diff --git a/.../notebook/useRefreshNotebookUntilStart.ts → ...ook/useRefreshNotebookUntilStartOrStop.ts b/.../notebook/useRefreshNotebookUntilStart.ts → ...ook/useRefreshNotebookUntilStartOrStop.ts
@@ -2,20 +2,22 @@ import * as React from 'react';
 import { FAST_POLL_INTERVAL } from '~/utilities/const';
 import { NotebookState } from './types';
 
-const useRefreshNotebookUntilStart = (
+const useRefreshNotebookUntilStartOrStop = (
   notebookState: NotebookState,
   doListen: boolean,
-): ((listen: boolean) => void) => {
+): ((listen: boolean, stop?: boolean) => void) => {
   const [watchingForNotebook, setWatchingForNotebook] = React.useState(false);
+  const [watchingForStop, setWatchingForStop] = React.useState(false);
   const lastNotebookState = React.useRef<NotebookState>(notebookState);
   lastNotebookState.current = notebookState;
 
   React.useEffect(() => {
     let interval: ReturnType<typeof setInterval>;
     if (watchingForNotebook && doListen) {
       interval = setInterval(() => {
-        const { isRunning, refresh } = lastNotebookState.current;
-        if (!isRunning) {
+        const { isRunning, isStopped, refresh } = lastNotebookState.current;
+        const condition = watchingForStop ? isStopped : isRunning;
+        if (!condition) {
           refresh().catch((e) => {
             /* eslint-disable-next-line no-console */
             console.error('Error refreshing, stopping notebook refresh', e);
@@ -30,11 +32,15 @@ const useRefreshNotebookUntilStart = (
     return () => {
       clearInterval(interval);
     };
-  }, [watchingForNotebook, doListen]);
+  }, [watchingForStop, watchingForNotebook, doListen]);
 
-  return React.useCallback((listen: boolean) => {
+  /**
+   * The second parameter allows listening for the notebook to be stopped. Default is to wait until started.
+   */
+  return React.useCallback((listen: boolean, waitForStop = false) => {
+    setWatchingForStop(waitForStop);
     setWatchingForNotebook(listen);
   }, []);
 };
 
-export default useRefreshNotebookUntilStart;
+export default useRefreshNotebookUntilStartOrStop;
diff --git a/frontend/src/pages/projects/screens/detail/notebooks/NotebookTableRow.tsx b/frontend/src/pages/projects/screens/detail/notebooks/NotebookTableRow.tsx
@@ -94,7 +94,7 @@ const NotebookTableRow: React.FC<NotebookTableRowProps> = ({
           <ActionsColumn
             items={[
               {
-                isDisabled: obj.isStarting,
+                isDisabled: obj.isStarting || obj.isStopping,
                 title: 'Edit workbench',
                 onClick: () => {
                   navigate(