[LFX Mentorship Term 1 2026] OpenCost UI Revamp Task #155

[suryansh00001]

What does this PR change?

• Adds a new Assets page to the OpenCost UI (/assets route) that visualizes infrastructure-level cost data using the OpenCost Assets API
• Introduces interactive cost visualization with summary tiles, donut chart (cost by asset type), and bar chart (cost by provider) using Recharts
• Implements sortable, searchable, paginated data tables for each asset type (Node, Disk, Network, LoadBalancer, Management) with color-coded tags
• Adds an asset detail modal showing complete properties, labels, and CPU/RAM utilization breakdowns for compute resources
• Includes realistic mock data (15 sample assets across GCP and AWS) with auto-fallback when backend is unavailable, enabling local development without a running OpenCost server
• Adds click-to-filter functionality on summary tiles for quick asset type filtering
• Updates README with documentation for REACT_APP_USE_MOCK_DATA environment variable for development without backend

Does this PR relate to any other PRs?

• This is part of the LFX Mentorship coding challenge for OpenCost UI

How will this PR impact users?

• New feature: Users can now view and analyze infrastructure costs at the asset level (nodes, disks, networks, load balancers, management fees)
• Improved cost visibility: Interactive charts and summary tiles provide quick insights into cost distribution by asset type and cloud provider
• Better navigation: Searchable and filterable tables make it easy to find specific assets and understand cost breakdowns
• Detailed insights: Clicking any asset opens a modal with complete metadata, cost adjustments, and resource utilization details
• No breaking changes: This is a purely additive feature with no impact on existing pages or functionality

Does this PR address any GitHub or Zendesk issues?

• Part of LFX Mentorship coding challenge (no specific issue tracking)

How was this PR tested?

• Local development: Tested with REACT_APP_USE_MOCK_DATA=true npm run serve using 15 realistic mock assets
• Production build: Verified successful build with npm run build (no compilation errors)
• UI testing: Manually tested all interactions including:
  • Summary tiles click-to-filter
  • Chart interactions (hover tooltips, click segments)
  • Table sorting, pagination, and search across all asset types
  • Detail modal for each asset type with expandable breakdowns
  • Filter controls (time window, aggregation, provider, cluster)
  • URL parameter persistence and state management
  • Loading, empty, and error states
• Cross-page compatibility: Verified no regression on existing pages (Allocations, Cloud Costs, etc.)
• Responsive design: Tested layout on different screen sizes

Does this PR require changes to documentation?

• ✅ README updated with instructions for using REACT_APP_USE_MOCK_DATA for development without backend
• Additional documentation may be needed in the main OpenCost docs to explain the Assets page features and use cases

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 should be labeled for next release as it's a new user-facing feature that adds significant value for infrastructure cost analysis

[netlify]

✅ Deploy Preview for opencost-ui ready!

Name	Link
🔨 Latest commit	989ea2d
🔍 Latest deploy log	https://app.netlify.com/projects/opencost-ui/deploys/6987c57749dbe1000860e2e2
😎 Deploy Preview	https://deploy-preview-193--opencost-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.