[LFX Mentorship Term 1 2026] OpenCost UI Revamp - Add Asset Page Using Carbon Design System(Assignment Task) #206
Conversation
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
✅ Deploy Preview for opencost-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
Implements a new Assets dashboard page in the UI (Carbon Design System) to visualize and analyze storage asset costs, including KPIs, charts, filtering, tables, and an asset detail modal, plus supporting utilities/services and test infrastructure.
Changes:
- Added Assets page route and full dashboard UI (header controls, KPI cards, insights, charts, filters, table, detail modal).
- Added assets utilities/services for calculations, insights generation, and
/assetsAPI + mock data. - Introduced Carbon theming support and Jest-based unit test setup/configuration.
Reviewed changes
Copilot reviewed 43 out of 45 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/assetInsights.js | New insight-generation logic for asset recommendations. |
| src/utils/assetCalculations.js | New calculation helpers (usage, cost, efficiency, palettes). |
| src/utils/tests/assetInsights.test.js | Unit tests for insights generation. |
| src/utils/tests/assetCalculations.test.js | Unit tests for calculation helpers and palettes. |
| src/util.js | Renames internal time window variables; updates Cloud Costs graph formatting logic. |
| src/styles/assets/detail-panel.css | Styling for asset detail modal panel. |
| src/styles/assets/dashboard.css | Styling for assets dashboard, filters, table, and insights. |
| src/styles/assets/colors.css | Carbon-token-based color alias system and dark-mode overrides. |
| src/styles/assets/charts-layout.css | Layout/styling for chart tiles, grids, and responsive behavior. |
| src/services/assets.js | Assets API integration + mock data generator. |
| src/route.js | Adds /assets route and wraps app in Carbon Theme + ThemeProvider. |
| src/pages/Assets.js | New Assets dashboard page implementation (fetch, transform, filter, render). |
| src/css/index.css | Uses Carbon background token for global body background. |
| src/context/ThemeContext.js | New Carbon theme state management (prefers-dark + localStorage). |
| src/components/shared/tests/StatCard.test.js | Tests for new shared KPI card component. |
| src/components/shared/StatCard.js | New reusable KPI/stat tile component. |
| src/components/assets/tests/KPICards.test.js | Tests for KPI cards calculations/rendering. |
| src/components/assets/tests/FilterPanel.test.js | Tests for filter panel UI/behavior. |
| src/components/assets/tests/CostUtilizationChart.test.js | Tests for utilization chart rendering/empty state. |
| src/components/assets/tests/CostTrendChart.test.js | Tests for trend chart rendering and derived stats. |
| src/components/assets/tests/CostDistributionChart.test.js | Tests for distribution chart variants/empty state. |
| src/components/assets/tests/AssetsHeader.test.js | Tests for header controls and refresh action. |
| src/components/assets/tests/AssetTable.test.js | Tests for asset table rendering and expandable rows. |
| src/components/assets/tests/AssetDetailPanel.test.js | Tests for detail modal rendering and computed fields. |
| src/components/assets/KPICards.js | KPI computations and rendering via StatCard. |
| src/components/assets/InsightsPanel.js | Renders generated insights ranked by savings. |
| src/components/assets/FilterPanel.js | Carbon filter UI (search, checkbox filters, dev mock toggle). |
| src/components/assets/CostUtilizationChart.js | Scatter/donut utilization visualizations and status grouping. |
| src/components/assets/CostTrendChart.js | Trend chart variants and derived summary stats. |
| src/components/assets/CostDistributionChart.js | Distribution chart variants including cost-per-GB mode. |
| src/components/assets/AssetsHeader.js | Time window, aggregation, dark mode toggle, refresh control. |
| src/components/assets/AssetTable.js | Sortable/selectable table with expandable rows + CSV export. |
| src/components/assets/AssetDetailPanel.js | Asset details modal with utilization breakdown visualization. |
| src/components/ThemeToggle.js | Carbon icon button theme toggle component. |
| src/components/Page.js | Updates page background/text tokens + fixes paddingRight. |
| src/components/Nav/SidebarNav.js | Adds Assets nav item + token-based drawer styling. |
| src/components/Nav/NavItem.js | Token-based hover/active colors and link text color. |
| src/app.js | Imports Carbon base styles and Carbon Charts styles globally. |
| src/tests/setup.js | Jest DOM setup for Testing Library assertions. |
| src/tests/mocks/fileMock.js | Jest static asset mock. |
| package.json | Adds Carbon deps + Jest tooling and updates build/test scripts. |
| netlify.toml | Netlify build + SPA redirect configuration. |
| jest.config.js | Jest configuration (jsdom, Babel transform, mappers, coverage). |
| .babelrc | Adds preset-env + React automatic runtime configuration. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
vtushar06
force-pushed
the
Carbon-Asset-Page-LFX-Term1
branch
from
7b6beb1 to
521352a
Compare
…sights Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
…t costs Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
…uster, asset type, and storage class Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
… storage class, cluster, and search term Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
… cost optimization Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
…t display Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
…and KPICards to use Carbon Design System components and improve UI consistency Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
… tiles, buttons, and filter panels in dashboard components Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
…etter UX Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
…y asset type Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
…zation by cluster Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
… components for enhanced visualization Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
…tilization Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
…and detailed asset view - Added StatCard component for displaying key metrics with optional icons and subtitles. - Implemented tests for StatCard to ensure proper rendering and functionality. - Refactored Assets.js to include a new AssetDetailPanel for displaying detailed asset information. - Introduced skeleton loading states for improved user experience during data fetching. - Updated AssetsService to support dynamic time window for mock data generation. - Enhanced chart layout with responsive design adjustments and new CostTrendChart integration. - Removed unused theme switcher and related styles for cleaner UI. - Improved asset calculations utility functions for better cost analysis. Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
…ved UI components Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
…ionChart with statistics Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
…ode support - Added ThemeContext for managing theme state and preferences. - Introduced ThemeToggle component for switching between light and dark modes. - Updated SidebarNav, AssetsHeader, CostDistributionChart, CostTrendChart, CostUtilizationChart, and other components to utilize theme-aware styles. - Refactored color scales in asset calculations to support dark mode. - Enhanced CSS styles to accommodate theme changes, including background colors and shadows. - Updated tests to reflect changes in AssetsHeader and added tests for new color scale functionality. Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
…ty; update chart legends for consistency Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Bumps [github/codeql-action](https://github.com/github/codeql-action) from 3 to 4. - [Release notes](https://github.com/github/codeql-action/releases) - [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md) - [Commits](github/codeql-action@v3...v4) --- updated-dependencies: - dependency-name: github/codeql-action dependency-version: '4' dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: ADITYA TIWARI <adityatiwari342005@gmail.com> Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
- Fix util.js to use 'window' instead of 'timeWindow' for CloudCosts compatibility - Fix AssetTable expandedrow to display 'N/A' instead of 'N/A GB' when size is missing - Fix TableExpandedRow colSpan to headers.length + 2 (account for selection + expand columns Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
vtushar06
force-pushed
the
Carbon-Asset-Page-LFX-Term1
branch
from
f5959cc to
30483f2
Compare
- Remove unused imports (React from FilterPanel/InsightsPanel, fireEvent from tests) - Remove dead code (stub test in AssetDetailPanel. All 106 tests passing. Co-Authored-By: Tushar Verma <tusharmyself06@gmail.com> Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Resolved merge conflicts by regenerating package-lock.json from package.json dependencies. Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
vtushar06
changed the title
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 43 out of 45 changed files in this pull request and generated 7 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Remove hardcoded colors from ThemeToggle (use Carbon Design tokens) - Extract getMockData to assets.mock.js (separates test fixtures from service) - Fix misleading comment in assetCalculations.js Reduces assets.js from 496 lines to 32 lines. All 106 tests passing. Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
- Replace hardcoded colors with data-carbon-theme attribute in ThemeContext - Remove .cds--btn overrides that fight Carbon's design system - Remove dead .btn-* button classes (never used in JSX) - Remove redundant font-family (Carbon handles globally) All 106 tests passing. Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
- Replace nearly-identical dark palette with genuinely different colors - Use Carbon's lighter shades (30-40 range) for better contrast on dark backgrounds - Old palette was 93% identical to light theme (only first color differed) - New palette: Magenta 40, Cyan 40, Teal 40, etc. (higher luminosity) - Simplify getUsedPercentage to avoid unnecessary roundtrip - Old: percentage → fraction → percentage (called getIdlePercentage then converted) - New: directly calculate from breakdown.idle - Return 100 for missing assets instead of 0 (more accurate default) All 106 tests passing. Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
…ulations Signed-off-by: Tushar Verma <tusharmyself06@gmail.com>
Author
|
Hey @ameijer @peatey, Not proposing this as part of this PR—just flagging it as something I’d be happy to take on during the mentorship if it aligns with maintainer priorities. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
What does this PR change?
Implements complete Assets page UI for storage cost visualization and analysis (Issue #28)
Adds 9 new components using Carbon Design System:
Adds 2 utility modules: assetCalculations.js (waste classification, formatters), assetInsights.js (insight generation) and adds 1 service module: assets.js for Assets API integration
Adds 4 CSS files with comprehensive Carbon Colors and theming (colors, dashboard, charts, detail panel)
Does this PR relate to any other PRs?
How will this PR impact users?
Does this PR address any GitHub or Zendesk issues?
How was this PR tested?
Manual testing:
Does this PR require changes to documentation?
Yes - Documentation updates needed:
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?
Yes, this addresses issue #28, which is part of the LFX mentorship coding challenge, and, if the proposal is accepted, should be included in the next release.