handle kserve in global model serving page

opendatahub-io · Oct 23, 2023 · ce8c1ed · ce8c1ed
1 parent 5c15171
commit ce8c1ed
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 63 deletions.
diff --git a/frontend/src/k8sTypes.ts b/frontend/src/k8sTypes.ts
@@ -100,6 +100,7 @@ export type ServingRuntimeAnnotations = Partial<{
   'opendatahub.io/accelerator-name': string;
   'enable-route': string;
   'enable-auth': string;
+  'modelmesh-enabled': 'true' | 'false';
 }>;
 
 export type BuildConfigKind = K8sResourceCommon & {
@@ -356,6 +357,10 @@ export type InferenceServiceKind = K8sResourceCommon & {
   metadata: {
     name: string;
     namespace: string;
+    annotations?: DisplayNameAnnotations &
+      Partial<{
+        'serving.kserve.io/deploymentMode': 'ModelMesh';
+      }>;
   };
   spec: {
     predictor: {

diff --git a/frontend/src/pages/modelServing/__tests__/utils.spec.ts b/frontend/src/pages/modelServing/__tests__/utils.spec.ts
@@ -1,3 +1,9 @@
+import {
+  mockServingRuntimeK8sResource,
+  mockServingRuntimeK8sResourceLegacy,
+} from '~/__mocks__/mockServingRuntimeK8sResource';
+import { ServingRuntimeKind } from '~/k8sTypes';
+import { getDisplayNameFromServingRuntimeTemplate } from '~/pages/modelServing/customServingRuntimes/utils';
 import { resourcesArePositive } from '~/pages/modelServing/utils';
 import { ContainerResources } from '~/types';
 
@@ -50,3 +56,34 @@ describe('resourcesArePositive', () => {
     expect(resourcesArePositive(resources)).toBe(true);
   });
 });
+
+describe('getDisplayNameFromServingRuntimeTemplate', () => {
+  it('should provide default name if not found', () => {
+    const servingRuntime = getDisplayNameFromServingRuntimeTemplate({
+      metadata: {},
+      spec: {},
+    } as ServingRuntimeKind);
+    expect(servingRuntime).toBe('Unknown Serving Runtime');
+  });
+
+  it('should prioritize name from annotation "opendatahub.io/template-display-name"', () => {
+    const servingRuntime = getDisplayNameFromServingRuntimeTemplate(
+      mockServingRuntimeK8sResource({}),
+    );
+    expect(servingRuntime).toBe('OpenVINO Serving Runtime (Supports GPUs)');
+  });
+
+  it('should fallback first to name from annotation "opendatahub.io/template-name"', () => {
+    const mockServingRuntime = mockServingRuntimeK8sResource({});
+    delete mockServingRuntime.metadata.annotations?.['opendatahub.io/template-display-name'];
+    const servingRuntime = getDisplayNameFromServingRuntimeTemplate(mockServingRuntime);
+    expect(servingRuntime).toBe('ovms');
+  });
+
+  it('should fallback to ovms serverType', () => {
+    const servingRuntime = getDisplayNameFromServingRuntimeTemplate(
+      mockServingRuntimeK8sResourceLegacy({}),
+    );
+    expect(servingRuntime).toBe('OpenVINO Model Server');
+  });
+});
diff --git a/frontend/src/pages/modelServing/screens/global/DeleteInferenceServiceModal.tsx b/frontend/src/pages/modelServing/screens/global/DeleteInferenceServiceModal.tsx
@@ -1,17 +1,21 @@
 import * as React from 'react';
 import DeleteModal from '~/pages/projects/components/DeleteModal';
-import { InferenceServiceKind } from '~/k8sTypes';
-import { deleteInferenceService } from '~/api';
+import { InferenceServiceKind, ServingRuntimeKind } from '~/k8sTypes';
+import { deleteInferenceService, deleteServingRuntime } from '~/api';
 import { getInferenceServiceDisplayName } from './utils';
 
 type DeleteInferenceServiceModalProps = {
   inferenceService?: InferenceServiceKind;
+  servingRuntime?: ServingRuntimeKind;
   onClose: (deleted: boolean) => void;
+  isOpen?: boolean;
 };
 
 const DeleteInferenceServiceModal: React.FC<DeleteInferenceServiceModalProps> = ({
   inferenceService,
+  servingRuntime,
   onClose,
+  isOpen = false,
 }) => {
   const [isDeleting, setIsDeleting] = React.useState(false);
   const [error, setError] = React.useState<Error | undefined>();
@@ -29,16 +33,24 @@ const DeleteInferenceServiceModal: React.FC<DeleteInferenceServiceModalProps> =
   return (
     <DeleteModal
       title="Delete deployed model?"
-      isOpen={!!inferenceService}
+      isOpen={isOpen}
       onClose={() => onBeforeClose(false)}
       submitButtonLabel="Delete deployed model"
       onDelete={() => {
         if (inferenceService) {
           setIsDeleting(true);
-          deleteInferenceService(
-            inferenceService.metadata.name,
-            inferenceService.metadata.namespace,
-          )
+          Promise.all([
+            deleteInferenceService(
+              inferenceService.metadata.name,
+              inferenceService.metadata.namespace,
+            ),
+            servingRuntime
+              ? deleteServingRuntime(
+                  servingRuntime.metadata.name,
+                  servingRuntime.metadata.namespace,
+                )
+              : undefined,
+          ])
             .then(() => {
               onBeforeClose(true);
             })

diff --git a/frontend/src/pages/modelServing/screens/global/InferenceServiceModel.tsx b/frontend/src/pages/modelServing/screens/global/InferenceServiceModel.tsx
diff --git a/frontend/src/pages/modelServing/screens/global/InferenceServiceServingRuntime.tsx b/frontend/src/pages/modelServing/screens/global/InferenceServiceServingRuntime.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ServingRuntimeKind } from '~/k8sTypes';
+import { getDisplayNameFromServingRuntimeTemplate } from '~/pages/modelServing/customServingRuntimes/utils';
+
+type Props = {
+  servingRuntime?: ServingRuntimeKind;
+};
+
+const InferenceServiceServingRuntime: React.FC<Props> = ({ servingRuntime }) => (
+  <>{servingRuntime ? getDisplayNameFromServingRuntimeTemplate(servingRuntime) : 'Unknown'}</>
+);
+
+export default InferenceServiceServingRuntime;
diff --git a/frontend/src/pages/modelServing/screens/global/InferenceServiceTable.tsx b/frontend/src/pages/modelServing/screens/global/InferenceServiceTable.tsx
@@ -24,9 +24,14 @@ const InferenceServiceTable: React.FC<InferenceServiceTableProps> = ({
   toolbarContent,
 }) => {
   const { modelServingProjects: projects } = React.useContext(ProjectsContext);
-  const [deleteInferenceService, setDeleteInferenceService] =
-    React.useState<InferenceServiceKind>();
-  const [editInferenceService, setEditInferenceService] = React.useState<InferenceServiceKind>();
+  const [deleteInferenceService, setDeleteInferenceService] = React.useState<{
+    inferenceService: InferenceServiceKind;
+    servingRuntime?: ServingRuntimeKind;
+  }>();
+  const [editInferenceService, setEditInferenceService] = React.useState<{
+    inferenceService: InferenceServiceKind;
+    servingRuntime?: ServingRuntimeKind;
+  }>();
   const isGlobal = !!clearFilters;
   const mappedColumns = isGlobal
     ? getGlobalInferenceServiceColumns(projects)
@@ -57,13 +62,19 @@ const InferenceServiceTable: React.FC<InferenceServiceTableProps> = ({
               (sr) => sr.metadata.name === is.spec.predictor.model.runtime,
             )}
             isGlobal={isGlobal}
-            onDeleteInferenceService={setDeleteInferenceService}
-            onEditInferenceService={setEditInferenceService}
+            onDeleteInferenceService={(inferenceService, servingRuntime) =>
+              setDeleteInferenceService({ inferenceService, servingRuntime })
+            }
+            onEditInferenceService={(inferenceService, servingRuntime) =>
+              setEditInferenceService({ inferenceService, servingRuntime })
+            }
           />
         )}
       />
       <DeleteInferenceServiceModal
-        inferenceService={deleteInferenceService}
+        isOpen={!!deleteInferenceService?.inferenceService}
+        inferenceService={deleteInferenceService?.inferenceService}
+        servingRuntime={deleteInferenceService?.servingRuntime}
         onClose={(deleted) => {
           if (deleted) {
             refresh();
@@ -72,8 +83,8 @@ const InferenceServiceTable: React.FC<InferenceServiceTableProps> = ({
         }}
       />
       <ManageInferenceServiceModal
-        isOpen={editInferenceService !== undefined}
-        editInfo={editInferenceService}
+        isOpen={!!editInferenceService?.inferenceService}
+        editInfo={editInferenceService?.inferenceService}
         onClose={(edited) => {
           if (edited) {
             refresh();

diff --git a/frontend/src/pages/modelServing/screens/global/InferenceServiceTableRow.tsx b/frontend/src/pages/modelServing/screens/global/InferenceServiceTableRow.tsx
@@ -3,20 +3,27 @@ import { DropdownDirection } from '@patternfly/react-core';
 import { ActionsColumn, Td, Tr } from '@patternfly/react-table';
 import { Link } from 'react-router-dom';
 import ResourceNameTooltip from '~/components/ResourceNameTooltip';
+import { isModelMesh } from '~/pages/modelServing/utils';
 import useModelMetricsEnabled from '~/pages/modelServing/useModelMetricsEnabled';
 import { InferenceServiceKind, ServingRuntimeKind } from '~/k8sTypes';
 import { getInferenceServiceDisplayName } from './utils';
 import InferenceServiceEndpoint from './InferenceServiceEndpoint';
 import InferenceServiceProject from './InferenceServiceProject';
-import InferenceServiceModel from './InferenceServiceModel';
 import InferenceServiceStatus from './InferenceServiceStatus';
+import InferenceServiceServingRuntime from './InferenceServiceServingRuntime';
 
 type InferenceServiceTableRowProps = {
   obj: InferenceServiceKind;
   isGlobal: boolean;
   servingRuntime?: ServingRuntimeKind;
-  onDeleteInferenceService: (obj: InferenceServiceKind) => void;
-  onEditInferenceService: (obj: InferenceServiceKind) => void;
+  onDeleteInferenceService: (
+    inferenceService: InferenceServiceKind,
+    servingRuntime?: ServingRuntimeKind,
+  ) => void;
+  onEditInferenceService: (
+    inferenceService: InferenceServiceKind,
+    servingRuntime?: ServingRuntimeKind,
+  ) => void;
 };
 
 const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
@@ -53,8 +60,8 @@ const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
         </Td>
       )}
       {isGlobal && (
-        <Td dataLabel="Model server">
-          <InferenceServiceModel inferenceService={inferenceService} />
+        <Td dataLabel="Serving Runtime">
+          <InferenceServiceServingRuntime servingRuntime={servingRuntime} />
         </Td>
       )}
       <Td dataLabel="Inference endpoint">
@@ -71,15 +78,23 @@ const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
           dropdownDirection={isGlobal ? DropdownDirection.down : DropdownDirection.up}
           items={[
             {
+              // TODO re-enable edit when supported
+              isDisabled: !isModelMesh(inferenceService),
               title: 'Edit',
               onClick: () => {
-                onEditInferenceService(inferenceService);
+                onEditInferenceService(
+                  inferenceService,
+                  !isModelMesh(inferenceService) ? servingRuntime : undefined,
+                );
               },
             },
             {
               title: 'Delete',
               onClick: () => {
-                onDeleteInferenceService(inferenceService);
+                onDeleteInferenceService(
+                  inferenceService,
+                  !isModelMesh(inferenceService) ? servingRuntime : undefined,
+                );
               },
             },
           ]}

diff --git a/frontend/src/pages/modelServing/screens/global/ModelServingGlobal.tsx b/frontend/src/pages/modelServing/screens/global/ModelServingGlobal.tsx
@@ -12,7 +12,7 @@ const ModelServingGlobal: React.FC = () => {
 
   return (
     <ApplicationsPage
-      title="Model serving"
+      title="Deployed models"
       description="Manage and view the health and performance of your deployed models."
       loaded
       empty={servingRuntimes.length === 0 || inferenceServices.length === 0}

diff --git a/...d/src/pages/modelServing/screens/global/__tests__/InferenceServiceServingRuntime.spec.tsx b/...d/src/pages/modelServing/screens/global/__tests__/InferenceServiceServingRuntime.spec.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import InferenceServiceServingRuntime from '~/pages/modelServing/screens/global/InferenceServiceServingRuntime';
+import { mockServingRuntimeK8sResource } from '~/__mocks__/mockServingRuntimeK8sResource';
+
+describe('InferenceServiceServingRuntime', () => {
+  it('should handle undefined serving runtime', () => {
+    const wrapper = render(<InferenceServiceServingRuntime />);
+    expect(wrapper.container.textContent).toBe('Unknown');
+  });
+
+  it('should display serving runtime name', () => {
+    const mockServingRuntime = mockServingRuntimeK8sResource({});
+    const wrapper = render(<InferenceServiceServingRuntime servingRuntime={mockServingRuntime} />);
+    expect(wrapper.container.textContent).toBe('OpenVINO Serving Runtime (Supports GPUs)');
+  });
+});
diff --git a/frontend/src/pages/modelServing/screens/global/data.ts b/frontend/src/pages/modelServing/screens/global/data.ts
@@ -39,9 +39,9 @@ const COL_ENDPOINT: SortableData<InferenceServiceKind> = {
   sortable: false,
 };
 
-const COL_MODEL_SERVER: SortableData<InferenceServiceKind> = {
-  field: 'model',
-  label: 'Model server',
+const COL_SERVING_RUNTIME: SortableData<InferenceServiceKind> = {
+  field: 'servingRuntime',
+  label: 'Serving runtime',
   width: 20,
   sortable: false,
 };
@@ -62,7 +62,7 @@ export const getGlobalInferenceServiceColumns = (
 ): SortableData<InferenceServiceKind>[] => [
   COL_NAME,
   buildProjectCol(projects),
-  COL_MODEL_SERVER,
+  COL_SERVING_RUNTIME,
   COL_ENDPOINT,
   COL_STATUS,
   COL_KEBAB,

diff --git a/frontend/src/pages/modelServing/utils.ts b/frontend/src/pages/modelServing/utils.ts
@@ -22,6 +22,7 @@ import {
   K8sAPIOptions,
   RoleBindingKind,
   ServingRuntimeKind,
+  InferenceServiceKind,
 } from '~/k8sTypes';
 import { ContainerResources } from '~/types';
 import { getDisplayNameFromK8sResource, translateDisplayNameForK8s } from '~/pages/projects/utils';
@@ -211,3 +212,6 @@ export const isModelServerEditInfoChanged = (
           createData.tokens.map((token) => token.name).sort(),
         ))
     : true;
+
+export const isModelMesh = (inferenceService: InferenceServiceKind) =>
+  inferenceService.metadata.annotations?.['serving.kserve.io/deploymentMode'] === 'ModelMesh';