Merge feature branch f/storage-class

frontend/.storybook/preview.js

@@ -45,7 +45,9 @@ export const decorators = [
   (Story) => (
     <AppContext.Provider
       value={{
+        buildStatuses: [],
         dashboardConfig: mockDashboardConfig({}),
+        storageClasses: [],
       }}
     >
       <Provider store={sdkStore}>

frontend/src/__tests__/integration/pages/modelServing/ModelServingGlobal.stories.tsx

@@ -172,7 +172,7 @@ const Template: (props: TemplateProps) => StoryFn<typeof ModelServingGlobal> = (
     useDetectUser();
     const { dashboardConfig, loaded } = useApplicationSettings();
     return loaded && dashboardConfig ? (
-      <AppContext.Provider value={{ buildStatuses: [], dashboardConfig }}>
+      <AppContext.Provider value={{ buildStatuses: [], dashboardConfig, storageClasses: [] }}>
         <AreaContext.Provider
           value={{
             dscStatus: mockDscStatus({

frontend/src/__tests__/integration/pages/modelServing/ServingRuntimeList.stories.tsx

@@ -200,7 +200,7 @@ const Template: StoryFn<typeof ModelServingPlatform> = (args) => {
   useDetectUser();
   const { dashboardConfig, loaded } = useApplicationSettings();
   return loaded && dashboardConfig ? (
-    <AppContext.Provider value={{ buildStatuses: [], dashboardConfig }}>
+    <AppContext.Provider value={{ buildStatuses: [], dashboardConfig, storageClasses: [] }}>
       <AreaContext.Provider
         value={{
           dscStatus: mockDscStatus({

frontend/src/api/index.ts

@@ -13,6 +13,7 @@ export * from './k8s/routes';
 export * from './k8s/secrets';
 export * from './k8s/serviceAccounts';
 export * from './k8s/servingRuntimes';
+export * from './k8s/storageClasses';
 export * from './k8s/users';
 export * from './k8s/groups';
 export * from './k8s/templates';

frontend/src/api/k8s/pvcs.ts

@@ -19,6 +19,7 @@ export const assemblePvc = (
   data: CreatingStorageObject,
   namespace: string,
   editName?: string,
+  storageClassName?: string,
 ): PersistentVolumeClaimKind => {
   const {
     nameDesc: { name: pvcName, description },
@@ -48,6 +49,7 @@ export const assemblePvc = (
           storage: size,
         },
       },
+      storageClassName,
       volumeMode: 'Filesystem',
     },
     status: {
@@ -84,9 +86,10 @@ export const getAvailableMultiUsePvcs = (
 export const createPvc = (
   data: CreatingStorageObject,
   namespace: string,
+  storageClassName?: string,
   opts?: K8sAPIOptions,
 ): Promise<PersistentVolumeClaimKind> => {
-  const pvc = assemblePvc(data, namespace);
+  const pvc = assemblePvc(data, namespace, undefined, storageClassName);
 
   return k8sCreateResource<PersistentVolumeClaimKind>(
     applyK8sAPIOptions({ model: PVCModel, resource: pvc }, opts),

frontend/src/api/k8s/storageClasses.ts

@@ -0,0 +1,9 @@
+import { k8sListResource } from '@openshift/dynamic-plugin-sdk-utils';
+import { StorageClassKind } from '~/k8sTypes';
+import { StorageClassModel } from '~/api/models';
+
+export const getStorageClasses = (): Promise<StorageClassKind[]> =>
+  k8sListResource<StorageClassKind>({
+    model: StorageClassModel,
+    queryOptions: {},
+  }).then((listResource) => listResource.items);

frontend/src/api/models/k8s.ts

@@ -31,6 +31,13 @@ export const PVCModel: K8sModelCommon = {
   plural: 'persistentvolumeclaims',
 };
 
+export const StorageClassModel: K8sModelCommon = {
+  apiVersion: 'v1',
+  apiGroup: 'storage.k8s.io',
+  kind: 'StorageClass',
+  plural: 'storageclasses',
+};
+
 export const NamespaceModel: K8sModelCommon = {
   apiVersion: 'v1',
   kind: 'Namespace',

frontend/src/app/App.tsx

@@ -18,6 +18,7 @@ import { useUser } from '~/redux/selectors';
 import { DASHBOARD_MAIN_CONTAINER_ID } from '~/utilities/const';
 import useDetectUser from '~/utilities/useDetectUser';
 import ProjectsContextProvider from '~/concepts/projects/ProjectsContext';
+import useStorageClasses from '~/concepts/k8s/useStorageClasses';
 import AreaContextProvider from '~/concepts/areas/AreaContext';
 import Header from './Header';
 import AppRoutes from './AppRoutes';
@@ -42,80 +43,79 @@ const App: React.FC = () => {
     loadError: fetchConfigError,
   } = useApplicationSettings();
 
+  const [storageClasses] = useStorageClasses();
+
   useDetectUser();
 
-  // We lack the critical data to startup the app
-  if (userError || fetchConfigError) {
-    // There was an error fetching critical data
+  if (!username || !configLoaded || !dashboardConfig) {
+    // We lack the critical data to startup the app
+    if (userError || fetchConfigError) {
+      // There was an error fetching critical data
+      return (
+        <Page>
+          <PageSection>
+            <Stack hasGutter>
+              <StackItem>
+                <Alert variant="danger" isInline title="General loading error">
+                  <p>
+                    {(userError ? userError.message : fetchConfigError?.message) ||
+                      'Unknown error occurred during startup.'}
+                  </p>
+                  <p>Logging out and logging back in may solve the issue.</p>
+                </Alert>
+              </StackItem>
+              <StackItem>
+                <Button
+                  variant="secondary"
+                  onClick={() => logout().then(() => window.location.reload())}
+                >
+                  Logout
+                </Button>
+              </StackItem>
+            </Stack>
+          </PageSection>
+        </Page>
+      );
+    }
+
+    // Assume we are still waiting on the API to finish
     return (
-      <Page>
-        <PageSection>
-          <Stack hasGutter>
-            <StackItem>
-              <Alert variant="danger" isInline title="General loading error">
-                <p>
-                  {(userError ? userError.message : fetchConfigError?.message) ||
-                    'Unknown error occurred during startup.'}
-                </p>
-                <p>Logging out and logging back in may solve the issue.</p>
-              </Alert>
-            </StackItem>
-            <StackItem>
-              <Button
-                variant="secondary"
-                onClick={() => logout().then(() => window.location.reload())}
-              >
-                Logout
-              </Button>
-            </StackItem>
-          </Stack>
-        </PageSection>
-      </Page>
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
     );
   }
 
-  // Waiting on the API to finish
-  const loading = !username || !configLoaded || !dashboardConfig;
-
   return (
-    <AreaContextProvider>
-      {loading ? (
-        <Bullseye>
-          <Spinner />
-        </Bullseye>
-      ) : (
-        <AppContext.Provider
-          value={{
-            buildStatuses,
-            dashboardConfig,
-          }}
+    <AppContext.Provider
+      value={{
+        buildStatuses,
+        dashboardConfig,
+        storageClasses,
+      }}
+    >
+      <AreaContextProvider>
+        <Page
+          className="odh-dashboard"
+          isManagedSidebar
+          header={<Header onNotificationsClick={() => setNotificationsOpen(!notificationsOpen)} />}
+          sidebar={isAllowed ? <NavSidebar /> : undefined}
+          notificationDrawer={<AppNotificationDrawer onClose={() => setNotificationsOpen(false)} />}
+          isNotificationDrawerExpanded={notificationsOpen}
+          mainContainerId={DASHBOARD_MAIN_CONTAINER_ID}
         >
-          <Page
-            className="odh-dashboard"
-            isManagedSidebar
-            header={
-              <Header onNotificationsClick={() => setNotificationsOpen(!notificationsOpen)} />
-            }
-            sidebar={isAllowed ? <NavSidebar /> : undefined}
-            notificationDrawer={
-              <AppNotificationDrawer onClose={() => setNotificationsOpen(false)} />
-            }
-            isNotificationDrawerExpanded={notificationsOpen}
-            mainContainerId={DASHBOARD_MAIN_CONTAINER_ID}
-          >
-            <ErrorBoundary>
-              <ProjectsContextProvider>
-                <QuickStarts>
-                  <AppRoutes />
-                </QuickStarts>
-              </ProjectsContextProvider>
-              <ToastNotifications />
-              <TelemetrySetup />
-            </ErrorBoundary>
-          </Page>
-        </AppContext.Provider>
-      )}
-    </AreaContextProvider>
+          <ErrorBoundary>
+            <ProjectsContextProvider>
+              <QuickStarts>
+                <AppRoutes />
+              </QuickStarts>
+            </ProjectsContextProvider>
+            <ToastNotifications />
+            <TelemetrySetup />
+          </ErrorBoundary>
+        </Page>
+      </AreaContextProvider>
+    </AppContext.Provider>
   );
 };
 

frontend/src/app/AppContext.ts

@@ -1,16 +1,18 @@
 import * as React from 'react';
-import { DashboardConfigKind } from '~/k8sTypes';
+import { StorageClassKind, DashboardConfigKind } from '~/k8sTypes';
 import { BuildStatus } from '~/types';
 
 type AppContextProps = {
   buildStatuses: BuildStatus[];
   dashboardConfig: DashboardConfigKind;
+  storageClasses: StorageClassKind[];
 };
 
 const defaultAppContext: AppContextProps = {
   buildStatuses: [],
   // At runtime dashboardConfig is never null -- DO NOT DO THIS usually
   dashboardConfig: null as unknown as DashboardConfigKind,
+  storageClasses: [] as StorageClassKind[],
 };
 
 export const AppContext = React.createContext(defaultAppContext);

frontend/src/concepts/k8s/useStorageClasses.ts

@@ -0,0 +1,8 @@
+import useFetchState, { FetchState } from '~/utilities/useFetchState';
+import { getStorageClasses } from '~/api';
+import { StorageClassKind } from '~/k8sTypes';
+
+const useStorageClasses = (): FetchState<StorageClassKind[]> =>
+  useFetchState(getStorageClasses, []);
+
+export default useStorageClasses;

frontend/src/k8sTypes.ts

@@ -42,6 +42,14 @@ type DisplayNameAnnotations = Partial<{
   'openshift.io/display-name': string; // the name provided by the user
 }>;
 
+type StorageClassAnnotations = Partial<{
+  // if true, enables any persistent volume claim (PVC) that does not specify a specific storage class to automatically be provisioned.
+  // Only one, if any, StorageClass per cluster can be set as default.
+  'storageclass.kubernetes.io/is-default-class': 'true' | 'false';
+  // the description provided by the cluster admin or Container Storage Interface (CSI) provider
+  'kubernetes.io/description': string;
+}>;
+
 export type K8sDSGResource = K8sResourceCommon & {
   metadata: {
     annotations?: DisplayNameAnnotations &
@@ -253,6 +261,18 @@ export type PersistentVolumeClaimKind = K8sResourceCommon & {
   } & Record<string, unknown>;
 };
 
+export type StorageClassKind = K8sResourceCommon & {
+  metadata: {
+    annotations?: StorageClassAnnotations;
+    name: string;
+  };
+  provisioner: string;
+  parameters?: string;
+  reclaimPolicy: string;
+  volumeBindingMode: string;
+  allowVolumeExpansion?: boolean;
+};
+
 export type PodSpec = {
   affinity?: PodAffinity;
   enableServiceLinks?: boolean;
@@ -822,6 +842,7 @@ export type DashboardConfigKind = K8sResourceCommon & {
     notebookController?: {
       enabled: boolean;
       pvcSize?: string;
+      storageClassName?: string;
       notebookNamespace?: string;
       notebookTolerationSettings?: TolerationSettings;
     };

frontend/src/pages/projects/screens/detail/storage/ManageStorageModal.tsx

@@ -84,7 +84,7 @@ const ManageStorageModal: React.FC<AddStorageModalProps> = ({ existingData, isOp
       }
       return;
     }
-    const createdPvc = await createPvc(createData, namespace, { dryRun });
+    const createdPvc = await createPvc(createData, namespace, undefined, { dryRun });
     if (notebookName) {
       await attachNotebookPVC(notebookName, namespace, createdPvc.metadata.name, mountPath.value, {
         dryRun,

frontend/src/pages/projects/screens/spawner/SpawnerFooter.tsx

@@ -19,6 +19,7 @@ import { useUser } from '~/redux/selectors';
 import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';
 import { AppContext } from '~/app/AppContext';
 import { fireTrackingEvent } from '~/utilities/segmentIOUtils';
+import usePreferredStorageClass from '~/pages/projects/screens/spawner/storage/usePreferredStorageClass';
 import {
   createPvcDataForNotebook,
   createConfigMapsAndSecretsForNotebook,
@@ -44,12 +45,14 @@ const SpawnerFooter: React.FC<SpawnerFooterProps> = ({
   canEnablePipelines,
 }) => {
   const [errorMessage, setErrorMessage] = React.useState('');
+
   const {
     dashboardConfig: {
       spec: { notebookController },
     },
   } = React.useContext(AppContext);
   const tolerationSettings = notebookController?.notebookTolerationSettings;
+  const storageClass = usePreferredStorageClass();
   const {
     notebooks: { data },
     dataConnections: { data: existingDataConnections },
@@ -208,7 +211,11 @@ const SpawnerFooter: React.FC<SpawnerFooterProps> = ({
         ? [dataConnection.existing]
         : [];
 
-    const pvcDetails = await createPvcDataForNotebook(projectName, storageData).catch(handleError);
+    const pvcDetails = await createPvcDataForNotebook(
+      projectName,
+      storageData,
+      storageClass?.metadata.name,
+    ).catch(handleError);
     const envFrom = await createConfigMapsAndSecretsForNotebook(projectName, [
       ...envVariables,
       ...newDataConnection,

frontend/src/pages/projects/screens/spawner/service.ts

@@ -30,13 +30,14 @@ import { fetchNotebookEnvVariables } from './environmentVariables/useNotebookEnv
 export const createPvcDataForNotebook = async (
   projectName: string,
   storageData: StorageData,
+  storageClassName?: string,
 ): Promise<{ volumes: Volume[]; volumeMounts: VolumeMount[] }> => {
   const { storageType } = storageData;
 
   const { volumes, volumeMounts } = getVolumesByStorageData(storageData);
 
   if (storageType === StorageType.NEW_PVC) {
-    const pvc = await createPvc(storageData.creating, projectName);
+    const pvc = await createPvc(storageData.creating, projectName, storageClassName);
     const newPvcName = pvc.metadata.name;
     volumes.push({ name: newPvcName, persistentVolumeClaim: { claimName: newPvcName } });
     volumeMounts.push({ mountPath: ROOT_MOUNT_PATH, name: newPvcName });
@@ -68,7 +69,7 @@ export const replaceRootVolumesForNotebook = async (
     };
     replacedVolumeMount = { name: existingName, mountPath: ROOT_MOUNT_PATH };
   } else {
-    const pvc = await createPvc(storageData.creating, projectName, { dryRun });
+    const pvc = await createPvc(storageData.creating, projectName, undefined, { dryRun });
     const newPvcName = pvc.metadata.name;
     replacedVolume = { name: newPvcName, persistentVolumeClaim: { claimName: newPvcName } };
     replacedVolumeMount = { mountPath: ROOT_MOUNT_PATH, name: newPvcName };