chore(ci): improve webui build and lint

2024-06-07 16:56:04 +02:00 · 2024-06-07 16:56:04 +02:00 · 5c48e3c96c
commit 5c48e3c96c
parent c23c3e0ed3
25 changed files with 76 additions and 47 deletions
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@ -20,9 +20,21 @@ jobs:
        with:
          fetch-depth: 0

+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: webui/.nvmrc
+          cache: yarn
+          cache-dependency-path: webui/yarn.lock
+
      - name: Build webui
+        working-directory: ./webui
+        run: |
+          yarn install
+          yarn build
+
+      - name: Package webui
        run: |
-          make clean-webui generate-webui
          tar czvf webui.tar.gz ./webui/static/

      - name: Artifact webui
--- a/.github/workflows/experimental.yaml
+++ b/.github/workflows/experimental.yaml
@ -25,9 +25,18 @@ jobs:
        with:
          fetch-depth: 0

+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: webui/.nvmrc
+          cache: yarn
+          cache-dependency-path: webui/yarn.lock
+
      - name: Build webui
+        working-directory: ./webui
        run: |
-          make clean-webui generate-webui
+          yarn install
+          yarn build

      - name: Set up Go ${{ env.GO_VERSION }}
        uses: actions/setup-go@v5
--- a/webui/Dockerfile
+++ b/webui/Dockerfile
@ -1,4 +1,4 @@
-FROM node:20.11
+FROM node:20.14
 # Current Active LTS release according to (https://nodejs.org/en/about/releases/)

 ENV WEBUI_DIR /src/webui
--- a/webui/package.json
+++ b/webui/package.json
@ -8,10 +8,10 @@
  "scripts": {
    "transfer": "node dev/scripts/transfer.js",
    "lint": "eslint --ext .js,.vue src",
-    "dev": "export APP_ENV='development' && quasar dev",
+    "dev": "APP_ENV=development quasar dev",
    "build-quasar": "quasar build",
-    "build-staging": "export NODE_ENV='production' && export APP_ENV='development' && yarn build-quasar",
-    "build": "export NODE_ENV='production' && export APP_ENV='production' && yarn build-quasar && yarn transfer spa",
+    "build-staging": "NODE_ENV=production APP_ENV=development yarn build-quasar",
+    "build": "NODE_ENV=production APP_ENV=production yarn build-quasar && yarn transfer spa",
    "build:nc": "yarn build",
    "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
    "test:unit": "vitest",
@ -56,6 +56,7 @@
  "engines": {
    "node": "^20 || ^18 || ^16",
    "npm": ">= 6.13.4",
-    "yarn": ">= 1.21.1"
-  }
+    "yarn": ">= 1.22.22"
+  },
+  "packageManager": "yarn@1.22.22"
 }
--- a/webui/readme.md
+++ b/webui/readme.md
@ -20,7 +20,7 @@ make clean-webui generate-webui # Generate static contents in `webui/static/` fo

 ## How to build (only for frontend developer)

- prerequisite: [Node 20.11+](https://nodejs.org) [Yarn 1.22.19](https://yarnpkg.com/)
+- prerequisite: [Node 20.14+](https://nodejs.org) [Yarn 1.22.22](https://yarnpkg.com/)

 - Go to the `webui/` directory

--- a/webui/src/components/_commons/AvatarState.vue
+++ b/webui/src/components/_commons/AvatarState.vue
@ -24,7 +24,7 @@ import { defineComponent } from 'vue'
 export default defineComponent({
  name: 'AvatarState',
  props: {
-    state: String
+    state: { type: String, default: undefined, required: false }
  }
 })
 </script>
--- a/webui/src/components/_commons/MainTable.vue
+++ b/webui/src/components/_commons/MainTable.vue
@ -104,12 +104,12 @@ export default defineComponent({
    QPageScroller
  },
  props: {
-    data: Object,
+    data: { type: Object, default: undefined, required: false },
    columns: Array[Object],
    loading: Boolean,
-    onLoadMore: Function,
+    onLoadMore: { type: Function, default: undefined, required: false },
    endReached: Boolean,
-    onRowClick: Function
+    onRowClick: { type: Function, default: undefined, required: false }
  },
  methods: {
    getColumn (columnName) {
--- a/webui/src/components/_commons/PanelHealthCheck.vue
+++ b/webui/src/components/_commons/PanelHealthCheck.vue
@ -137,7 +137,7 @@ export default {
  filters: {
  },
  props: {
-    data: Object,
+    data: { type: Object, default: undefined, required: false },
    dense: Boolean
  },
  computed: {
--- a/webui/src/components/_commons/PanelMiddlewares.vue
+++ b/webui/src/components/_commons/PanelMiddlewares.vue
@ -75,8 +75,8 @@
                  ERRORS
                </div>
                <q-chip
-                  v-for="(errorMsg, index) in middleware.error"
-                  :key="index"
+                  v-for="(errorMsg, errorIndex) in middleware.error"
+                  :key="errorIndex"
                  class="app-chip app-chip-error"
                >
                  {{ errorMsg }}
--- a/webui/src/components/_commons/PanelMirroringServices.vue
+++ b/webui/src/components/_commons/PanelMirroringServices.vue
@ -70,7 +70,7 @@
 export default {
  name: 'PanelMirroringServices',
  props: {
-    data: Object,
+    data: { type: Object, default: undefined, required: false },
    dense: Boolean
  },
  computed: {
--- a/webui/src/components/_commons/PanelRouterDetails.vue
+++ b/webui/src/components/_commons/PanelRouterDetails.vue
@ -131,8 +131,8 @@ export default defineComponent({
    AvatarState
  },
  props: {
-    data: Object,
-    protocol: String
+    data: { type: Object, default: undefined, required: false },
+    protocol: { type: String, default: undefined, required: false }
  },
  computed: {
    getProviderLogoPath () {
--- a/webui/src/components/_commons/PanelServers.vue
+++ b/webui/src/components/_commons/PanelServers.vue
@ -102,7 +102,7 @@ export default defineComponent({
    AvatarState
  },
  props: {
-    data: Object,
+    data: { type: Object, default: undefined, required: false },
    dense: Boolean,
    hasStatus: Boolean
  },
--- a/webui/src/components/_commons/PanelServiceDetails.vue
+++ b/webui/src/components/_commons/PanelServiceDetails.vue
@ -171,7 +171,7 @@ export default defineComponent({
    StickyServiceDetails
  },
  props: {
-    data: Object,
+    data: { type: Object, default: undefined, required: false },
    dense: Boolean
  },
  computed: {
--- a/webui/src/components/_commons/PanelTLS.vue
+++ b/webui/src/components/_commons/PanelTLS.vue
@ -77,12 +77,12 @@
                {{ domain.main }}
              </q-chip>
              <q-chip
-                v-for="(domain, key) in domain.sans"
-                :key="key"
+                v-for="(sanDomain, sanKey) in domain.sans"
+                :key="sanKey"
                dense
                class="app-chip app-chip-entry-points"
              >
-                {{ domain }}
+                {{ sanDomain }}
              </q-chip>
            </div>
          </div>
@ -130,8 +130,8 @@ export default defineComponent({
    BooleanState
  },
  props: {
-    data: Object,
-    protocol: String
+    data: { type: Object, default: undefined, required: false },
+    protocol: { type: String, default: undefined, required: false }
  }
 })
 </script>
--- a/webui/src/components/_commons/PanelWeightedServices.vue
+++ b/webui/src/components/_commons/PanelWeightedServices.vue
@ -66,7 +66,7 @@ export default defineComponent({
  name: 'PanelWeightedServices',
  components: {},
  props: {
-    data: Object,
+    data: { type: Object, default: undefined, required: false },
    dense: Boolean
  },
  computed: {
--- a/webui/src/components/_commons/ProviderIcon.vue
+++ b/webui/src/components/_commons/ProviderIcon.vue
@ -9,7 +9,7 @@ import { defineComponent } from 'vue'

 export default defineComponent({
  props: {
-    name: String
+    name: { type: String, default: undefined, required: false }
  },
  computed: {
    getLogoPath () {
--- a/webui/src/components/_commons/StickyServiceDetails.vue
+++ b/webui/src/components/_commons/StickyServiceDetails.vue
@ -55,7 +55,7 @@ export default defineComponent({
    BooleanState
  },
  props: {
-    sticky: Object,
+    sticky: { type: Object, default: undefined, required: false },
    dense: Boolean
  }
 })
--- a/webui/src/components/_commons/ToolBarTable.vue
+++ b/webui/src/components/_commons/ToolBarTable.vue
@ -42,9 +42,10 @@ import Helps from '../../_helpers/Helps'
 export default defineComponent({
  name: 'ToolBarTable',
  props: {
-    status: String,
-    filter: String
+    status: { type: String, default: undefined, required: false },
+    filter: { type: String, default: undefined, required: false }
  },
+  emits: ['update:status', 'update:filter'],
  computed: {
    getStatus: {
      get () {
--- a/webui/src/components/dashboard/PanelChart.vue
+++ b/webui/src/components/dashboard/PanelChart.vue
@ -118,9 +118,9 @@ export default defineComponent({
    AvatarState
  },
  props: {
-    name: String,
-    data: Object,
-    type: String
+    name: { type: String, default: undefined, required: false },
+    data: { type: Object, default: undefined, required: false },
+    type: { type: String, default: undefined, required: false }
  },
  data () {
    return {
--- a/webui/src/components/dashboard/PanelEntry.vue
+++ b/webui/src/components/dashboard/PanelEntry.vue
@ -28,11 +28,11 @@ import { defineComponent } from 'vue'
 export default defineComponent({
  name: 'PanelEntry',
  props: {
-    address: String,
-    name: String,
-    type: String,
+    address: { type: String, default: undefined, required: false },
+    name: { type: String, default: undefined, required: false },
+    type: { type: String, default: undefined, required: false },
    focus: Boolean,
-    exSize: Number
+    exSize: { type: Number, default: undefined, required: false }
  }
 })
 </script>
--- a/webui/src/components/dashboard/PanelFeature.vue
+++ b/webui/src/components/dashboard/PanelFeature.vue
@ -28,7 +28,10 @@
 <script>
 export default {
  name: 'PanelFeature',
-  props: ['featureKey', 'featureVal'],
+  props: {
+    featureKey: { type: String, default: undefined, required: false },
+    featureVal: { type: [String, Boolean], default: undefined, required: false }
+  },
  computed: {
    isString () {
      return typeof this.featureVal === 'string'
--- a/webui/src/components/dashboard/PanelProvider.vue
+++ b/webui/src/components/dashboard/PanelProvider.vue
@ -6,7 +6,10 @@
    <q-card-section>
      <div class="row items-center no-wrap">
        <div class="col text-center">
-          <q-avatar class="provider-logo" font-size="inherit">
+          <q-avatar
+            class="provider-logo"
+            font-size="inherit"
+          >
            <q-icon :name="`img:${getLogoPath}`" />
          </q-avatar>
        </div>
@ -26,7 +29,7 @@ import { defineComponent } from 'vue'
 export default defineComponent({
  name: 'PanelProvider',
  props: {
-    name: String
+    name: { type: String, default: undefined, required: false }
  },
  computed: {
    getName () {
--- a/webui/src/pages/_commons/MiddlewareDetail.vue
+++ b/webui/src/pages/_commons/MiddlewareDetail.vue
@ -113,8 +113,8 @@ export default defineComponent({
  },
  mixins: [GetTablePropsMixin],
  props: {
-    name: String,
-    type: String
+    name: { type: String, default: undefined, required: false },
+    type: { type: String, default: undefined, required: false }
  },
  data () {
    return {
--- a/webui/src/pages/_commons/RouterDetail.vue
+++ b/webui/src/pages/_commons/RouterDetail.vue
@ -281,8 +281,8 @@ export default defineComponent({
    PanelMiddlewares
  },
  props: {
-    name: String,
-    type: String
+    name: { type: String, default: undefined, required: false },
+    type: { type: String, default: undefined, required: false }
  },
  data () {
    return {
--- a/webui/src/pages/_commons/ServiceDetail.vue
+++ b/webui/src/pages/_commons/ServiceDetail.vue
@ -224,8 +224,8 @@ export default defineComponent({
  },
  mixins: [GetTablePropsMixin],
  props: {
-    name: String,
-    type: String
+    name: { type: String, default: undefined, required: false },
+    type: { type: String, default: undefined, required: false }
  },
  data () {
    return {