This is the web UI for the OpenCost project. You can learn more about the User Interface in the OpenCost docs.
OpenCost UI Walkthrough
See Installation Guide for the full instructions.
After following the installation instructions, access the UI by port forwarding:
kubectl port-forward --namespace opencost service/opencost 9090
The UI can be run locally using the npm run serve command.
$ npm install
...
$ npm run serve
> [email protected] serve
> npx parcel serve src/index.html
Server running at http://localhost:1234
✨ Built in 1.96sAnd can have a custom URL backend prefix.
BASE_URL=http://localhost:9090/test npm run serve
> [email protected] serve
> npx parcel serve src/index.html
Server running at http://localhost:1234
✨ Built in 772msIn addition, similar behavior can be replicated with the docker container:
$ docker run -e BASE_URL_OVERRIDE=test -p 9091:9090 -d opencost-ui:latest
$ curl localhost:9091
<html gibberish>For some use cases such as the case of OpenCost deployed behind an ingress controller, it is useful to override the BASE_URL variable responsible for requests sent from the UI to the API. This means that instead of sending requests to <domain>/model/allocation/compute/etc, requests can be sent to <domain>/{BASE_URL_OVERRIDE}/allocation/compute/etc. To do this, supply the environment variable BASE_URL_OVERRIDE to the docker image.
$ docker run -p 9091:9090 -e BASE_URL_OVERRIDE=anything -d opencost-ui:latestTo serve the web interface under a path other than the root (/), you need to build a custom image using the ui_path build argument.
For example, you can clone this project and run:
$ docker build --build-arg ui_path=/anything --tag opencost-ui:latest .This ensures that all static assets are served from the specified path.
Once the container is running, the UI will be accessible at <domain>/{ui_path}.