Adapt model deployment modals to the latest design

DaoDaoNoCode · Aug 22, 2024 · 2652256 · 2652256
1 parent dc4599e
commit 2652256
Show file tree

Hide file tree

Showing 16 changed files with 237 additions and 238 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts b/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts
@@ -117,7 +117,7 @@ class InferenceServiceModal extends Modal {
 
   findExistingConnectionSelect() {
     return this.find()
-      .findByRole('group', { name: 'Model location' })
+      .findByRole('group', { name: 'Source model location' })
       .findByRole('button', { name: 'Options menu' });
   }
 
@@ -202,9 +202,7 @@ class ServingRuntimeModal extends Modal {
   }
 
   findModelServerSizeSelect() {
-    return this.find()
-      .findByRole('group', { name: 'Compute resources per replica' })
-      .findByTestId('model-server-size-selection');
+    return this.find().findByTestId('model-server-size-selection');
   }
 
   findModelServerReplicasMinusButton() {

diff --git a/frontend/src/pages/modelRegistry/screens/components/DeployRegisteredModelModal.tsx b/frontend/src/pages/modelRegistry/screens/components/DeployRegisteredModelModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Button, Form, Modal, Spinner } from '@patternfly/react-core';
+import { Alert, Button, Form, FormSection, Modal, Spinner } from '@patternfly/react-core';
 import { ModelVersion } from '~/concepts/modelRegistry/types';
 import { ProjectKind } from '~/k8sTypes';
 import useProjectErrorForRegisteredModel from '~/pages/modelRegistry/screens/RegisteredModels/useProjectErrorForRegisteredModel';
@@ -92,11 +92,13 @@ const DeployRegisteredModelModal: React.FC<DeployRegisteredModelModalProps> = ({
           ) : !deployInfoLoaded ? (
             <Spinner />
           ) : (
-            <ProjectSelector
-              selectedProject={selectedProject}
-              setSelectedProject={setSelectedProject}
-              error={error}
-            />
+            <FormSection title="Model deployment">
+              <ProjectSelector
+                selectedProject={selectedProject}
+                setSelectedProject={setSelectedProject}
+                error={error}
+              />
+            </FormSection>
           )}
         </Form>
       </Modal>

diff --git a/...pages/modelServing/screens/projects/InferenceServiceModal/DataConnectionExistingField.tsx b/...pages/modelServing/screens/projects/InferenceServiceModal/DataConnectionExistingField.tsx
@@ -74,16 +74,16 @@ const DataConnectionExistingField: React.FC<DataConnectionExistingFieldType> = (
             </Button>
           </Popover>
         )}
-        <FormGroup label="Name" isRequired>
+        <FormGroup label="Name" fieldId="inference-service-data-connection" isRequired>
           <SimpleSelect
-            id="inference-service-data-connection"
             isFullWidth
             isDisabled={isDataConnectionsEmpty}
             options={connectionsWithoutBucket.map((connection) => ({
               key: connection.dataConnection.data.metadata.name,
               dropdownLabel: getLabeledOption(connection),
               label: getDataConnectionDisplayName(connection.dataConnection),
             }))}
+            toggleProps={{ id: 'inference-service-data-connection' }}
             value={data.storage.dataConnection}
             toggleLabel={
               selectedDataConnection ? getLabeledOption(selectedDataConnection) : placeholderText

diff --git a/...ges/modelServing/screens/projects/InferenceServiceModal/DataConnectionFolderPathField.tsx b/...ges/modelServing/screens/projects/InferenceServiceModal/DataConnectionFolderPathField.tsx
@@ -46,6 +46,7 @@ const DataConnectionFolderPathField: React.FC<DataConnectionFolderPathFieldProps
   return (
     <FormGroup fieldId="folder-path" label="Path" isRequired>
       <TextInput
+        id="folder-path"
         aria-label="folder-path"
         data-testid="folder-path"
         type="text"

diff --git a/.../modelServing/screens/projects/InferenceServiceModal/InferenceServiceFrameworkSection.tsx b/.../modelServing/screens/projects/InferenceServiceModal/InferenceServiceFrameworkSection.tsx
@@ -52,10 +52,15 @@ const InferenceServiceFrameworkSection: React.FC<InferenceServiceFrameworkSectio
   }
 
   return (
-    <FormGroup label="Model framework (name - version)" isRequired>
+    <FormGroup
+      label="Model framework (name - version)"
+      fieldId="inference-service-framework-selection"
+      isRequired
+    >
       <SimpleSelect
         dataTestId="inference-service-framework-selection"
         isDisabled={models.length === 0}
+        toggleProps={{ id: 'inference-service-framework-selection' }}
         options={models.map((framework) => {
           const name = framework.version
             ? `${framework.name} - ${framework.version}`

diff --git a/...pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceNameSection.tsx b/...pages/modelServing/screens/projects/InferenceServiceModal/InferenceServiceNameSection.tsx
@@ -24,7 +24,7 @@ const InferenceServiceNameSection: React.FC<InferenceServiceNameSectionProps> =
   const validated = !isNameValid ? 'warning' : 'default';
 
   return (
-    <FormGroup label="Model name" fieldId="inference-service-name-input" isRequired>
+    <FormGroup label="Model deployment name" fieldId="inference-service-name-input" isRequired>
       <TextInput
         isRequired
         id="inference-service-name-input"
@@ -33,15 +33,18 @@ const InferenceServiceNameSection: React.FC<InferenceServiceNameSectionProps> =
         onChange={(e, name) => setData('name', name)}
         validated={validated}
       />
-      {validated === 'warning' && (
-        <FormHelperText>
-          <HelperText>
-            <HelperTextItem variant={validated} icon={<ExclamationTriangleIcon />}>
-              Cannot exceed 253 characters
-            </HelperTextItem>
-          </HelperText>
-        </FormHelperText>
-      )}
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem
+            variant={validated}
+            icon={isNameValid ? undefined : <ExclamationTriangleIcon />}
+          >
+            {isNameValid
+              ? 'This is the name of the inference service created when the model is deployed'
+              : 'Cannot exceed 253 characters'}
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
     </FormGroup>
   );
 };

diff --git a/...lServing/screens/projects/InferenceServiceModal/InferenceServiceServingRuntimeSection.tsx b/...lServing/screens/projects/InferenceServiceModal/InferenceServiceServingRuntimeSection.tsx
@@ -49,14 +49,15 @@ const InferenceServiceServingRuntimeSection: React.FC<
   }
 
   return (
-    <FormGroup label="Model servers" isRequired>
+    <FormGroup label="Model server" fieldId="inference-service-model-selection" isRequired>
       <SimpleSelect
         dataTestId="inference-service-model-selection"
         isDisabled={servingRuntimes.length === 0}
         options={servingRuntimes.map((servingRuntime) => ({
           key: servingRuntime.metadata.name,
           label: getDisplayNameFromK8sResource(servingRuntime),
         }))}
+        toggleProps={{ id: 'inference-service-model-selection' }}
         isFullWidth
         value={data.servingRuntimeName}
         toggleLabel={

diff --git a/...pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal.tsx b/...pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal.tsx
@@ -182,7 +182,7 @@ const ManageInferenceServiceModal: React.FC<ManageInferenceServiceModalProps> =
                 />
               </StackItem>
               <StackItem>
-                <FormSection title="Model location" id="model-location">
+                <FormSection title="Source model location" id="model-location">
                   <DataConnectionSection
                     data={createData}
                     setData={setCreateData}

diff --git a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ProjectSelector.tsx b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ProjectSelector.tsx
@@ -31,7 +31,7 @@ const ProjectSelector: React.FC<ProjectSelectorProps> = ({
   const { projects } = React.useContext(ProjectsContext);
 
   return (
-    <FormGroup label="Project" isRequired>
+    <FormGroup label="Project" fieldId="deploy-model-project-selector" isRequired>
       <Stack hasGutter>
         <StackItem>
           <Select
@@ -56,6 +56,7 @@ const ProjectSelector: React.FC<ProjectSelectorProps> = ({
                 isExpanded={isOpen}
                 isFullWidth
                 data-testid="deploy-model-project-selector"
+                id="deploy-model-project-selector"
               >
                 {selectedProject
                   ? getDisplayNameFromK8sResource(selectedProject)
@@ -82,7 +83,7 @@ const ProjectSelector: React.FC<ProjectSelectorProps> = ({
               <Link
                 to={`/projects/${selectedProject.metadata.name}?section=${ProjectSectionID.MODEL_SERVER}`}
               >
-                Go to {getDisplayNameFromK8sResource(selectedProject)} project page
+                Go to <b>{getDisplayNameFromK8sResource(selectedProject)}</b> project page
               </Link>
             </Alert>
           </StackItem>

diff --git a/...src/pages/modelServing/screens/projects/ServingRuntimeModal/AuthServingRuntimeSection.tsx b/...src/pages/modelServing/screens/projects/ServingRuntimeModal/AuthServingRuntimeSection.tsx
@@ -4,7 +4,6 @@ import {
   Button,
   Checkbox,
   FormGroup,
-  FormSection,
   Popover,
   Stack,
   StackItem,
@@ -70,27 +69,25 @@ const AuthServingRuntimeSection: React.FC<AuthServingRuntimeSectionProps> = ({
       )}
       {publicRoute && (
         <StackItem>
-          <FormSection title="Model route" titleElement="div">
-            <FormGroup>
-              <Checkbox
-                label="Make deployed models available through an external route"
-                id="alt-form-checkbox-route"
-                data-testid="alt-form-checkbox-route"
-                name="alt-form-checkbox-route"
-                isChecked={data.externalRoute}
-                isDisabled={!allowCreate}
-                onChange={(e, check) => {
-                  setData('externalRoute', check);
-                  if (check && allowCreate) {
-                    setData('tokenAuth', check);
-                    if (data.tokens.length === 0) {
-                      createNewToken();
-                    }
+          <FormGroup fieldId="alt-form-checkbox-route" label="Model route">
+            <Checkbox
+              label="Make deployed models available through an external route"
+              id="alt-form-checkbox-route"
+              data-testid="alt-form-checkbox-route"
+              name="alt-form-checkbox-route"
+              isChecked={data.externalRoute}
+              isDisabled={!allowCreate}
+              onChange={(e, check) => {
+                setData('externalRoute', check);
+                if (check && allowCreate) {
+                  setData('tokenAuth', check);
+                  if (data.tokens.length === 0) {
+                    createNewToken();
                   }
-                }}
-              />
-            </FormGroup>
-          </FormSection>
+                }
+              }}
+            />
+          </FormGroup>
         </StackItem>
       )}
       <StackItem>

diff --git a/...src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeSizeSection.tsx b/...src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeSizeSection.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormGroup, FormSection, Stack, StackItem, Popover, Icon } from '@patternfly/react-core';
+import { FormGroup, Stack, StackItem, Popover, Icon } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
 import {
@@ -75,7 +75,7 @@ const ServingRuntimeSizeSection: React.FC<ServingRuntimeSizeSectionProps> = ({
     });
 
   return (
-    <FormSection title="Compute resources per replica">
+    <>
       <FormGroup
         label="Model server size"
         labelIcon={
@@ -87,13 +87,16 @@ const ServingRuntimeSizeSection: React.FC<ServingRuntimeSizeSectionProps> = ({
             </Popover>
           ) : undefined
         }
+        fieldId="model-server-size-selection"
+        isRequired
       >
         <Stack hasGutter>
           <StackItem>
             <SimpleSelect
               dataTestId="model-server-size-selection"
               isFullWidth
               options={sizeOptions()}
+              toggleProps={{ id: 'model-server-size-selection' }}
               toggleLabel={data.modelSize.name || 'Select a model server size'}
               onChange={(option) => {
                 const valuesSelected = sizeCustom.find((element) => element.name === option);
@@ -112,18 +115,16 @@ const ServingRuntimeSizeSection: React.FC<ServingRuntimeSizeSectionProps> = ({
         </Stack>
       </FormGroup>
       {!gpuDisabled && (
-        <FormGroup>
-          <AcceleratorProfileSelectField
-            acceleratorProfileState={acceleratorProfileState}
-            supportedAcceleratorProfiles={supportedAcceleratorProfiles}
-            resourceDisplayName="serving runtime"
-            infoContent="Ensure that appropriate tolerations are in place before adding an accelerator to your model server."
-            selectedAcceleratorProfile={selectedAcceleratorProfile}
-            setSelectedAcceleratorProfile={setSelectedAcceleratorProfile}
-          />
-        </FormGroup>
+        <AcceleratorProfileSelectField
+          acceleratorProfileState={acceleratorProfileState}
+          supportedAcceleratorProfiles={supportedAcceleratorProfiles}
+          resourceDisplayName="serving runtime"
+          infoContent="Ensure that appropriate tolerations are in place before adding an accelerator to your model server."
+          selectedAcceleratorProfile={selectedAcceleratorProfile}
+          setSelectedAcceleratorProfile={setSelectedAcceleratorProfile}
+        />
       )}
-    </FormSection>
+    </>
   );
 };
 

diff --git a/...pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTemplateSection.tsx b/...pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTemplateSection.tsx
@@ -59,11 +59,10 @@ const ServingRuntimeTemplateSection: React.FC<ServingRuntimeTemplateSectionProps
   }));
 
   return (
-    <FormGroup label="Serving runtime" fieldId="serving-runtime-selection" isRequired>
+    <FormGroup label="Serving runtime" fieldId="serving-runtime-template-selection" isRequired>
       <SimpleSelect
         isFullWidth
         isDisabled={isEditing || filteredTemplates.length === 0}
-        id="serving-runtime-template-selection"
         dataTestId="serving-runtime-template-selection"
         aria-label="Select a template"
         options={options}
@@ -72,6 +71,7 @@ const ServingRuntimeTemplateSection: React.FC<ServingRuntimeTemplateSectionProps
             ? data.servingRuntimeTemplateName
             : 'Select one'
         }
+        toggleProps={{ id: 'serving-runtime-template-selection' }}
         value={data.servingRuntimeTemplateName}
         onChange={(name) => {
           setData('servingRuntimeTemplateName', name);