Modify the nim service deployment form

frontend/src/api/k8s/servingRuntimes.ts

@@ -31,7 +31,7 @@ export const assembleServingRuntime = (
   acceleratorProfileState?: AcceleratorProfileState,
   isModelMesh?: boolean,
 ): ServingRuntimeKind => {
-  const { name: displayName, numReplicas, modelSize, externalRoute, tokenAuth } = data;
+  const { name: displayName, numReplicas, modelSize, externalRoute, tokenAuth, imageName, modelName } = data;
   const createName = isCustomServingRuntimesEnabled
     ? translateDisplayNameForK8s(displayName)
     : getModelServingRuntimeName(namespace);
@@ -121,6 +121,10 @@ export const assembleServingRuntime = (
         volumeMounts.push(getshmVolumeMount());
       }
 
+      if (imageName) {
+        container.image = imageName;
+      }
+
       const containerWithoutResources = _.omit(container, 'resources');
 
       return {
@@ -132,6 +136,14 @@ export const assembleServingRuntime = (
     },
   );
 
+  if (modelName) {
+    if (updatedServingRuntime.spec.supportedModelFormats && updatedServingRuntime.spec.supportedModelFormats.length >= 1) {
+      updatedServingRuntime.spec.supportedModelFormats[0].name = modelName;
+    } else {
+      updatedServingRuntime.spec.supportedModelFormats?.push({ name: modelName });
+    }
+  }
+
   if (isModelMesh) {
     updatedServingRuntime.spec.tolerations = tolerations;
   }

frontend/src/pages/modelServing/screens/projects/NIMServiceModal/DeployNIMServiceModal.tsx

@@ -34,8 +34,7 @@ import NIMModelListSection from '~/pages/modelServing/screens/projects/NIMServic
 import NIMModelDeploymentNameSection from '~/pages/modelServing/screens/projects/NIMServiceModal/NIMModelDeploymentNameSection';
 import ProjectSection from '~/pages/modelServing/screens/projects/InferenceServiceModal/ProjectSection';
 import { DataConnection, NamespaceApplicationCase } from '~/pages/projects/types';
-import { getProjectDisplayName } from '~/concepts/projects/utils';
-import { translateDisplayNameForK8s } from '~/concepts/k8s/utils';
+import { getDisplayNameFromK8sResource, translateDisplayNameForK8s } from '~/concepts/k8s/utils';
 import { useAccessReview } from '~/api';
 import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 import KServeAutoscalerReplicaSection from '../kServeModal/KServeAutoscalerReplicaSection';
@@ -253,7 +252,7 @@ const DeployNIMServiceModal: React.FC<DeployNIMServiceModalProps> = ({
             <ProjectSection
               projectName={
                 (projectContext?.currentProject &&
-                  getProjectDisplayName(projectContext.currentProject)) ||
+                  getDisplayNameFromK8sResource(projectContext.currentProject)) ||
                 editInfo?.inferenceServiceEditInfo?.metadata.namespace ||
                 ''
               }
@@ -268,8 +267,10 @@ const DeployNIMServiceModal: React.FC<DeployNIMServiceModalProps> = ({
           <StackItem>
             <StackItem>
               <NIMModelListSection
-                data={createDataInferenceService}
-                setData={setCreateDataInferenceService}
+                inferenceServiceData={createDataInferenceService}
+                servingRuntimeData={createDataServingRuntime}
+                setInferenceServiceData={setCreateDataInferenceService}
+                setServingRuntimeData={setCreateDataServingRuntime}
                 isEditing={!!editInfo}
               />
             </StackItem>

frontend/src/pages/modelServing/screens/projects/NIMServiceModal/NIMModelListSection.tsx

@@ -2,17 +2,19 @@ import * as React from 'react';
 import { useEffect, useState } from 'react';
 import { FormGroup } from '@patternfly/react-core';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
-import { CreatingInferenceServiceObject } from '~/pages/modelServing/screens/types';
+import { CreatingInferenceServiceObject, CreatingServingRuntimeObject } from '~/pages/modelServing/screens/types';
 import SimpleDropdownSelect from '~/components/SimpleDropdownSelect';
 import { fetchNIMModelNames } from '~/pages/modelServing/screens/projects/utils';
 
 type NIMModelListSectionProps = {
-  data: CreatingInferenceServiceObject;
-  setData: UpdateObjectAtPropAndValue<CreatingInferenceServiceObject>;
+  inferenceServiceData: CreatingInferenceServiceObject;
+  servingRuntimeData: CreatingServingRuntimeObject;
+  setInferenceServiceData: UpdateObjectAtPropAndValue<CreatingInferenceServiceObject>;
+  setServingRuntimeData: UpdateObjectAtPropAndValue<CreatingServingRuntimeObject>;
   isEditing?: boolean;
 };
 
-const NIMModelListSection: React.FC<NIMModelListSectionProps> = ({ data, setData, isEditing }) => {
+const NIMModelListSection: React.FC<NIMModelListSectionProps> = ({ inferenceServiceData, servingRuntimeData, setInferenceServiceData, setServingRuntimeData, isEditing }) => {
   const [options, setOptions] = useState<{ key: string; label: string }[]>([]);
 
   useEffect(() => {
@@ -29,6 +31,19 @@ const NIMModelListSection: React.FC<NIMModelListSectionProps> = ({ data, setData
     getModelNames();
   }, []);
 
+  const getNIMModelName = (name: string) => {
+    return `nvidia-nim-${name}`;
+  };
+
+  const getNIMImageName = (name: string) => {
+    const imageInfo = options.find((option) => option.key === name);
+    if (imageInfo) {
+      return `nvcr.io/nim/meta/${name}:${imageInfo.label.split(' - ')[1]}`;
+    } else {
+      return '';
+    }
+  }
+
   return (
     <FormGroup label="NIM model name" fieldId="nim-model-list-selection" isRequired>
       <SimpleDropdownSelect
@@ -38,10 +53,12 @@ const NIMModelListSection: React.FC<NIMModelListSectionProps> = ({ data, setData
         dataTestId="nim-model-list-selection"
         aria-label="Select NVIDIA model"
         options={options}
-        placeholder={isEditing ? data.name : 'Select NVIDIA model'}
-        value={data.format.name}
+        placeholder={isEditing ? inferenceServiceData.name : 'Select NVIDIA model'}
+        value={inferenceServiceData.format.name}
         onChange={(name) => {
-          setData('format', { name });
+          setServingRuntimeData('modelName', getNIMModelName(name));
+          setServingRuntimeData('imageName', getNIMImageName(name));
+          setInferenceServiceData('format', { name });
         }}
       />
     </FormGroup>

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

@@ -40,6 +40,8 @@ export type CreatingServingRuntimeObject = {
   externalRoute: boolean;
   tokenAuth: boolean;
   tokens: ServingRuntimeToken[];
+  imageName?: string;
+  modelName?: string;
 };
 
 export type ServingRuntimeToken = {