Serving runtime version status label and tests

Author: katieperry4

frontend/src/__mocks__/mockServingRuntimeK8sResource.ts

@@ -24,6 +24,7 @@ type MockResourceConfigType = {
   acceleratorProfileNamespace?: string;
   isNonDashboardItem?: boolean;
   version?: string;
+  templateName?: string;
 };
 
 export const mockServingRuntimeK8sResourceLegacy = ({
@@ -136,6 +137,7 @@ export const mockServingRuntimeK8sResource = ({
   hardwareProfileNamespace = undefined,
   isNonDashboardItem = false,
   version,
+  templateName = 'ovms',
 }: MockResourceConfigType): ServingRuntimeKind => ({
   apiVersion: 'serving.kserve.io/v1alpha1',
   kind: 'ServingRuntime',
@@ -150,7 +152,7 @@ export const mockServingRuntimeK8sResource = ({
       'opendatahub.io/accelerator-name': acceleratorName,
       'opendatahub.io/hardware-profile-name': hardwareProfileName,
 
-      'opendatahub.io/template-name': 'ovms',
+      'opendatahub.io/template-name': templateName,
       'openshift.io/display-name': displayName,
       'opendatahub.io/apiProtocol': apiProtocol,
       ...(version && {

frontend/src/__tests__/cypress/cypress/pages/modelServing.ts

@@ -108,10 +108,6 @@ class ModelServingGlobal {
   findServingRuntime(name: string) {
     return this.findModelsTable().find(`[data-label=Serving Runtime]`).contains(name);
   }
-
-  findServingRuntimeVersionLabel() {
-    return cy.findByTestId('serving-runtime-version-label');
-  }
 }
 
 class ServingRuntimeGroup extends Contextual<HTMLElement> {}
@@ -564,6 +560,18 @@ class ModelServingRow extends TableRow {
   findInternalServicePopover() {
     return cy.findByTestId('internal-service-popover');
   }
+
+  findConfirmStopModal() {
+    return cy.findByTestId('stop-model-modal');
+  }
+
+  findConfirmStopModalButton() {
+    return this.findConfirmStopModal().findByTestId('stop-model-button');
+  }
+
+  findConfirmStopModalCheckbox() {
+    return this.findConfirmStopModal().findByTestId('dont-show-again-checkbox');
+  }
 }
 
 class ModelMeshRow extends ModelServingRow {
@@ -603,6 +611,14 @@ class KServeRow extends ModelMeshRow {
 }
 
 class InferenceServiceRow extends TableRow {
+  findServingRuntimeVersionLabel() {
+    return this.find().findByTestId('serving-runtime-version-label');
+  }
+
+  findServingRuntimeVersionStatusLabel() {
+    return this.find().findByTestId('serving-runtime-version-status-label');
+  }
+
   findStatusTooltip() {
     return this.find()
       .findByTestId('status-tooltip')

frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/modelServingGlobal.cy.ts

@@ -28,7 +28,12 @@ import {
   ServingRuntimeModel,
   TemplateModel,
 } from '#~/__tests__/cypress/cypress/utils/models';
-import { DeploymentMode, type InferenceServiceKind, type ServingRuntimeKind } from '#~/k8sTypes';
+import {
+  DeploymentMode,
+  type TemplateKind,
+  type InferenceServiceKind,
+  type ServingRuntimeKind,
+} from '#~/k8sTypes';
 import { ServingRuntimePlatform } from '#~/types';
 import { be } from '#~/__tests__/cypress/cypress/utils/should';
 import { asClusterAdminUser } from '#~/__tests__/cypress/cypress/utils/mockUsers';
@@ -63,6 +68,7 @@ type HandlersProps = {
   disableServingRuntimeParamsConfig?: boolean;
   disableProjectScoped?: boolean;
   disableHardwareProfiles?: boolean;
+  servingRuntimesTemplates?: TemplateKind[];
 };
 
 const initIntercepts = ({
@@ -947,19 +953,46 @@ describe('Model Serving Global', () => {
     modelServingGlobal.getModelMetricLink('Test Inference Service').click();
     cy.findByTestId('app-page-title').should('have.text', 'Test Inference Service metrics');
   });
-  it('Display the version label if the annotation is present', () => {
-    const servingRuntimeWithVersion = mockServingRuntimeK8sResource({});
-    servingRuntimeWithVersion.metadata.annotations =
-      servingRuntimeWithVersion.metadata.annotations || {};
-    servingRuntimeWithVersion.metadata.annotations['opendatahub.io/runtime-version'] = '1.2.3';
+  it('Display the version label and status label correctly', () => {
+    const servingRuntimeWithLatestVersion = mockServingRuntimeK8sResource({
+      namespace: 'test-project',
+      name: 'test-inference-service-latest',
+      templateName: 'template-2',
+      version: '1.0.0',
+    });
+    const servingRuntimeWithOutdatedVersion = mockServingRuntimeK8sResource({
+      namespace: 'test-project',
+      name: 'test-inference-service-outdated',
+      templateName: 'template-2',
+      version: '0.5.0',
+    });
+    const inferenceServiceLatest = mockInferenceServiceK8sResource({
+      name: 'test-inference-service-latest',
+      namespace: 'test-project',
+      displayName: 'Latest Model',
+      modelName: 'test-inference-service-latest',
+    });
+    const inferenceServiceOutdated = mockInferenceServiceK8sResource({
+      name: 'test-inference-service-outdated',
+      namespace: 'test-project',
+      displayName: 'Outdated Model',
+      modelName: 'test-inference-service-outdated',
+    });
 
     initIntercepts({
-      servingRuntimes: [servingRuntimeWithVersion],
+      servingRuntimes: [servingRuntimeWithLatestVersion, servingRuntimeWithOutdatedVersion],
+      inferenceServices: [inferenceServiceLatest, inferenceServiceOutdated],
     });
 
-    modelServingGlobal.visit();
-    modelServingGlobal.findServingRuntimeVersionLabel().should('exist');
-    modelServingGlobal.findServingRuntimeVersionLabel().should('contain.text', '1.2.3');
+    modelServingGlobal.visit('test-project');
+
+    const latestRow = modelServingSection.getInferenceServiceRow('Latest Model');
+    latestRow.findServingRuntimeVersionLabel().should('contain.text', '1.0.0');
+    latestRow.findServingRuntimeVersionStatusLabel().should('have.text', 'Latest');
+
+    const outdatedRow = modelServingSection.getInferenceServiceRow('Outdated Model');
+    outdatedRow.findServingRuntimeVersionLabel().should('contain.text', '0.5.0');
+    outdatedRow.findServingRuntimeVersionStatusLabel().should('have.text', 'Outdated');
   });
 
   it('Not display the version label if the annotation is absent', () => {
@@ -969,8 +1002,15 @@ describe('Model Serving Global', () => {
       servingRuntimes: [servingRuntimeWithoutVersion],
     });
 
-    modelServingGlobal.visit();
-    modelServingGlobal.findServingRuntimeVersionLabel().should('not.exist');
+    modelServingGlobal.visit('test-project');
+    modelServingSection
+      .getInferenceServiceRow('Test Inference Service')
+      .findServingRuntimeVersionLabel()
+      .should('not.exist');
+    modelServingSection
+      .getInferenceServiceRow('Test Inference Service')
+      .findServingRuntimeVersionStatusLabel()
+      .should('not.exist');
   });
 
   it('Should display env vars from a valueFrom secret', () => {

frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/runtime/servingRuntimeList.cy.ts

@@ -98,6 +98,7 @@ type HandlersProps = {
   disableProjectScoped?: boolean;
   disableHardwareProfiles?: boolean;
 };
+import { STOP_MODAL_PREFERENCE_KEY } from '#~/pages/modelServing/useStopModalPreference';
 
 const initIntercepts = ({
   disableKServeConfig,
@@ -1340,6 +1341,8 @@ describe('Serving Runtime List', () => {
           }),
         ],
       });
+      cy.clearLocalStorage(STOP_MODAL_PREFERENCE_KEY);
+      cy.window().then((win) => win.localStorage.setItem(STOP_MODAL_PREFERENCE_KEY, 'false'));
       projectDetails.visitSection('test-project', 'model-server');
 
       const kserveRow = modelServingSection.getKServeRow('test-model');
@@ -1373,8 +1376,18 @@ describe('Serving Runtime List', () => {
       );
 
       kserveRow.findStateActionToggle().should('have.text', 'Stop').click();
+      kserveRow.findConfirmStopModal().should('exist');
+      kserveRow.findConfirmStopModalCheckbox().should('exist');
+      kserveRow.findConfirmStopModalCheckbox().should('not.be.checked');
+      kserveRow.findConfirmStopModalCheckbox().click();
+      kserveRow.findConfirmStopModalCheckbox().should('be.checked');
+      kserveRow.findConfirmStopModalButton().click();
       cy.wait(['@stopModelPatch', '@getStoppedModel']);
       kserveRow.findStateActionToggle().should('have.text', 'Start');
+      cy.window().then((win) => {
+        const preference = win.localStorage.getItem(STOP_MODAL_PREFERENCE_KEY);
+        expect(preference).to.equal('true');
+      });
 
       const runningInferenceService = mockInferenceServiceK8sResource({
         name: 'test-model',

frontend/src/pages/modelServing/ModelServingStopModal.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import ConfirmStopModal from '#~/pages/projects/components/ConfirmStopModal';
+import useStopModalPreference from './useStopModalPreference';
+
+type ModelServingStopModalProps = {
+  modelName: string;
+  title: string;
+  onClose: (confirmStatus: boolean) => void;
+};
+
+const ModelServingStopModal: React.FC<ModelServingStopModalProps> = ({
+  modelName,
+  title,
+  onClose,
+}) => {
+  const [dontShowModalValue, setDontShowModalValue] = useStopModalPreference();
+
+  const onBeforeClose = (confirmStatus: boolean) => {
+    if (!confirmStatus) {
+      setDontShowModalValue(false);
+    }
+    onClose(confirmStatus);
+  };
+  const modalActions = [
+    <Button
+      key="confirm"
+      variant="primary"
+      onClick={() => onBeforeClose(true)}
+      data-testid="stop-model-button"
+    >
+      Stop
+    </Button>,
+    <Button
+      key="cancel"
+      variant="secondary"
+      onClick={() => onBeforeClose(false)}
+      data-testid="cancel-stop-model-button"
+    >
+      Cancel
+    </Button>,
+  ];
+  return (
+    <ConfirmStopModal
+      message={
+        <>
+          Are you sure you want to stop <strong>{modelName}</strong>?
+        </>
+      }
+      modalActions={modalActions}
+      onBeforeClose={onBeforeClose}
+      title={title}
+      dataTestId="stop-model-modal"
+      dontShowModalValue={dontShowModalValue}
+      setDontShowModalValue={setDontShowModalValue}
+    />
+  );
+};
+
+export default ModelServingStopModal;

frontend/src/pages/modelServing/customServingRuntimes/useTemplateByName.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { TemplateKind } from '#~/k8sTypes';
+import { useTemplates } from '#~/api';
+import { useDashboardNamespace } from '#~/redux/selectors';
+import { findTemplateByName } from './utils';
+
+export const useTemplateByName = (
+  templateName?: string,
+): [TemplateKind | undefined, boolean, Error | undefined] => {
+  const { dashboardNamespace } = useDashboardNamespace();
+  const [templates, loaded, error] = useTemplates(dashboardNamespace);
+
+  const template = React.useMemo(() => {
+    if (!templateName || !loaded || error) {
+      return undefined;
+    }
+    return findTemplateByName(templates, templateName);
+  }, [templates, templateName, loaded, error]);
+
+  return [template, loaded, error];
+};

frontend/src/pages/modelServing/customServingRuntimes/utils.ts

@@ -140,6 +140,16 @@ export const getServingRuntimeVersion = (
   return resource.metadata.annotations?.['opendatahub.io/runtime-version'] || undefined;
 };
 
+export const getTemplateNameFromServingRuntime = (
+  resource: ServingRuntimeKind,
+): string | undefined => resource.metadata.annotations?.['opendatahub.io/template-name'];
+
+export const findTemplateByName = (
+  templates: TemplateKind[],
+  templateName: string,
+): TemplateKind | undefined =>
+  templates.find((t) => getServingRuntimeNameFromTemplate(t) === templateName);
+
 export const isTemplateKind = (
   resource: ServingRuntimeKind | TemplateKind,
 ): resource is TemplateKind => resource.kind === 'Template';

frontend/src/pages/modelServing/screens/ServingRuntimeVersionStatus.tsx

@@ -0,0 +1,71 @@
+import { Alert, AlertProps, Label, Popover } from '@patternfly/react-core';
+import * as React from 'react';
+import { CheckCircleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons';
+import { ServingRuntimeVersionStatusLabel } from './const';
+
+type ServingRuntimeVersionStatusProps = {
+  isOutdated?: boolean;
+  version: string;
+  templateVersion: string;
+};
+
+const ServingRuntimeVersionStatus: React.FC<ServingRuntimeVersionStatusProps> = ({
+  isOutdated,
+  version,
+  templateVersion,
+}) => {
+  const [isPopoverVisible, setIsPopoverVisible] = React.useState(false);
+  const getPopoverText = ():
+    | Record<string, never>
+    | {
+        title: string;
+        body: React.ReactNode;
+        variant: AlertProps['variant'];
+        footer?: React.ReactNode;
+      } => {
+    if (isOutdated) {
+      return {
+        title: 'Serving runtime outdated',
+        body: (
+          <p>
+            This serving runtime is outdated.
+            <br />
+            <b>Your version:</b> {version}
+            <br />
+            <b>Latest version:</b> {templateVersion}
+          </p>
+        ),
+        variant: 'warning',
+      };
+    }
+    return {
+      title: 'Serving runtime up to date',
+      body: <p>This serving runtime is up to date.</p>,
+      variant: 'success',
+    };
+  };
+  const { title, body, variant } = getPopoverText();
+  return (
+    <>
+      <Popover
+        isVisible={isPopoverVisible}
+        shouldOpen={() => setIsPopoverVisible(true)}
+        shouldClose={() => setIsPopoverVisible(false)}
+        headerContent={<Alert variant={variant} isInline isPlain title={title} />}
+        bodyContent={body}
+      >
+        <Label
+          data-testid="serving-runtime-version-status-label"
+          color={isOutdated ? 'yellow' : 'green'}
+          icon={isOutdated ? <ExclamationTriangleIcon /> : <CheckCircleIcon />}
+          isCompact
+        >
+          {isOutdated
+            ? ServingRuntimeVersionStatusLabel.OUTDATED
+            : ServingRuntimeVersionStatusLabel.LATEST}
+        </Label>
+      </Popover>
+    </>
+  );
+};
+export default ServingRuntimeVersionStatus;

frontend/src/pages/modelServing/screens/const.ts

@@ -72,3 +72,8 @@ export enum ScopedType {
   Project = 'Project-scoped',
   Global = 'Global-scoped',
 }
+
+export enum ServingRuntimeVersionStatusLabel {
+  LATEST = 'Latest',
+  OUTDATED = 'Outdated',
+}