Skip to content

Conversation

@kaurmanjot20
Copy link

What does this PR change?

  • Implements the new Assets page for the OpenCost UI, exposing the Assets API (/model/assets) which was previously not available in the UI.
  • Adds comprehensive data visualization including:
    • Hero metrics dashboard (Total Cost, Efficiency Score, Top Cost Driver, Active Assets)
    • Interactive treemap for cost distribution by asset
    • Resource efficiency gauges (CPU & RAM utilization with donut charts)
    • Enhanced data table with expandable rows showing detailed asset breakdowns
  • Introduces full light/dark theme support using Carbon Design System themes (white / g100).
  • Adds filtering capabilities: time window selection, aggregation grouping, search, and Include Idle Costs toggle.
  • Implements graceful fallback to mock data when the backend API is unavailable.

Does this PR relate to any other PRs?

  • No, this is a standalone feature implementation for the LFX Mentorship Coding Challenge.

How will this PR impact users?

  • Users will now be able to visualize and analyze infrastructure asset costs directly in the OpenCost UI.
  • Provides at-a-glance insights into cost distribution, resource efficiency, and optimization opportunities.
  • Enables users to identify cost hotspots and idle resources through interactive visualizations.
  • Adds a theme toggle for improved accessibility and user preference.

Does this PR address any GitHub or Zendesk issues?

How was this PR tested?

  • Manual testing in the development environment using npm run serve across both light and dark themes.
  • Verified that the production build succeeds using npm run build.
  • Tested mock data fallback behavior when the backend Assets API is unavailable.
  • Tested responsive layout and component interactions (filters, treemap interactions, table row expansion).
  • Verified correct Carbon Design System component integration and styling.

Does this PR require changes to documentation?

  • No code documentation changes are required.
  • Includes UX_REPORT.md documenting design decisions, API integration strategy, challenges encountered, and skills learned.

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?

  • N/A – This PR is submitted as part of the LFX Mentorship Coding Challenge. Labeling will be handled by maintainers upon review.

@netlify
Copy link

netlify bot commented Feb 9, 2026

Deploy Preview for opencost-ui ready!

Name Link
🔨 Latest commit 59e233c
🔍 Latest deploy log https://app.netlify.com/projects/opencost-ui/deploys/69898c480ef34a00089726fa
😎 Deploy Preview https://deploy-preview-204--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: Manjot Kaur <129861321+kaurmanjot20@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

1 participant