Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
suryansh00001 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
37865c7
added codee
suryansh00001 Feb 7, 2026
49d6f2a
improved ui and added mock backend
suryansh00001 Feb 7, 2026
989ea2d
carbon added
suryansh00001 Feb 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,33 @@ Server running at http://localhost:1234
✨ Built in 1.96s
```

### Development Without Backend

For development and testing without running the OpenCost backend server, you can enable mock data mode:

```sh
# Windows PowerShell
$env:REACT_APP_USE_MOCK_DATA="true"; npm run serve

# Linux/macOS
REACT_APP_USE_MOCK_DATA=true npm run serve
```

This will use realistic mock data for all API endpoints, allowing you to develop and test UI features without connecting to an actual OpenCost server.

### OpenCost API Documentation

The UI consumes the following OpenCost APIs:

- **[Allocation API](https://docs.kubecost.com/apis/monitoring-apis/allocation-api)** - Cost allocation data by pod, namespace, etc.
- **[Assets API](https://docs.kubecost.com/apis/monitoring-apis/assets-api)** - Infrastructure cost data (nodes, disks, load balancers)
- `/model/assets` - Retrieve backing cost data by individual assets
- `/model/assets/topline` - Condensed overview of total cost metrics
- `/model/assets/diff` - Compare asset changes between two time windows
- **[Cloud Cost API](https://docs.kubecost.com/apis/monitoring-apis/cloud-cost-api)** - Cloud provider billing data

### Custom Backend URL

And can have a custom URL backend prefix.

```sh
Expand Down
Loading