Add tooltips to Model Server Modal

opendatahub-io · Nov 6, 2023 · 389a7bc · 389a7bc
1 parent 693ffc6
commit 389a7bc
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 5 deletions.
diff --git a/frontend/src/__tests__/integration/pages/modelServing/ServingRuntimeList.spec.ts b/frontend/src/__tests__/integration/pages/modelServing/ServingRuntimeList.spec.ts
@@ -164,6 +164,38 @@ test('Add ModelMesh model server', async ({ page }) => {
   await expect(page.getByRole('menuitem', { name: 'New OVMS Server Invalid' })).toBeHidden();
   await expect(page.getByRole('button', { name: 'Add', exact: true })).toBeEnabled();
 
+  //test Add model server tooltips
+  const expectedContent = [
+    {
+      ariaLabel: 'Model server replicas info',
+      content:
+        'Consider network traffic and failover scenarios when specifying the number of model server replicas.',
+    },
+    {
+      ariaLabel: 'Model server size info',
+      content:
+        'Select a server size that will accommodate your largest model. See the product documentation for more information.',
+    },
+    {
+      ariaLabel: 'Accelerator info',
+      content:
+        'Ensure that appropriate tolerations are in place before adding an accelerator to your model server.',
+    },
+  ];
+
+  for (const item of expectedContent) {
+    const iconPopover = await page.getByRole('button', { name: item.ariaLabel, exact: true });
+    if (await iconPopover.isVisible()) {
+      await iconPopover.click();
+      const popoverContent = await page.locator('div.pf-c-popover__content').textContent();
+      expect(popoverContent).toContain(item.content);
+
+      const closeButton = await page.locator('div.pf-c-popover__content>button');
+      if (closeButton) {
+        closeButton.click();
+      }
+    }
+  }
   // test the if the alert is visible when route is external while token is not set
   await expect(page.locator('#alt-form-checkbox-route')).not.toBeChecked();
   await expect(page.locator('#alt-form-checkbox-auth')).not.toBeChecked();

diff --git a/...src/pages/modelServing/screens/projects/ServingRuntimeModal/ManageServingRuntimeModal.tsx b/...src/pages/modelServing/screens/projects/ServingRuntimeModal/ManageServingRuntimeModal.tsx
@@ -180,7 +180,12 @@ const ManageServingRuntimeModal: React.FC<ManageServingRuntimeModalProps> = ({
             />
           </StackItem>
           <StackItem>
-            <ServingRuntimeReplicaSection data={createData} setData={setCreateData} />
+            <ServingRuntimeReplicaSection
+              data={createData}
+              setData={setCreateData}
+              infoContent="Consider network traffic and failover scenarios when specifying the number of model
+                server replicas."
+            />
           </StackItem>
           <StackItem>
             <ServingRuntimeSizeSection
@@ -190,6 +195,7 @@ const ManageServingRuntimeModal: React.FC<ManageServingRuntimeModalProps> = ({
               servingRuntimeSelected={servingRuntimeSelected}
               acceleratorState={acceleratorState}
               setAcceleratorState={setAcceleratorState}
+              infoContent="Select a server size that will accommodate your largest model. See the product documentation for more information."
             />
           </StackItem>
           {!allowCreate && (

diff --git a/.../pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeReplicaSection.tsx b/.../pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeReplicaSection.tsx
@@ -1,17 +1,20 @@
 import * as React from 'react';
-import { FormGroup, FormSection, NumberInput } from '@patternfly/react-core';
+import { FormGroup, FormSection, NumberInput, Popover, Icon } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
 import { CreatingServingRuntimeObject } from '~/pages/modelServing/screens/types';
 import { isHTMLInputElement, normalizeBetween } from '~/utilities/utils';
 
 type ServingRuntimeReplicaSectionProps = {
   data: CreatingServingRuntimeObject;
   setData: UpdateObjectAtPropAndValue<CreatingServingRuntimeObject>;
+  infoContent?: string;
 };
 
 const ServingRuntimeReplicaSection: React.FC<ServingRuntimeReplicaSectionProps> = ({
   data,
   setData,
+  infoContent,
 }) => {
   const MIN_SIZE = 0;
 
@@ -21,7 +24,18 @@ const ServingRuntimeReplicaSection: React.FC<ServingRuntimeReplicaSectionProps>
 
   return (
     <FormSection title="Model server replicas">
-      <FormGroup label="Number of model server replicas to deploy">
+      <FormGroup
+        label="Number of model server replicas to deploy"
+        labelIcon={
+          infoContent ? (
+            <Popover bodyContent={<div>{infoContent}</div>}>
+              <Icon aria-label="Model server replicas info" role="button">
+                <OutlinedQuestionCircleIcon />
+              </Icon>
+            </Popover>
+          ) : undefined
+        }
+      >
         <NumberInput
           inputAriaLabel="model server replicas number input"
           value={data.numReplicas}

diff --git a/...src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeSizeSection.tsx b/...src/pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeSizeSection.tsx
@@ -6,7 +6,10 @@ import {
   SelectOption,
   Stack,
   StackItem,
+  Popover,
+  Icon,
 } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
 import {
   CreatingServingRuntimeObject,
@@ -26,6 +29,7 @@ type ServingRuntimeSizeSectionProps = {
   servingRuntimeSelected?: ServingRuntimeKind;
   acceleratorState: AcceleratorState;
   setAcceleratorState: UpdateObjectAtPropAndValue<AcceleratorState>;
+  infoContent?: string;
 };
 
 const ServingRuntimeSizeSection: React.FC<ServingRuntimeSizeSectionProps> = ({
@@ -35,6 +39,7 @@ const ServingRuntimeSizeSection: React.FC<ServingRuntimeSizeSectionProps> = ({
   servingRuntimeSelected,
   acceleratorState,
   setAcceleratorState,
+  infoContent,
 }) => {
   const [sizeDropdownOpen, setSizeDropdownOpen] = React.useState(false);
   const [supportedAccelerators, setSupportedAccelerators] = React.useState<string[] | undefined>();
@@ -72,7 +77,18 @@ const ServingRuntimeSizeSection: React.FC<ServingRuntimeSizeSectionProps> = ({
 
   return (
     <FormSection title="Compute resources per replica">
-      <FormGroup label="Model server size">
+      <FormGroup
+        label="Model server size"
+        labelIcon={
+          infoContent ? (
+            <Popover bodyContent={<div>{infoContent}</div>}>
+              <Icon aria-label="Model server size info" role="button">
+                <OutlinedQuestionCircleIcon />
+              </Icon>
+            </Popover>
+          ) : undefined
+        }
+      >
         <Stack hasGutter>
           <StackItem>
             <Select
@@ -108,6 +124,7 @@ const ServingRuntimeSizeSection: React.FC<ServingRuntimeSizeSectionProps> = ({
             setAcceleratorState={setAcceleratorState}
             supportedAccelerators={supportedAccelerators}
             resourceDisplayName="serving runtime"
+            infoContent="Ensure that appropriate tolerations are in place before adding an accelerator to your model server."
           />
         </FormGroup>
       )}

diff --git a/frontend/src/pages/notebookController/screens/server/AcceleratorSelectField.tsx b/frontend/src/pages/notebookController/screens/server/AcceleratorSelectField.tsx
@@ -10,7 +10,10 @@ import {
   SplitItem,
   Stack,
   StackItem,
+  Popover,
+  Icon,
 } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { isHTMLInputElement } from '~/utilities/utils';
 import { AcceleratorKind } from '~/k8sTypes';
 import SimpleDropdownSelect, { SimpleDropdownOption } from '~/components/SimpleDropdownSelect';
@@ -23,13 +26,15 @@ type AcceleratorSelectFieldProps = {
   setAcceleratorState: UpdateObjectAtPropAndValue<AcceleratorState>;
   supportedAccelerators?: string[];
   resourceDisplayName?: string;
+  infoContent?: string;
 };
 
 const AcceleratorSelectField: React.FC<AcceleratorSelectFieldProps> = ({
   acceleratorState,
   setAcceleratorState,
   supportedAccelerators,
   resourceDisplayName = 'image',
+  infoContent,
 }) => {
   const [detectedAcceleratorInfo] = useAcceleratorCounts();
 
@@ -149,7 +154,19 @@ const AcceleratorSelectField: React.FC<AcceleratorSelectFieldProps> = ({
   return (
     <Stack hasGutter>
       <StackItem>
-        <FormGroup label="Accelerator" fieldId="modal-notebook-accelerator">
+        <FormGroup
+          label="Accelerator"
+          fieldId="modal-notebook-accelerator"
+          labelIcon={
+            infoContent ? (
+              <Popover bodyContent={<div>{infoContent}</div>}>
+                <Icon aria-label="Accelerator info" role="button">
+                  <OutlinedQuestionCircleIcon />
+                </Icon>
+              </Popover>
+            ) : undefined
+          }
+        >
           <SimpleDropdownSelect
             isFullWidth
             options={options}