Skip to content

Add Assets page UI with Carbon Design System#196

Open
r6mez wants to merge 8 commits intoopencost:mainfrom
r6mez:assets-page
Open

Add Assets page UI with Carbon Design System#196
r6mez wants to merge 8 commits intoopencost:mainfrom
r6mez:assets-page

Conversation

@r6mez
Copy link

@r6mez r6mez commented Feb 8, 2026

What does this PR change?

  • Revamps the Assets page UI using Carbon Design System
  • Adds light/dark theme support
  • Replaces existing side navigation with Carbon components
  • Implements tabbed interface with 5 data tables (all nodes + 4 category-specific views for compute, storage, network, and management)
  • Adds date range selector with calendar input and predefined window dropdown
  • Displays total cost tiles at the top showing costs per asset type
  • Adds clickable rows that open modals with detailed node properties and labels

Does this PR relate to any other PRs?

  • No

How will this PR impact users?

  • Provides clearer data organization with category-specific tables showing relevant properties
  • Enables easy comparison and sorting of assets by different attributes
  • Improves accessibility with theme switching
  • Maintains consistency with other views through the currency switch feature
  • Allows quick access to total costs and detailed node information

Does this PR address any GitHub or Zendesk issues?

How was this PR tested?

  • Tested against OpenCost demo backend (https://demo.infra.opencost.io/model)
  • Verified data tables display correctly for all asset categories
  • Tested theme switching between light and dark modes
  • Validated date range selection and window dropdown functionality
  • Confirmed modal displays complete node properties and labels

Does this PR require changes to documentation?

  • Yes, documentation should cover new tabbed navigation, theme switching, and modal interaction

Have you labeled this PR and its corresponding Issue as "next release" if it should be part of the next OpenCost release? If not, why not?

  • I don't think now it should unless it got chosen as the accepted task implementation for the LFX mentorship program.

@netlify
Copy link

netlify bot commented Feb 8, 2026 •
edited
Loading

✅ Deploy Preview for opencost-ui ready!

Name Link
🔨 Latest commit 66ff5ec
🔍 Latest deploy log https://app.netlify.com/projects/opencost-ui/deploys/6988c11a37b9e800086d79f3
😎 Deploy Preview https://deploy-preview-196--opencost-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

r6mez added 7 commits February 8, 2026 18:39
@r6mez
Add Carbon Design System dependencies for icons and React components
4ff4279 
Signed-off-by: Ramez Medhat <iramezdev@gmail.com>
@r6mez
Refactor sidebar navigation to use Carbon Design System components
7a79583 
Signed-off-by: Ramez Medhat <iramezdev@gmail.com>
@r6mez
Fix scroll bar and page padding problems
76fad41 
Signed-off-by: Ramez Medhat <iramezdev@gmail.com>
@r6mez
Update font-family to use IBM Plex Sans.
f9de47d 
Signed-off-by: Ramez Medhat <iramezdev@gmail.com>
@r6mez
Refactor Header component to use Carbon Design System
5a22246 
Signed-off-by: Ramez Medhat <iramezdev@gmail.com>
@r6mez
Move window options to a separate constants file for better organization
d7386ac 
Signed-off-by: Ramez Medhat <iramezdev@gmail.com>
@r6mez
Add theme switch
69c9bf1 
- add theme context and provider
- update the side navbar to hold the theme switch button
- update page background color anbd text color

Signed-off-by: Ramez Medhat <iramezdev@gmail.com>
@r6mez r6mez changed the title Assets page Add Assets page UI with Carbon Design System Feb 8, 2026
@r6mez r6mez force-pushed the assets-page branch 2 times, most recently from 2f49e8c to e809a96 Compare February 8, 2026 16:53
@r6mez
Add Asset components and utility functions
66ff5ec 
- Create AssetsService for fetching asset data from the backend.
- Create formatDuration utility functions.
- Create AssetTable for listing assets
- Implementing asset page.
- Implement AssetDetailsModal for displaying asset details.

Signed-off-by: Ramez Medhat <iramezdev@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

needs-follow-up

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Support Assets in the UI

1 participant

@r6mez