Skip to content

Conversation

@maxvishy
Copy link
Contributor

Migrate to Next.js and implement Carbon Design System dashboard

What does this PR change?

This PR completely modernizes the opencost-ui project by migrating from a Parcel-based build system to Next.js 13 (App Router) and implementing a new dashboard using IBM's Carbon Design System.

Major Changes:

Build System & Framework:

  • Migrated from Parcel bundler to Next.js 13 with App Router
  • Removed legacy Babel configuration (Next.js uses SWC compiler)
  • Added Next.js configuration files (next.config.js, jsconfig.json, .eslintrc.json)
  • Updated .gitignore to exclude Next.js build artifacts (.next/)

UI Framework Migration:

  • Replaced Material-UI with Carbon Design System (@carbon/react v1.35.0)
  • Integrated Carbon Charts (@carbon/charts-react v1.13.0) for data visualization
  • Added Carbon Icons (@carbon/icons-react v11.14.0)
  • Implemented SCSS support with Carbon's design tokens

New Components:

  • Assets Visualization: Interactive asset management with cost tracking, carbon emissions, and utilization metrics
  • Dashboard Context: Centralized state management for dashboard configuration
  • Dashboard View: Customizable dashboard builder with widget system
  • Cost Summary Cards: Real-time cost metrics display
  • Cost Allocation Chart: Stacked bar chart for cost distribution
  • Cost by Service Chart: Area chart for service cost trends
  • External Services Widget: Tabs-based view for external service costs
  • Scoped Views: Filtered views with multi-select and tagging
  • Create Dashboard Modal: Interface for creating new dashboards

Data Layer:

  • Added assets-api.js utility for parsing OpenCost API responses
  • Support for multiple asset types (Node, Disk, LoadBalancer, ClusterManagement)
  • Sample data file (public/ss.json) for development and testing
  • Graceful fallback to demo data when API is unavailable

Application Structure:

  • Deleted legacy React entry point (src/app.js, src/index.html, src/route.js)
  • Implemented Next.js App Router structure (src/app/page.js, src/app/layout.js)
  • Created src/app/globals.scss for global styles with Carbon design tokens
  • Organized components in src/components/ directory
  • Added utilities in src/lib/ directory

Dependencies:

  • Updated React from 17.x to 18.2.0
  • Removed Material-UI, date-fns, axios, recharts (legacy dependencies)
  • Added Next.js 13.4.9
  • Added Carbon Design System packages
  • Added SASS support (v1.69.5)
  • Added ESLint with Next.js config

Does this PR relate to any other PRs?

  • This is a standalone modernization effort for the OpenCost UI

How will this PR impact users?

Positive Impacts:

  • Modern, Professional UI: Clean, accessible interface following IBM Carbon Design guidelines
  • Better Performance: Next.js optimizations (SSR, code splitting, automatic optimization)
  • Enhanced Visualizations: Interactive charts and graphs for cost analysis
  • Multi-Asset Support: Now displays all asset types (Nodes, Disks, LoadBalancers, Cluster Management)
  • Improved Accessibility: Carbon Design System provides WCAG-compliant components
  • Better Developer Experience: Hot module reloading, better debugging, TypeScript-ready

Breaking Changes:

  • Complete UI redesign - users will need to familiarize themselves with the new interface
  • URL structure may change due to Next.js routing
  • Configuration options may differ from the previous version

Does this PR address any GitHub or Zendesk issues?

  • Addresses the need for a modern, maintainable UI framework
  • Resolves build system complexity and dependency conflicts
  • Improves asset visualization capabilities

How was this PR tested?

Local Development Testing:

  • ✅ Verified all components render correctly with real asset data
  • ✅ Tested asset filtering across all asset types (Node, Disk, LoadBalancer, ClusterManagement)
  • ✅ Validated cost calculations and carbon emission metrics
  • ✅ Confirmed tab navigation and data filtering functionality
  • ✅ Tested with sample data (ss.json) and verified fallback to demo data
  • ✅ Checked responsive layout and styling consistency
  • ✅ Verified chart rendering with Carbon Charts library
  • ✅ Validated Next.js hot reload and development server stability

Browser Compatibility:

  • Tested on modern browsers (Chrome, Firefox, Safari, Edge)
  • Verified Carbon Design System styles load correctly

Build & Production:

  • npm run dev - Development server runs successfully
  • npm run build - Production build completes without errors
  • npm run lint - ESLint passes with Next.js config

Does this PR require changes to documentation?

Yes, the following documentation should be updated:

  1. Installation Guide: Update dependencies and build commands
  2. Development Guide: Document Next.js development workflow
  3. Configuration: Document new config files (next.config.js, jsconfig.json)
  4. Component Guide: Document new Carbon-based components
  5. API Integration: Document asset API format and requirements
  6. Deployment: Update deployment instructions for Next.js applications
  7. Migration Guide: Provide guidance for users upgrading from the old UI

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 as "next release" as it represents a major UI modernization
  • This is a significant feature addition that warrants inclusion in the next major or minor release
  • Recommended for a minor version bump (e.g., v1.x.0 → v1.y.0) due to breaking UI changes

- Removed Babel configuration file (.babelrc) as it is no longer needed.
- Added ESLint configuration file (.eslintrc.json) extending Next.js core web vitals.
- Updated .gitignore to exclude the .next directory.
- Introduced jsconfig.json for path mapping in the project.
- Created next.config.js for Next.js configuration with strict mode and SASS options.
- Updated package.json and package-lock.json to include new dependencies for Next.js and Carbon Design System.
- Deleted legacy React app files (app.js, index.html, route.js) and replaced with new structure using Next.js.
- Added new components for dashboard visualization and cost tracking.
- Introduced global styles and layout for the application.
- Added JSON data file for asset visualization.

This commit transitions the project to a Next.js framework, enhancing the structure and modernizing the codebase.

Signed-off-by: Vishy <maxvishy02@gmail.com>
@netlify
Copy link

netlify bot commented Feb 10, 2026

Deploy Preview for opencost-ui ready!

Name Link
🔨 Latest commit 16ad7e7
🔍 Latest deploy log https://app.netlify.com/projects/opencost-ui/deploys/698b64451a28330007f304e3
😎 Deploy Preview https://deploy-preview-215--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.

@maxvishy
Copy link
Contributor Author

image image

Signed-off-by: Vishy <maxvishy02@gmail.com>
Signed-off-by: Vishy <maxvishy02@gmail.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.

1 participant