Add Accelerator section in Admin Panel and feature flag

opendatahub-io · Oct 26, 2023 · d162244 · d162244
1 parent c8595db
commit d162244
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 4 deletions.
diff --git a/frontend/src/__mocks__/mockDashboardConfig.ts b/frontend/src/__mocks__/mockDashboardConfig.ts
@@ -54,6 +54,7 @@ export const mockDashboardConfig = ({
       modelMetricsNamespace: 'test-project',
       disablePipelines: false,
       disableProjectSharing: false,
+      disableAccelerators: false,
     },
     notebookController: {
       enabled: true,

diff --git a/frontend/src/app/AppRoutes.tsx b/frontend/src/app/AppRoutes.tsx
@@ -37,6 +37,10 @@ const DependencyMissingPage = React.lazy(
   () => import('../pages/dependencies/DependencyMissingPage'),
 );
 
+const AcceleratorProfile = React.lazy(
+  () => import('../pages/acceleratorProfile/AcceleratorProfile'),
+);
+
 const AppRoutes: React.FC = () => {
   const { isAdmin, isAllowed } = useUser();
 
@@ -76,6 +80,7 @@ const AppRoutes: React.FC = () => {
           <>
             <Route path="/notebookImages" element={<BYONImagesPage />} />
             <Route path="/clusterSettings" element={<ClusterSettingsPage />} />
+            <Route path="/accelerators" element={<AcceleratorProfile />} />
             <Route path="/servingRuntimes/*" element={<CustomServingRuntimeRoutes />} />
             <Route path="/groupSettings" element={<GroupSettingsPage />} />
           </>

diff --git a/frontend/src/pages/acceleratorProfile/AcceleratorProfile.tsx b/frontend/src/pages/acceleratorProfile/AcceleratorProfile.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import {
+  Button,
+  ButtonVariant,
+  Flex,
+  FlexItem,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  EmptyStateBody,
+  PageSection,
+  PageSectionVariants,
+  Title,
+} from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons';
+import ApplicationsPage from '~/pages/ApplicationsPage';
+import useAccelerators from '~/pages/notebookController/screens/server/useAccelerators';
+import { useDashboardNamespace } from '~/redux/selectors';
+
+const description = `Manage accelerator profile settings for users in your organization`;
+
+const AcceleratorProfile: React.FC = () => {
+  const { dashboardNamespace } = useDashboardNamespace();
+  const [accelerators, loaded, loadError] = useAccelerators(dashboardNamespace);
+
+  const isEmpty = !accelerators || accelerators.length === 0;
+
+  const noAcceleratorProfilePageSection = (
+    <PageSection isFilled>
+      <EmptyState variant={EmptyStateVariant.full} data-id="empty-empty-state">
+        <EmptyStateIcon icon={PlusCircleIcon} />
+        <Title headingLevel="h5" size="lg">
+          No available accelerator profiles yet
+        </Title>
+        <EmptyStateBody>
+          {/* eslint-disable-next-line react/no-unescaped-entities */}
+          You don't have any accelerator profiles yet. To get started, please ask your cluster
+          administrator about
+          <br /> the accelerator availability in your cluster and create corresponding profiles in
+          Openshift Data Science.
+        </EmptyStateBody>
+        <Button
+          data-id="display-accelerator-modal-button"
+          variant={ButtonVariant.primary}
+          // eslint-disable-next-line @typescript-eslint/no-empty-function
+          onClick={() => {}}
+        >
+          Add new accelerator profile
+        </Button>
+      </EmptyState>
+    </PageSection>
+  );
+
+  return (
+    <ApplicationsPage
+      title="Accelerator profiles"
+      description={description}
+      loaded={loaded}
+      empty={isEmpty}
+      loadError={loadError}
+      errorMessage="Unable to load accelerator profiles."
+      emptyStatePage={noAcceleratorProfilePageSection}
+    >
+      <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+        <Flex direction={{ default: 'column' }}>
+          <FlexItem>{/* Todo: Create accelerator table */}</FlexItem>
+        </Flex>
+      </PageSection>
+    </ApplicationsPage>
+  );
+};
+
+export default AcceleratorProfile;
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -91,6 +91,7 @@ export type DashboardCommonConfig = {
   disableCustomServingRuntimes: boolean;
   modelMetricsNamespace: string;
   disablePipelines: boolean;
+  disableAccelerators: boolean;
 };
 
 export type NotebookControllerUserState = {

diff --git a/frontend/src/utilities/NavData.tsx b/frontend/src/utilities/NavData.tsx
@@ -53,6 +53,14 @@ const getSettingsNav = (
     });
   }
 
+  if (featureFlagEnabled(dashboardConfig.spec.dashboardConfig.disableAccelerators)) {
+    settingsNavs.push({
+      id: 'accelerator-profile',
+      label: 'Accelerator profiles',
+      href: '/accelerators',
+    });
+  }
+
   if (
     featureFlagEnabled(dashboardConfig.spec.dashboardConfig.disableCustomServingRuntimes) &&
     featureFlagEnabled(dashboardConfig.spec.dashboardConfig.disableModelServing)

diff --git a/manifests/crd/odhdashboardconfigs.opendatahub.io.crd.yaml b/manifests/crd/odhdashboardconfigs.opendatahub.io.crd.yaml
@@ -53,6 +53,8 @@ spec:
                       type: string
                     disablePipelines:
                       type: boolean
+                    disableAccelerators:
+                      type: boolean
                 groupsConfig:
                   type: object
                   required:
@@ -134,10 +136,10 @@ spec:
                     notebookTolerationSettings:
                       type: object
                       properties:
-                          enabled:
-                            type: boolean
-                          key:
-                            type: string
+                        enabled:
+                          type: boolean
+                        key:
+                          type: string
                     storageClassName:
                       type: string
                 templateOrder: