Skip to content

Conversation

@Deepanshu1230
Copy link

@Deepanshu1230 Deepanshu1230 commented Feb 8, 2026

Description

This PR adds a comprehensive Assets Page (/assets) to the OpenCost UI, fully implemented using the Carbon Design System (@carbon/react).

This feature allows users to visualize and filter their infrastructure assets (Nodes, Disks, Load Balancers, etc.) to understand cost breakdowns at a granular level. It includes a robust mock data layer that enables full UI development and review without requiring a running OpenCost backend.


Key feature

  • KPI Summary Tiles: Displays grand totals and per-type cost breakdowns.

  • Interactive Visualizations:
    Donut Chart: Cost by Asset Type (hover for details).
    Bar Chart: Cost by Provider.

  • Advanced Data Table:

  • Sortable, searchable, and paginated.

  • Includes Iconography for resource types (Nodes vs Storage) for faster scanning.

  • Progress Bars within cost columns to visualize relative expense.

  • Smart Filtering: Dropdown filters for Time Range, Asset Type, and Category that update URL parameters for shareability.

  • Developer Experience: Automatically loads realistic mock/sample data (AWS/GCP assets) when the backend is unavailable, making local testing (npm run serve) seamless.


Fixes / Related Issues

Closes #28 (Support Assets in the UI)
Part of LFX Mentorship Term 1 2026 Challenge (#155)


Screenshots

image image image

How Was This Tested?

I verified these changes locally using the built-in mock data adapter:

  • Build: Passed npm run build (Parcel).
  • Functionality: Verified /assets loads correctly on localhost:1234.
  • Filtering: Confirmed Time Range, Asset Type, and Category filters update the data and URL correctly.
  • Interactivity: Tested Sort, Search, Pagination, and row selection.
  • Regression: Verified no CSS leakage to existing pages (Allocation, Cloud Costs, External Costs).

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?

  • No. This PR is part of a mentorship coding challenge and serves as an initial implementation rather than a finalized release feature.

@netlify
Copy link

netlify bot commented Feb 8, 2026

Deploy Preview for opencost-ui ready!

Name Link
🔨 Latest commit 08f2294
🔍 Latest deploy log https://app.netlify.com/projects/opencost-ui/deploys/6988cf94f8d5ab0008fd7f69
😎 Deploy Preview https://deploy-preview-198--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.

dependabot bot and others added 5 commits February 8, 2026 23:24
Bumps [axios](https://github.com/axios/axios) from 1.13.2 to 1.13.3.
- [Release notes](https://github.com/axios/axios/releases)
- [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md)
- [Commits](axios/axios@v1.13.2...v1.13.3)

---
updated-dependencies:
- dependency-name: axios
  dependency-version: 1.13.3
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Signed-off-by: Deepanshu1230 <144600350+Deepanshu1230@users.noreply.github.com>
Signed-off-by: ADITYA TIWARI <adityatiwari342005@gmail.com>
Signed-off-by: Deepanshu1230 <144600350+Deepanshu1230@users.noreply.github.com>
Signed-off-by: Deepanshu1230 <144600350+Deepanshu1230@users.noreply.github.com>
Signed-off-by: Deepanshu1230 <144600350+Deepanshu1230@users.noreply.github.com>
Signed-off-by: Deepanshu1230 <144600350+Deepanshu1230@users.noreply.github.com>
Signed-off-by: Deepanshu1230 <144600350+Deepanshu1230@users.noreply.github.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.

Support Assets in the UI

2 participants