Submit additional configuration parameters (#3405)

* Submit additional configuration parameters * remove hardcoded debug string * Fix tests Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu> * Fix tests in projects/modelServingNim.cy.ts --------- Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu> Co-authored-by: Mike Turley <mike.turley@alum.cs.umass.edu>
opendatahub-io · Oct 31, 2024 · d1ee01b · d1ee01b
1 parent cdcf189
commit d1ee01b
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 57 deletions.
diff --git a/frontend/src/__mocks__/mockInferenceServiceK8sResource.ts b/frontend/src/__mocks__/mockInferenceServiceK8sResource.ts
@@ -137,6 +137,8 @@ export const mockInferenceServiceK8sResource = ({
           key: secretName,
           path,
         },
+        args: [''],
+        env: [],
       },
     },
   },

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/modelServingGlobal.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/modelServingGlobal.cy.ts
@@ -408,10 +408,12 @@ describe('Model Serving Global', () => {
               modelFormat: { name: 'onnx', version: '1' },
               runtime: 'test-model',
               storage: { key: 'test-secret', path: 'test-model/' },
+              args: [''],
+              env: [],
             },
           },
         },
-      });
+      } satisfies InferenceServiceKind);
     });
 
     // Actaul request
@@ -471,10 +473,12 @@ describe('Model Serving Global', () => {
               modelFormat: { name: 'onnx', version: '1' },
               runtime: 'test-model',
               storage: { key: 'test-secret', path: 'test-model/test-model/' },
+              args: [''],
+              env: [],
             },
           },
         },
-      });
+      } satisfies InferenceServiceKind);
     });
 
     cy.findByText('Error creating model server');

diff --git a/frontend/src/api/k8s/inferenceServices.ts b/frontend/src/api/k8s/inferenceServices.ts
@@ -38,6 +38,8 @@ export const assembleInferenceService = (
     minReplicas,
     tokenAuth,
     externalRoute,
+    servingRuntimeArgs,
+    servingRuntimeEnvVars,
   } = data;
   const name = editName || translateDisplayNameForK8s(data.name);
   const { path, dataConnection } = storage;
@@ -79,6 +81,8 @@ export const assembleInferenceService = (
                 key: dataConnectionKey,
                 path,
               },
+              args: servingRuntimeArgs,
+              env: servingRuntimeEnvVars,
             },
           },
         },
@@ -121,6 +125,8 @@ export const assembleInferenceService = (
                 key: dataConnectionKey,
                 path,
               },
+              args: servingRuntimeArgs,
+              env: servingRuntimeEnvVars,
             },
           },
         },

diff --git a/frontend/src/k8sTypes.ts b/frontend/src/k8sTypes.ts
@@ -492,6 +492,8 @@ export type InferenceServiceKind = K8sResourceCommon & {
           path?: string;
           schemaPath?: string;
         };
+        args?: ServingContainer['args'];
+        env?: ServingContainer['env'];
       };
       maxReplicas?: number;
       minReplicas?: number;

diff --git a/frontend/src/pages/modelServing/screens/projects/kServeModal/EnvironmentVariablesSection.tsx b/frontend/src/pages/modelServing/screens/projects/kServeModal/EnvironmentVariablesSection.tsx
@@ -16,31 +16,44 @@ import {
 } from '@patternfly/react-icons';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
 import { CreatingInferenceServiceObject } from '~/pages/modelServing/screens/types';
+import { ServingContainer } from '~/k8sTypes';
 
 type EnvironmentVariablesSectionType = {
-  data?: CreatingInferenceServiceObject;
+  data: CreatingInferenceServiceObject;
   setData: UpdateObjectAtPropAndValue<CreatingInferenceServiceObject>;
 };
 
-const EnvironmentVariablesSection: React.FC<EnvironmentVariablesSectionType> = () => {
-  const [additionalEnvVars, setAdditionalEnvVars] = React.useState<
-    Array<{ name: string; value: string }>
-  >([]);
+const EnvironmentVariablesSection: React.FC<EnvironmentVariablesSectionType> = ({
+  data,
+  setData,
+}) => {
+  const [additionalEnvVars, setAdditionalEnvVars] = React.useState<ServingContainer['env']>(
+    data.servingRuntimeEnvVars,
+  );
 
   const addEnvVar = () => {
-    setAdditionalEnvVars((prevVars) => [...prevVars, { name: '', value: '' }]);
+    if (additionalEnvVars) {
+      const newVars = [...additionalEnvVars, { name: '', value: '' }];
+      setAdditionalEnvVars(newVars);
+      setData('servingRuntimeEnvVars', newVars);
+    }
   };
 
   const removeEnvVar = (indexToRemove: number) => {
-    setAdditionalEnvVars((prevVars) => prevVars.filter((_, i) => i !== indexToRemove));
+    if (additionalEnvVars) {
+      const newVars = additionalEnvVars.filter((_, i) => i !== indexToRemove);
+      setAdditionalEnvVars(newVars);
+      setData('servingRuntimeEnvVars', newVars);
+    }
   };
 
   const updateEnvVar = (indexToUpdate: number, updates: { name?: string; value?: string }) => {
-    setAdditionalEnvVars((prevVars) => {
-      const newVars = [...prevVars];
-      newVars[indexToUpdate] = { ...prevVars[indexToUpdate], ...updates };
-      return newVars;
-    });
+    if (additionalEnvVars) {
+      const newVars = [...additionalEnvVars];
+      newVars[indexToUpdate] = { ...additionalEnvVars[indexToUpdate], ...updates };
+      setAdditionalEnvVars(newVars);
+      setData('servingRuntimeEnvVars', newVars);
+    }
   };
 
   return (
@@ -60,10 +73,10 @@ const EnvironmentVariablesSection: React.FC<EnvironmentVariablesSectionType> = (
           </Icon>
         </Popover>
       }
-      fieldId="model-server-replicas"
+      fieldId="environment-variables"
     >
       <Stack hasGutter>
-        {additionalEnvVars.map((envVar, index) => (
+        {additionalEnvVars?.map((envVar, index) => (
           <Split hasGutter key={index}>
             <SplitItem isFilled>
               <TextInput

diff --git a/frontend/src/pages/modelServing/screens/projects/kServeModal/ServingRuntimeArgsSection.tsx b/frontend/src/pages/modelServing/screens/projects/kServeModal/ServingRuntimeArgsSection.tsx
@@ -13,48 +13,43 @@ import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
 import { CreatingInferenceServiceObject } from '~/pages/modelServing/screens/types';
 
 type ServingRuntimeArgsSectionType = {
-  data?: CreatingInferenceServiceObject;
+  data: CreatingInferenceServiceObject;
   setData: UpdateObjectAtPropAndValue<CreatingInferenceServiceObject>;
 };
 
-const ServingRuntimeArgsSection: React.FC<ServingRuntimeArgsSectionType> = () => {
-  const [args, setArgs] = React.useState('');
-
-  return (
-    <FormGroup
-      label="Additional serving runtime arguments"
-      labelIcon={
-        <Popover
-          bodyContent={
-            <div>
-              Serving runtime arguments define how the deployed model behaves. Overwriting
-              predefined arguments only affects this model deployment.
-            </div>
-          }
-        >
-          <Icon aria-label="Additional serving runtime arguments info" role="button">
-            <OutlinedQuestionCircleIcon />
-          </Icon>
-        </Popover>
-      }
-      fieldId="model-server-replicas"
-    >
-      <TextArea
-        placeholder={`--arg\n--arg2=value2\n--arg3 value3`}
-        value={args}
-        onChange={(e) => setArgs(e.target.value)}
-        autoResize
-      />
-      <FormHelperText>
-        <HelperText>
-          <HelperTextItem>
-            {`Enter one argument and its values per line. Overwriting the runtime's predefined
+const ServingRuntimeArgsSection: React.FC<ServingRuntimeArgsSectionType> = ({ data, setData }) => (
+  <FormGroup
+    label="Additional serving runtime arguments"
+    labelIcon={
+      <Popover
+        bodyContent={
+          <div>
+            Serving runtime arguments define how the deployed model behaves. Overwriting predefined
+            arguments only affects this model deployment.
+          </div>
+        }
+      >
+        <Icon aria-label="Additional serving runtime arguments info" role="button">
+          <OutlinedQuestionCircleIcon />
+        </Icon>
+      </Popover>
+    }
+    fieldId="serving-runtime-arguments"
+  >
+    <TextArea
+      placeholder={`--arg\n--arg2=value2\n--arg3 value3`}
+      value={data.servingRuntimeArgs?.join('\n')}
+      onChange={(e, srArgs) => setData('servingRuntimeArgs', srArgs.split('\n'))}
+      autoResize
+    />
+    <FormHelperText>
+      <HelperText>
+        <HelperTextItem>
+          {`Enter one argument and its values per line. Overwriting the runtime's predefined
             listening port or model location will likely result in a failed deployment.`}
-          </HelperTextItem>
-        </HelperText>
-      </FormHelperText>
-    </FormGroup>
-  );
-};
-
+        </HelperTextItem>
+      </HelperText>
+    </FormHelperText>
+  </FormGroup>
+);
 export default ServingRuntimeArgsSection;
diff --git a/frontend/src/pages/modelServing/screens/projects/utils.ts b/frontend/src/pages/modelServing/screens/projects/utils.ts
@@ -181,6 +181,8 @@ export const defaultInferenceService: CreatingInferenceServiceObject = {
   externalRoute: false,
   tokenAuth: false,
   tokens: [],
+  servingRuntimeArgs: [''],
+  servingRuntimeEnvVars: [],
 };
 
 export const useCreateInferenceServiceObject = (
@@ -229,6 +231,10 @@ export const useCreateInferenceServiceObject = (
     getInferenceServiceSize(sizes, existingData, existingServingRuntimeData),
   );
 
+  const existingServingRuntimeArgs = existingData?.spec.predictor.model?.args;
+
+  const existingServingRuntimeEnvVars = existingData?.spec.predictor.model?.env;
+
   React.useEffect(() => {
     if (existingName) {
       setCreateData('name', existingName);
@@ -252,6 +258,8 @@ export const useCreateInferenceServiceObject = (
       setCreateData('externalRoute', existingExternalRoute);
       setCreateData('tokenAuth', existingTokenAuth);
       setCreateData('tokens', existingTokens);
+      setCreateData('servingRuntimeArgs', existingServingRuntimeArgs);
+      setCreateData('servingRuntimeEnvVars', existingServingRuntimeEnvVars);
     }
   }, [
     existingName,
@@ -266,6 +274,8 @@ export const useCreateInferenceServiceObject = (
     existingExternalRoute,
     existingTokenAuth,
     existingTokens,
+    existingServingRuntimeArgs,
+    existingServingRuntimeEnvVars,
   ]);
 
   return [...createInferenceServiceState, sizes];

diff --git a/frontend/src/pages/modelServing/screens/types.ts b/frontend/src/pages/modelServing/screens/types.ts
@@ -1,5 +1,5 @@
 import { AlertVariant } from '@patternfly/react-core';
-import { SecretKind, ServingRuntimeKind } from '~/k8sTypes';
+import { SecretKind, ServingContainer, ServingRuntimeKind } from '~/k8sTypes';
 import { DataConnection, EnvVariableDataEntry } from '~/pages/projects/types';
 import { ContainerResources } from '~/types';
 
@@ -67,6 +67,8 @@ export type CreatingInferenceServiceObject = CreatingModelServingObjectCommon &
   maxReplicas: number;
   minReplicas: number;
   labels?: Record<string, string>;
+  servingRuntimeArgs?: ServingContainer['args'];
+  servingRuntimeEnvVars?: ServingContainer['env'];
 };
 
 export type CreatingModelServingObjectCommon = {
-Original file line number
+Diff line change
@@ Expand Up / @@ -137,6 +137,8 @@ export const mockInferenceServiceK8sResource = ({ @@
               key: secretName,
               path,
             },
+            args: [''],
+            env: [],
           },
         },
       },
@@ Expand Down @@