Fixes visuals of unsupported serving runtime message to match mocks

alexcreasy · Jun 12, 2024 · c29c877 · c29c877
1 parent 95c5fdd
commit c29c877
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/modelMetrics.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/modelMetrics.cy.ts
@@ -688,7 +688,7 @@ describe.only('KServe performance metrics', () => {
     modelMetricsKserve.findInvalidDefinitionError().should('be.visible');
   });
 
-  it.only('should display 2 graphs with the given config', () => {
+  it('should display 2 graphs with the given config', () => {
     initIntercepts({
       disableBiasMetrics: false,
       disablePerformanceMetrics: false,

diff --git a/frontend/src/concepts/metrics/kserve/KserveMetricsContext.tsx b/frontend/src/concepts/metrics/kserve/KserveMetricsContext.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import {
   Bullseye,
   EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
   PageSectionVariants,
   Spinner,
@@ -109,10 +111,17 @@ export const KserveMetricsContextProvider = conditionalArea<KserveMetricsContext
   if (!supported) {
     return (
       <EmptyState>
-        <EmptyStateIcon icon={CubesIcon} />
-        <Title headingLevel="h4" size="lg" data-testid="kserve-metrics-runtime-unsupported">
-          Metrics are unsupported for this serving runtime.
-        </Title>
+        <EmptyStateHeader
+          data-testid="kserve-metrics-runtime-unsupported"
+          titleText="Metrics not supported"
+          headingLevel="h4"
+          icon={<EmptyStateIcon icon={CubesIcon} />}
+        />
+        <EmptyStateBody>
+          {modelName} is using a custom serving runtime. Metrics are only supported for models
+          served via a pre-installed runtime when the single-model serving platform is enabled for a
+          project.
+        </EmptyStateBody>
       </EmptyState>
     );
   }