opendatahub-io · openshift-merge-bot · May 16, 2024 · May 9, 2024
diff --git a/backend/src/types.ts b/backend/src/types.ts
@@ -33,6 +33,7 @@ export type DashboardConfig = K8sResourceCommon & {
       disablePerformanceMetrics: boolean;
       disableKServe: boolean;
       disableKServeAuth: boolean;
+      disableKServeMetrics: boolean;
       disableModelMesh: boolean;
       disableAcceleratorProfiles: boolean;
       disablePipelineExperiments: boolean;

diff --git a/backend/src/utils/constants.ts b/backend/src/utils/constants.ts
@@ -58,6 +58,7 @@ export const blankDashboardCR: DashboardConfig = {
       disablePipelines: false,
       disableKServe: false,
       disableKServeAuth: false,
+      disableKServeMetrics: true,
       disableModelMesh: false,
       disableAcceleratorProfiles: false,
       disablePipelineExperiments: true,

diff --git a/docs/dashboard-config.md b/docs/dashboard-config.md
@@ -27,6 +27,7 @@ The following are a list of features that are supported, along with there defaul
 | disableCustomServingRuntimes | false   | Disables Custom Serving Runtimes from the Admin Panel.                                               |
 | disableKServe                | false   | Disables the ability to select KServe as a Serving Platform.                                         |
 | disableKServeAuth            | false   | Disables the ability to use auth in KServe.                                                          |
+| disableKServeMetrics         | true    | Disables the ability to see KServe Metrics.                                                          |
 | disableModelMesh             | false   | Disables the ability to select ModelMesh as a Serving Platform.                                      |
 | disableAcceleratorProfiles   | false   | Disables Accelerator profiles from the Admin Panel.                                                  |
 | disableBiasMetrics           | false   | Disables Model Bias tab from Model Serving metrics.                                                  |
@@ -57,6 +58,7 @@ spec:
     disableProjectSharing: false
     disableCustomServingRuntimes: false
     disableAcceleratorProfiles: false
+    disableKServeMetrics: true
     disableBiasMetrics: false
     disablePerformanceMetrics: false
     disablePipelineExperiments: false
@@ -151,6 +153,7 @@ spec:
     disableProjectSharing: true
     disableCustomServingRuntimes: false
     disableAcceleratorProfiles: true
+    disableKServeMetrics: true
     disableBiasMetrics: false
     disablePerformanceMetrics: false
     disablePipelineExperiments: true

diff --git a/frontend/src/__mocks__/mockDashboardConfig.ts b/frontend/src/__mocks__/mockDashboardConfig.ts
@@ -16,6 +16,7 @@ type MockDashboardConfigType = {
   disableCustomServingRuntimes?: boolean;
   disableKServe?: boolean;
   disableKServeAuth?: boolean;
+  disableKServeMetrics?: boolean;
   disableModelMesh?: boolean;
   disableAcceleratorProfiles?: boolean;
   disablePerformanceMetrics?: boolean;
@@ -42,6 +43,7 @@ export const mockDashboardConfig = ({
   disablePipelines = false,
   disableKServe = false,
   disableKServeAuth = false,
+  disableKServeMetrics = true,
   disableModelMesh = false,
   disableAcceleratorProfiles = false,
   disablePerformanceMetrics = false,
@@ -81,6 +83,7 @@ export const mockDashboardConfig = ({
       disablePerformanceMetrics,
       disableKServe,
       disableKServeAuth,
+      disableKServeMetrics,
       disableModelMesh,
       disableAcceleratorProfiles,
       disablePipelineExperiments,

diff --git a/frontend/src/__tests__/cypress/cypress/e2e/modelServing/ModelServingGlobal.cy.ts b/frontend/src/__tests__/cypress/cypress/e2e/modelServing/ModelServingGlobal.cy.ts
@@ -36,6 +36,7 @@ type HandlersProps = {
   inferenceServices?: InferenceServiceKind[];
   delayInferenceServices?: boolean;
   delayServingRuntimes?: boolean;
+  disableKServeMetrics?: boolean;
 };
 
 const initIntercepts = ({
@@ -46,6 +47,7 @@ const initIntercepts = ({
   inferenceServices = [mockInferenceServiceK8sResource({})],
   delayInferenceServices,
   delayServingRuntimes,
+  disableKServeMetrics,
 }: HandlersProps) => {
   cy.interceptOdh(
     'GET /api/dsc/status',
@@ -58,6 +60,7 @@ const initIntercepts = ({
     mockDashboardConfig({
       disableKServe: disableKServeConfig,
       disableModelMesh: disableModelMeshConfig,
+      disableKServeMetrics,
     }),
   );
   cy.interceptK8sList(ServingRuntimeModel, mockK8sResourceList(servingRuntimes));
@@ -478,6 +481,22 @@ describe('Model Serving Global', () => {
     modelServingGlobal.findDeployModelButton().click();
     cy.findByText('Error creating model server').should('not.exist');
   });
+  it('Navigate to kserve model metrics page only if enabled', () => {
+    initIntercepts({});
+    modelServingGlobal.visit('test-project');
+
+    // Verify initial run rows exist
+    modelServingGlobal.getModelRow('Test Inference Service').should('have.length', 1);
+    modelServingGlobal.getModelMetricLink('Test Inference Service').should('not.exist');
+
+    initIntercepts({ disableKServeMetrics: false });
+    modelServingGlobal.visit('test-project');
+
+    modelServingGlobal.getModelRow('Test Inference Service').should('have.length', 1);
+    modelServingGlobal.getModelMetricLink('Test Inference Service').should('be.visible');
+    modelServingGlobal.getModelMetricLink('Test Inference Service').click();
+    cy.findByTestId('kserve-metrics-page').should('be.visible');
+  });
 
   describe('Table filter and pagination', () => {
     it('filter by name', () => {

diff --git a/frontend/src/__tests__/cypress/cypress/e2e/projects/projectDetails.cy.ts b/frontend/src/__tests__/cypress/cypress/e2e/projects/projectDetails.cy.ts
@@ -26,12 +26,17 @@ import {
   SecretModel,
   ServiceAccountModel,
   TemplateModel,
+  InferenceServiceModel,
+  ServingRuntimeModel,
 } from '~/__tests__/cypress/cypress/utils/models';
+import { mockServingRuntimeK8sResource } from '~/__mocks__/mockServingRuntimeK8sResource';
+import { mockInferenceServiceK8sResource } from '~/__mocks__/mockInferenceServiceK8sResource';
 
 type HandlersProps = {
   isEmpty?: boolean;
   imageStreamName?: string;
   disableKServeConfig?: boolean;
+  disableKServeMetrics?: boolean;
   disableModelConfig?: boolean;
   isEnabled?: string;
   isUnknown?: boolean;
@@ -43,6 +48,7 @@ type HandlersProps = {
 
 const initIntercepts = ({
   disableKServeConfig,
+  disableKServeMetrics,
   disableModelConfig,
   isEmpty = false,
   imageStreamName = 'test-image',
@@ -96,6 +102,7 @@ const initIntercepts = ({
     mockDashboardConfig({
       disableKServe: disableKServeConfig,
       disableModelMesh: disableModelConfig,
+      disableKServeMetrics,
     }),
   );
   if (pipelineServerInstalled) {
@@ -233,6 +240,13 @@ const initIntercepts = ({
 };
 
 describe('Project Details', () => {
+  const servingRuntimes = [mockServingRuntimeK8sResource({})];
+  const inferenceServices = [mockInferenceServiceK8sResource({})];
+  const initModelServingIntercepts = () => {
+    cy.interceptK8sList(ServingRuntimeModel, mockK8sResourceList(servingRuntimes));
+    cy.interceptK8sList(InferenceServiceModel, mockK8sResourceList(inferenceServices));
+  };
+
   describe('Empty project details', () => {
     it('Empty state component in project details', () => {
       initIntercepts({ isEmpty: true });
@@ -271,6 +285,26 @@ describe('Project Details', () => {
       projectDetails.findServingPlatformLabel().should('have.text', 'Single-model serving enabled');
     });
 
+    it('Shows KServe metrics only when available', () => {
+      initIntercepts({ templates: true, disableKServeConfig: false, disableModelConfig: true });
+      initModelServingIntercepts();
+
+      projectDetails.visitSection('test-project', 'model-server');
+      projectDetails.getKserveModelMetricLink('Test Inference Service').should('not.exist');
+
+      initIntercepts({
+        templates: true,
+        disableKServeConfig: false,
+        disableModelConfig: true,
+        disableKServeMetrics: false,
+      });
+      initModelServingIntercepts();
+
+      projectDetails.visitSection('test-project', 'model-server');
+      projectDetails.getKserveModelMetricLink('Test Inference Service').should('be.visible');
+      projectDetails.getKserveModelMetricLink('Test Inference Service').click();
+      cy.findByTestId('kserve-metrics-page').should('be.visible');
+    });
     it('Multi model serving platform is enabled', () => {
       initIntercepts({ templates: true, disableKServeConfig: true, disableModelConfig: false });
       projectDetails.visit('test-project');

diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts b/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts
@@ -61,6 +61,10 @@ class ModelServingGlobal {
     return this.findModelsTable().find(`[data-label=Name]`).contains(name).parents('tr');
   }
 
+  getModelMetricLink(name: string) {
+    return this.findModelsTable().findByTestId(`metrics-link-${name}`);
+  }
+
   findEmptyResults() {
     return cy.findByTestId('no-result-found-title');
   }

diff --git a/frontend/src/__tests__/cypress/cypress/pages/projects.ts b/frontend/src/__tests__/cypress/cypress/pages/projects.ts
@@ -221,6 +221,14 @@ class ProjectDetails {
   findUnsupportedPipelineVersionAlert() {
     return cy.findByTestId('unsupported-pipeline-version-alert');
   }
+
+  private findKserveModelsTable() {
+    return cy.findByTestId('kserve-inference-service-table');
+  }
+
+  getKserveModelMetricLink(name: string) {
+    return this.findKserveModelsTable().findByTestId(`metrics-link-${name}`);
+  }
 }
 
 class ProjectDetailsSettingsTab extends ProjectDetails {

diff --git a/frontend/src/concepts/areas/const.ts b/frontend/src/concepts/areas/const.ts
@@ -37,6 +37,10 @@ export const SupportedAreasStateMap: SupportedAreasState = {
     reliantAreas: [SupportedArea.K_SERVE],
     requiredCapabilities: [StackCapability.SERVICE_MESH, StackCapability.SERVICE_MESH_AUTHZ],
   },
+  [SupportedArea.K_SERVE_METRICS]: {
+    featureFlags: ['disableKServeMetrics'],
+    reliantAreas: [SupportedArea.K_SERVE, SupportedArea.MODEL_SERVING],
+  },
   [SupportedArea.MODEL_MESH]: {
     featureFlags: ['disableModelMesh'],
     requiredComponents: [StackComponent.MODEL_MESH],
@@ -59,7 +63,6 @@ export const SupportedAreasStateMap: SupportedAreasState = {
   },
   [SupportedArea.PERFORMANCE_METRICS]: {
     featureFlags: ['disablePerformanceMetrics'],
-    requiredComponents: [StackComponent.MODEL_MESH], // TODO: remove when KServe support is added
     reliantAreas: [SupportedArea.MODEL_SERVING],
   },
   [SupportedArea.TRUSTY_AI]: {

diff --git a/frontend/src/concepts/areas/types.ts b/frontend/src/concepts/areas/types.ts
@@ -45,6 +45,7 @@ export enum SupportedArea {
   CUSTOM_RUNTIMES = 'custom-serving-runtimes',
   K_SERVE = 'kserve',
   K_SERVE_AUTH = 'kserve-auth',
+  K_SERVE_METRICS = 'kserve-metrics',
   MODEL_MESH = 'model-mesh',
   BIAS_METRICS = 'bias-metrics',
   PERFORMANCE_METRICS = 'performance-metrics',

diff --git a/frontend/src/k8sTypes.ts b/frontend/src/k8sTypes.ts
@@ -1211,6 +1211,7 @@ export type DashboardCommonConfig = {
   disablePerformanceMetrics: boolean;
   disableKServe: boolean;
   disableKServeAuth: boolean;
+  disableKServeMetrics: boolean;
   disableModelMesh: boolean;
   disableAcceleratorProfiles: boolean;
   // TODO Temp feature flag - remove with https://issues.redhat.com/browse/RHOAIENG-3826

diff --git a/frontend/src/pages/modelServing/screens/global/InferenceServiceTableRow.tsx b/frontend/src/pages/modelServing/screens/global/InferenceServiceTableRow.tsx
@@ -6,6 +6,8 @@ import ResourceNameTooltip from '~/components/ResourceNameTooltip';
 import useModelMetricsEnabled from '~/pages/modelServing/useModelMetricsEnabled';
 import { InferenceServiceKind, ServingRuntimeKind } from '~/k8sTypes';
 import { isModelMesh } from '~/pages/modelServing/utils';
+import { SupportedArea } from '~/concepts/areas';
+import useIsAreaAvailable from '~/concepts/areas/useIsAreaAvailable';
 import { getInferenceServiceDisplayName } from './utils';
 import InferenceServiceEndpoint from './InferenceServiceEndpoint';
 import InferenceServiceProject from './InferenceServiceProject';
@@ -31,28 +33,42 @@ const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
   showServingRuntime,
 }) => {
   const [modelMetricsEnabled] = useModelMetricsEnabled();
+  const kserveMetricsEnabled = useIsAreaAvailable(SupportedArea.K_SERVE_METRICS).status;
 
-  const modelMetricsSupported = (modelMetricsInferenceService: InferenceServiceKind) =>
-    modelMetricsEnabled &&
-    modelMetricsInferenceService.metadata.annotations?.['serving.kserve.io/deploymentMode'] ===
-      'ModelMesh';
+  const modelMesh = isModelMesh(inferenceService);
+  const modelMeshMetricsSupported = modelMetricsEnabled && modelMesh;
+  const kserveMetricsSupported = modelMetricsEnabled && kserveMetricsEnabled && !modelMesh;
+
+  const displayName = getInferenceServiceDisplayName(inferenceService);
 
   return (
     <>
       <Td dataLabel="Name">
         <ResourceNameTooltip resource={inferenceService}>
-          {modelMetricsSupported(inferenceService) ? (
+          {modelMeshMetricsSupported ? (
             <Link
+              data-testid={`metrics-link-${displayName}`}
               to={
                 isGlobal
                   ? `/modelServing/${inferenceService.metadata.namespace}/metrics/${inferenceService.metadata.name}`
                   : `/projects/${inferenceService.metadata.namespace}/metrics/model/${inferenceService.metadata.name}`
               }
             >
-              {getInferenceServiceDisplayName(inferenceService)}
+              {displayName}
+            </Link>
+          ) : kserveMetricsSupported ? (
+            <Link
+              data-testid={`metrics-link-${displayName}`}
+              to={
+                isGlobal
+                  ? `/modelServing/${inferenceService.metadata.namespace}/metrics/${inferenceService.metadata.name}`
+                  : `/projects/${inferenceService.metadata.namespace}/metrics/model/${inferenceService.metadata.name}`
+              }
+            >
+              {displayName}
             </Link>
           ) : (
-            getInferenceServiceDisplayName(inferenceService)
+            displayName
           )}
         </ResourceNameTooltip>
       </Td>
@@ -70,20 +86,17 @@ const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
         <InferenceServiceEndpoint
           inferenceService={inferenceService}
           servingRuntime={servingRuntime}
-          isKserve={!isModelMesh(inferenceService)}
+          isKserve={!modelMesh}
         />
       </Td>
       <Td dataLabel="API protocol">
         <InferenceServiceAPIProtocol
           servingRuntime={servingRuntime}
-          isMultiModel={modelMetricsSupported(inferenceService)}
+          isMultiModel={modelMeshMetricsSupported}
         />
       </Td>
       <Td dataLabel="Status">
-        <InferenceServiceStatus
-          inferenceService={inferenceService}
-          isKserve={!isModelMesh(inferenceService)}
-        />
+        <InferenceServiceStatus inferenceService={inferenceService} isKserve={!modelMesh} />
       </Td>
       <Td isActionCell>
         <ResourceActionsColumn

diff --git a/frontend/src/pages/modelServing/screens/metrics/GlobalModelMetricsPage.tsx b/frontend/src/pages/modelServing/screens/metrics/GlobalModelMetricsPage.tsx
@@ -18,6 +18,7 @@ const GlobalModelMetricsPage: React.FC = () => {
           isActive: true,
         },
       ]}
+      model={model}
       type={PerformanceMetricType.MODEL}
     />
   );

diff --git a/frontend/src/pages/modelServing/screens/metrics/MetricsPage.tsx b/frontend/src/pages/modelServing/screens/metrics/MetricsPage.tsx
@@ -9,15 +9,17 @@
 import { PerformanceMetricType } from '~/pages/modelServing/screens/types';
 import { TrustyAIContext } from '~/concepts/trustyai/context/TrustyAIContext';
 import ServerMetricsPage from '~/pages/modelServing/screens/metrics/performance/ServerMetricsPage';
+import { InferenceServiceKind } from '~/k8sTypes';
 import { getBreadcrumbItemComponents } from './utils';
 
 type MetricsPageProps = {
   title: string;
   breadcrumbItems: BreadcrumbItemType[];
   type: PerformanceMetricType;
+  model?: InferenceServiceKind;
 };
 
-const MetricsPage: React.FC<MetricsPageProps> = ({ title, breadcrumbItems, type }) => {
+const MetricsPage: React.FC<MetricsPageProps> = ({ title, breadcrumbItems, type, model }) => {
   const { tab } = useParams();
   const navigate = useNavigate();
 
@@ -46,7 +48,11 @@
         )
       }
     >
-      {type === PerformanceMetricType.SERVER ? <ServerMetricsPage /> : <MetricsPageTabs />}
+      {type === PerformanceMetricType.SERVER ? (
+        <ServerMetricsPage />
+      ) : model ? (
+        <MetricsPageTabs model={model} />
+      ) : null}
     </ApplicationsPage>
   );
 };