feat(14691): serving runtime link to args

Signed-off-by: gitdallas <[email protected]>

frontend/src/__tests__/cypress/cypress/pages/modelServing.ts

@@ -177,6 +177,10 @@ class ServingRuntimeModal extends Modal {
     return this.find().findByLabelText('Model server size');
   }
 
+  findServingRuntimeTemplateHelptext() {
+    return this.find().findByTestId('serving-runtime-template-helptext');
+  }
+
   findServingRuntimeTemplateDropdown() {
     return this.find().findByTestId('serving-runtime-template-selection');
   }

frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/modelServingGlobal.cy.ts

@@ -14,6 +14,7 @@ import { deleteModal } from '~/__tests__/cypress/cypress/pages/components/Delete
 import {
   inferenceServiceModal,
   inferenceServiceModalEdit,
+  kserveModal,
   modelServingGlobal,
 } from '~/__tests__/cypress/cypress/pages/modelServing';
 import {
@@ -38,6 +39,7 @@ type HandlersProps = {
   delayInferenceServices?: boolean;
   delayServingRuntimes?: boolean;
   disableKServeMetrics?: boolean;
+  disableServingRuntimeParamsConfig?: boolean;
 };
 
 const initIntercepts = ({
@@ -49,11 +51,15 @@ const initIntercepts = ({
   delayInferenceServices,
   delayServingRuntimes,
   disableKServeMetrics,
+  disableServingRuntimeParamsConfig,
 }: HandlersProps) => {
   cy.interceptOdh(
     'GET /api/dsc/status',
     mockDscStatus({
-      installedComponents: { kserve: true, 'model-mesh': true },
+      installedComponents: {
+        kserve: true,
+        'model-mesh': true,
+      },
     }),
   );
   cy.interceptOdh(
@@ -62,6 +68,7 @@ const initIntercepts = ({
       disableKServe: disableKServeConfig,
       disableModelMesh: disableModelMeshConfig,
       disableKServeMetrics,
+      disableServingRuntimeParams: disableServingRuntimeParamsConfig,
     }),
   );
   cy.interceptK8sList(ServingRuntimeModel, mockK8sResourceList(servingRuntimes));
@@ -490,6 +497,23 @@ describe('Model Serving Global', () => {
     modelServingGlobal.findDeployModelButton().click();
     cy.findByText('Error creating model server').should('not.exist');
   });
+
+  it('Serving runtime helptext', () => {
+    initIntercepts({
+      projectEnableModelMesh: false,
+      disableServingRuntimeParamsConfig: false,
+    });
+    modelServingGlobal.visit('test-project');
+
+    modelServingGlobal.findDeployModelButton().click();
+
+    // test that you can not submit on empty
+    kserveModal.shouldBeOpen();
+    kserveModal.findServingRuntimeTemplateHelptext().should('not.exist');
+    kserveModal.findServingRuntimeTemplateDropdown().findSelectOption('Caikit').click();
+    kserveModal.findServingRuntimeTemplateHelptext().should('exist');
+  });
+
   it('Navigate to kserve model metrics page only if enabled', () => {
     initIntercepts({});
     modelServingGlobal.visit('test-project');

frontend/src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTemplateSection.tsx

@@ -1,5 +1,15 @@
 import * as React from 'react';
-import { FormGroup, Label, Split, SplitItem, Truncate } from '@patternfly/react-core';
+import {
+  Button,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Label,
+  Split,
+  SplitItem,
+  Truncate,
+} from '@patternfly/react-core';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
 import { CreatingServingRuntimeObject } from '~/pages/modelServing/screens/types';
 import { TemplateKind } from '~/k8sTypes';
@@ -14,6 +24,7 @@ import { AcceleratorProfileFormData } from '~/utilities/useAcceleratorProfileFor
 
 type ServingRuntimeTemplateSectionProps = {
   data: CreatingServingRuntimeObject;
+  onFocusChange?: (target: string) => void;
   setData: UpdateObjectAtPropAndValue<CreatingServingRuntimeObject>;
   templates: TemplateKind[];
   isEditing?: boolean;
@@ -22,6 +33,7 @@ type ServingRuntimeTemplateSectionProps = {
 
 const ServingRuntimeTemplateSection: React.FC<ServingRuntimeTemplateSectionProps> = ({
   data,
+  onFocusChange,
   setData,
   templates,
   isEditing,
@@ -77,6 +89,23 @@ const ServingRuntimeTemplateSection: React.FC<ServingRuntimeTemplateSectionProps
           setData('servingRuntimeTemplateName', name);
         }}
       />
+      {data.servingRuntimeTemplateName && onFocusChange && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem data-testid="serving-runtime-template-helptext">
+              You can optimize model performance by{' '}
+              <Button
+                isInline
+                onClick={() => onFocusChange('servingRuntimeArgsInput')}
+                variant="link"
+              >
+                configuring the parameters
+              </Button>{' '}
+              of the selected serving runtime.
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
     </FormGroup>
   );
 };

frontend/src/pages/modelServing/screens/projects/kServeModal/ManageKServeModal.tsx

@@ -139,6 +139,11 @@ const ManageKServeModal: React.FC<ManageKServeModalProps> = ({
     namespace,
   });
 
+  const [focusTarget, setFocusTarget] = React.useState<string | null>(null);
+  const handleFocusChange = (target: string) => {
+    setFocusTarget(target);
+  };
+
   const [actionInProgress, setActionInProgress] = React.useState(false);
   const [error, setError] = React.useState<Error | undefined>();
   const [alertVisible, setAlertVisible] = React.useState(true);
@@ -367,6 +372,7 @@ const ManageKServeModal: React.FC<ManageKServeModalProps> = ({
                   />
                   <ServingRuntimeTemplateSection
                     data={createDataServingRuntime}
+                    onFocusChange={servingRuntimeParamsEnabled ? handleFocusChange : undefined}
                     setData={setCreateDataServingRuntime}
                     templates={servingRuntimeTemplates || []}
                     isEditing={!!editInfo}
@@ -430,6 +436,8 @@ const ManageKServeModal: React.FC<ManageKServeModalProps> = ({
                 <ServingRuntimeArgsSection
                   data={createDataInferenceService}
                   setData={setCreateDataInferenceService}
+                  focusTarget={focusTarget}
+                  onFocusChange={handleFocusChange}
                 />
                 <EnvironmentVariablesSection
                   data={createDataInferenceService}

frontend/src/pages/modelServing/screens/projects/kServeModal/ServingRuntimeArgsSection.tsx

@@ -15,41 +15,63 @@ import { CreatingInferenceServiceObject } from '~/pages/modelServing/screens/typ
 type ServingRuntimeArgsSectionType = {
   data: CreatingInferenceServiceObject;
   setData: UpdateObjectAtPropAndValue<CreatingInferenceServiceObject>;
+  focusTarget?: string | null;
+  onFocusChange?: (target: string) => void;
 };
 
-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>
+const ServingRuntimeArgsSection: React.FC<ServingRuntimeArgsSectionType> = ({
+  data,
+  setData,
+  focusTarget,
+  onFocusChange,
+}) => {
+  const inputRef = React.useRef<HTMLTextAreaElement>(null);
+  React.useEffect(() => {
+    if (focusTarget === 'servingRuntimeArgsInput' && inputRef.current) {
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        if (onFocusChange) {
+          onFocusChange('');
         }
-      >
-        <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
+  }, [focusTarget, onFocusChange]);
+  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="serving-runtime-arguments"
+    >
+      <TextArea
+        id="servingRuntimeArgsInput"
+        ref={inputRef}
+        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;