feat: Implemented Assets Dashboard with Carbon Design & Actionable Insights #198
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
How Was This Tested?
I verified these changes locally using the built-in mock data adapter:
Does this PR require changes to 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?