Merge pull request #175 from PatrickLai7528/feat/add-web

feat: Crane Dashboard

.gitignore

@@ -13,4 +13,8 @@
 
 # Dependency directories (remove the comment below to include it)
 vendor/
-.idea/
+.idea/
+
+pkg/web/build
+pkg/web/.env
+pkg/web/node_modules

pkg/web/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+build
+.git

pkg/web/.env.example

@@ -0,0 +1 @@
+CLUSTER_ID=cls-test

pkg/web/.eslintignore

@@ -0,0 +1 @@
+.d.ts

pkg/web/.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: [
+    'plugin:react/recommended',
+    'google',
+    'prettier',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended'
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: ['react', '@typescript-eslint'],
+  rules: {
+    'react/display-name': [0],
+    'no-unused-vars': [1],
+    'valid-jsdoc': [0],
+    'require-jsdoc': [0],
+    'guard-for-in': [1],
+    'prefer-spread': [1],
+    'react/jsx-sort-props': [2, { callbacksLast: true }]
+  }
+};

pkg/web/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

pkg/web/.prettierignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

pkg/web/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "printWidth": 120,
+  "arrowParens": "avoid",
+  "trailingComma": "none",
+  "importOrder": ["\\S.css$", "react|redux", "^@(.*)(/?)(.*)$", "(.*)/(.*)$", "^[./]"],
+  "importOrderSeparation": true
+}

pkg/web/Dockerfile

@@ -0,0 +1,27 @@
+# -- BUILD --
+FROM node:14.17-alpine as build
+
+WORKDIR /usr/src/app
+
+COPY package* ./
+COPY . .
+
+RUN npm i
+RUN npm run build
+
+# -- RELEASE --
+FROM nginx:stable-alpine as release
+
+COPY --from=build /usr/src/app/build /usr/share/nginx/html
+# copy .env.example as .env to the relase build
+COPY --from=build /usr/src/app/.env.example /usr/share/nginx/html/.env
+COPY --from=build /usr/src/app/nginx/default.conf /etc/nginx/conf.d/default.conf
+
+RUN apk add --update nodejs
+RUN apk add --update npm
+RUN npm i -g runtime-env-cra@0.2.0
+
+WORKDIR /usr/share/nginx/html
+EXPOSE 80
+
+CMD ["/bin/sh", "-c", "runtime-env-cra && nginx -g \"daemon off;\""]

pkg/web/README.md

@@ -0,0 +1,2 @@
+# crane-dashboard
+

pkg/web/i18next-scanner.config.js

@@ -0,0 +1,40 @@
+const fs = require('fs');
+
+module.exports = {
+  input: ['src/**/*.{js,jsx,ts,tsx}', '!**/node_modules/**', '!src/**/*.test.{ts,tsx}'],
+  output: './',
+  options: {
+    debug: true,
+    func: {
+      list: ['t', 'i18n.t'],
+      extensions: ['.js', '.jsx', '.ts', '.tsx']
+    },
+    lngs: ['zh'],
+    ns: ['translation'],
+    defaultLng: 'zh',
+    defaultNs: 'translation',
+    resource: {
+      loadPath: 'src/i18n/resources/{{lng}}/{{ns}}.json',
+      savePath: 'src/i18n/resources/{{lng}}/{{ns}}.json',
+      jsonIndent: 2,
+      lineEnding: '\n'
+    },
+    nsSeparator: false, // namespace separator
+    keySeparator: false, // key separator
+    interpolation: {
+      prefix: '{{',
+      suffix: '}}'
+    }
+  },
+  transform: function customTransform(file, enc, done) {
+    const parser = this.parser;
+    const content = fs.readFileSync(file.path, enc);
+
+    parser.parseFuncFromString(content, (key, options) => {
+      options.defaultValue = key;
+      parser.set(key, options);
+    });
+
+    done();
+  }
+};

pkg/web/nginx/default.conf

@@ -0,0 +1,45 @@
+map $http_upgrade $connection_upgrade {
+  default upgrade;
+  '' close;
+}
+
+server {
+  listen 80;
+
+  location / {
+    root /usr/share/nginx/html/;
+    include /etc/nginx/mime.types;
+    try_files $uri $uri/ /index.html;
+
+    location /grafana/api/live {
+      rewrite ^/grafana/(.*) /$1 break;
+      proxy_http_version 1.1;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection $connection_upgrade;
+      proxy_set_header Host $http_host;
+      proxy_pass localhost:3333;
+      add_header Access-Control-Allow-Origin *;
+    }
+
+    #access_log  logs/host.access.log  main;
+    location /grafana/ {
+      proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-NginX-Proxy true;
+
+      proxy_pass localhost:3333;
+      add_header Access-Control-Allow-Origin *;
+    }
+
+    location /api/ {
+      proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-NginX-Proxy true;
+
+      proxy_pass localhost:3333;
+    }
+  }
+
+}