added default nginx config

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

ui/Dockerfile

@@ -1,2 +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
-ADD dist /var/www
+COPY --from=builder /opt/ui/dist /var/www
+COPY default.nginx.conf /etc/nginx/conf.d/

ui/README.md

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

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/services/allocation.js

@@ -7,8 +7,6 @@ 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,
@@ -18,7 +16,7 @@ class AllocationService {
     if (typeof accumulate === 'boolean') {
       params.accumulate = accumulate;
     }
-    const result = await axios.get(`${baseUrl}/compute`, { params });
+    const result = await axios.get(`${this.BASE_URL}/compute`, { params });
     return result.data;
   }
 }