chore(ci): improve webui build and lint

.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

.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

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

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-staging": "NODE_ENV=production APP_ENV=development yarn build-quasar",
-    "build": "export NODE_ENV='production' && export APP_ENV='production' && yarn build-quasar && yarn transfer spa",
+    "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"
 }

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
 

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>

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) {

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: {

webui/src/components/_commons/PanelMiddlewares.vue

@@ -75,8 +75,8 @@
                   ERRORS
                 </div>
                 <q-chip
-                  v-for="(errorMsg, index) in middleware.error"
+                  v-for="(errorMsg, errorIndex) in middleware.error"
-                  :key="index"
+                  :key="errorIndex"
                   class="app-chip app-chip-error"
                 >
                   {{ errorMsg }}

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: {

webui/src/components/_commons/PanelRouterDetails.vue

@@ -131,8 +131,8 @@ export default defineComponent({
     AvatarState
   },
   props: {
-    data: Object,
+    data: { type: Object, default: undefined, required: false },
-    protocol: String
+    protocol: { type: String, default: undefined, required: false }
   },
   computed: {
     getProviderLogoPath () {

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
   },

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: {

webui/src/components/_commons/PanelTLS.vue

@@ -77,12 +77,12 @@
                 {{ domain.main }}
               </q-chip>
               <q-chip
-                v-for="(domain, key) in domain.sans"
+                v-for="(sanDomain, sanKey) in domain.sans"
-                :key="key"
+                :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,
+    data: { type: Object, default: undefined, required: false },
-    protocol: String
+    protocol: { type: String, default: undefined, required: false }
   }
 })
 </script>

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: {

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 () {

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
   }
 })

webui/src/components/_commons/ToolBarTable.vue

@@ -42,9 +42,10 @@ import Helps from '../../_helpers/Helps'
 export default defineComponent({
   name: 'ToolBarTable',
   props: {
-    status: String,
+    status: { type: String, default: undefined, required: false },
-    filter: String
+    filter: { type: String, default: undefined, required: false }
   },
+  emits: ['update:status', 'update:filter'],
   computed: {
     getStatus: {
       get () {

webui/src/components/dashboard/PanelChart.vue

@@ -118,9 +118,9 @@ export default defineComponent({
     AvatarState
   },
   props: {
-    name: String,
+    name: { type: String, default: undefined, required: false },
-    data: Object,
+    data: { type: Object, default: undefined, required: false },
-    type: String
+    type: { type: String, default: undefined, required: false }
   },
   data () {
     return {

webui/src/components/dashboard/PanelEntry.vue

@@ -28,11 +28,11 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PanelEntry',
   props: {
-    address: String,
+    address: { type: String, default: undefined, required: false },
-    name: String,
+    name: { type: String, default: undefined, required: false },
-    type: String,
+    type: { type: String, default: undefined, required: false },
     focus: Boolean,
-    exSize: Number
+    exSize: { type: Number, default: undefined, required: false }
   }
 })
 </script>

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'

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 () {

webui/src/pages/_commons/MiddlewareDetail.vue

@@ -113,8 +113,8 @@ export default defineComponent({
   },
   mixins: [GetTablePropsMixin],
   props: {
-    name: String,
+    name: { type: String, default: undefined, required: false },
-    type: String
+    type: { type: String, default: undefined, required: false }
   },
   data () {
     return {

webui/src/pages/_commons/RouterDetail.vue

@@ -281,8 +281,8 @@ export default defineComponent({
     PanelMiddlewares
   },
   props: {
-    name: String,
+    name: { type: String, default: undefined, required: false },
-    type: String
+    type: { type: String, default: undefined, required: false }
   },
   data () {
     return {

webui/src/pages/_commons/ServiceDetail.vue

@@ -224,8 +224,8 @@ export default defineComponent({
   },
   mixins: [GetTablePropsMixin],
   props: {
-    name: String,
+    name: { type: String, default: undefined, required: false },
-    type: String
+    type: { type: String, default: undefined, required: false }
   },
   data () {
     return {