Follow-up fixes in Model Deployment modals for Select component

DaoDaoNoCode · Nov 1, 2024 · 9679038 · 9679038
1 parent 40fa17e
commit 9679038
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 33 deletions.
diff --git a/.../modelServing/screens/projects/InferenceServiceModal/InferenceServiceFrameworkSection.tsx b/.../modelServing/screens/projects/InferenceServiceModal/InferenceServiceFrameworkSection.tsx
@@ -18,25 +18,22 @@ type InferenceServiceFrameworkSectionProps = {
   setData: UpdateObjectAtPropAndValue<CreatingInferenceServiceObject>;
   modelContext?: SupportedModelFormats[];
   registeredModelFormat?: string;
+  selectedRuntimeName?: string;
 };
 
 const InferenceServiceFrameworkSection: React.FC<InferenceServiceFrameworkSectionProps> = ({
   data,
   setData,
   modelContext,
   registeredModelFormat,
+  selectedRuntimeName,
 }) => {
   const [modelsContextLoaded, loaded, loadError] = useModelFramework(
     modelContext ? undefined : data.servingRuntimeName,
     data.project,
   );
   const models = modelContext || modelsContextLoaded;
   const { name: dataFormatName, version: dataFormatVersion } = data.format;
-  const selectedDataFormat = models.find((element) =>
-    dataFormatVersion
-      ? element.name === dataFormatName && element.version === dataFormatVersion
-      : element.name === dataFormatName,
-  );
   const placeholderText =
     models.length === 0 ? 'No frameworks available to select' : 'Select a framework';
   if (!modelContext && !loaded && data.servingRuntimeName !== '') {
@@ -65,25 +62,24 @@ const InferenceServiceFrameworkSection: React.FC<InferenceServiceFrameworkSectio
             ? `${framework.name} - ${framework.version}`
             : `${framework.name}`;
           return {
-            key: name,
+            // SimpleSelect component will only trigger onChange
+            // when there is only one option and has a different key
+            // We need to make the key unique to make sure it can
+            // be auto-selected when different serving runtimes have the same one option
+            key: `${selectedRuntimeName} - ${name}`,
             label: name,
           };
         })}
         isFullWidth
         toggleLabel={
-          selectedDataFormat && dataFormatVersion
+          dataFormatVersion
             ? `${dataFormatName} - ${dataFormatVersion}`
             : dataFormatName || placeholderText
         }
         onChange={(option) => {
-          const [name, version] = option.split(' - ');
-          const valueSelected = models.find((element) =>
-            version ? element.name === name && element.version === version : element.name === name,
-          );
-
-          if (valueSelected) {
-            setData('format', { name, version });
-          }
+          // De-constructing and omit selected serving runtime name
+          const [, name, version] = option.split(' - ');
+          setData('format', { name, version });
         }}
       />
       {registeredModelFormat && models.length !== 0 && (

diff --git a/...lServing/screens/projects/InferenceServiceModal/InferenceServiceServingRuntimeSection.tsx b/...lServing/screens/projects/InferenceServiceModal/InferenceServiceServingRuntimeSection.tsx
@@ -58,16 +58,17 @@ const InferenceServiceServingRuntimeSection: React.FC<
         }))}
         toggleProps={{ id: 'inference-service-model-selection' }}
         isFullWidth
-        value={data.servingRuntimeName}
         toggleLabel={
           (selectedServingRuntime && getDisplayNameFromK8sResource(selectedServingRuntime)) ||
           placeholderText
         }
         onChange={(option) => {
-          setData('servingRuntimeName', option);
-          setData('format', {
-            name: '',
-          });
+          if (option !== data.servingRuntimeName) {
+            setData('servingRuntimeName', option);
+            setData('format', {
+              name: '',
+            });
+          }
         }}
       />
     </FormGroup>

diff --git a/...pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal.tsx b/...pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal.tsx
@@ -196,6 +196,7 @@ const ManageInferenceServiceModal: React.FC<ManageInferenceServiceModalProps> =
                   setData={setCreateData}
                   modelContext={projectContext?.currentServingRuntime?.spec.supportedModelFormats}
                   registeredModelFormat={registeredModelDeployInfo?.modelFormat}
+                  selectedRuntimeName={createData.servingRuntimeName}
                 />
               </StackItem>
               <StackItem>

diff --git a/...pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTemplateSection.tsx b/...pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTemplateSection.tsx
@@ -18,6 +18,7 @@ type ServingRuntimeTemplateSectionProps = {
   templates: TemplateKind[];
   isEditing?: boolean;
   selectedAcceleratorProfile: AcceleratorProfileFormData;
+  resetModelFormat?: () => void;
 };
 
 const ServingRuntimeTemplateSection: React.FC<ServingRuntimeTemplateSectionProps> = ({
@@ -26,6 +27,7 @@ const ServingRuntimeTemplateSection: React.FC<ServingRuntimeTemplateSectionProps
   templates,
   isEditing,
   selectedAcceleratorProfile,
+  resetModelFormat,
 }) => {
   const filteredTemplates = React.useMemo(
     () =>
@@ -74,7 +76,15 @@ const ServingRuntimeTemplateSection: React.FC<ServingRuntimeTemplateSectionProps
         toggleProps={{ id: 'serving-runtime-template-selection' }}
         value={data.servingRuntimeTemplateName}
         onChange={(name) => {
-          setData('servingRuntimeTemplateName', name);
+          // Avoid onChange function is called twice
+          // In KServe modal, it would set the model framework field to empty if there is only one option
+          if (name !== data.servingRuntimeTemplateName) {
+            setData('servingRuntimeTemplateName', name);
+            // Reset model framework selection when changing the template in KServe modal only
+            if (resetModelFormat) {
+              resetModelFormat();
+            }
+          }
         }}
       />
     </FormGroup>

diff --git a/frontend/src/pages/modelServing/screens/projects/kServeModal/ManageKServeModal.tsx b/frontend/src/pages/modelServing/screens/projects/kServeModal/ManageKServeModal.tsx
@@ -152,18 +152,6 @@ const ManageKServeModal: React.FC<ManageKServeModalProps> = ({
     }
   }, [currentProjectName, setCreateDataInferenceService]);
 
-  // Refresh model format selection when changing serving runtime template selection
-  // Don't affect the edit modal
-  React.useEffect(() => {
-    if (!editInfo?.servingRuntimeEditInfo?.servingRuntime) {
-      setCreateDataInferenceService('format', { name: '' });
-    }
-  }, [
-    createDataServingRuntime.servingRuntimeTemplateName,
-    editInfo?.servingRuntimeEditInfo?.servingRuntime,
-    setCreateDataInferenceService,
-  ]);
-
   // Serving Runtime Validation
   const isDisabledServingRuntime = namespace === '' || actionInProgress;
 
@@ -371,12 +359,14 @@ const ManageKServeModal: React.FC<ManageKServeModalProps> = ({
                     templates={servingRuntimeTemplates || []}
                     isEditing={!!editInfo}
                     selectedAcceleratorProfile={selectedAcceleratorProfile}
+                    resetModelFormat={() => setCreateDataInferenceService('format', { name: '' })}
                   />
                   <InferenceServiceFrameworkSection
                     data={createDataInferenceService}
                     setData={setCreateDataInferenceService}
                     modelContext={servingRuntimeSelected?.spec.supportedModelFormats}
                     registeredModelFormat={registeredModelDeployInfo?.modelFormat}
+                    selectedRuntimeName={servingRuntimeSelected?.metadata.name}
                   />
                   <KServeAutoscalerReplicaSection
                     data={createDataInferenceService}