use same host for backend

Signed-off-by: Andrii Chubatiuk <andrew.chubatiuk@motional.com>
Signed-off-by: Andrii Chubatiuk <andrew.chubatiuk@gmail.com>

.github/workflows/pr.yaml

@@ -7,6 +7,13 @@ on:
 
 jobs:
   build:
+    strategy:
+      matrix:
+        include:
+          - component: Frontend
+            location: ui
+          - component: Backend
+            location: .
     runs-on: ubuntu-latest
 
     steps:
@@ -17,9 +24,9 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v1
 
-      - name: Build
+      - name: Build ${{ matrix.component }}
         uses: docker/build-push-action@v2
         with:
-          context: ./
-          file: ./Dockerfile
+          context: ${{ matrix.location }}/
+          file: ${{ matrix.location }}/Dockerfile
           push: false

ui/Dockerfile

@@ -0,0 +1,2 @@
+FROM nginx:alpine
+ADD dist /var/www

ui/README.md

@@ -18,11 +18,11 @@ npm install
 This will install required depndencies and build tools. To launch the UI, run
 
 ```
-npx parcel src/index.html
+BASE_URL=<kubecost-url> npx parcel src/index.html
 ```
 
 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
+OpenCost running at `<kubecost-url>`. To access an arbitrary OpenCost install, you can use
 
 ```
 kubectl port-forward deployment/opencost-cost-analyzer 9090

ui/src/Reports.js

@@ -154,12 +154,6 @@ const ReportsPage = () => {
       if (resp.data && resp.data.length > 0) {
         const allocationRange = resp.data
         for (const i in allocationRange) {
-          // update cluster aggregations to use clusterName/clusterId names
-          if (aggregateBy == 'cluster') {
-            for (const k in allocationRange[i]) {
-              allocationRange[i][k].name = 'cluster-one';
-            }
-          }
           allocationRange[i] = sortBy(allocationRange[i], a => a.totalCost)
         }
         setAllocationData(allocationRange)

ui/src/services/allocation.js

@@ -1,9 +1,14 @@
 import axios from 'axios';
+import { useLocation } from 'react-router';
+
+const env = process.env;
 
 class AllocationService {
   BASE_URL = process.env.BASE_URL || 'http://localhost:9090/allocation';
 
   async fetchAllocation(win, aggregate, options) {
+    const url = process.env.BASE_URL ?? "";
+    const baseUrl = `${url}${this.BASE_PATH}`;
     const { accumulate, filters, } = options;
     const params = {
       window: win,
@@ -13,7 +18,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(`${baseUrl}/compute`, { params });
     return result.data;
   }
 }