feat: Session usage monitor in react #2814

ironAiken2 · 2024-11-05T07:46:33Z

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 · 2024-11-05T07:46:37Z

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 · 2024-11-05T07:46:47Z

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

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

github-actions · 2024-11-05T07:47:56Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	5.26% (-0.02% 🔻)	395/7503
🔴	Branches	4.54% (-0.04% 🔻)	237/5220
🔴	Functions	3.15% (-0.01% 🔻)	78/2475
🔴	Lines	5.18% (-0.02% 🔻)	380/7331

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 a1bc1c6

agatha197

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

react/src/components/SessionUsageMonitor.tsx

agatha197

LGTM

yomybaby · 2024-11-19T02:23:20Z

react/src/components/SessionUsageMonitor.tsx

+      </Row>
+      <Flex justify="end" style={{ width: '100%' }}>
+        <Typography.Text>
+          {`I/O Read: ${iSizeToSize(sortedLiveStat?.io_read?.current, 'g')?.numberUnit}B / Write: ${iSizeToSize(sortedLiveStat?.io_write?.current, 'g')?.numberUnit}B`}


The iSizeToSize function is for binary size conversion, not for I/O. Please check the original version and ensure that the display matches it. See the reference here: https://github.com/lablup/backend.ai-webui/blob/main/src/components/backend-ai-session-list.ts#L4318-L4326

In that code, the API request value comes in as a MB value, but not in ComputeSessionNode, so I modified it to show it in MB, the same as the session list usage column, using convertDecimalSizeUnit.

yomybaby · 2024-11-19T02:36:21Z

react/src/components/SessionUsageMonitor.tsx

+const resourceTypeMap: {
+  [key in acceleratorType | 'cpu' | 'mem']: string;
+} = {
+  cpu: 'cpu',
+  mem: 'mem',
+  cuda: 'cuda.device',
+  rocm: 'rocm.device',
+  tpu: 'tpu.device',
+  ipu: 'ipu.device',
+  atom: 'atom.device',
+  'atom-plus': 'atom-plus.device',
+  gaudi2: 'gaudi2.device',
+  warboy: 'warboy.device',
+  rngd: 'rngd.device',
+  'hyperaccel-lpu': 'hyperaccel-lpu.device',
+};


It's better to create a function to add device without using hardcoded accelerator names.

yomybaby · 2024-11-19T02:37:58Z

react/src/components/SessionUsageMonitor.tsx

+        {_.map(sortedLiveStat, (value, key) => {
+          const device = key.split('_')?.[0] as keyof typeof resourceTypeMap;
+
+          return _.includes(
+            _.keysIn(_.omit(resourceTypeMap, 'cpu', 'mem')),
+            device,
+          ) ? (


Let's refactor this part. filter(or pickBy) first and map later.

github-actions bot assigned ironAiken2 Nov 5, 2024

github-actions bot added the size:L 100~500 LoC label Nov 5, 2024

ironAiken2 force-pushed the feat/session-usage-monitor branch from 3a48b36 to 8358664 Compare November 5, 2024 09:03

ironAiken2 requested review from agatha197 and yomybaby November 5, 2024 09:13

ironAiken2 marked this pull request as ready for review November 5, 2024 09:13

agatha197 requested changes Nov 12, 2024

View reviewed changes

ironAiken2 force-pushed the feat/session-usage-monitor branch from 8358664 to 63bd1b2 Compare November 12, 2024 09:15

ironAiken2 requested a review from agatha197 November 12, 2024 09:16

agatha197 requested changes Nov 12, 2024

View reviewed changes

ironAiken2 force-pushed the feat/session-usage-monitor branch from 63bd1b2 to e85e6a4 Compare November 13, 2024 03:17

ironAiken2 requested a review from agatha197 November 13, 2024 03:18

agatha197 approved these changes Nov 13, 2024

View reviewed changes

yomybaby requested changes Nov 19, 2024

View reviewed changes

ironAiken2 force-pushed the feat/session-usage-monitor branch from e85e6a4 to 87e4942 Compare November 25, 2024 05:47

ironAiken2 requested a review from yomybaby November 25, 2024 05:51

feat: Session usage monitor in react

a1bc1c6

ironAiken2 force-pushed the feat/session-usage-monitor branch from 87e4942 to a1bc1c6 Compare November 25, 2024 09:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Session usage monitor in react #2814

feat: Session usage monitor in react #2814

ironAiken2 commented Nov 5, 2024 •

edited

Loading

graphite-app bot commented Nov 5, 2024

ironAiken2 commented Nov 5, 2024 •

edited

Loading

github-actions bot commented Nov 5, 2024 •

edited

Loading

agatha197 left a comment

agatha197 left a comment

yomybaby Nov 19, 2024

ironAiken2 Nov 25, 2024

yomybaby Nov 19, 2024

yomybaby Nov 19, 2024

feat: Session usage monitor in react #2814

Are you sure you want to change the base?

feat: Session usage monitor in react #2814

Conversation

ironAiken2 commented Nov 5, 2024 • edited Loading

This PR resolves #2803 issue.

graphite-app bot commented Nov 5, 2024

Your org requires the Graphite merge queue for merging into main

ironAiken2 commented Nov 5, 2024 • edited Loading

github-actions bot commented Nov 5, 2024 • edited Loading

Coverage report for ./react

Test suite run success

agatha197 left a comment

Choose a reason for hiding this comment

agatha197 left a comment

Choose a reason for hiding this comment

yomybaby Nov 19, 2024

Choose a reason for hiding this comment

ironAiken2 Nov 25, 2024

Choose a reason for hiding this comment

yomybaby Nov 19, 2024

Choose a reason for hiding this comment

yomybaby Nov 19, 2024

Choose a reason for hiding this comment

ironAiken2 commented Nov 5, 2024 •

edited

Loading

ironAiken2 commented Nov 5, 2024 •

edited

Loading

github-actions bot commented Nov 5, 2024 •

edited

Loading

Coverage report for `./react`