add start/stop toggle and tests

katieperry4 · katieperry4 · commit dc399d17a799 · 2025-06-16T11:32:07.000-04:00
diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts b/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts
@@ -596,6 +596,10 @@ class KServeRow extends ModelMeshRow {
   findProjectScopedLabel() {
     return this.find().findByTestId('project-scoped-label');
   }
+
+  findStateActionToggle() {
+    return this.find().findByTestId('state-action-toggle');
+  }
 }
 
 class InferenceServiceRow extends TableRow {
diff --git a/frontend/src/__tests__/cypress/cypress/pages/projects.ts b/frontend/src/__tests__/cypress/cypress/pages/projects.ts
@@ -48,11 +48,11 @@ class ProjectNotebookRow extends TableRow {
   }
 
   findNotebookStart() {
-    return this.find().findByTestId('notebook-start-action');
+    return this.find().findByTestId('start-action-toggle');
   }
 
   findNotebookStop() {
-    return this.find().findByTestId('notebook-stop-action');
+    return this.find().findByTestId('stop-action-toggle');
   }
 }
 
diff --git a/frontend/src/__tests__/cypress/cypress/pages/workbench.ts b/frontend/src/__tests__/cypress/cypress/pages/workbench.ts
@@ -242,12 +242,8 @@ class NotebookRow extends TableRow {
     this.findHaveNotebookStatusText(timeout).should('have.text', statusValue);
   }
 
-  findNotebookStart() {
-    return this.find().findByTestId('notebook-start-action');
-  }
-
-  findNotebookStop() {
-    return this.find().findByTestId('notebook-stop-action');
+  findNotebookStopToggle() {
+    return this.find().findByTestId('state-action-toggle');
   }
 
   findNotebookStatusModal() {
diff --git a/frontend/src/__tests__/cypress/cypress/tests/e2e/dataScienceProjects/workbenches/testWorkbenchCreation.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/e2e/dataScienceProjects/workbenches/testWorkbenchCreation.cy.ts
@@ -114,7 +114,7 @@ describe('Create, Delete and Edit - Workbench Tests', () => {
 
       // Stop workbench
       cy.step('Stop workbench and validate it has been stopped');
-      notebookRow.findNotebookStop().click();
+      notebookRow.findNotebookStopToggle().should('have.text', 'Stop').click();
       notebookConfirmModal.findStopWorkbenchButton().click();
       notebookRow.expectStatusLabelToBe('Stopped', 120000);
       cy.reload();
diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/runtime/servingRuntimeList.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/runtime/servingRuntimeList.cy.ts
@@ -1324,6 +1324,86 @@ describe('Serving Runtime List', () => {
         .should(be.sortDescending);
     });
 
+    it('Stop and start model', () => {
+      initIntercepts({
+        projectEnableModelMesh: false,
+        disableKServeConfig: false,
+        disableModelMeshConfig: true,
+        inferenceServices: [
+          mockInferenceServiceK8sResource({
+            name: 'test-model',
+            displayName: 'test-model',
+            modelName: 'test-model',
+            isModelMesh: false,
+            activeModelState: 'Loaded',
+          }),
+        ],
+      });
+      projectDetails.visitSection('test-project', 'model-server');
+
+      const kserveRow = modelServingSection.getKServeRow('test-model');
+
+      const stoppedInferenceService = mockInferenceServiceK8sResource({
+        name: 'test-model',
+        displayName: 'test-model',
+        modelName: 'test-model',
+        isModelMesh: false,
+        activeModelState: 'Unknown',
+      });
+      stoppedInferenceService.metadata.annotations = {
+        ...stoppedInferenceService.metadata.annotations,
+        'serving.kserve.io/stop': 'true',
+      };
+
+      cy.intercept(
+        'PATCH',
+        '/api/k8s/apis/serving.kserve.io/v1beta1/namespaces/test-project/inferenceservices/test-model',
+        (req) => {
+          expect(req.body).to.deep.include({
+            op: 'add',
+            path: '/metadata/annotations/serving.kserve.io~1stop',
+            value: 'true',
+          });
+          req.reply(stoppedInferenceService);
+        },
+      ).as('stopModelPatch');
+      cy.interceptK8sList(InferenceServiceModel, mockK8sResourceList([stoppedInferenceService])).as(
+        'getStoppedModel',
+      );
+
+      kserveRow.findStateActionToggle().should('have.text', 'Stop').click();
+      cy.wait(['@stopModelPatch', '@getStoppedModel']);
+      kserveRow.findStateActionToggle().should('have.text', 'Start');
+
+      const runningInferenceService = mockInferenceServiceK8sResource({
+        name: 'test-model',
+        displayName: 'test-model',
+        modelName: 'test-model',
+        isModelMesh: false,
+        activeModelState: 'Loaded',
+      });
+
+      cy.intercept(
+        'PATCH',
+        '/api/k8s/apis/serving.kserve.io/v1beta1/namespaces/test-project/inferenceservices/test-model',
+        (req) => {
+          expect(req.body).to.deep.include({
+            op: 'add',
+            path: '/metadata/annotations/serving.kserve.io~1stop',
+            value: 'false',
+          });
+          req.reply(runningInferenceService);
+        },
+      ).as('startModelPatch');
+      cy.interceptK8sList(InferenceServiceModel, mockK8sResourceList([runningInferenceService])).as(
+        'getStartedModel',
+      );
+
+      kserveRow.findStateActionToggle().should('have.text', 'Start').click();
+      cy.wait(['@startModelPatch', '@getStartedModel']);
+      kserveRow.findStateActionToggle().should('have.text', 'Stop');
+    });
+
     it('Check number of replicas of model', () => {
       initIntercepts({
         projectEnableModelMesh: false,
diff --git a/frontend/src/api/k8s/inferenceServices.ts b/frontend/src/api/k8s/inferenceServices.ts
@@ -6,6 +6,7 @@ import {
   k8sListResource,
   K8sStatus,
   k8sUpdateResource,
+  k8sPatchResource,
 } from '@openshift/dynamic-plugin-sdk-utils';
 import { InferenceServiceModel } from '#~/api/models';
 import { InferenceServiceKind, K8sAPIOptions, KnownLabels } from '#~/k8sTypes';
@@ -361,3 +362,22 @@ export const deleteInferenceService = (
       opts,
     ),
   );
+
+export const patchInferenceServiceStoppedStatus = (
+  inferenceService: InferenceServiceKind,
+  stoppedStatus: 'true' | 'false',
+): Promise<InferenceServiceKind> =>
+  k8sPatchResource({
+    model: InferenceServiceModel,
+    queryOptions: {
+      name: inferenceService.metadata.name,
+      ns: inferenceService.metadata.namespace,
+    },
+    patches: [
+      {
+        op: 'add',
+        path: '/metadata/annotations/serving.kserve.io~1stop',
+        value: stoppedStatus,
+      },
+    ],
+  });
diff --git a/frontend/src/components/StateActionToggle.tsx b/frontend/src/components/StateActionToggle.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Button } from '@patternfly/react-core';
+
+export type ToggleState = {
+  isStarting: boolean;
+  isStopping: boolean;
+  isRunning: boolean;
+  isStopped: boolean;
+};
+
+// Make the component generic, constrained to ToggleState
+export type StateActionToggleProps<T extends ToggleState> = {
+  currentState: T;
+  onStart: () => void;
+  onStop: () => void;
+  isDisabled?: boolean;
+};
+
+const StateActionToggle = <T extends ToggleState>({
+  currentState,
+  onStart,
+  onStop,
+  isDisabled,
+}: StateActionToggleProps<T>): React.ReactElement => {
+  const { isStarting, isRunning, isStopping } = currentState;
+  const actionDisabled = isDisabled || isStopping || isStarting;
+  const runningState = isRunning || isStarting;
+  return (
+    <Button
+      data-testid="state-action-toggle"
+      variant="link"
+      isDisabled={actionDisabled}
+      onClick={runningState ? onStop : onStart}
+      isInline
+    >
+      {runningState ? 'Stop' : 'Start'}
+    </Button>
+  );
+};
+
+export default StateActionToggle;
diff --git a/frontend/src/pages/modelServing/__tests__/utils.spec.ts b/frontend/src/pages/modelServing/__tests__/utils.spec.ts
@@ -4,6 +4,7 @@ import {
   resourcesArePositive,
   setUpTokenAuth,
   isOciModelUri,
+  getModelServingStatus,
 } from '#~/pages/modelServing/utils';
 import { mockServingRuntimeK8sResource } from '#~/__mocks__/mockServingRuntimeK8sResource';
 import { ContainerResources } from '#~/types';
@@ -306,3 +307,29 @@ describe('isOciModelUri', () => {
     expect(isOciModelUri('')).toBe(false);
   });
 });
+
+describe('getModelServingStatus', () => {
+  it('should return correct status when model is running', () => {
+    const inferenceService = mockInferenceServiceK8sResource({});
+    expect(getModelServingStatus(inferenceService)).toEqual({
+      inferenceService,
+      isStopped: false,
+      isRunning: true,
+      isStopping: false,
+      isStarting: false,
+    });
+  });
+
+  it('should return correct status when model is stopped', () => {
+    const inferenceService = mockInferenceServiceK8sResource({});
+    inferenceService.metadata.annotations ??= {};
+    inferenceService.metadata.annotations['serving.kserve.io/stop'] = 'true';
+    expect(getModelServingStatus(inferenceService)).toEqual({
+      inferenceService,
+      isStopped: true,
+      isRunning: false,
+      isStopping: false,
+      isStarting: false,
+    });
+  });
+});
diff --git a/frontend/src/pages/modelServing/screens/global/InferenceServiceTable.tsx b/frontend/src/pages/modelServing/screens/global/InferenceServiceTable.tsx
@@ -84,6 +84,7 @@ const InferenceServiceTable: React.FC<InferenceServiceTableProps> = ({
               columnNames={mappedColumns.map((column) => column.field)}
               onDeleteInferenceService={setDeleteInferenceService}
               onEditInferenceService={setEditInferenceService}
+              refresh={refresh}
             />
           </ResourceTr>
         )}
diff --git a/frontend/src/pages/modelServing/screens/global/InferenceServiceTableRow.tsx b/frontend/src/pages/modelServing/screens/global/InferenceServiceTableRow.tsx
@@ -5,13 +5,15 @@ import ResourceActionsColumn from '#~/components/ResourceActionsColumn';
 import ResourceNameTooltip from '#~/components/ResourceNameTooltip';
 import useModelMetricsEnabled from '#~/pages/modelServing/useModelMetricsEnabled';
 import { InferenceServiceKind, ServingRuntimeKind } from '#~/k8sTypes';
-import { isModelMesh } from '#~/pages/modelServing/utils';
+import { getModelServingStatus, isModelMesh } from '#~/pages/modelServing/utils';
 import { SupportedArea } from '#~/concepts/areas';
 import useIsAreaAvailable from '#~/concepts/areas/useIsAreaAvailable';
 import { getDisplayNameFromK8sResource } from '#~/concepts/k8s/utils';
 import { byName, ProjectsContext } from '#~/concepts/projects/ProjectsContext';
 import { isProjectNIMSupported } from '#~/pages/modelServing/screens/projects/nimUtils';
 import useServingPlatformStatuses from '#~/pages/modelServing/useServingPlatformStatuses';
+import StateActionToggle from '#~/components/StateActionToggle';
+import { patchInferenceServiceStoppedStatus } from '#~/api/k8s/inferenceServices';
 import InferenceServiceEndpoint from './InferenceServiceEndpoint';
 import InferenceServiceProject from './InferenceServiceProject';
 import InferenceServiceStatus from './InferenceServiceStatus';
@@ -24,13 +26,15 @@ type InferenceServiceTableRowProps = {
   isGlobal?: boolean;
   servingRuntime?: ServingRuntimeKind;
   columnNames: string[];
+  refresh?: () => void;
   onDeleteInferenceService: (obj: InferenceServiceKind) => void;
   onEditInferenceService: (obj: InferenceServiceKind) => void;
 };
 
 const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
   obj: inferenceService,
   servingRuntime,
+  refresh = () => undefined,
   onDeleteInferenceService,
   onEditInferenceService,
   isGlobal,
@@ -51,6 +55,16 @@ const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
   const kserveMetricsSupported = modelMetricsEnabled && kserveMetricsEnabled && !modelMesh;
   const displayName = getDisplayNameFromK8sResource(inferenceService);
 
+  const modelServingStatus = getModelServingStatus(inferenceService);
+
+  const onStart = React.useCallback(() => {
+    patchInferenceServiceStoppedStatus(inferenceService, 'false').then(refresh);
+  }, [inferenceService, refresh]);
+
+  const onStop = React.useCallback(() => {
+    patchInferenceServiceStoppedStatus(inferenceService, 'true').then(refresh);
+  }, [inferenceService, refresh]);
+
   return (
     <>
       <Td dataLabel="Name">
@@ -107,6 +121,9 @@ const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
       <Td dataLabel="Status">
         <InferenceServiceStatus inferenceService={inferenceService} isKserve={!modelMesh} />
       </Td>
+      <Td>
+        <StateActionToggle currentState={modelServingStatus} onStart={onStart} onStop={onStop} />
+      </Td>
 
       {columnNames.includes(ColumnField.Kebab) && (
         <Td isActionCell>
diff --git a/frontend/src/pages/modelServing/screens/projects/KServeSection/KServeInferenceServiceTableRow.tsx b/frontend/src/pages/modelServing/screens/projects/KServeSection/KServeInferenceServiceTableRow.tsx
@@ -49,6 +49,7 @@ const KServeInferenceServiceTableRow: React.FC<KServeInferenceServiceTableRowPro
     servingRuntimes: {
       data: { items: servingRuntimes },
     },
+    inferenceServices,
   } = React.useContext(ProjectDetailsContext);
 
   const frameworkName = obj.spec.predictor.model?.modelFormat?.name || '';
@@ -74,6 +75,7 @@ const KServeInferenceServiceTableRow: React.FC<KServeInferenceServiceTableRowPro
           obj={obj}
           columnNames={columnNames}
           servingRuntime={servingRuntime}
+          refresh={inferenceServices.refresh}
           onDeleteInferenceService={() => onDeleteKServe({ inferenceService: obj, servingRuntime })}
           onEditInferenceService={() => onEditKServe({ inferenceService: obj, servingRuntime })}
         />
diff --git a/frontend/src/pages/modelServing/screens/types.ts b/frontend/src/pages/modelServing/screens/types.ts
@@ -1,8 +1,15 @@
 import { AlertVariant } from '@patternfly/react-core';
 import { Connection } from '#~/concepts/connectionTypes/types';
-import { ImagePullSecret, SecretKind, ServingContainer, ServingRuntimeKind } from '#~/k8sTypes';
+import {
+  ImagePullSecret,
+  InferenceServiceKind,
+  SecretKind,
+  ServingContainer,
+  ServingRuntimeKind,
+} from '#~/k8sTypes';
 import { EnvVariableDataEntry } from '#~/pages/projects/types';
 import { ContainerResources } from '#~/types';
+import { ToggleState } from '#~/components/StateActionToggle';
 
 export enum PerformanceMetricType {
   SERVER = 'server',
@@ -30,6 +37,14 @@ export enum InferenceServiceModelState {
   UNKNOWN = 'Unknown',
 }
 
+export type ModelServingState = ToggleState & {
+  inferenceService: InferenceServiceKind;
+  isStopped: boolean;
+  isRunning: boolean;
+  isStopping: boolean;
+  isStarting: boolean;
+};
+
 export type ModelStatus = {
   failedToSchedule: boolean;
   failureMessage?: string | null;
diff --git a/frontend/src/pages/modelServing/utils.ts b/frontend/src/pages/modelServing/utils.ts
@@ -41,6 +41,7 @@ import {
   ServingRuntimeEditInfo,
   ModelServingSize,
   ServingRuntimeToken,
+  ModelServingState,
 } from '#~/pages/modelServing/screens/types';
 import { ModelServingPodSpecOptionsState } from '#~/concepts/hardwareProfiles/useModelServingPodSpecOptionsState';
 
@@ -366,3 +367,16 @@ export const isModelMesh = (inferenceService: InferenceServiceKind): boolean =>
   DeploymentMode.ModelMesh;
 
 export const isOciModelUri = (modelUri?: string): boolean => !!modelUri?.includes('oci://');
+
+export const getModelServingStatus = (
+  inferenceService: InferenceServiceKind,
+): ModelServingState => {
+  const status = inferenceService.metadata.annotations?.['serving.kserve.io/stop'] === 'true';
+  return {
+    inferenceService,
+    isStopped: status,
+    isRunning: !status,
+    isStopping: false,
+    isStarting: false,
+  };
+};
diff --git a/frontend/src/pages/projects/notebook/NotebookStateAction.tsx b/frontend/src/pages/projects/notebook/NotebookStateAction.tsx
diff --git a/frontend/src/pages/projects/screens/detail/notebooks/NotebookTableRow.tsx b/frontend/src/pages/projects/screens/detail/notebooks/NotebookTableRow.tsx
diff --git a/frontend/src/pages/projects/screens/projects/ProjectTableRowNotebookTableRow.tsx b/frontend/src/pages/projects/screens/projects/ProjectTableRowNotebookTableRow.tsx

Original file line number	Diff line number	Diff line change
`@@ -596,6 +596,10 @@ class KServeRow extends ModelMeshRow {`
`596`	`596`	`findProjectScopedLabel() {`
`597`	`597`	`return this.find().findByTestId('project-scoped-label');`
`598`	`598`	`}`
	`599`	`+`
	`600`	`+ findStateActionToggle() {`
	`601`	`+ return this.find().findByTestId('state-action-toggle');`
	`602`	`+ }`
`599`	`603`	`}`
`600`	`604`
`601`	`605`	`class InferenceServiceRow extends TableRow {`
Original file line number	Diff line number	Diff line change
`@@ -48,11 +48,11 @@ class ProjectNotebookRow extends TableRow {`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`findNotebookStart() {`
`51`		`- return this.find().findByTestId('notebook-start-action');`
	`51`	`+ return this.find().findByTestId('start-action-toggle');`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`findNotebookStop() {`
`55`		`- return this.find().findByTestId('notebook-stop-action');`
	`55`	`+ return this.find().findByTestId('stop-action-toggle');`
`56`	`56`	`}`
`57`	`57`	`}`
`58`	`58`
Original file line number	Diff line number	Diff line change
`@@ -242,12 +242,8 @@ class NotebookRow extends TableRow {`
`242`	`242`	`this.findHaveNotebookStatusText(timeout).should('have.text', statusValue);`
`243`	`243`	`}`
`244`	`244`
`245`		`- findNotebookStart() {`
`246`		`- return this.find().findByTestId('notebook-start-action');`
`247`		`- }`
`248`		`-`
`249`		`- findNotebookStop() {`
`250`		`- return this.find().findByTestId('notebook-stop-action');`
	`245`	`+ findNotebookStopToggle() {`
	`246`	`+ return this.find().findByTestId('state-action-toggle');`
`251`	`247`	`}`
`252`	`248`
`253`	`249`	`findNotebookStatusModal() {`