Fix upstream nginx to access cost-model API. Update README in /ui.

Signed-off-by: Niko Kovacevic <nikovacevic@gmail.com>
Signed-off-by: LewisCM14 <Lewiscmartin@live.co.uk>

ui/Dockerfile

@@ -3,7 +3,7 @@ ADD package*.json /opt/ui/
 WORKDIR /opt/ui
 RUN npm install
 ADD src /opt/ui/src
-ENV BASE_URL=/allocation
+ENV BASE_URL=/model
 RUN npx parcel build src/index.html
 
 FROM nginx:alpine

ui/README.md

@@ -1,31 +1,22 @@
 # OpenCost UI
-The preferred install path for OpenCost is via Helm chart, and is available explained [here](http://github.com/opencost/opencost-helm-chart)
 
-To manually run the OpenCost UI, follow the steps below.
+## Installing
 
-## Requirements
+See https://www.opencost.io/docs/install for the full instructions.
 
-* `nodejs >= 18.3.0`
-* `npm >= 8.11.0`
-
-## Installation & Running
-To run the UI, open a terminal to the `opencost/ui/` directory (where this README is located) and run
-
-```
-npm install
 ```
+helm install my-prometheus --repo https://prometheus-community.github.io/helm-charts prometheus \
+  --namespace prometheus --create-namespace \
+  --set pushgateway.enabled=false \
+  --set alertmanager.enabled=false \
+  -f https://raw.githubusercontent.com/opencost/opencost/develop/kubernetes/prometheus/extraScrapeConfigs.yaml
 
-This will install required dependencies and build tools. To launch the UI, run
-
-```
-npx parcel src/index.html
+kubectl apply --namespace opencost -f https://raw.githubusercontent.com/opencost/opencost/develop/kubernetes/opencost.yaml
 ```
 
-This will launch a development server, serving the UI at `http://localhost:1234` and targeting the data for an instance of
-OpenCost running at `http://localhost:9090`. To access an arbitrary OpenCost install, you can use
+## Using
 
+After following the installation instructions, access the UI by port forwarding:
 ```
-kubectl port-forward deployment/opencost 9090:9003
+kubectl port-forward --namespace opencost service/opencost 9090
 ```
-
-for your choice of namespace and cloud context.

ui/default.nginx.conf

@@ -62,7 +62,7 @@ server {
     location /healthz {
         return 200 'OK';
     }
-    location /allocation {
+    location /model/ {
         proxy_connect_timeout       180;
         proxy_send_timeout          180;
         proxy_read_timeout          180;

ui/src/services/allocation.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 class AllocationService {
-  BASE_URL = process.env.BASE_URL || 'http://localhost:9090/allocation';
+  BASE_URL = process.env.BASE_URL || 'http://localhost:9090/model';
 
   async fetchAllocation(win, aggregate, options) {
     const { accumulate, filters, } = options;
@@ -13,7 +13,7 @@ class AllocationService {
     if (typeof accumulate === 'boolean') {
       params.accumulate = accumulate;
     }
-    const result = await axios.get(`${this.BASE_URL}/compute`, { params });
+    const result = await axios.get(`${this.BASE_URL}/allocation/compute`, { params });
     return result.data;
   }
 }