Node resource table and modals #3565

dpanshug · 2024-12-11T12:24:02Z

Description

Added table and modal for Node resource for Hardware profile

How Has This Been Tested?

Currently this table and modal are standalone components and are not used anywhere, to tests you can import <ManageNodeResourceSection /> to any form page, like i have tested this in ManageAcceleratorProfile

Test Impact

Add unit tests for validation utility functions

Request review criteria:

Self checklist (all need to be checked):

The developer has manually tested the changes and verified that the changes work
Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
The developer has added tests or explained why testing cannot be added (unit or cypress tests for related changes)

If you have UI changes:

Included any necessary screenshots or gifs if it was a UI change.
Included tags to the UX team if it was a UI/UX change.

After the PR is posted & before it merges:

The developer has tested their solution on a cluster by using the image produced by the PR to main

@vconzola

dpanshug · 2024-12-11T12:24:37Z

WIP: needs some clarification around UX and data validation
discussing here: https://redhat-internal.slack.com/archives/C07C0FNHVPT/p1733920395039179

codecov · 2024-12-11T13:07:19Z

Codecov Report

Attention: Patch coverage is 25.36232% with 103 lines in your changes missing coverage. Please review.

Project coverage is 85.03%. Comparing base (5d3efb2) to head (6580679).
Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
...eProfiles/nodeResource/ManageNodeResourceModal.tsx	2.85%	34 Missing ⚠️
...s/hardwareProfiles/nodeResource/CountFormField.tsx	4.34%	22 Missing ⚠️
...hardwareProfiles/nodeResource/NodeResourceForm.tsx	4.54%	21 Missing ⚠️
...ardwareProfiles/nodeResource/NodeResourceTable.tsx	44.82%	16 Missing ⚠️
...ges/hardwareProfiles/ManageNodeResourceSection.tsx	0.00%	10 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3565      +/-   ##
==========================================
- Coverage   85.20%   85.03%   -0.18%     
==========================================
  Files        1381     1398      +17     
  Lines       31592    31881     +289     
  Branches     8832     8905      +73     
==========================================
+ Hits        26919    27109     +190     
- Misses       4673     4772      +99

Files with missing lines	Coverage Δ
...wareProfiles/nodeResource/NodeResourceTableRow.tsx	`100.00% <100.00%> (ø)`
...d/src/pages/hardwareProfiles/nodeResource/const.ts	`100.00% <100.00%> (ø)`
...d/src/pages/hardwareProfiles/nodeResource/utils.ts	`100.00% <100.00%> (ø)`
...ges/hardwareProfiles/ManageNodeResourceSection.tsx	`0.00% <0.00%> (ø)`
...ardwareProfiles/nodeResource/NodeResourceTable.tsx	`44.82% <44.82%> (ø)`
...hardwareProfiles/nodeResource/NodeResourceForm.tsx	`4.54% <4.54%> (ø)`
...s/hardwareProfiles/nodeResource/CountFormField.tsx	`4.34% <4.34%> (ø)`
...eProfiles/nodeResource/ManageNodeResourceModal.tsx	`2.85% <2.85%> (ø)`

... and 7 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 065da14...6580679. Read the comment docs.

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

openshift-ci · 2024-12-12T12:33:36Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign manosnoam for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

frontend/OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

dpanshug · 2024-12-12T12:55:44Z

@kaedward @vconzola i have updated the mocks, please review the error message for field validation.

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

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

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

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

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

frontend/src/types.ts

vconzola · 2024-12-13T17:41:49Z

I believe there should be a space between the numbers and the units in the table, e.g., "1 GiB", not "1GiB", bur defer to @kaedward. Also, the units in the table should match the units in the dropdown, e.g., "GiB", not "Gi".

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

Gkrumbach07 · 2024-12-17T21:17:35Z

Could you also update the other table node table to now use your view only table

DaoDaoNoCode · 2024-12-17T21:44:45Z

I think all the tables should use compact variant.

dpanshug · 2024-12-18T10:47:41Z

I believe there should be a space between the numbers and the units in the table, e.g., "1 GiB", not "1GiB", bur defer to @kaedward. Also, the units in the table should match the units in the dropdown, e.g., "GiB", not "Gi".

@vconzola this formatting is consistent across the Dashboard, and you can see the same approach on the spawner page under cluster storage. Do you recommend we change it?

vconzola · 2024-12-18T13:19:58Z

@dpanshug Please keep the units and spacing consistent with what's in the dashboard today - don't change it. I thought I got it right everywhere in the mockups, but I guess not. Apologies for the confusion.

DaoDaoNoCode · 2024-12-18T17:47:17Z

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

+    <Td dataLabel="Default">{identifier.defaultCount}</Td>
+    <Td dataLabel="Minimum allowed">{identifier.minCount}</Td>
+    <Td dataLabel="Maximum allowed">{identifier.maxCount}</Td>
+    {!showKebab && (


This should be showKebab && ...

DaoDaoNoCode · 2024-12-18T17:48:37Z

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

+const NodeResourceTable: React.FC<NodeResourceTableProps> = ({
+  nodeResources,
+  onUpdate,
+  viewOnly,


Maybe considering change this to

const viewOnly = !onUpdate;

Because if it's not view only, it should always have an onUpdate function.

DaoDaoNoCode · 2024-12-18T17:49:08Z

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

+              updatedIdentifiers.splice(rowIndex, 1);
+              onUpdate?.(updatedIdentifiers);
+            }}
+            showKebab={!!viewOnly}


Should be showKebab={!viewOnly} after you make the change in the NodeResourceTableRow

DaoDaoNoCode · 2024-12-18T19:07:21Z

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

+        label="Default"
+        fieldId="default"


These are maximum allowed.

DaoDaoNoCode · 2024-12-18T19:09:53Z

frontend/src/pages/hardwareProfiles/ManageNodeResourceSection.tsx

+  setNodeResources: (identifiers: Identifier[]) => void;
+};
+
+export const ManageNodeResourceSection: React.FC<ManageNodeResourceSectionProps> = ({


This is a single file, maybe consider exporting it as default like other components?

DaoDaoNoCode · 2024-12-18T19:29:17Z

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

+
+  return (
+    <Form>
+      <FormGroup label="Resource label" fieldId="resource-label">


Should add isRequired

DaoDaoNoCode · 2024-12-18T19:29:24Z

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

+        />
+      </FormGroup>
+
+      <FormGroup label="Resource identifier" fieldId="resource-identifier">


Should add isRequired

DaoDaoNoCode · 2024-12-18T20:04:34Z

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

+    if (existingIdentifier) {
+      return true;
+    }


Why are you not checking the identifier when editing? If I am editing a custom identifier, then it could be duplicated to another one, right? Try to create 2 identifiers, then edit one to change the identifier to the other and see if it throws the error.

In another word, this check only needs to be

const isUniqueIdentifier = identifier.identifier === existingIdentifier?.identifier || !nodeResources.some((i) => i.identifier === identifier.identifier);

DaoDaoNoCode · 2024-12-18T21:06:30Z

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

+            existingIdentifier &&
+            (identifier.identifier === 'cpu' || identifier.identifier === 'memory')


I think this should be just:

Suggested change

existingIdentifier &&

(identifier.identifier === 'cpu' || identifier.identifier === 'memory')

existingIdentifier?.identifier === 'cpu' || existingIdentifier?.identifier === 'memory'

DaoDaoNoCode · 2024-12-18T21:07:07Z

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

+      <FormGroup label="Resource identifier" fieldId="resource-identifier">
+        <TextInput
+          value={identifier.identifier || ''}
+          onChange={(_, value) => setIdentifier('identifier', value)}


This field should also be disabled if it's CPU or RAM based on what I saw in the mockups (Or probably disable it based on the identifier field, WDYT? @Gkrumbach07 )

DaoDaoNoCode · 2024-12-18T21:24:12Z

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

+
+  return (
+    <Modal
+      title={existingIdentifier ? 'Edit resource' : 'Add resource'}


Should be Edit node resource and Add node resource here.

DaoDaoNoCode · 2024-12-18T21:30:13Z

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

+
+  const [unitOptions, setUnitOptions] = React.useState<UnitOption[]>();
+
+  const isUniqueIdentifier = React.useMemo(() => {


You don't need to use useMemo on a boolean IMO, it's always reference-stable.

DaoDaoNoCode · 2024-12-18T21:30:24Z

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

+    }
+  }, [identifier]);
+
+  const isButtonDisabled = React.useMemo(() => {


Same here, no need to use useMemo

DaoDaoNoCode · 2024-12-18T21:34:26Z

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

+  const [validated, setValidated] = React.useState<'default' | 'error' | 'success'>('default');
+
+  React.useEffect(() => {
+    setValidated(isUniqueIdentifier ? 'default' : 'error');
+  }, [isUniqueIdentifier]);


You don't need these at all:

Suggested change

const [validated, setValidated] = React.useState<'default' | 'error' | 'success'>('default');

React.useEffect(() => {

setValidated(isUniqueIdentifier ? 'default' : 'error');

}, [isUniqueIdentifier]);

const validated = isUniqueIdentifier ? 'default' : 'error';

DaoDaoNoCode · 2024-12-18T21:40:11Z

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

+            existingIdentifier &&
+            (identifier.identifier === 'cpu' || identifier.identifier === 'memory')
+          }
+          validated={validated}


Missed error message here? Another resource with the same identifier already exists. The resource identifier must be unique.

DaoDaoNoCode · 2024-12-18T22:19:23Z

frontend/src/pages/hardwareProfiles/ManageNodeResourceSection.tsx

+  const [isNodeResourceModalOpen, setIsNodeResourceModalOpen] = React.useState<boolean>(false);
+  return (
+    <>
+      <FormSection


In the mockup, there is a description under this section title. Also, the button is a link style below the table but not next to the section title. However, the description is missed here in this PR and the button becomes the secondary button next to the title.

I am OK with changing the edit and delete icon to the kebab menu. However, I am not sure about the description and also the add button because it can affect how we show the empty state.

Can you check and help confirm that @vconzola?

Please implement as shown in the mockup including the description, the action icons in place of a kebab and the link button for Add resource. Thanks.

@dpanshug Please refer to the implementation here

this is not the latest mocks. did you verify with the latest

Where is the latest mock? I checked this one https://www.figma.com/design/UFhLtsPxoETwd39pnMsASV/Hardware-profiles?node-id=0-1&p=f&t=52XPdoeFVdZ2Bkl6-0.

DaoDaoNoCode · 2024-12-20T18:36:29Z

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

+
+  return (
+    <>
+      <Table


You will need to use TableBase instead of Table here. Otherwise, It will automatically sort on the first column, which is Resource label even if we set sortable: false here.

openshift-ci bot added the do-not-merge/work-in-progress This PR is in WIP state label Dec 11, 2024

openshift-ci bot requested review from DaoDaoNoCode and manaswinidas December 11, 2024 12:24

dpanshug force-pushed the node-table branch from c74e4c7 to be66e0a Compare December 11, 2024 12:24

DaoDaoNoCode reviewed Dec 11, 2024

View reviewed changes

frontend/src/pages/hardwareProfiles/nodeResource/NodeResourceTableRow.tsx Outdated Show resolved Hide resolved

dpanshug force-pushed the node-table branch from be66e0a to 7ec2c5d Compare December 12, 2024 12:33

dpanshug changed the title ~~[WIP] Node resource table and modals~~ Node resource table and modals Dec 12, 2024

openshift-ci bot removed the do-not-merge/work-in-progress This PR is in WIP state label Dec 12, 2024

dpanshug force-pushed the node-table branch 2 times, most recently from 13a9f2d to 60d87b6 Compare December 12, 2024 12:47

dpanshug requested a review from DaoDaoNoCode December 12, 2024 12:55

dpanshug force-pushed the node-table branch 2 times, most recently from fd5b060 to fd8a726 Compare December 12, 2024 13:02

Gkrumbach07 reviewed Dec 12, 2024

View reviewed changes

frontend/src/pages/hardwareProfiles/nodeResource/NodeResourceForm.tsx Outdated Show resolved Hide resolved

Gkrumbach07 reviewed Dec 12, 2024

View reviewed changes

frontend/src/pages/hardwareProfiles/nodeResource/ManageNodeResourceModal.tsx Outdated Show resolved Hide resolved

Gkrumbach07 reviewed Dec 12, 2024

View reviewed changes

frontend/src/pages/hardwareProfiles/nodeResource/ManageNodeResourceModal.tsx Outdated Show resolved Hide resolved

Gkrumbach07 reviewed Dec 12, 2024

View reviewed changes

frontend/src/pages/hardwareProfiles/nodeResource/NodeResourceTable.tsx Show resolved Hide resolved

Gkrumbach07 reviewed Dec 12, 2024

View reviewed changes

frontend/src/pages/hardwareProfiles/nodeResource/NodeResourceTableRow.tsx Outdated Show resolved Hide resolved

Gkrumbach07 reviewed Dec 12, 2024

View reviewed changes

frontend/src/pages/hardwareProfiles/nodeResource/NodeResourceForm.tsx Outdated Show resolved Hide resolved

Gkrumbach07 reviewed Dec 12, 2024

View reviewed changes

frontend/src/types.ts Outdated Show resolved Hide resolved

dpanshug force-pushed the node-table branch from fd8a726 to 7f71090 Compare December 17, 2024 14:56

Gkrumbach07 reviewed Dec 17, 2024

View reviewed changes

frontend/src/pages/hardwareProfiles/nodeResource/CountFormField.tsx Outdated Show resolved Hide resolved

dpanshug force-pushed the node-table branch from 7f71090 to 1abbee0 Compare December 18, 2024 10:20

dpanshug force-pushed the node-table branch from 1abbee0 to c2f6c05 Compare December 18, 2024 10:21

Node resource table and modal

6580679

dpanshug force-pushed the node-table branch from c2f6c05 to 6580679 Compare December 18, 2024 10:42

DaoDaoNoCode requested changes Dec 18, 2024

View reviewed changes

openshift-ci bot assigned DaoDaoNoCode Dec 18, 2024

DaoDaoNoCode reviewed Dec 18, 2024

View reviewed changes

DaoDaoNoCode reviewed Dec 20, 2024

View reviewed changes

DaoDaoNoCode mentioned this pull request Dec 20, 2024

Add create/edit/duplicate hardware profile page #3604

Open

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Node resource table and modals #3565

Node resource table and modals #3565

dpanshug commented Dec 11, 2024 •

edited

Loading

dpanshug commented Dec 11, 2024 •

edited

Loading

codecov bot commented Dec 11, 2024 •

edited

Loading

openshift-ci bot commented Dec 12, 2024

dpanshug commented Dec 12, 2024

vconzola commented Dec 13, 2024

Gkrumbach07 commented Dec 17, 2024

DaoDaoNoCode commented Dec 17, 2024

dpanshug commented Dec 18, 2024

vconzola commented Dec 18, 2024

DaoDaoNoCode Dec 18, 2024

DaoDaoNoCode Dec 18, 2024 •

edited

Loading

DaoDaoNoCode Dec 18, 2024

DaoDaoNoCode Dec 18, 2024

DaoDaoNoCode Dec 18, 2024

DaoDaoNoCode Dec 18, 2024

DaoDaoNoCode Dec 18, 2024

DaoDaoNoCode Dec 18, 2024

DaoDaoNoCode Dec 18, 2024

DaoDaoNoCode Dec 18, 2024

DaoDaoNoCode Dec 18, 2024 •

edited

Loading

DaoDaoNoCode Dec 18, 2024

DaoDaoNoCode Dec 18, 2024

DaoDaoNoCode Dec 18, 2024

DaoDaoNoCode Dec 18, 2024

DaoDaoNoCode Dec 18, 2024

DaoDaoNoCode Dec 18, 2024 •

edited

Loading

vconzola Dec 19, 2024

DaoDaoNoCode Dec 19, 2024

Gkrumbach07 Dec 19, 2024

DaoDaoNoCode Dec 19, 2024

DaoDaoNoCode Dec 20, 2024

		existingIdentifier &&
		(identifier.identifier === 'cpu' \|\| identifier.identifier === 'memory')

	existingIdentifier &&
	(identifier.identifier === 'cpu' \|\| identifier.identifier === 'memory')
	existingIdentifier?.identifier === 'cpu' \|\| existingIdentifier?.identifier === 'memory'


		const [unitOptions, setUnitOptions] = React.useState<UnitOption[]>();

		const isUniqueIdentifier = React.useMemo(() => {

Node resource table and modals #3565

Are you sure you want to change the base?

Node resource table and modals #3565

Conversation

dpanshug commented Dec 11, 2024 • edited Loading

Description

How Has This Been Tested?

Test Impact

Request review criteria:

dpanshug commented Dec 11, 2024 • edited Loading

codecov bot commented Dec 11, 2024 • edited Loading

Codecov Report

openshift-ci bot commented Dec 12, 2024

dpanshug commented Dec 12, 2024

vconzola commented Dec 13, 2024

Gkrumbach07 commented Dec 17, 2024

DaoDaoNoCode commented Dec 17, 2024

dpanshug commented Dec 18, 2024

vconzola commented Dec 18, 2024

Choose a reason for hiding this comment

DaoDaoNoCode Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DaoDaoNoCode Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DaoDaoNoCode Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dpanshug commented Dec 11, 2024 •

edited

Loading

dpanshug commented Dec 11, 2024 •

edited

Loading

codecov bot commented Dec 11, 2024 •

edited

Loading

DaoDaoNoCode Dec 18, 2024 •

edited

Loading

DaoDaoNoCode Dec 18, 2024 •

edited

Loading

DaoDaoNoCode Dec 18, 2024 •

edited

Loading