Skip to content

Conversation

@Talhaasif7
Copy link

@Talhaasif7 Talhaasif7 commented Feb 8, 2026

What does this PR change?

  • Introduces a brand-new Assets page that acts as an Infrastructure Cost Control Center, filling the gap where asset-level visibility was missing in the OpenCost UI despite the Assets API already existing.
  • Adds a cost heatmap (treemap) that visually represents infrastructure spend (size = cost, color = efficiency), allowing users to instantly identify expensive and wasteful resources.
  • Includes an Insights rail with a radial health gauge and critical insight cards (e.g., unmounted volumes) to surface meaningful cost and usage anomalies.
  • Implements a more decision-focused assets data table with reordered columns (Name → Provider → Cluster → Type → Trend → Cost), provider/cluster branding, and trend indicators.
  • Supports hybrid and multi-cloud environments (AWS, Azure, GCP, On-Prem) using realistic mock data to keep the UI functional even when the backend is unavailable.
  • Aligns fully with the OpenCost design system by using Carbon components and standardized loading indicators.
Screenshot 2026-02-08 214424 Screenshot 2026-02-08 214441 Screenshot 2026-02-08 214454

Does this PR relate to any other PRs?

  • No, this PR is standalone and specifically focused on adding Assets support to the UI.

How will this PR impact users?

  • Users gain new visibility into infrastructure assets (nodes, disks, load balancers) that were previously not accessible in the UI.
  • Inefficient and high-cost resources become immediately discoverable through visual cues, eliminating the need to dig through paginated tables.
  • Teams running hybrid or multi-cloud setups get a single pane of glass to compare costs across providers.
  • Overall, this reduces cognitive load and helps users detect waste earlier, understand cost trends faster, and make better cost-control decisions.

Does this PR address any GitHub or Zendesk issues?

How was this PR tested?

  1. Verified that npm run serve builds successfully with no persistent errors.
  2. Checked responsive layouts of the grid, heatmap, and cards on standard desktop resolutions.
  3. Confirmed that mock data renders correctly in both the treemap interactions and the data table.
  4. Ensured there are no React warnings, key issues, or console errors.

Does this PR require changes to documentation?

  • No, this PR introduces a new UI feature without changing existing APIs or documented workflows.

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 as part of LFX Mentorship Term 1 (2026) – OpenCost UI Revamp, and release labeling can be decided after maintainer review.
Recording.2026-02-08.223431.mp4

@netlify
Copy link

netlify bot commented Feb 8, 2026

Deploy Preview for opencost-ui ready!

Name Link
🔨 Latest commit 16aba7c
🔍 Latest deploy log https://app.netlify.com/projects/opencost-ui/deploys/6989418a15fc9f0009efeea8
😎 Deploy Preview https://deploy-preview-197--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.

Signed-off-by: Talha Asif <talhaasif565@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