Add ability to delete attached PVC

frontend/src/k8sTypes.ts

@@ -32,7 +32,7 @@ type ImageStreamSpecTagAnnotations = Partial<{
 }>;
 
 export type NotebookAnnotations = Partial<{
-  'kubeflow-resource-stopped': string | null; // datestamp of stop (if omitted, it is running)
+  'kubeflow-resource-stopped': string | null; // datestamp of stop (if omitted, it is running),  `odh-notebook-controller-lock` is set when first creating the notebook to avoid race conditions, it's a fake stop
   'notebooks.kubeflow.org/last-activity': string; // datestamp of last use
   'opendatahub.io/link': string; // redirect notebook url
   'opendatahub.io/username': string; // the untranslated username behind the notebook

frontend/src/pages/projects/notebook/utils.ts

@@ -4,10 +4,8 @@ import { useWatchNotebookEvents } from './useWatchNotebookEvents';
 
 export const hasStopAnnotation = (notebook: NotebookKind): boolean => {
   return !!(
-    (
-      notebook.metadata.annotations?.['kubeflow-resource-stopped'] &&
-      notebook.metadata.annotations['kubeflow-resource-stopped'] !== 'odh-notebook-controller-lock'
-    ) // 'odh-notebook-controller-lock' is set when first creating the notebook to avoid race conditions, it's a fake stop
+    notebook.metadata.annotations?.['kubeflow-resource-stopped'] &&
+    notebook.metadata.annotations['kubeflow-resource-stopped'] !== 'odh-notebook-controller-lock'
   );
 };
 

frontend/src/pages/projects/pvc/DeletePVCModal.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { Alert, Button, Modal, Stack, StackItem } from '@patternfly/react-core';
-import { getPvcDisplayName } from '../utils';
+import { getNotebookDisplayName, getPvcDisplayName } from '../utils';
 import { PersistentVolumeClaimKind } from '../../../k8sTypes';
-import { deletePvc } from '../../../api';
+import { deletePvc, removeNotebookPVC } from '../../../api';
+import useRelatedNotebooks, { ConnectedNotebookContext } from '../notebook/useRelatedNotebooks';
 
 type DeletePVCModalProps = {
   pvcToDelete?: PersistentVolumeClaimKind;
@@ -12,6 +13,11 @@ type DeletePVCModalProps = {
 const DeletePVCModal: React.FC<DeletePVCModalProps> = ({ pvcToDelete, onClose }) => {
   const [isDeleting, setIsDeleting] = React.useState(false);
   const [error, setError] = React.useState<Error | undefined>();
+  const {
+    connectedNotebooks,
+    loaded: notebookLoaded,
+    error: notebookError,
+  } = useRelatedNotebooks(ConnectedNotebookContext.PVC, pvcToDelete?.metadata.name);
 
   const onBeforeClose = (deleted: boolean) => {
     onClose(deleted);
@@ -33,12 +39,17 @@ const DeletePVCModal: React.FC<DeletePVCModalProps> = ({ pvcToDelete, onClose })
           onClick={() => {
             if (pvcToDelete) {
               const { name, namespace } = pvcToDelete.metadata;
-
               setIsDeleting(true);
-              deletePvc(name, namespace)
-                .then(() => {
-                  onBeforeClose(true);
-                })
+              Promise.all(
+                connectedNotebooks.map((notebook) =>
+                  removeNotebookPVC(notebook.metadata.name, namespace, name),
+                ),
+              )
+                .then(() =>
+                  deletePvc(name, namespace).then(() => {
+                    onBeforeClose(true);
+                  }),
+                )
                 .catch((e) => {
                   setError(e);
                   setIsDeleting(false);
@@ -54,6 +65,24 @@ const DeletePVCModal: React.FC<DeletePVCModalProps> = ({ pvcToDelete, onClose })
       ]}
     >
       <Stack hasGutter>
+        {notebookLoaded && !notebookError && connectedNotebooks.length !== 0 && (
+          <StackItem>
+            <Alert
+              variant="warning"
+              isInline
+              title={
+                <>
+                  This storage is connected to{' '}
+                  {connectedNotebooks
+                    .map((notebook) => getNotebookDisplayName(notebook))
+                    .join(', ')}
+                </>
+              }
+            >
+              Delete this storage could lead to the restart of the workbenches it connects to.
+            </Alert>
+          </StackItem>
+        )}
         <StackItem>
           Are you sure you want to delete{' '}
           {pvcToDelete ? (

frontend/src/pages/projects/screens/spawner/storage/useAvailablePvcSize.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AppContext } from '../../../../../app/AppContext';
-import { DEFAULT_PVC_SIZE } from '../../../const';
+
+const DEFAULT_PVC_SIZE = 20;
 
 const useDefaultPvcSize = (): number => {
   const {

frontend/src/pages/projects/screens/spawner/storage/useAvailablePvcs.ts

@@ -17,11 +17,9 @@ const useAvailablePvcs = (
     if (projectName) {
       getPvcs(projectName)
         .then((newPvcs) => {
-          let usedPvcs: string[] = [];
-          notebooks.forEach((notebook) => {
-            const pvcNames = getNotebookPVCNames(notebook.notebook);
-            usedPvcs = _.union(usedPvcs, pvcNames);
-          });
+          const usedPvcs = _.uniq(
+            notebooks.flatMap((notebook) => getNotebookPVCNames(notebook.notebook)),
+          );
           setPvcs(newPvcs.filter((pvc) => !usedPvcs.includes(pvc.metadata.name)));
           setLoaded(true);
         })