Merge pull request #1422 from AndrewChubatiuk/use-same-host-for-api

build docker image with static UI

.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,11 @@
+FROM node:16-alpine as builder
+ADD package*.json /opt/ui/
+WORKDIR /opt/ui
+RUN npm install
+ADD src /opt/ui/src
+ENV BASE_URL=/allocation
+RUN npx parcel build src/index.html
+
+FROM nginx:alpine
+COPY --from=builder /opt/ui/dist /var/www
+COPY default.nginx.conf /etc/nginx/conf.d/

ui/default.nginx.conf

@@ -0,0 +1,70 @@
+gzip_static  on;
+gzip on;
+gzip_min_length 50000;
+gzip_proxied expired no-cache no-store private auth;
+gzip_types
+    application/atom+xml
+    application/geo+json
+    application/javascript
+    application/x-javascript
+    application/json
+    application/ld+json
+    application/manifest+json
+    application/rdf+xml
+    application/rss+xml
+    application/vnd.ms-fontobject
+    application/wasm
+    application/x-web-app-manifest+json
+    application/xhtml+xml
+    application/xml
+    font/eot
+    font/otf
+    font/ttf
+    image/bmp
+    image/svg+xml
+    text/cache-manifest
+    text/calendar
+    text/css
+    text/javascript
+    text/markdown
+    text/plain
+    text/xml
+    text/x-component
+    text/x-cross-domain-policy;
+server {
+    server_name _;
+    root /var/www;
+    index index.html;
+    large_client_header_buffers 4 32k;
+    add_header Cache-Control "must-revalidate";
+
+    error_page 504 /custom_504.html;
+    location = /custom_504.html {
+        internal;
+    }
+
+    add_header Cache-Control "max-age=300";
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    add_header ETag "1.96.0";
+    listen 9090;
+    listen [::]:9090;
+    resolver kube-dns.kube-system.svc.cluster.local valid=5s;
+    location /healthz {
+        return 200 'OK';
+    }
+    location /allocation {
+        proxy_connect_timeout       180;
+        proxy_send_timeout          180;
+        proxy_read_timeout          180;
+        set $server http://cost-analyzer.kubecost.svc.cluster.local:9003;
+        proxy_pass $server;
+        proxy_redirect off;
+        proxy_http_version 1.1;
+        proxy_set_header Connection "";
+        proxy_set_header  X-Real-IP  $remote_addr;
+        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+}

ui/src/Reports.js

@@ -155,7 +155,7 @@ const ReportsPage = () => {
         const allocationRange = resp.data
         for (const i in allocationRange) {
           // update cluster aggregations to use clusterName/clusterId names
-          if (aggregateBy == 'cluster') {
+	  if (aggregateBy == 'cluster') {
             for (const k in allocationRange[i]) {
               allocationRange[i][k].name = 'cluster-one';
             }