Skip to content

Conversation

@samar-703
Copy link

What does this PR change?

  • Implements the Assets page for OpenCost UI using Carbon Design System
  • Adds summary metrics dashboard with 4 key metrics (Total Assets, Total Cost, Asset Types, Average Cost)
  • Implements cost breakdown visualization with interactive donut chart
  • Creates searchable and sortable data table with asset details (Name, Type, Provider, Cluster, CPU, RAM, Cost)
  • Adds time window and asset type filtering
  • Implements skeleton loading states for improved perceived performance
  • Uses card-based layout with surface elevation for visual hierarchy

Does this PR relate to any other PRs?

  • Part of the broader OpenCost UI revamp initiative
  • This PR addresses the LFX mentorship coding challenge

How will this PR impact users?

  • New functionality: Users can now view and analyze their infrastructure assets through the OpenCost UI
  • Cost visibility: Users can quickly identify which asset types (Nodes, Disks, LoadBalancers, ClusterManagement) consume the most resources
  • Data exploration: Searchable and sortable table allows users to drill down into specific assets
  • Flexible analysis: Time window filtering enables users to analyze costs across different time periods
  • Better UX: Skeleton loading states provide immediate feedback, making the application feel more responsive
  • Improved discoverability: Tooltips and clear visual hierarchy help users navigate the interface

Does this PR address any GitHub or Zendesk issues?

How was this PR tested?

  • Tested against the demo API: https://demo.infra.opencost.io/model/assets
  • Verified time window filtering works correctly (Today, Last 7 days, Last 30 days)
  • Verified asset type filtering correctly filters the data table
  • Tested table sorting functionality on all columns
  • Tested search functionality filters assets by name
  • Tested refresh button successfully updates data
  • Verified skeleton loading states display correctly during data fetch
  • Tested responsive behavior on different screen sizes
  • Verified no console errors or warnings
  • Tested with both populated data and edge cases (empty states, loading states)
  • Confirmed all Carbon Design System components render properly

Does this PR require changes to documentation?

  • No documentation changes required. The Assets API endpoint is already documented in the OpenCost/Kubecost documentation.

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?

  • This PR is submitted as part of the LFX Mentorship coding challenge for Issue [LFX Mentorship Term 1 2026] OpenCost UI Revamp #155
  • The maintainers can determine the appropriate release timeline and labeling based on the mentorship program schedule and their release roadmap
  • Will defer to maintainer judgment on when this should be included in a release

Signed-off-by: samaR <hello.samar7@gmail.com>
@netlify
Copy link

netlify bot commented Feb 9, 2026

Deploy Preview for opencost-ui ready!

Name Link
🔨 Latest commit e9b858c
🔍 Latest deploy log https://app.netlify.com/projects/opencost-ui/deploys/6989eec75f88120008dfb2cb
😎 Deploy Preview https://deploy-preview-208--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.

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.

Support Assets in the UI

1 participant