chore: Upgrade Node.js version

webui/.nvmrc

@@ -1 +1 @@
-12.11.1
+20.11.0

webui/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14.16
+FROM node:20.11
 # Current Active LTS release according to (https://nodejs.org/en/about/releases/)
 
 ENV WEBUI_DIR /src/webui

webui/package.json

@@ -16,22 +16,23 @@
     "build:nc": "yarn build"
   },
   "dependencies": {
-    "@quasar/extras": "^1.0.0",
-    "axios": "^0.19.0",
+    "@quasar/extras": "^1.11.2",
+    "axios": "^0.21.1",
     "bowser": "^2.5.2",
     "chart.js": "^2.8.0",
     "dot-prop": "^5.2.0",
+    "core-js": "^3.35.1",
     "iframe-resizer": "^4.2.11",
     "lodash.isequal": "4.5.0",
     "moment": "^2.24.0",
-    "quasar": "^1.4.4",
+    "quasar": "^1.22.10",
     "query-string": "^6.13.1",
     "vh-check": "^2.0.5",
     "vue-chartjs": "^3.4.2",
     "vuex-map-fields": "^1.3.4"
   },
   "devDependencies": {
-    "@quasar/app": "^1.2.4",
+    "@quasar/app": "^2.4.3",
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/test-utils": "^1.0.0-beta.29",
     "babel-eslint": "^10.0.1",
@@ -43,9 +44,7 @@
     "eslint-plugin-vue": "^5.0.0",
     "mocha": "^6.2.2",
     "mocha-webpack": "^2.0.0-beta.0",
-    "node-sass": "^4.12.0",
-    "prettier": "1.19.1",
-    "sass-loader": "^7.1.0"
+    "prettier": "1.19.1"
   },
   "engines": {
     "node": ">= 8.9.0",

webui/quasar.conf.js

@@ -117,12 +117,12 @@ module.exports = function (ctx) {
       publicPath: process.env.APP_PUBLIC_PATH || '',
       env: process.env.APP_ENV === 'development'
         ? { // staging:
-          APP_ENV: JSON.stringify(process.env.APP_ENV),
-          APP_API: JSON.stringify(process.env.APP_API || '/api')
+          APP_ENV: process.env.APP_ENV,
+          APP_API: process.env.APP_API || '/api'
         }
         : { // production:
-          APP_ENV: JSON.stringify(process.env.APP_ENV),
-          APP_API: JSON.stringify(process.env.APP_API || '/api')
+          APP_ENV: process.env.APP_ENV,
+          APP_API: process.env.APP_API || '/api'
         },
       uglifyOptions: {
         compress: {
@@ -186,27 +186,27 @@ module.exports = function (ctx) {
         theme_color: '#027be3',
         icons: [
           {
-            'src': 'statics/icons/icon-128x128.png',
+            'src': 'icons/icon-128x128.png',
             'sizes': '128x128',
             'type': 'image/png'
           },
           {
-            'src': 'statics/icons/icon-192x192.png',
+            'src': 'icons/icon-192x192.png',
             'sizes': '192x192',
             'type': 'image/png'
           },
           {
-            'src': 'statics/icons/icon-256x256.png',
+            'src': 'icons/icon-256x256.png',
             'sizes': '256x256',
             'type': 'image/png'
           },
           {
-            'src': 'statics/icons/icon-384x384.png',
+            'src': 'icons/icon-384x384.png',
             'sizes': '384x384',
             'type': 'image/png'
           },
           {
-            'src': 'statics/icons/icon-512x512.png',
+            'src': 'icons/icon-512x512.png',
             'sizes': '512x512',
             'type': 'image/png'
           }

webui/src-pwa/pwa-flag.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    pwa: true;
+  }
+}

webui/src/components/_commons/MainTable.vue

@@ -89,7 +89,7 @@ export default {
   @import "../../css/sass/variables";
 
   .table-wrapper {
-    /deep/ .q-table__container{
+    :deep(.q-table__container) {
       border-radius: 8px;
       .q-table {
         .table-header {

webui/src/components/_commons/NavBar.vue

@@ -29,7 +29,7 @@
             </q-btn>
           </q-tabs>
           <div class="right-menu">
-            <q-tabs>
+            <q-tabs class="allow-overflow">
               <div v-if="!coreVersion.disableDashboardAd && hasHubButtonComponent" style="margin-right: 5px;">
                 <hub-button-app theme="dark" v-if="$q.dark.isActive"></hub-button-app>
                 <hub-button-app v-if="!$q.dark.isActive"></hub-button-app>
@@ -111,7 +111,7 @@ export default {
             this.hasHubButtonComponent = customElements.get('hub-button-app') !== undefined
           }
           // Sources: https://github.com/traefik/traefiklabs-hub-button-app
-          hubButtonScriptLocal.src = 'statics/traefiklabs-hub-button-app/main-v1.js'
+          hubButtonScriptLocal.src = 'traefiklabs-hub-button-app/main-v1.js'
           document.head.appendChild(hubButtonScriptLocal)
         }
         hubButtonScript.onload = () => {
@@ -164,7 +164,7 @@ export default {
 
   .q-tabs {
     color: rgba( $app-text-white, .4 );
-    /deep/ .q-tabs__content {
+    :deep(.q-tabs__content) {
       .q-tab__content{
         min-width: 100%;
         .q-tab__label {
@@ -197,4 +197,10 @@ export default {
     align-items: flex-start;
   }
 
+  .allow-overflow {
+    :deep(.q-tabs__content) {
+      overflow: visible !important;
+    }
+  }
+
 </style>

webui/src/components/_commons/PanelMiddlewares.vue

@@ -1171,19 +1171,19 @@ export default {
       const name = provider.toLowerCase()
 
       if (name.startsWith('plugin-')) {
-        return 'statics/providers/plugin.svg'
+        return 'providers/plugin.svg'
       }
       if (name.startsWith('consul-')) {
-        return `statics/providers/consul.svg`
+        return `providers/consul.svg`
       }
       if (name.startsWith('consulcatalog-')) {
-        return `statics/providers/consulcatalog.svg`
+        return `providers/consulcatalog.svg`
       }
       if (name.startsWith('nomad-')) {
-        return `statics/providers/nomad.svg`
+        return `providers/nomad.svg`
       }
 
-      return `statics/providers/${name}.svg`
+      return `providers/${name}.svg`
     }
   },
   filters: {
@@ -1267,7 +1267,7 @@ export default {
         flex-wrap: wrap;
         border-width: 0;
         margin-bottom: 8px;
-        /deep/ .q-chip__content{
+        :deep(.q-chip__content) {
           white-space: normal;
         }
       }

webui/src/components/_commons/PanelMirroringServices.vue

@@ -67,19 +67,19 @@ export default {
       const name = provider.toLowerCase()
 
       if (name.startsWith('plugin-')) {
-        return 'statics/providers/plugin.svg'
+        return 'providers/plugin.svg'
       }
       if (name.startsWith('consul-')) {
-        return `statics/providers/consul.svg`
+        return `providers/consul.svg`
       }
       if (name.startsWith('consulcatalog-')) {
-        return `statics/providers/consulcatalog.svg`
+        return `providers/consulcatalog.svg`
       }
       if (name.startsWith('nomad-')) {
-        return `statics/providers/nomad.svg`
+        return `providers/nomad.svg`
       }
 
-      return `statics/providers/${name}.svg`
+      return `providers/${name}.svg`
     }
   }
 }

webui/src/components/_commons/PanelRouterDetails.vue

@@ -133,19 +133,19 @@ export default {
       const name = this.data.provider.toLowerCase()
 
       if (name.startsWith('plugin-')) {
-        return 'statics/providers/plugin.svg'
+        return 'providers/plugin.svg'
       }
       if (name.startsWith('consul-')) {
-        return `statics/providers/consul.svg`
+        return `providers/consul.svg`
       }
       if (name.startsWith('consulcatalog-')) {
-        return `statics/providers/consulcatalog.svg`
+        return `providers/consulcatalog.svg`
       }
       if (name.startsWith('nomad-')) {
-        return `statics/providers/nomad.svg`
+        return `providers/nomad.svg`
       }
 
-      return `statics/providers/${name}.svg`
+      return `providers/${name}.svg`
     }
   }
 }
@@ -206,7 +206,7 @@ export default {
         flex-wrap: wrap;
         border-width: 0;
         margin-bottom: 8px;
-        /deep/ .q-chip__content{
+        :deep(.q-chip__content) {
           white-space: normal;
         }
       }

webui/src/components/_commons/PanelServiceDetails.vue

@@ -147,19 +147,19 @@ export default {
       const name = this.data.provider.toLowerCase()
 
       if (name.startsWith('plugin-')) {
-        return 'statics/providers/plugin.svg'
+        return 'providers/plugin.svg'
       }
       if (name.startsWith('consul-')) {
-        return `statics/providers/consul.svg`
+        return `providers/consul.svg`
       }
       if (name.startsWith('consulcatalog-')) {
-        return `statics/providers/consulcatalog.svg`
+        return `providers/consulcatalog.svg`
       }
       if (name.startsWith('nomad-')) {
-        return `statics/providers/nomad.svg`
+        return `providers/nomad.svg`
       }
 
-      return `statics/providers/${name}.svg`
+      return `providers/${name}.svg`
     }
   },
   filters: {

webui/src/components/_commons/PanelTLS.vue

@@ -119,7 +119,7 @@ export default {
         flex-wrap: wrap;
         border-width: 0;
         margin-bottom: 8px;
-        /deep/ .q-chip__content{
+        :deep(.q-chip__content) {
           white-space: normal;
         }
       }

webui/src/components/_commons/PanelWeightedServices.vue

@@ -67,19 +67,19 @@ export default {
       const name = provider.toLowerCase()
 
       if (name.startsWith('plugin-')) {
-        return 'statics/providers/plugin.svg'
+        return 'providers/plugin.svg'
       }
       if (name.startsWith('consul-')) {
-        return `statics/providers/consul.svg`
+        return `providers/consul.svg`
       }
       if (name.startsWith('consulcatalog-')) {
-        return `statics/providers/consulcatalog.svg`
+        return `providers/consulcatalog.svg`
       }
       if (name.startsWith('nomad-')) {
-        return `statics/providers/nomad.svg`
+        return `providers/nomad.svg`
       }
 
-      return `statics/providers/${name}.svg`
+      return `providers/${name}.svg`
     }
   }
 }

webui/src/components/_commons/ProviderIcon.vue

@@ -12,19 +12,19 @@ export default {
       const name = this.name.toLowerCase()
 
       if (name.startsWith('plugin-')) {
-        return 'statics/providers/plugin.svg'
+        return 'providers/plugin.svg'
       }
       if (name.startsWith('consul-')) {
-        return `statics/providers/consul.svg`
+        return `providers/consul.svg`
       }
       if (name.startsWith('consulcatalog-')) {
-        return `statics/providers/consulcatalog.svg`
+        return `providers/consulcatalog.svg`
       }
       if (name.startsWith('nomad-')) {
-        return `statics/providers/nomad.svg`
+        return `providers/nomad.svg`
       }
 
-      return `statics/providers/${name}.svg`
+      return `providers/${name}.svg`
     }
   }
 }

webui/src/components/_commons/ToolBar.vue

@@ -89,7 +89,7 @@ export default {
   }
 
   .q-tabs {
-    /deep/ .q-tabs__content {
+    :deep(.q-tabs__content) {
       .q-tab__label {
         color: $app-text-grey;
         font-size: 16px;

webui/src/components/_commons/ToolBarTable.vue

@@ -93,7 +93,7 @@ export default {
 
   .q-toolbar {
     padding: 0;
-    /deep/ .bar-toggle {
+    :deep(.bar-toggle) {
       .q-btn {
         font-weight: 600;
         margin-right: 12px;
@@ -105,7 +105,7 @@ export default {
         }
       }
     }
-    /deep/ .bar-search {
+    :deep(.bar-search) {
       .q-field__inner {
         .q-field__control {
           border-radius: 12px;

webui/src/components/dashboard/PanelProvider.vue

@@ -29,19 +29,19 @@ export default {
       const name = this.getName.toLowerCase()
 
       if (name.startsWith('plugin-')) {
-        return 'statics/providers/plugin.svg'
+        return 'providers/plugin.svg'
       }
       if (name.startsWith('consul-')) {
-        return `statics/providers/consul.svg`
+        return `providers/consul.svg`
       }
       if (name.startsWith('consulcatalog-')) {
-        return `statics/providers/consulcatalog.svg`
+        return `providers/consulcatalog.svg`
       }
       if (name.startsWith('nomad-')) {
-        return `statics/providers/nomad.svg`
+        return `providers/nomad.svg`
       }
 
-      return `statics/providers/${name}.svg`
+      return `providers/${name}.svg`
     }
   }
 }

webui/src/index.template.html

@@ -1,23 +1,23 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title><%= htmlWebpackPlugin.options.productName %></title>
+    <title><%= productName %></title>
 
     <meta charset="utf-8">
-    <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
+    <meta name="description" content="<%= productDescription %>">
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
 
-    <link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="statics/icons/favicon-96x96.png">
-    <link rel="icon" type="image/ico" href="statics/icons/favicon.ico">
-    <link rel="apple-touch-icon" href="statics/icons/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="statics/icons/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="167x167" href="statics/icons/apple-icon-167x167.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="statics/icons/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" href="app-logo-128x128.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
+    <link rel="icon" type="image/ico" href="icons/favicon.ico">
+    <link rel="apple-touch-icon" href="icons/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="167x167" href="icons/apple-icon-167x167.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
   </head>
   <body>
     <!-- DO NOT touch the following DIV -->

webui/src/store/store-flag.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    store: true;
+  }
+}