Skip to content

Conversation

@taanvi2205
Copy link

@taanvi2205 taanvi2205 commented Feb 7, 2026

What does this PR change?

  • Adds a new Assets page to the OpenCost UI using the Carbon Design System (@carbon/react)
  • Includes realistic mock/sample data (15 assets across GCP and AWS) that automatically loads when the OpenCost backend is unavailable, enabling local development and review without a running backend (npm run servehttp://localhost:1234/assets)
  • Implements interactive donut chart (cost by asset type) and bar chart (cost by provider) with Recharts
  • Adds summary tiles showing grand total and per-type cost breakdowns with click-to-filter
  • Adds a sortable, searchable, paginated data table with color-coded asset type tags
  • Adds an asset detail modal showing all properties, labels, and CPU/RAM utilization breakdown for nodes
  • Includes Carbon Dropdown filters for time range, asset type, and category (URL-driven state)
  • Auto-falls back to mock data when the OpenCost backend is unavailable for local development

Does this PR relate to any other PRs?

  • No

How will this PR impact users?

  • Users can now navigate to /assets from the sidebar to visualize their infrastructure assets (nodes, disks, load balancers, network, cluster management, cloud) with cost breakdowns, charts, and filtering

Does this PR address any GitHub or Zendesk issues?

How was this PR tested?

  • Verified build passes with npm run build (Parcel)
  • Tested locally at http://localhost:1234/assets using built-in sample data
  • Confirmed all filters (time range, asset type, category) update URL params and re-filter data
  • Confirmed summary tiles display correct totals and click-to-filter works
  • Confirmed donut chart hover shows slice info in center, bar chart tooltip works
  • Confirmed table sorting, search, pagination, and row-click detail modal all function
  • Confirmed no CSS leaks to existing pages (Allocation, Cloud Costs, External Costs)
Screenshot 2026-02-08 at 12 55 45 AM Screenshot 2026-02-08 at 12 56 51 AM

Does this PR require changes to documentation?

  • No

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?

  • Not labeled yet — this is a new feature contribution from the LFX Mentorship coding challenge

@netlify
Copy link

netlify bot commented Feb 7, 2026

Deploy Preview for opencost-ui ready!

Name Link
🔨 Latest commit 2e66da1
🔍 Latest deploy log https://app.netlify.com/projects/opencost-ui/deploys/698793f3c3fe1c0008dc6b9d
😎 Deploy Preview https://deploy-preview-192--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.

Implement the Assets page to visualize OpenCost's /assets API data using
IBM Carbon Design System components (Dropdown, Tag). Includes summary
dashboard tiles, dual charts (cost by type + cost by provider), sortable
data table with search, and detail modal with CPU/RAM utilization
breakdown for nodes. Falls back to mock data when backend is unavailable.

Signed-off-by: Taanvi Khevaria <taanvikhevaria@gmail.com>
…ue focus outlines

Signed-off-by: Taanvi Khevaria <taanvikhevaria@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