Node resource table and modal

frontend/src/__mocks__/mockHardwareProfile.ts

@@ -29,9 +29,9 @@ export const mockHardwareProfile = ({
     {
       displayName: 'Memory',
       identifier: 'memory',
-      minCount: 5,
-      maxCount: 2,
-      defaultCount: 2,
+      minCount: '5Gi',
+      maxCount: '2Gi',
+      defaultCount: '2Gi',
     },
   ],
   description = '',

frontend/src/api/k8s/__tests__/hardwareProfiles.spec.ts

@@ -40,9 +40,9 @@ const data: HardwareProfileKind['spec'] = {
     {
       displayName: 'Memory',
       identifier: 'memory',
-      minCount: 5,
-      maxCount: 2,
-      defaultCount: 2,
+      minCount: '5Gi',
+      maxCount: '2Gi',
+      defaultCount: '2Gi',
     },
   ],
   description: 'test description',

frontend/src/pages/hardwareProfiles/ManageNodeResourceSection.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {
+  FormSection,
+  Flex,
+  FlexItem,
+  Button,
+  Content,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons';
+import { Identifier } from '~/types';
+import NodeResourceTable from './nodeResource/NodeResourceTable';
+import ManageNodeResourceModal from './nodeResource/ManageNodeResourceModal';
+
+type ManageNodeResourceSectionProps = {
+  nodeResources: Identifier[];
+  setNodeResources: (identifiers: Identifier[]) => void;
+};
+
+const ManageNodeResourceSection: React.FC<ManageNodeResourceSectionProps> = ({
+  nodeResources,
+  setNodeResources,
+}) => {
+  const [isNodeResourceModalOpen, setIsNodeResourceModalOpen] = React.useState<boolean>(false);
+  return (
+    <>
+      <FormSection
+        title={
+          <Flex>
+            <FlexItem>Node resources</FlexItem>
+            <FlexItem>
+              <Content component="p" className="odh-form-section__desc">
+                Every hardware profile must include CPU and memory resources. Additional resources,
+                such as GPUs, can be added here.
+              </Content>
+            </FlexItem>
+          </Flex>
+        }
+      >
+        <Stack hasGutter>
+          <StackItem>
+            <NodeResourceTable
+              nodeResources={nodeResources}
+              onUpdate={(newIdentifiers) => setNodeResources(newIdentifiers)}
+            />
+          </StackItem>
+          <StackItem>
+            <Button
+              variant="link"
+              onClick={() => setIsNodeResourceModalOpen(true)}
+              data-testid="add-node-resource-button"
+              icon={<PlusCircleIcon />}
+            >
+              Add resource
+            </Button>
+          </StackItem>
+        </Stack>
+      </FormSection>
+      {isNodeResourceModalOpen ? (
+        <ManageNodeResourceModal
+          onClose={() => setIsNodeResourceModalOpen(false)}
+          onSave={(identifier) => setNodeResources([...nodeResources, identifier])}
+          nodeResources={nodeResources}
+        />
+      ) : null}
+    </>
+  );
+};
+
+export default ManageNodeResourceSection;

frontend/src/pages/hardwareProfiles/nodeResource/CountFormField.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
+import MemoryField from '~/components/MemoryField';
+import CPUField from '~/components/CPUField';
+import NumberInputWrapper from '~/components/NumberInputWrapper';
+
+type CountFormFieldProps = {
+  label: string;
+  fieldId: string;
+  size: number | string;
+  setSize: (value: number | string) => void;
+  identifier: string;
+  errorMessage?: string;
+  isValid?: boolean;
+};
+
+const CountFormField: React.FC<CountFormFieldProps> = ({
+  label,
+  fieldId,
+  size,
+  setSize,
+  identifier,
+  errorMessage,
+  isValid = true,
+}) => {
+  const renderInputField = () => {
+    switch (identifier) {
+      case 'cpu':
+        return <CPUField onChange={(value) => setSize(value)} value={size} />;
+      case 'memory':
+        return <MemoryField onChange={(value) => setSize(value)} value={String(size)} />;
+      default:
+        return (
+          <NumberInputWrapper
+            min={0}
+            value={Number(size)}
+            onChange={(value) => {
+              if (value) {
+                setSize(value);
+              }
+            }}
+          />
+        );
+    }
+  };
+
+  return (
+    <FormGroup label={label} fieldId={fieldId} data-testid={fieldId}>
+      {renderInputField()}
+      {!isValid && errorMessage && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem data-testid={`${fieldId}-error`} variant="error">
+              {errorMessage}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+    </FormGroup>
+  );
+};
+
+export default CountFormField;

frontend/src/pages/hardwareProfiles/nodeResource/ManageNodeResourceModal.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Modal } from '@patternfly/react-core/deprecated';
+import DashboardModalFooter from '~/concepts/dashboard/DashboardModalFooter';
+import { Identifier } from '~/types';
+import useGenericObjectState from '~/utilities/useGenericObjectState';
+import { CPU_UNITS, MEMORY_UNITS_FOR_SELECTION, UnitOption } from '~/utilities/valueUnits';
+import { EMPTY_IDENTIFIER } from './const';
+import NodeResourceForm from './NodeResourceForm';
+import { validateDefaultCount, validateMinCount } from './utils';
+
+type ManageNodeResourceModalProps = {
+  onClose: () => void;
+  existingIdentifier?: Identifier;
+  onSave: (identifier: Identifier) => void;
+  nodeResources: Identifier[];
+};
+
+const ManageNodeResourceModal: React.FC<ManageNodeResourceModalProps> = ({
+  onClose,
+  existingIdentifier,
+  onSave,
+  nodeResources,
+}) => {
+  const [identifier, setIdentifier] = useGenericObjectState<Identifier>(
+    existingIdentifier || EMPTY_IDENTIFIER,
+  );
+
+  const [unitOptions, setUnitOptions] = React.useState<UnitOption[]>();
+
+  const isUniqueIdentifier =
+    identifier.identifier === existingIdentifier?.identifier ||
+    !nodeResources.some((i) => i.identifier === identifier.identifier);
+
+  React.useEffect(() => {
+    switch (identifier.identifier) {
+      case 'cpu':
+        setUnitOptions(CPU_UNITS);
+        break;
+      case 'memory':
+        setUnitOptions(MEMORY_UNITS_FOR_SELECTION);
+        break;
+      default:
+        setUnitOptions(undefined);
+    }
+  }, [identifier]);
+
+  const isValidCounts = unitOptions
+    ? validateDefaultCount(identifier, unitOptions) && validateMinCount(identifier, unitOptions)
+    : true;
+
+  const isButtonDisabled =
+    !identifier.displayName || !identifier.identifier || !isUniqueIdentifier || !isValidCounts;
+
+  const handleSubmit = () => {
+    onSave(identifier);
+    onClose();
+  };
+
+  return (
+    <Modal
+      title={existingIdentifier ? 'Edit node resource' : 'Add node resource'}
+      variant="medium"
+      isOpen
+      onClose={onClose}
+      footer={
+        <DashboardModalFooter
+          submitLabel={existingIdentifier ? 'Update' : 'Add'}
+          onSubmit={handleSubmit}
+          onCancel={onClose}
+          isSubmitDisabled={isButtonDisabled}
+        />
+      }
+    >
+      <NodeResourceForm
+        identifier={identifier}
+        setIdentifier={setIdentifier}
+        unitOptions={unitOptions}
+        isExistingIdentifier={!!existingIdentifier}
+        isUniqueIdentifier={isUniqueIdentifier}
+      />
+    </Modal>
+  );
+};
+
+export default ManageNodeResourceModal;

frontend/src/pages/hardwareProfiles/nodeResource/NodeResourceForm.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  TextInput,
+  FormGroup,
+  Form,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
+import { Identifier } from '~/types';
+import { UpdateObjectAtPropAndValue } from '~/pages/projects/types';
+import { UnitOption } from '~/utilities/valueUnits';
+import { validateDefaultCount, validateMinCount } from './utils';
+import CountFormField from './CountFormField';
+
+type NodeResourceFormProps = {
+  identifier: Identifier;
+  setIdentifier: UpdateObjectAtPropAndValue<Identifier>;
+  unitOptions?: UnitOption[];
+  isExistingIdentifier?: boolean;
+  isUniqueIdentifier?: boolean;
+};
+
+const NodeResourceForm: React.FC<NodeResourceFormProps> = ({
+  identifier,
+  setIdentifier,
+  unitOptions,
+  isExistingIdentifier,
+  isUniqueIdentifier,
+}) => {
+  const validated = isUniqueIdentifier ? 'default' : 'error';
+
+  return (
+    <Form>
+      <FormGroup isRequired label="Resource label" fieldId="resource-label">
+        <TextInput
+          value={identifier.displayName || ''}
+          onChange={(_, value) => setIdentifier('displayName', value)}
+        />
+      </FormGroup>
+
+      <FormGroup isRequired label="Resource identifier" fieldId="resource-identifier">
+        <TextInput
+          value={identifier.identifier || ''}
+          onChange={(_, value) => setIdentifier('identifier', value)}
+          isDisabled={
+            isExistingIdentifier &&
+            (identifier.identifier === 'cpu' || identifier.identifier === 'memory')
+          }
+          validated={validated}
+        />
+        {!isUniqueIdentifier && (
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem data-testid="resource-identifier-error" variant="error">
+                Another resource with the same identifier already exists. The resource identifier
+                must be unique.
+              </HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
+      </FormGroup>
+
+      <CountFormField
+        label="Default"
+        fieldId="default"
+        identifier={identifier.identifier}
+        size={identifier.defaultCount}
+        setSize={(value) => setIdentifier('defaultCount', value)}
+        isValid={unitOptions ? validateDefaultCount(identifier, unitOptions) : true}
+        errorMessage="Default must be equal to or between the minimum and maximum allowed limits."
+      />
+
+      <CountFormField
+        label="Minimum allowed"
+        fieldId="minimum-allowed"
+        identifier={identifier.identifier}
+        size={identifier.minCount}
+        setSize={(value) => setIdentifier('minCount', value)}
+        isValid={unitOptions ? validateMinCount(identifier, unitOptions) : true}
+        errorMessage="Minimum allowed value cannot exceed the maximum allowed value."
+      />
+
+      <CountFormField
+        label="Maximum allowed"
+        fieldId="maximum-allowed"
+        identifier={identifier.identifier}
+        size={identifier.maxCount}
+        setSize={(value) => setIdentifier('maxCount', value)}
+      />
+    </Form>
+  );
+};
+export default NodeResourceForm;