View existing llmiscvconfig deployments (opendatahub-io#6800)

* Update modelServingSelectFieldData type

* Load existing llmconfig deployment

* View existing llmiscvconfig deployments

* Add cypress test

Author: emilys314

frontend/src/__mocks__/mockLLMInferenceServiceConfigK8sResource.ts

@@ -9,6 +9,7 @@ type MockLLMInferenceServiceConfigType = {
   runtimeVersion?: string;
   modelUri?: string;
   modelName?: string;
+  templateName?: string;
 };
 
 export const mockLLMInferenceServiceConfigK8sResource = ({
@@ -20,6 +21,7 @@ export const mockLLMInferenceServiceConfigK8sResource = ({
   runtimeVersion = 'v0.9.1',
   modelUri = 'hf://test/model',
   modelName = 'test-model',
+  templateName,
 }: MockLLMInferenceServiceConfigType): LLMInferenceServiceConfigKind => ({
   apiVersion: 'serving.kserve.io/v1alpha1',
   kind: 'LLMInferenceServiceConfig',
@@ -32,6 +34,7 @@ export const mockLLMInferenceServiceConfigK8sResource = ({
       ...(recommendedAccelerators
         ? { 'opendatahub.io/recommended-accelerators': recommendedAccelerators }
         : {}),
+      ...(templateName ? { 'opendatahub.io/template-name': templateName } : {}),
     },
     labels: {
       'opendatahub.io/config-type': configType,

frontend/src/__mocks__/mockLLMInferenceServiceK8sResource.ts

@@ -20,6 +20,7 @@ type MockLLMInferenceServiceConfigType = {
   isNonDashboardItem?: boolean;
   modelType?: ServingRuntimeModelType;
   isStopped?: boolean;
+  baseRefs?: { name?: string }[];
 };
 
 export const mockLLMInferenceServiceK8sResource = ({
@@ -36,6 +37,7 @@ export const mockLLMInferenceServiceK8sResource = ({
   url,
   addresses,
   isStopped = false,
+  baseRefs,
 }: MockLLMInferenceServiceConfigType): LLMInferenceServiceKind => ({
   apiVersion: 'serving.kserve.io/v1alpha1',
   kind: 'LLMInferenceService',
@@ -59,6 +61,7 @@ export const mockLLMInferenceServiceK8sResource = ({
     uid: genUID('llm-service'),
   },
   spec: {
+    ...(baseRefs && { baseRefs }),
     model: {
       name: modelName,
       uri: modelUri,

packages/cypress/cypress/tests/mocked/modelServing/modelServingLlmd.cy.ts

@@ -119,6 +119,10 @@ const initIntercepts = ({
     mockK8sResourceList([mockProjectK8sResource({ enableKServe: true })]),
   );
   cy.interceptK8sList(LLMInferenceServiceModel, mockK8sResourceList(llmInferenceServices));
+  cy.interceptK8sList(
+    { model: LLMInferenceServiceConfigModel, ns: 'test-project' },
+    mockK8sResourceList([]),
+  );
   cy.interceptK8sList(InferenceServiceModel, mockK8sResourceList(inferenceServices));
   cy.interceptK8sList(ServingRuntimeModel, mockK8sResourceList(servingRuntimes));
 
@@ -630,9 +634,18 @@ describe('Model Serving LLMD', () => {
     });
   });
 
-  describe('Deploy vLLM using LLMInferenceServiceConfig', () => {
+  describe('vLLM using LLMInferenceServiceConfig', () => {
     const initVLLMOnMaaSIntercepts = () => {
-      initIntercepts({});
+      initIntercepts({
+        llmInferenceServices: [
+          mockLLMInferenceServiceK8sResource({
+            name: 'test-vllm-gpu',
+            displayName: 'GPU vLLM Deployment',
+            baseRefs: [{ name: 'test-vllm-gpu' }],
+            modelType: ServingRuntimeModelType.GENERATIVE,
+          }),
+        ],
+      });
 
       // Override config to enable vLLMDeploymentOnMaaS
       cy.interceptOdh(
@@ -652,19 +665,63 @@ describe('Model Serving LLMD', () => {
         mockK8sResourceList([
           mockLLMInferenceServiceConfigK8sResource({
             name: 'vllm-gaudi-config',
-            displayName: 'vLLM on Gaudi',
+            displayName: 'vLLM on Gaudi LLMInferenceServiceConfig',
             runtimeVersion: 'v0.9.1',
           }),
           mockLLMInferenceServiceConfigK8sResource({
             name: 'vllm-gpu-config',
-            displayName: 'vLLM on GPU',
+            displayName: 'vLLM on GPU LLMInferenceServiceConfig',
+            runtimeVersion: 'v0.8.2',
+          }),
+        ]),
+      );
+
+      // Child config in project namespace — linked to the IS via matching name
+      cy.interceptK8sList(
+        { model: LLMInferenceServiceConfigModel, ns: 'test-project' },
+        mockK8sResourceList([
+          mockLLMInferenceServiceConfigK8sResource({
+            name: 'test-vllm-gpu',
+            namespace: 'test-project',
+            displayName: 'vLLM on GPU LLMInferenceServiceConfig',
             runtimeVersion: 'v0.8.2',
+            templateName: 'vllm-gpu-config',
           }),
         ]),
       );
+
+      cy.intercept('PUT', '**/llminferenceservices/test-vllm-gpu*', (req) => {
+        req.reply({ statusCode: 200, body: req.body });
+      }).as('updateLLMInferenceService');
     };
 
-    it('should show LLM config options when generative model type is selected with vLLMDeploymentOnMaaS enabled', () => {
+    it('should display serving runtime name and version, then pre-fill when editing', () => {
+      initVLLMOnMaaSIntercepts();
+
+      modelServingGlobal.visit('test-project');
+
+      // Verify the table shows the serving runtime name and version label
+      const row = modelServingGlobal.getDeploymentRow('GPU vLLM Deployment');
+      row.findServingRuntime().should('contain.text', 'vLLM on GPU LLMInferenceServiceConfig');
+      row.findServingRuntimeVersionLabel().should('contain.text', 'v0.8.2');
+
+      // Open the edit wizard and verify the Serving runtime field is pre-filled on step 2
+      modelServingGlobal.getModelRow('GPU vLLM Deployment').findKebabAction('Edit').click();
+
+      // Step 1: Model source — select URI, enter the model location, and proceed
+      modelServingWizardEdit.findModelLocationSelectOption(ModelLocationSelectOption.URI).click();
+      modelServingWizardEdit.findUrilocationInput().type('hf://facebook/opt-125m');
+      modelServingWizardEdit.findSaveConnectionCheckbox().click();
+      modelServingWizardEdit.findNextButton().should('be.enabled').click();
+
+      // Step 2: Verify the Serving runtime selector is pre-filled with the vLLM config name
+      modelServingWizardEdit
+        .findServingRuntimeTemplateSearchSelector()
+        .should('be.disabled')
+        .should('contain.text', 'vLLM on GPU LLMInferenceServiceConfig');
+    });
+
+    it('Deploy vLLM using LLMInferenceServiceConfig', () => {
       initVLLMOnMaaSIntercepts();
 
       modelServingGlobal.visit('test-project');
@@ -686,16 +743,22 @@ describe('Model Serving LLMD', () => {
       modelServingWizard
         .findGlobalScopedTemplateOption('Distributed inference with llm-d')
         .should('exist');
-      modelServingWizard.findGlobalScopedTemplateOption('vLLM on Gaudi').should('exist');
-      modelServingWizard.findGlobalScopedTemplateOption('vLLM on GPU').should('exist');
+      modelServingWizard
+        .findGlobalScopedTemplateOption('vLLM on Gaudi LLMInferenceServiceConfig')
+        .should('exist');
+      modelServingWizard
+        .findGlobalScopedTemplateOption('vLLM on GPU LLMInferenceServiceConfig')
+        .should('exist');
 
       // Select a vLLM config option
-      modelServingWizard.findGlobalScopedTemplateOption('vLLM on Gaudi').click();
+      modelServingWizard
+        .findGlobalScopedTemplateOption('vLLM on Gaudi LLMInferenceServiceConfig')
+        .click();
 
       // Verify the selected option is displayed
       modelServingWizard
         .findServingRuntimeTemplateSearchSelector()
-        .should('contain.text', 'vLLM on Gaudi');
+        .should('contain.text', 'vLLM on Gaudi LLMInferenceServiceConfig');
     });
   });
 });

packages/kserve/src/deploy.ts

@@ -47,7 +47,7 @@ export const deployKServeDeployment = async (
             project: projectName,
             name: wizardData.k8sNameDesc.data.k8sName.value,
             servingRuntime: serverResource,
-            scope: wizardData.modelServer.data?.scope || '',
+            scope: wizardData.modelServer.data?.selection?.scope,
             templateName: serverResourceTemplateName,
           },
           dryRun,

packages/kserve/src/deployServer.ts

@@ -2,15 +2,15 @@ import { applyK8sAPIOptions } from '@odh-dashboard/internal/api/apiMergeUtils';
 import { ServingRuntimeModel } from '@odh-dashboard/internal/api/index';
 import { getDisplayNameFromK8sResource } from '@odh-dashboard/internal/concepts/k8s/utils';
 import { ServingRuntimeKind, type InferenceServiceKind } from '@odh-dashboard/internal/k8sTypes';
-import type { ModelServerOption } from '@odh-dashboard/model-serving/components/deploymentWizard/fields/ModelServerTemplateSelectField.js';
+import type { ModelServerSelectFieldData } from '@odh-dashboard/model-serving/components/deploymentWizard/fields/ModelServerTemplateSelectField.js';
 import { k8sCreateResource } from '@openshift/dynamic-plugin-sdk-utils';
 import type { KServeDeployment } from './deployments';
 
 type CreatingServingRuntimeObject = {
   project: string;
   servingRuntime: ServingRuntimeKind;
   name: string;
-  scope: string;
+  scope?: string;
   templateName?: string;
 };
 
@@ -24,7 +24,7 @@ const assembleServingRuntime = (data: CreatingServingRuntimeObject): ServingRunt
     'openshift.io/display-name': getDisplayNameFromK8sResource(servingRuntime),
     'opendatahub.io/template-name': templateName ?? servingRuntime.metadata.name,
     'opendatahub.io/template-display-name': getDisplayNameFromK8sResource(servingRuntime),
-    'opendatahub.io/serving-runtime-scope': scope,
+    ...(scope && { 'opendatahub.io/serving-runtime-scope': scope }),
   };
 
   updatedServingRuntime.metadata.annotations = annotations;
@@ -68,22 +68,26 @@ export const applyModelRuntime = (
 export const extractModelServerTemplate = (
   KServeDeployment: KServeDeployment,
   dashboardNamespace?: string,
-): ModelServerOption | null => {
+): ModelServerSelectFieldData | null => {
   const templateDisplayName =
     KServeDeployment.server?.metadata.annotations?.['opendatahub.io/template-display-name'];
   const displayName = KServeDeployment.server?.metadata.annotations?.['openshift.io/display-name'];
   const label = templateDisplayName ?? displayName;
   return KServeDeployment.server
     ? {
-        name: KServeDeployment.server.metadata.annotations?.['opendatahub.io/template-name'] ?? '',
-        namespace:
-          KServeDeployment.server.metadata.annotations?.['opendatahub.io/serving-runtime-scope'] ===
-          'global'
-            ? dashboardNamespace
-            : KServeDeployment.server.metadata.namespace,
-        scope:
-          KServeDeployment.server.metadata.annotations?.['opendatahub.io/serving-runtime-scope'],
-        label,
+        selection: {
+          name:
+            KServeDeployment.server.metadata.annotations?.['opendatahub.io/template-name'] ?? '',
+          namespace:
+            KServeDeployment.server.metadata.annotations?.[
+              'opendatahub.io/serving-runtime-scope'
+            ] === 'global'
+              ? dashboardNamespace
+              : KServeDeployment.server.metadata.namespace,
+          scope:
+            KServeDeployment.server.metadata.annotations?.['opendatahub.io/serving-runtime-scope'],
+          label,
+        },
       }
     : null;
 };

packages/llmd-serving/extensions/extensions.ts

@@ -13,7 +13,8 @@ import type {
 // eslint-disable-next-line no-restricted-syntax
 import { SupportedArea } from '@odh-dashboard/internal/concepts/areas/types';
 import type { AreaExtension } from '@odh-dashboard/plugin-core/extension-points';
-import type { LLMdDeployment } from '../src/types';
+import type { FetchStateObject } from '@odh-dashboard/internal/utilities/useFetch';
+import type { LLMdDeployment, LLMInferenceServiceConfigKind } from '../src/types';
 import type {
   LLMConfigOptionsData,
   LLMConfigOptionsFieldValue,
@@ -24,7 +25,7 @@ export const LLMD_SERVING_ID = 'llmd-serving';
 const extensions: (
   | AreaExtension
   | ModelServingPlatformWatchDeploymentsExtension<LLMdDeployment>
-  | DeployedModelServingDetails<LLMdDeployment>
+  | DeployedModelServingDetails<LLMdDeployment, FetchStateObject<LLMInferenceServiceConfigKind[]>>
   | ModelServingDeploymentFormDataExtension<LLMdDeployment>
   | ModelServingDeleteModal<LLMdDeployment>
   | ModelServingDeploy<LLMdDeployment>
@@ -57,7 +58,12 @@ const extensions: (
     type: 'model-serving.deployed-model/serving-runtime',
     properties: {
       platform: LLMD_SERVING_ID,
-      ServingDetailsComponent: () => import('../src/components/servingRuntime'),
+      dataHook: () =>
+        import('../src/components/ServingDetails').then((m) => m.useServingDetailsData),
+      ServingDetailsComponent: () =>
+        import('../src/components/ServingDetails').then((m) => ({
+          default: m.default,
+        })),
     },
     flags: {
       required: [LLMD_SERVING_ID],

packages/llmd-serving/src/api/LLMInferenceService.ts

@@ -5,7 +5,9 @@ import {
   k8sUpdateResource,
 } from '@openshift/dynamic-plugin-sdk-utils';
 import { applyK8sAPIOptions } from '@odh-dashboard/internal/api/apiMergeUtils';
-import { createPatchesFromDiff } from '@odh-dashboard/internal/api/k8sUtils';
+import { createPatchesFromDiff, groupVersionKind } from '@odh-dashboard/internal/api/k8sUtils';
+import { CustomWatchK8sResult } from '@odh-dashboard/internal/types';
+import useK8sWatchResourceList from '@odh-dashboard/internal/utilities/useK8sWatchResourceList';
 import { LLMInferenceServiceKind, LLMInferenceServiceModel } from '../types';
 
 export const createLLMInferenceService = (
@@ -75,3 +77,20 @@ export const patchLLMInferenceService = (
     ),
   );
 };
+
+export const useWatchLLMInferenceService = (
+  namespace: string,
+  opts?: K8sAPIOptions,
+  labelSelectors?: { [key: string]: string },
+): CustomWatchK8sResult<LLMInferenceServiceKind[]> => {
+  return useK8sWatchResourceList<LLMInferenceServiceKind[]>(
+    {
+      isList: true,
+      groupVersionKind: groupVersionKind(LLMInferenceServiceModel),
+      namespace,
+      ...(labelSelectors && { selector: labelSelectors }),
+    },
+    LLMInferenceServiceModel,
+    opts,
+  );
+};

packages/llmd-serving/src/api/LLMInferenceServiceConfigs.ts

@@ -1,8 +1,15 @@
 import React from 'react';
 import useFetch, { FetchStateObject } from '@odh-dashboard/internal/utilities/useFetch';
 import { k8sListResourceItems } from '@openshift/dynamic-plugin-sdk-utils';
+import useK8sWatchResourceList from '@odh-dashboard/internal/utilities/useK8sWatchResourceList';
+import { groupVersionKind } from '@odh-dashboard/internal/api/k8sUtils';
+import { K8sAPIOptions } from '@odh-dashboard/internal/k8sTypes';
+import { CustomWatchK8sResult } from '@odh-dashboard/internal/types';
 import { LLMInferenceServiceConfigModel, type LLMInferenceServiceConfigKind } from '../types';
 
+/**
+ * @returns Template versions of the LLMInferenceServiceConfigKind[] (filtered on 'opendatahub.io/config-type=accelerator')
+ */
 export const listLLMInferenceServiceConfigs = async (
   namespace: string,
 ): Promise<LLMInferenceServiceConfigKind[]> => {
@@ -17,6 +24,9 @@ export const listLLMInferenceServiceConfigs = async (
   });
 };
 
+/**
+ * @returns Template versions of the LLMInferenceServiceConfigKind[] (filtered on 'opendatahub.io/config-type=accelerator')
+ */
 export const useFetchLLMInferenceServiceConfigs = (
   namespace: string,
 ): FetchStateObject<LLMInferenceServiceConfigKind[]> => {
@@ -26,3 +36,18 @@ export const useFetchLLMInferenceServiceConfigs = (
 
   return useFetch(fetchCallbackPromise, []);
 };
+
+export const useWatchLLMInferenceServiceConfigs = (
+  namespace: string,
+  opts?: K8sAPIOptions,
+): CustomWatchK8sResult<LLMInferenceServiceConfigKind[]> => {
+  return useK8sWatchResourceList<LLMInferenceServiceConfigKind[]>(
+    {
+      isList: true,
+      groupVersionKind: groupVersionKind(LLMInferenceServiceConfigModel),
+      namespace,
+    },
+    LLMInferenceServiceConfigModel,
+    opts,
+  );
+};