feat(gui): add full computing unit tab

[gracecluvohio]

What changes were proposed in this PR?

This PR adds the rest of the features to create a new computing unit tab, including creating and deleting computing units and viewing computing unit details. It is part 3 of 3 of PR #3691.

Demonstration:

Creating a new computing unit:

Screen.Recording.2026-03-29.at.2.50.27.PM.mov

Deleting a computing unit:

Screen.Recording.2026-04-05.at.11.15.21.PM.mov

Viewing computing unit details:

Screen.Recording.2026-04-05.at.11.13.42.PM.mov

Any related issues, documentation, discussions?

Closes #3690

How was this PR tested?

Tested locally

Was this PR authored or co-authored using generative AI tooling?

No

[chenlica]

@gracecluvohio Let's use "Compute" instead of "Computing Units" on the navigation bar.

[chenlica]

@kunwp1 Please review it.

[kunwp1]

@gracecluvohio Since this is part 3 of the computing unit tab, can it be reviewed independently, or should I wait for the first two PRs to be merged?

[gracecluvohio]

@gracecluvohio Since this is part 3 of the computing unit tab, can it be reviewed independently, or should I wait for the first two PRs to be merged?

You should probably wait for the first two PRs to be merged. Each PR adds commits on top of the others, so there will be less files to review (and less conflicts) if earlier PRs are reviewed and merged before later ones.

[kunwp1]

Thanks! Then I will wait until the two PRs are merged.

[gracecluvohio]

@kunwp1 The PR is ready for review now, please take a look when you have time. Thank you!

[Copilot]

Pull request overview

This PR completes the Dashboard “Computing Unit” tab feature set by adding UI flows for listing computing units, creating new units (Kubernetes/local), terminating units, and viewing unit details/metrics. It’s part 3/3 of the broader computing unit dashboard work (related to #3691) and closes #3690.

Changes:

• Implemented computing unit create + terminate flows in the dashboard computing unit section (including resource selection controls).
• Added a new computing-unit list-item component to render per-unit status/metrics and open a details modal.
• Introduced shared frontend utilities for computing-unit metadata rendering and resource parsing/conversion.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit.component.ts	Adds computing unit data loading + create/terminate logic and form state for the create modal.
frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit.component.html	Renders computing unit list and the “Create Computing Unit” modal UI.
frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit.component.scss	Styles for create modal controls (CPU/memory/GPU/JVM/shm).
frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit.component.spec.ts	Updates unit test providers/mocking for the expanded component dependencies.
frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component.ts	New component implementing per-unit rename, metrics calculations, and details modal open.
frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component.html	New template for list-item card, metrics popover, and delete action.
frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component.scss	Styling for the new list-item component layout and metrics.
frontend/src/app/dashboard/component/dashboard.component.html	Renames the sidebar label from “Computing Units” to “Compute”.
frontend/src/app/common/util/computing-unit.util.ts	Adds shared helpers for metadata table rendering and resource parsing/conversion.
frontend/src/app/app.module.ts	Registers the new list-item component in the app module declarations.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[kunwp1]

I have three questions:

1. We still have this old interface to create a computing unit. Don't we need to remove it?

2. We have a feature to share computing unit to other users and seems like it's missing in the new tab. Is this intentional?

3. If the code changes you are making are 100% reusing the old computing unit's logic, you can safely ignore the comments below. However, if that's the case, we have two duplicate codes in our codebase so I want you to refactor the code to remove duplicates.

[kunwp1]

Can you refactor cpuPercentage and memoryPercentage as they share a similar logic?

[gracecluvohio]

I could create a separate "percentage" function that takes the display unit and the conversion function to use, but I feel that could harm readability. Let me know what you think though.

[kunwp1]

Remove the word "Kubernetes". It's a low level detail for users.

[gracecluvohio]

It's part of the UI as well when creating the computing unit.

Screen.Recording.2026-04-06.at.12.09.12.AM.mov

I think it might be better to keep it, since the dropdown makes me think we may want to allow users to select between different types of computing units in the future. Not too sure though.

[gracecluvohio]

I have three questions:

1. We still have this old interface to create a computing unit. Don't we need to remove it?

2. We have a feature to share computing unit to other users and seems like it's missing in the new tab. Is this intentional? 3. If the code changes you are making are 100% reusing the old computing unit's logic, you can safely ignore the comments below. However, if that's the case, we have two duplicate codes in our codebase so I want you to refactor the code to remove duplicates.

1. I think having both features is helpful. Having both would allow us to manage computing units quickly from within a workflow (and choose one to run your workflow) and also manage them from one centralized place. @chenlica what do you think?
2. It was not intentional to exclude sharing, I can work on adding it though.
3. I agree, there is a decent amount of code duplication. I can extract some of the duplication out into computing-unit.util.ts or maybe create another component. However they're not exact dupilcates as the old computing unit component's logic also interacts with workflow executions.

[gracecluvohio]

As I work on this, I notice a lot of shared services (such as WorkflowComputingUnitManagingService, ComputingUnitStatusService) and shared types (DashboardWorkflowComputingUnit, WorkflowComputingUnitType) are currently under the frontend/src/app/workspace directory.

However, as they are used by both the workflow computing unit component (in the frontend/src/app/workspace folder) and the dashboard computing unit component (in the frontend/src/app/dashboard folder), it would probably be better to move them to the frontend/src/app/common folder, which stores many shared utilities and services.

I'll work on this later in a separate PR though, so that there aren't too many files in this PR.