Skip to content

Comments

Assets UI#188

Open
AAdIprog wants to merge 12 commits intoopencost:mainfrom
AAdIprog:assets-ui
Open

Assets UI#188
AAdIprog wants to merge 12 commits intoopencost:mainfrom
AAdIprog:assets-ui

Conversation

@AAdIprog
Copy link

@AAdIprog AAdIprog commented Feb 6, 2026

What does this PR change?

  • Adds a new Assets page to the OpenCost UI that displays infrastructure asset costs (Nodes, Disks, LoadBalancers, etc.)
  • Implements the page using IBM Carbon Design System components for a modern, professional UI
  • Adds dark mode support with a theme toggle and complete CSS variable system
  • Creates new components: KPITile, CostDistribution (donut chart), AssetTypeChart (horizontal bar chart), AssetsHeader, AssetTable (with batch actions and search), AssetDetailPanel (side panel), StatCard, and CostTrendChart
  • Adds a new AssetsService for fetching and transforming asset data from the /model/assets API
  • Fixes a bug in the CSV export where the window parameter shadowed the global window object
  • Fixes Export CSV button alignment in the asset table
  • Changes the demo API endpoint to https://demo.infra.opencost.io

Does this PR relate to any other PRs?

How will this PR impact users?

  • Users will have a new "Assets" navigation item in the sidebar that takes them to a comprehensive asset cost dashboard
  • Users can view cost breakdowns by asset type (Node, Disk, LoadBalancer, ClusterManagement)
  • Users can filter assets by time window (Today, Last 7 days, Last 30 days, etc.) and aggregate by type, namespace, cluster, service, node, label, or provider ID
  • Users can toggle between light and dark mode using the theme toggle button
  • Users can search, sort, and export asset data to CSV
  • Users can click on individual assets to see detailed information in a side panel

Does this PR address any GitHub or Zendesk issues?

How was this PR tested?

  • Manual testing of the Assets page in the browser
  • Tested with live data from https://demo.infra.opencost.io
  • Verified dark mode theme toggle works correctly
  • Tested all chart visualizations (donut chart, horizontal bar chart)
  • Tested table functionality (search, sort, selection, export)
  • Tested responsive behavior across different viewport sizes
  • Verified CSV export functionality works correctly after fixing the variable shadowing bug

Does this PR require changes to documentation?

  • Yes - README should be updated to mention the new Assets page feature
  • User documentation should include screenshots and usage instructions for the Assets dashboard

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?

  • Yes, this feature is ready for the next release and adds significant value for users monitoring infrastructure asset costs

@netlify
Copy link

netlify bot commented Feb 6, 2026

Deploy Preview for opencost-ui failed. Why did it fail? →

Name Link
🔨 Latest commit 1a676ae
🔍 Latest deploy log https://app.netlify.com/projects/opencost-ui/deploys/699bcc3eef762e0008e07055

- Add Assets page at /assets route with stat cards, cost distribution donut chart, asset type chart, and data table
- Implement dark mode toggle with ThemeContext and localStorage persistence
- Add CSS variables for theming across all components
- Fix allocation endpoint to use /model/allocation
- Update chart colors for better visibility in dark mode
- Fix NaN display in Cost Distribution chart center

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant