Assets Page Implementation using Carbon Design System#218
Open
Faisal77666 wants to merge 5 commits intoopencost:mainfrom
Open
Assets Page Implementation using Carbon Design System#218Faisal77666 wants to merge 5 commits intoopencost:mainfrom
Faisal77666 wants to merge 5 commits intoopencost:mainfrom
Conversation
added 2 commits
February 11, 2026 17:12
- Integrated Carbon Design System components for asset visualization. - Fixed MUI Select out-of-range warnings with value fallbacks. - Optimized provider injection to prevent MetaMask connection race conditions.
✅ Deploy Preview for opencost-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
OpenCost UI: Assets Page Implementation using Carbon Design System
📋 Overview
This PR implements a comprehensive Assets Discovery page for the OpenCost UI using the Carbon Design System components. The page provides deep visibility into cloud infrastructure resources with real-time cost tracking, filtering, and detailed breakdowns.
📸 UI Preview
The screenshot above confirms the successful rendering of the Infrastructure Assets page, including the KPI tiles and the searchable Asset Inventory table.
✨ Key Features
1. Asset Inventory Table
Displays all infrastructure assets with core metrics: Name, Category, Type, Cluster, and Total Cost.
Deep Visibility: Expandable rows reveal detailed asset information:
Provider ID and Cluster identity.
Resource cost breakdown (CPU, RAM, Storage).
Organization: Sortable columns for efficient navigation of large datasets.
2. KPI Dashboard
Total Spend: Aggregate cost of all assets for the selected time window.
Active Assets: Real-time count of discovered resources.
Visual Hierarchy: Carbon Tiles provide a clean, scannable section for high-level metrics.
3. Advanced Search & Filtering
Real-time search across asset names, types, and clusters via the
TableToolbarSearchcomponent.Instant filter feedback with automatic re-pagination of results.
4. Pagination & UX
Configurable page sizes (10, 20, 50 items per page).
Data Export: CSV export button to download the complete asset inventory for external analysis.
Currency Support: Respects the user's preferred currency (USD, etc.) using the existing
toCurrency()utility.🛠️ Design Decisions
Why Carbon Design System?
Component | Rationale -- | -- DataTable | Provides native sort and expand functionality. TableExpandRow | Shows details without modal overhead, keeping context visible. Pagination | Ensures smooth browsing for high asset counts. Tile | Provides visual distinction for key performance indicators (KPIs).Consistency: Matches existing OpenCost UI aesthetics (Allocations, CloudCosts).
Accessibility: Built-in WCAG 2.1 AA compliance via Carbon components.
Maintainability: Reduces custom CSS and ensures a responsive grid-based layout across all screen sizes.
📁 Files Modified/Created
src/pages/Assets.js— Main page component containing the Carbon implementation.src/services/assets.js— API service layer with fallback logic.src/index.html— Updated entry point with styling hooks.package.json/package-lock.json— Added@carbon/reactand@parcel/transformer-sassto the build pipeline.🚀 How to Use
Navigate to the Assets page via the sidebar.
Review the KPI summary at the top for a cost overview.
Filter the inventory using the search bar in the table toolbar.
Expand any row to view specific CPU/RAM cost compositions.
Export the inventory to CSV if needed for reporting.
Related Issue: Closes #28
Design System: Carbon v11