Skip to content

Conversation

@jothikaaravindhan
Copy link

What does this PR change?

This PR adds initial Assets page support to the OpenCost UI as part of the LFX Mentorship Term 1 2026 – OpenCost UI Revamp coding challenge.

Key changes include:

  • New Assets page implemented using the Carbon Design System
  • Integration with the OpenCost /assets API
  • Asset cost visualization using tables and charts
  • User controls for exploring asset-related cost data
  • Navigation updates to expose the Assets page in the UI

This implementation focuses on clarity, usability, and consistency with enterprise UX patterns.


Screenshots of Assets Page

Assets Card View

image

Asset Table View

image (1)

Asset Filter View

image (2)

Does this PR relate to any other PRs?

No, this PR is self-contained.


How will this PR impact users?

This PR enables users to:

  • View infrastructure assets (nodes, disks, etc.) and their associated costs
  • Better understand where infrastructure spending originates
  • Identify high-cost assets that may require optimization

While primarily developed for mentorship evaluation, this work lays the foundation for richer asset-level cost insights in the OpenCost UI.


Does this PR address any GitHub or Zendesk issues?


How was this PR tested?

Added unit tests for the Assets page components using Jest and React Testing Library

  • Tests cover:
    • Rendering of Assets table and chart with valid data
    • Handling of empty asset data states
    • Correct calculation and display of asset cost values
  • All tests were run locally and passed successfully

Does this PR require changes to documentation?

No documentation updates are required at this stage, as this work is part of an LFX mentorship coding challenge and an initial UI implementation.


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 submitted as part of the LFX Mentorship application process and is intended for evaluation and discussion before being considered for inclusion in a future release.

Signed-off-by: Jothika Tamilarasan <a00335659@student.tus.ie>
Signed-off-by: Jothika Tamilarasan <jothikaaravindhan@gmail.com>
@netlify
Copy link

netlify bot commented Feb 8, 2026

Deploy Preview for opencost-ui ready!

Name Link
🔨 Latest commit da5b5d6
🔍 Latest deploy log https://app.netlify.com/projects/opencost-ui/deploys/6989204f59764100081cd324
😎 Deploy Preview https://deploy-preview-200--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.

@emphor11
Copy link

emphor11 commented Feb 9, 2026

@jothikaaravindhan
I went through the full PR and had a quick clarification. The description mentions using the Carbon Design System, but in the current implementation in your code ,i see you used Material UI table and pagination components to be precise in src/components/assets/AssetsTable.js .

Is the intention to align this with Carbon in a follow-up, or is MUI the intended design system for this page?

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