فهرست منبع

Merge pull request #1700 from logyball/logyball/make-ui-base-url-dynamic

Make Base API URL Dynamic in the UI
Matt Ray 3 سال پیش
والد
کامیت
0e15a2b61a
7فایلهای تغییر یافته به همراه781 افزوده شده و 698 حذف شده
  1. 1 0
      .gitignore
  2. 6 1
      ui/Dockerfile
  3. 41 0
      ui/README.md
  4. 13 0
      ui/docker-entrypoint.sh
  5. 712 696
      ui/package-lock.json
  6. 3 0
      ui/package.json
  7. 5 1
      ui/src/services/allocation.js

+ 1 - 0
.gitignore

@@ -2,6 +2,7 @@
 .idea
 *.iml
 
+ui/.parcel-cache
 ui/.cache
 ui/dist
 ui/node_modules/

+ 6 - 1
ui/Dockerfile

@@ -3,10 +3,15 @@ ADD package*.json /opt/ui/
 WORKDIR /opt/ui
 RUN npm install
 ADD src /opt/ui/src
-ENV BASE_URL=/model
 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/
 COPY nginx.conf /etc/nginx/
+
+ENV BASE_URL=/model
+
+COPY ./docker-entrypoint.sh /usr/local/bin/
+ENTRYPOINT ["/usr/local/bin/docker-entrypoint.sh"]
+CMD ["nginx", "-g", "daemon off;"]

+ 41 - 0
ui/README.md

@@ -20,3 +20,44 @@ After following the installation instructions, access the UI by port forwarding:
 ```
 kubectl port-forward --namespace opencost service/opencost 9090
 ```
+
+## Running Locally
+
+The UI can be run locally using the `npm run serve` command.
+
+```sh
+$ npm run serve
+> kubecost-ui-open@0.0.1 serve
+> npx parcel serve src/index.html
+
+Server running at http://localhost:1234
+✨ Built in 1.96s
+```
+
+And can have a custom URL backend prefix.
+
+```sh
+BASE_URL=http://localhost:9090/test npm run serve
+
+> kubecost-ui-open@0.0.1 serve
+> npx parcel serve src/index.html
+
+Server running at http://localhost:1234
+✨ Built in 772ms
+```
+
+In addition, similar behavior can be replicated with the docker container:
+
+```sh
+$ docker run -e BASE_URL_OVERRIDE=test -p 9091:9090 -d opencost-ui:latest
+$ curl localhost:9091
+<html gibberish> 
+```
+
+## Overriding the Base API URL
+
+For some use cases such as the case of [Opencost deployed behind an ingress controller](https://github.com/opencost/opencost/issues/1677), 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.
+
+```sh
+$ docker run -p 9091:9090 -e BASE_URL_OVERRIDE=anything -d opencost-ui:latest
+```

+ 13 - 0
ui/docker-entrypoint.sh

@@ -0,0 +1,13 @@
+#!/bin/sh
+set -e
+
+if [[ ! -z "$BASE_URL_OVERRIDE" ]]; then
+    echo "running with BASE_URL=${BASE_URL_OVERRIDE}"
+    sed -i "s^{PLACEHOLDER_BASE_URL}^$BASE_URL_OVERRIDE^g" /var/www/*.js
+else 
+    echo "running with BASE_URL=${BASE_URL}"
+    sed -i "s^{PLACEHOLDER_BASE_URL}^$BASE_URL^g" /var/www/*.js
+fi
+
+# Run the parent (nginx) container's entrypoint script
+exec /docker-entrypoint.sh "$@"

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 712 - 696
ui/package-lock.json


+ 3 - 0
ui/package.json

@@ -3,6 +3,9 @@
   "version": "0.0.1",
   "description": "Open source UI for Kubecost",
   "scripts": {
+    "build": "npx parcel build src/index.html",
+    "serve": "npx parcel serve src/index.html",
+    "clean": "rm -rf dist/*",
     "test": "echo \"Error: no test specified\" && exit 1",
     "preinstall": "npx npm-force-resolutions"
   },

+ 5 - 1
ui/src/services/allocation.js

@@ -1,9 +1,13 @@
 import axios from 'axios';
 
 class AllocationService {
-  BASE_URL = process.env.BASE_URL || 'http://localhost:9090/model';
+  BASE_URL = process.env.BASE_URL || '{PLACEHOLDER_BASE_URL}';
 
   async fetchAllocation(win, aggregate, options) {
+    if (this.BASE_URL.includes('PLACEHOLDER_BASE_URL')) {
+      this.BASE_URL = `http://localhost:9090/model`
+    }
+    
     const { accumulate, filters, } = options;
     const params = {
       window: win,

برخی فایل ها در این مقایسه diff نمایش داده نمی شوند زیرا تعداد فایل ها بسیار زیاد است