Merge current v2.11 into v3.0

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/_mixins/GetTableProps.js

@@ -162,7 +162,7 @@ const GetTablePropsMixin = {
       return {
         onRowClick: row =>
           this.$router.push({
-            path: `/${type.replace('-', '/', 'gi')}/${row.name}`
+            path: `/${type.replace('-', '/', 'gi')}/${encodeURIComponent(row.name)}`
           }),
         columns: allColumns.filter(c =>
           get(propsByType, `${type}.columns`, []).includes(c.name)

webui/src/_services/HttpService.js

@@ -14,7 +14,7 @@ function getAllRouters (params) {
 }
 
 function getRouterByName (name) {
-  return APP.api.get(`${apiBase}/routers/${name}`)
+  return APP.api.get(`${apiBase}/routers/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> HttpService -> getRouterByName', body.data)
       return body.data
@@ -32,7 +32,7 @@ function getAllServices (params) {
 }
 
 function getServiceByName (name) {
-  return APP.api.get(`${apiBase}/services/${name}`)
+  return APP.api.get(`${apiBase}/services/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> HttpService -> getServiceByName', body.data)
       return body.data
@@ -50,7 +50,7 @@ function getAllMiddlewares (params) {
 }
 
 function getMiddlewareByName (name) {
-  return APP.api.get(`${apiBase}/middlewares/${name}`)
+  return APP.api.get(`${apiBase}/middlewares/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> HttpService -> getMiddlewareByName', body.data)
       return body.data

webui/src/_services/TcpService.js

@@ -14,7 +14,7 @@ function getAllRouters (params) {
 }
 
 function getRouterByName (name) {
-  return APP.api.get(`${apiBase}/routers/${name}`)
+  return APP.api.get(`${apiBase}/routers/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> TcpService -> getRouterByName', body.data)
       return body.data
@@ -32,7 +32,7 @@ function getAllServices (params) {
 }
 
 function getServiceByName (name) {
-  return APP.api.get(`${apiBase}/services/${name}`)
+  return APP.api.get(`${apiBase}/services/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> TcpService -> getServiceByName', body.data)
       return body.data
@@ -50,7 +50,7 @@ function getAllMiddlewares (params) {
 }
 
 function getMiddlewareByName (name) {
-  return APP.api.get(`${apiBase}/middlewares/${name}`)
+  return APP.api.get(`${apiBase}/middlewares/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> TcpService -> getMiddlewareByName', body.data)
       return body.data

webui/src/_services/UdpService.js

@@ -14,7 +14,7 @@ function getAllRouters (params) {
 }
 
 function getRouterByName (name) {
-  return APP.api.get(`${apiBase}/routers/${name}`)
+  return APP.api.get(`${apiBase}/routers/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> UdpService -> getRouterByName', body.data)
       return body.data
@@ -32,7 +32,7 @@ function getAllServices (params) {
 }
 
 function getServiceByName (name) {
-  return APP.api.get(`${apiBase}/services/${name}`)
+  return APP.api.get(`${apiBase}/services/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> UdpService -> getServiceByName', body.data)
       return body.data

webui/src/components/_commons/MainTable.vue

@@ -116,7 +116,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

@@ -145,19 +145,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`
     }
   }
 }
@@ -218,7 +218,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

@@ -134,19 +134,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/pages/_commons/RouterDetail.vue

@@ -279,7 +279,7 @@ export default {
         return data.service
       }
 
-      return `${data.service}@${data.provider}`
+      return `${encodeURIComponent(data.service)}@${data.provider}`
     }
   },
   created () {

webui/src/statics/providers/swarm.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52">
-    <g fill="none" fill-rule="evenodd">
-        <circle cx="26" cy="26" r="26" fill="#007BFF"/>
-        <path fill="#FFF" fill-rule="nonzero" d="M22.749 13v3.94h-8.125v3.939h-4.062v3.94H7.414a.785.785 0 0 0-.787.64 8.97 8.97 0 0 0-.127 1.526c0 .55.054 1.15.152 1.748.93-.215 2.634-.539 2.336-1.6 1.603 1.8 5.449 1.255 6.423.369 1.089 1.53 7.43.945 7.87-.246 1.365 1.55 5.596 1.55 6.957 0 .441 1.19 6.757 1.775 7.845.246.346.314 1.066.575 1.904.714.283-.52.543-1.043.787-1.6 5.16-.062 6.274-3.66 6.322-3.817.089-.301-.032-.612-.28-.812-.085-.071-1.99-1.57-5.077-1.059-.866-2.736-3.097-3.982-3.199-4.038a.826.826 0 0 0-.914.074c-.082.065-2.002 1.643-1.701 4.875.076.813.295 1.53.635 2.167-.667.36-1.812.812-3.656.812h-.406v-3.94h-4.063V13H22.75zm17.238 15.216c-.098.185-.225.363-.33.542h7.337c-.882-.216-2.777-.505-2.462-1.625-1.038 1.163-3.009 1.335-4.545 1.083zm-.33.542H6.652a12.07 12.07 0 0 0 1.219 3.545c4.411 1.006 9.041-.526 9.089-.542a.8.8 0 0 1 1.016.493.78.78 0 0 1-.483 1.01c-.155.052-2.945.96-6.372.96-.68 0-1.394-.037-2.108-.124 2.133 2.743 5.748 4.9 11.298 4.9 8.778 0 15.528-3.616 19.346-10.242zm-33.005 0c-.003-.013.004-.013 0-.025-.054.012-.104.012-.152.025h.152zm17.721-14.182h2.438v2.363h-2.438v-2.363zm-8.124 3.94h2.437v2.363H16.25v-2.364zm4.062 0h2.438v2.363H20.31v-2.364zm4.062 0h2.438v2.363h-2.438v-2.364zm-12.186 3.939h2.437v2.363h-2.437v-2.363zm4.062 0h2.437v2.363H16.25v-2.363zm4.062 0h2.438v2.363H20.31v-2.363zm4.062 0h2.438v2.363h-2.438v-2.363zm4.062 0h2.438v2.363h-2.438v-2.363zM19.5 30.333c.105 0 .212.016.304.05-.098.055-.177.15-.177.27 0 .179.146.345.33.345a.367.367 0 0 0 .304-.172.7.7 0 0 1 .051.295.802.802 0 0 1-.812.788.802.802 0 0 1-.813-.788c0-.434.365-.788.813-.788z"/>
-    </g>
-</svg>

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;
+  }
+}