Add status tooltip and start notebook modal (#683)

* Add status tooltip and start notebook modal

* get projectName from notebook namespace

frontend/src/api/index.ts

@@ -1,6 +1,7 @@
 // Normal SDK/pass-through network API calls
 export * from './network/builds';
 export * from './network/configMaps';
+export * from './network/events';
 export * from './network/imageStreams';
 export * from './network/notebooks';
 export * from './network/pods';

frontend/src/api/models/k8s.ts

@@ -6,6 +6,12 @@ export const ConfigMapModel: K8sModelCommon = {
   plural: 'configmaps',
 };
 
+export const EventModel: K8sModelCommon = {
+  apiVersion: 'v1',
+  kind: 'Event',
+  plural: 'events',
+};
+
 export const PodModel: K8sModelCommon = {
   apiVersion: 'v1',
   kind: 'Pod',

frontend/src/api/network/events.ts

@@ -0,0 +1,21 @@
+import { k8sListResource } from '@openshift/dynamic-plugin-sdk-utils';
+import { EventKind } from '../../k8sTypes';
+import { EventModel } from '../models';
+
+export const getNotebookEvents = async (
+  namespace: string,
+  podUid: string,
+): Promise<EventKind[]> => {
+  return k8sListResource<EventKind>({
+    model: EventModel,
+    queryOptions: {
+      ns: namespace,
+      queryParams: {
+        fieldSelector: `involvedObject.kind=Pod,involvedObject.uid=${podUid}`,
+      },
+    },
+  }).then(
+    // Filter the events by pods that have the same name as the notebook
+    (r) => r.items,
+  );
+};

frontend/src/k8sTypes.ts

@@ -106,6 +106,20 @@ export type ConfigMapKind = K8sResourceCommon & {
   data?: Record<string, string>;
 };
 
+export type EventKind = K8sResourceCommon & {
+  metadata: {
+    uid?: string;
+  };
+  involvedObject: {
+    name: string;
+  };
+  lastTimestamp?: string;
+  eventTime: string;
+  type: 'Normal' | 'Warning';
+  reason: string;
+  message: string;
+};
+
 export type ImageStreamKind = K8sResourceCommon & {
   metadata: {
     annotations?: ImageStreamAnnotations;

frontend/src/pages/projects/notebook/NotebookRouteLink.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, ButtonVariant } from '@patternfly/react-core';
 import { ExclamationCircleIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { NotebookKind } from '../../../k8sTypes';
 import useRouteForNotebook from './useRouteForNotebook';
@@ -10,9 +10,15 @@ type NotebookRouteLinkProps = {
   label?: React.ReactNode;
   notebook: NotebookKind;
   isRunning: boolean;
+  variant?: ButtonVariant;
 };
 
-const NotebookRouteLink: React.FC<NotebookRouteLinkProps> = ({ label, notebook, isRunning }) => {
+const NotebookRouteLink: React.FC<NotebookRouteLinkProps> = ({
+  label,
+  notebook,
+  isRunning,
+  variant,
+}) => {
   const [routeLink, loaded, error] = useRouteForNotebook(notebook);
   const isStopped = hasStopAnnotation(notebook);
   const canLink = !!routeLink && !error && !isStopped && isRunning;
@@ -25,7 +31,7 @@ const NotebookRouteLink: React.FC<NotebookRouteLinkProps> = ({ label, notebook,
       isLoading={!loaded}
       href={error || !routeLink ? undefined : routeLink}
       target="_blank"
-      variant="link"
+      variant={variant || 'link'}
       icon={
         error ? (
           <ExclamationCircleIcon title="Error getting link for notebook" />

frontend/src/pages/projects/notebook/NotebookStatusPopover.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { Button, Popover } from '@patternfly/react-core';
+import StartNotebookModal from './StartNotebookModal';
+import { NotebookState } from './types';
+import { getEventFullMessage, useNotebookStatus } from './utils';
+import { useDeepCompareMemoize } from '../../../utilities/useDeepCompareMemoize';
+
+type NotebookStatusPopoverProps = {
+  isVisible: boolean;
+  onClose: () => void;
+  notebookState: NotebookState;
+  stopNotebook: () => void;
+};
+
+const NotebookStatusPopover: React.FC<NotebookStatusPopoverProps> = ({
+  children,
+  onClose,
+  isVisible,
+  notebookState,
+  stopNotebook,
+}) => {
+  const { notebook, runningPodUid, isStarting } = notebookState;
+  const [isStartModalOpen, setStartModalOpen] = React.useState(false);
+  const [unstableNotebookStatus, events] = useNotebookStatus(notebook, runningPodUid, isStarting);
+  const notebookStatus = useDeepCompareMemoize(unstableNotebookStatus);
+
+  return (
+    <>
+      <Popover
+        shouldClose={onClose}
+        isVisible={isVisible}
+        headerContent="Notebook status"
+        bodyContent={
+          <>
+            {events[events.length - 1]
+              ? getEventFullMessage(events[events.length - 1])
+              : 'Waiting for notebook to start...'}
+          </>
+        }
+        footerContent={
+          <Button
+            variant="link"
+            isInline
+            onClick={() => {
+              setStartModalOpen(true);
+              onClose();
+            }}
+          >
+            Event log
+          </Button>
+        }
+      >
+        <>{children}</>
+      </Popover>
+      <StartNotebookModal
+        isOpen={isStartModalOpen}
+        notebookState={notebookState}
+        notebookStatus={notebookStatus}
+        events={events}
+        onClose={(stopped) => {
+          if (stopped) {
+            stopNotebook();
+          }
+          setStartModalOpen(false);
+        }}
+      />
+    </>
+  );
+};
+
+export default NotebookStatusPopover;

frontend/src/pages/projects/notebook/NotebookStatusToggle.tsx

@@ -5,6 +5,7 @@ import { NotebookState } from './types';
 import useRefreshNotebookUntilStart from './useRefreshNotebookUntilStart';
 import StopNotebookConfirmModal from './StopNotebookConfirmModal';
 import useStopNotebookModalAvailability from './useStopNotebookModalAvailability';
+import NotebookStatusPopover from './NotebookStatusPopover';
 
 type NotebookStatusToggleProps = {
   notebookState: NotebookState;
@@ -14,37 +15,43 @@ const NotebookStatusToggle: React.FC<NotebookStatusToggleProps> = ({ notebookSta
   const { notebook, isStarting, isRunning, refresh } = notebookState;
   const [isOpenConfirm, setOpenConfirm] = React.useState(false);
   const [inProgress, setInProgress] = React.useState(false);
+  const [isPopoverVisible, setPopoverVisible] = React.useState(false);
   const listenToNotebookStart = useRefreshNotebookUntilStart(notebookState);
   const [dontShowModalValue] = useStopNotebookModalAvailability();
   const notebookName = notebook.metadata.name;
   const notebookNamespace = notebook.metadata.namespace;
-  const startingNotRunning = isStarting && !isRunning;
   const isRunningOrStarting = isStarting || isRunning;
 
   /** If in progress, it is faking the opposite */
   const isChecked = inProgress ? !isRunningOrStarting : isRunningOrStarting;
 
   let label = '';
-  if (startingNotRunning) {
+  if (isStarting) {
     label = 'Starting...';
   } else if (inProgress) {
     label = isChecked ? 'Starting...' : 'Stopping...';
   } else {
-    label = isRunning ? 'Started' : 'Stopped';
+    label = isRunning ? 'Running' : 'Stopped';
   }
 
-  const handleStop = () => {
+  const handleStop = React.useCallback(() => {
     setInProgress(true);
     stopNotebook(notebookName, notebookNamespace).then(() => {
       refresh().then(() => setInProgress(false));
+      listenToNotebookStart(false);
     });
-  };
+  }, [notebookName, notebookNamespace, refresh, listenToNotebookStart]);
 
   return (
-    <>
+    <NotebookStatusPopover
+      isVisible={isPopoverVisible}
+      notebookState={notebookState}
+      stopNotebook={handleStop}
+      onClose={() => setPopoverVisible(false)}
+    >
       <Switch
         label={label}
-        isDisabled={inProgress || startingNotRunning}
+        isDisabled={inProgress}
         id={notebookName}
         isChecked={isChecked}
         onClick={() => {
@@ -54,11 +61,13 @@ const NotebookStatusToggle: React.FC<NotebookStatusToggleProps> = ({ notebookSta
             } else {
               setOpenConfirm(true);
             }
+          } else if (isStarting) {
+            setPopoverVisible((visible) => !visible);
           } else {
             setInProgress(true);
             startNotebook(notebookName, notebookNamespace).then(() => {
               refresh().then(() => setInProgress(false));
-              listenToNotebookStart();
+              listenToNotebookStart(true);
             });
           }
         }}
@@ -73,7 +82,7 @@ const NotebookStatusToggle: React.FC<NotebookStatusToggleProps> = ({ notebookSta
           setOpenConfirm(false);
         }}
       />
-    </>
+    </NotebookStatusPopover>
   );
 };