feat: Session usage monitor in react

[ironAiken2]

This PR resolves #2803 issue.

Changes:

• Displays the resources allocated to the session. Currently, the compute session node does not include a live stat field, which shows the live stat information of the main kernel associated with the session.
• Adjusts the number of Cols to be displayed in one Row based on the width of the drawer. On screen sizes smaller than md, 1Col is displayed in 1Row.
• Shows the appropriate icon for each accelerator device. For util, it shows just the percentage, and for memory on the device, it shows the specific usage.

How to test:

• Access the Detail page of the endpoint that is currently in service.
• Verify that resource usage looks normal.

Checklist: (if applicable)

• Mention to the original issue
• Documentation
• Minium required manager version
• Specific setting for review (eg., KB link, endpoint or how to setup)
• Minimum requirements to check during review
• Test case(s) to demonstrate the difference of before/after

[graphite-app]

Your org requires the Graphite merge queue for merging into main

Add the label “flow:merge-queue” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “flow:hotfix” to add to the merge queue as a hot fix.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

[ironAiken2]

• feat: Session usage monitor in react #2814 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• flow:merge-queue - adds this PR to the back of the merge queue
• flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Coverage report for ./react

St.❔	Category	Percentage	Covered / Total
🔴	Statements	5.19% (-0.02% 🔻)	395/7614
🔴	Branches	4.48% (-0.05% 🔻)	237/5289
🔴	Functions	3.11% (-0.01% 🔻)	78/2506
🔴	Lines	5.11% (-0.02% 🔻)	380/7440

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🔴	... / SessionUsageMonitor.tsx	0%	0%	0%	0%

Test suite run success

124 tests passing in 14 suites.

Report generated by 🧪jest coverage report action from 3ef88fd

[agatha197]

Memory doesn't have label, but CUDA memory has label.

[agatha197]

LGTM

[yomybaby]

I found several things that need improvement and discussion. Let's discuss this PR tomorrow.

• Should we include an icon?
• Should the progress bar be larger?
• How can we make it usable in the columns of the session list neo?
• There are incorrect labels and units.

[ironAiken2]

The size property of progressProps or showIcon can be used to modify the visibility of the icon or the size of the progress bar.