Edge Model Registry - Sidebar and EmptyState

docs/dashboard-config.md

@@ -47,6 +47,7 @@ spec:
     disableModelServing: false
     disableProjectSharing: false
     disableCustomServingRuntimes: false
+    disableEdge: false
     modelMetricsNamespace: ''
 ```
 
@@ -136,6 +137,7 @@ spec:
     disableModelServing: true
     disableProjectSharing: true
     disableCustomServingRuntimes: false
+    disableEdge: true
     modelMetricsNamespace: ''
   notebookController:
     enabled: true

frontend/src/__mocks__/mockDashboardConfig.ts

@@ -13,6 +13,7 @@ type MockDashboardConfigType = {
   disablePipelines?: boolean;
   disableModelServing?: boolean;
   disableCustomServingRuntimes?: boolean;
+  disableEdge?: boolean;
 };
 
 export const mockDashboardConfig = ({
@@ -28,6 +29,7 @@ export const mockDashboardConfig = ({
   disableModelServing = false,
   disableCustomServingRuntimes = false,
   disablePipelines = false,
+  disableEdge = false,
 }: MockDashboardConfigType): DashboardConfigKind => ({
   apiVersion: 'opendatahub.io/v1alpha',
   kind: 'OdhDashboardConfig',
@@ -55,6 +57,7 @@ export const mockDashboardConfig = ({
       disablePipelines,
       modelMetricsNamespace: 'test-project',
       disableProjectSharing: false,
+      disableEdge,
     },
     notebookController: {
       enabled: true,

frontend/src/__tests__/integration/pages/edge/EdgeModels.spec.ts

@@ -0,0 +1,9 @@
+import { test } from '@playwright/test';
+import { navigateToStory } from '~/__tests__/integration/utils';
+
+test('Empty State No models in Registry', async ({ page }) => {
+  await page.goto(navigateToStory('pages-edge-edgemodels', 'empty-state-no-models-in-registry'));
+
+  // wait for page to load
+  await page.waitForSelector('text=No models added');
+});

frontend/src/__tests__/integration/pages/edge/EdgeModels.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StoryFn, StoryObj } from '@storybook/react';
+import EdgeModels from '~/pages/edge/EdgeModels';
+
+export default {
+  component: EdgeModels,
+};
+
+const Template: StoryFn<typeof EdgeModels> = (args) => <EdgeModels {...args} />;
+
+export const EmptyStateNoModelsInRegistry: StoryObj = {
+  render: Template,
+};

frontend/src/app/AppRoutes.tsx

@@ -18,7 +18,7 @@ const ModelServingRoutes = React.lazy(() => import('../pages/modelServing/ModelS
 const NotebookController = React.lazy(
   () => import('../pages/notebookController/NotebookController'),
 );
-
+const EdgeModelsRoutes = React.lazy(() => import('../pages/edge/EdgeModelsRoutes'));
 const GlobalPipelinesRoutes = React.lazy(() => import('../pages/pipelines/GlobalPipelinesRoutes'));
 const GlobalPipelineRunsRoutes = React.lazy(
   () => import('../pages/pipelines/GlobalPipelineRunsRoutes'),
@@ -80,7 +80,7 @@ const AppRoutes: React.FC = () => {
             <Route path="/groupSettings" element={<GroupSettingsPage />} />
           </>
         )}
-
+        <Route path="/edge/*" element={<EdgeModelsRoutes />} />
         <Route path="*" element={<NotFound />} />
       </Routes>
     </React.Suspense>

frontend/src/concepts/areas/const.ts

@@ -42,4 +42,7 @@ export const SupportedAreasStateMap: SupportedAreasState = {
     requiredComponents: [StackComponent.WORKBENCHES],
     reliantAreas: [SupportedArea.DS_PROJECTS_VIEW],
   },
+  [SupportedArea.EDGE]: {
+    featureFlags: ['disableEdge'],
+  },
 };

frontend/src/concepts/areas/types.ts

@@ -36,6 +36,9 @@ export enum SupportedArea {
   CUSTOM_RUNTIMES = 'custom-serving-runtimes',
   K_SERVE = 'kserve',
   MODEL_MESH = 'model-mesh',
+
+  /* Edge */
+  EDGE = 'edge',
 }
 
 /** Components deployed by the Operator. Part of the DSC Status. */

frontend/src/k8sTypes.ts

@@ -740,6 +740,7 @@ export type DashboardCommonConfig = {
   disableCustomServingRuntimes: boolean;
   modelMetricsNamespace: string;
   disablePipelines: boolean;
+  disableEdge: boolean;
 };
 
 export type OperatorStatus = {

frontend/src/pages/edge/EdgeModels.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import ApplicationsPage from '~/pages/ApplicationsPage';
+import EmptyEdgeModels from './EmptyEdgeModels';
+
+const EdgeModels: React.FC = () => (
+  <ApplicationsPage
+    title="Models"
+    description={''}
+    loaded={true}
+    empty={true}
+    emptyStatePage={<EmptyEdgeModels />}
+  />
+);
+
+export default EdgeModels;

frontend/src/pages/edge/EdgeModelsRoutes.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import EdgeModels from './EdgeModels';
+
+const EdgeModelsRoutes: React.FC = () => (
+  <Routes>
+    <Route path="/models" element={<EdgeModels />} />
+  </Routes>
+);
+
+export default EdgeModelsRoutes;

frontend/src/pages/edge/EmptyEdgeModels.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  PageSection,
+  Title,
+} from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons';
+
+const EmptyEdgeModels: React.FC = () => (
+  <PageSection isFilled>
+    <EmptyState>
+      <EmptyStateIcon icon={PlusCircleIcon} />
+      <Title headingLevel="h1" size="lg" style={{ marginBottom: '10px' }}>
+        No models added
+      </Title>
+      <EmptyStateBody style={{ margin: 'auto', width: '50%' }}>
+        To get started, add a model. Adding a model will also initiate a pipeline that will build
+        the model and its dependencies into a container image and save that image in a container
+        image registry.
+      </EmptyStateBody>
+    </EmptyState>
+  </PageSection>
+);
+
+export default EmptyEdgeModels;

frontend/src/utilities/NavData.tsx

@@ -90,6 +90,15 @@ const useDSPipelinesNav = (): NavDataItem[] => {
   ];
 };
 
+const useEdgeMVPNav = (): NavDataItem[] =>
+  useAreaCheck(SupportedArea.EDGE, [
+    {
+      id: 'edgemvp',
+      group: { id: 'edge', title: 'Edge MVP' },
+      children: [{ id: 'edge-model-registry', label: 'Models', href: '/edge/models' }],
+    },
+  ]);
+
 const useModelServingNav = (): NavDataItem[] =>
   useAreaCheck(SupportedArea.MODEL_SERVING, [
     { id: 'modelServing', label: 'Model Serving', href: '/modelServing' },
@@ -162,6 +171,7 @@ export const useBuildNavData = (): NavDataItem[] => [
   ...useDSProjectsNav(),
   ...useDSPipelinesNav(),
   ...useModelServingNav(),
+  ...useEdgeMVPNav(),
   ...useResourcesNav(),
   ...useSettingsNav(),
 ];

manifests/crd/odhdashboardconfigs.opendatahub.io.crd.yaml

@@ -53,6 +53,8 @@ spec:
                       type: string
                     disablePipelines:
                       type: boolean
+                    disableEdge:
+                      type: boolean
                 groupsConfig:
                   type: object
                   required:

manifests/overlays/odhdashboardconfig/odh-dashboard-config.yaml

@@ -18,6 +18,7 @@ spec:
     disableModelServing: true
     disableProjectSharing: true
     disableCustomServingRuntimes: true
+    disableEdge: true
     modelMetricsNamespace: ''
   notebookController:
     enabled: true