Avoid Traefik Pilot iframe code in Traefik webui regarding notifications

webui/package-lock.json

@@ -4871,8 +4871,7 @@
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
-      "dev": true
     },
     "deep-eql": {
       "version": "3.0.1",
@@ -7270,9 +7269,9 @@
       "dev": true
     },
     "iframe-resizer": {
-      "version": "4.2.10",
+      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.2.10.tgz",
+      "resolved": "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.2.11.tgz",
-      "integrity": "sha512-9T/AWavGI5Q7nw2ch7qatkKvhK6S11eatuSh0SXpPXN3MV0HtN97KyifWJSuMj47rD6jbqe1CXT91PLQbexvEQ=="
+      "integrity": "sha512-fj5vX5kkpRbMb5Qje6veIDzqoJpnCEqUDdSOwASOeQHYmb8hLYX6Ev2yXf3jjMs2MclwcYY3chyZ3diGKcr8DA=="
     },
     "ignore": {
       "version": "3.3.10",
@@ -8558,7 +8557,25 @@
             "prepend-http": "^1.0.0",
             "query-string": "^4.1.0",
             "sort-keys": "^1.0.0"
+          },
+          "dependencies": {
+            "query-string": {
+              "version": "4.3.4",
+              "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+              "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+              "dev": true,
+              "requires": {
+                "object-assign": "^4.1.0",
+                "strict-uri-encode": "^1.0.0"
+              }
+            }
           }
+        },
+        "strict-uri-encode": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+          "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
+          "dev": true
         }
       }
     },
@@ -11555,13 +11572,13 @@
       "integrity": "sha512-3sdNDPrkLX0LGoTEqA3nimvl0Qj6KnTq9uvpbs8UrPLRdBhlHvE/LRYb33jcy4uNNbMTkat0VCPyHKOaf7CUHw=="
     },
     "query-string": {
-      "version": "4.3.4",
+      "version": "6.13.1",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.13.1.tgz",
-      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+      "integrity": "sha512-RfoButmcK+yCta1+FuU8REvisx1oEzhMKwhLUNcepQTPGcNMp1sIqjnfCtfnvGSQZQEhaBHvccujtWoUV3TTbA==",
-      "dev": true,
       "requires": {
-        "object-assign": "^4.1.0",
+        "decode-uri-component": "^0.2.0",
-        "strict-uri-encode": "^1.0.0"
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
       }
     },
     "querystring": {
@@ -12471,6 +12488,11 @@
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "dev": true
     },
+    "semver-regex": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-3.1.1.tgz",
+      "integrity": "sha512-3dPcmFqxblWB/cppQ2qXWqlp9b6GLgAS032+Ec5E0waDVHTkwYIL+7BFI9UqEe0tkoHle2f3pBgvT/Xl95+Dig=="
+    },
     "send": {
       "version": "0.17.1",
       "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
@@ -13012,6 +13034,11 @@
         }
       }
     },
+    "split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -13141,10 +13168,9 @@
       "dev": true
     },
     "strict-uri-encode": {
-      "version": "1.1.0",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
+      "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
-      "dev": true
     },
     "string-width": {
       "version": "2.1.1",

webui/package.json

@@ -21,10 +21,12 @@
     "bowser": "^2.5.2",
     "chart.js": "^2.8.0",
     "dot-prop": "^5.2.0",
-    "iframe-resizer": "^4.2.10",
+    "iframe-resizer": "^4.2.11",
     "lodash.isequal": "4.5.0",
     "moment": "^2.24.0",
     "quasar": "^1.4.4",
+    "query-string": "^6.13.1",
+    "semver-regex": "^3.1.1",
     "vh-check": "^2.0.5",
     "vue-chartjs": "^3.4.2",
     "vuex-map-fields": "^1.3.4"

webui/src/components/_commons/NavBar.vue

@@ -46,6 +46,7 @@
 import config from '../../../package'
 import PlatformAuthState from '../platform/PlatformAuthState'
 import { mapActions, mapGetters } from 'vuex'
+import semverRegex from 'semver-regex'
 
 export default {
   name: 'NavBar',
@@ -53,7 +54,10 @@ export default {
   computed: {
     ...mapGetters('core', { coreVersion: 'version' }),
     version () {
-      return this.coreVersion.Version
+      if (!this.coreVersion.Version) return null
+      return semverRegex().test(this.coreVersion.Version)
+        ? this.coreVersion.Version
+        : this.coreVersion.Version.substring(0, 7)
     },
     parsedVersion () {
       if (this.version === undefined) {

webui/src/components/platform/PlatformAuthState.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="iframe-wrapper" v-if="isOnline">
     <iframe
-      v-if="renderIrame"
       id="platform-auth-state"
-      :src="AuthStateIFrameUrl"
+      :src="iFrameUrl"
-      @load="onAuthStateIFrameLoad"
+      v-if="renderIrame"
+      v-resize="resizeOpts"
       height="64px"
       frameBorder="0"
     />
@@ -14,47 +14,50 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import iFrameResize from 'iframe-resizer/js/iframeResizer'
+import qs from 'query-string'
 import '../../_directives/resize'
 
 export default {
   name: 'PlatformPanel',
   data () {
     return {
-      renderIrame: true
+      renderIrame: true,
-    }
+      resizeOpts: {
-  },
-  computed: {
-    ...mapGetters('platform', { isPlatformOpen: 'isOpen' }),
-    isOnline () {
-      return window.navigator.onLine
-    }
-  },
-  methods: {
-    ...mapActions('platform', { openPlatform: 'open' }, { closePlatform: 'close' }),
-    onAuthStateIFrameLoad () {
-      iFrameResize({
         log: false,
-        resize: true,
         onMessage: ({ iframe, message }) => {
           if (typeof message === 'string') {
+            // 1st condition for backward compatibility
             if (message === 'open:profile') {
-              this.openPlatform()
+              this.openPlatform('/')
-            }
+            } else if (message.includes('open:')) {
-
+              this.openPlatform(message.split('open:')[1])
-            if (message === 'logout') {
+            } else if (message === 'logout') {
               this.closePlatform()
             }
           }
         }
-      }, '#platform-auth-state')
+      }
     }
   },
   created () {
-    const authRedirectUrl = `${window.location.href.split('?')[0]}?platform=on`
+    this.getInstanceInfos()
-    const queryParams = `?authRedirectUrl=${encodeURIComponent(authRedirectUrl)}`
+  },
+  computed: {
+    ...mapGetters('platform', { isPlatformOpen: 'isOpen', platformPath: 'path' }),
+    ...mapGetters('core', { instanceInfos: 'version' }),
+    isOnline () {
+      return window.navigator.onLine
+    },
+    iFrameUrl () {
+      const instanceInfos = JSON.stringify(this.instanceInfos)
+      const authRedirectUrl = `${window.location.href.split('?')[0]}?platform=${this.platformPath}`
 
-    this.AuthStateIFrameUrl = `${this.platformUrl}/partials/auth-state${queryParams}`
+      return qs.stringifyUrl({ url: `${this.platformUrl}/partials/auth-state`, query: { authRedirectUrl, instanceInfos } })
+    }
+  },
+  methods: {
+    ...mapActions('platform', { openPlatform: 'open' }, { closePlatform: 'close' }),
+    ...mapActions('core', { getInstanceInfos: 'getVersion' })
   },
   watch: {
     isPlatformOpen (isOpen, wasOpen) {
@@ -68,3 +71,12 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="scss">
+  @import "../../css/sass/variables";
+
+  #platform-auth-state {
+    width: 1px;
+    min-width: 296px;
+  }
+</style>

webui/src/components/platform/PlatformNotification.vue

@@ -1,113 +0,0 @@
-<template>
-  <transition name="slide" v-if="!instanceIsRegistered && isOnline && !platformNotificationIsHidden">
-    <section class="app-section">
-      <div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-md">
-        <div class="platform-notification q-pl-lg q-pr-lg q-pt-md q-pb-md">
-          <p>
-            <q-avatar color="accent" text-color="white" class="icon">
-              <q-icon name="eva-alert-circle" />
-            </q-avatar>
-            This Traefik Instance is not registered in your Traefik Pilot account yet.
-          </p>
-          <platform-action-button label="Register Traefik instance" @click="openPlatform" />
-          <q-btn round size="xs" color="accent" icon="close" class="btn close-btn" @click="hidePlatformNotification"></q-btn>
-        </div>
-      </div>
-    </section>
-  </transition>
-</template>
-
-<script>
-import { mapActions, mapGetters } from 'vuex'
-import PlatformActionButton from './PlatformActionButton'
-
-export default {
-  name: 'PlatformNotification',
-  components: { PlatformActionButton },
-  created () {
-    this.getInstanceInfos()
-    console.log(`localStorage.getItem('platform_notification-is-hidden')`, localStorage.getItem('platform_notification-is-hidden'))
-    try {
-      if (localStorage.getItem('platform_notification-is-hidden') === 'true') {
-        this.hidePlatformNotification()
-      }
-    } catch (e) {
-      console.error('error reading localStorage', e)
-    }
-  },
-  computed: {
-    ...mapGetters('platform', { isPlatformOpen: 'isOpen', platformNotificationIsHidden: 'notificationIsHidden' }),
-    ...mapGetters('core', { instanceInfos: 'version' }),
-    instanceIsRegistered () {
-      return !!(this.instanceInfos && this.instanceInfos.uuid && this.instanceInfos.uuid.length > 0)
-    },
-    isOnline () {
-      return window.navigator.onLine
-    }
-  },
-  methods: {
-    ...mapActions('platform', { openPlatform: 'open', hidePlatformNotification: 'hideNotification' }),
-    ...mapActions('core', { getInstanceInfos: 'getVersion' })
-  },
-  watch: {
-    isPlatformOpen (newValue, oldValue) {
-      const isClosed = !newValue && oldValue
-      if (isClosed) {
-        this.getInstanceInfos()
-      }
-    },
-    platformNotificationIsHidden (newValue, oldValue) {
-      if (newValue !== oldValue) {
-        try {
-          localStorage.setItem('platform_notification-is-hidden', newValue ? 'true' : 'false')
-        } catch (e) {
-          console.error('error writing localStorage', e)
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-  @import "../../css/sass/variables";
-
-  .platform-notification {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-radius: 6px;
-    color: $accent;
-    background-color: rgba($accent, 0.1);
-    font-size: 16px;
-  }
-
-  .close-btn {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .icon {
-    width: 32px;
-    height: 32px;
-    margin-right: 20px;
-    border-radius: 4px;
-  }
-
-  .slide-enter-active,
-  .slide-leave-active {
-    transition: transform 0.5s ease;
-  }
-
-  .slide-enter,
-  .slide-leave-to {
-    transform: translateX(100%);
-    transition: all 150ms ease-in 0s;
-  }
-</style>

webui/src/components/platform/PlatformPanel.vue

@@ -1,9 +1,14 @@
 <template>
-  <side-panel :isOpen="isPlatformOpen" @onClose="closePlatform()" v-if="isOnline">
+  <side-panel
+    :isOpen="isPlatformOpen"
+    @onClose="closePlatform()"
+    v-if="isOnline"
+  >
     <div class="iframe-wrapper">
       <iframe
         id="platform-iframe"
         :src="iFrameUrl"
+        v-resize="resizeOpts"
         style="position: relative; height: 100%; width: 100%;"
         frameBorder="0"
         scrolling="yes"
@@ -15,7 +20,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import iFrameResize from 'iframe-resizer/js/iframeResizer'
+import qs from 'query-string'
 import SidePanel from '../_commons/SidePanel'
 import Helps from '../../_helpers/Helps'
 import '../../_directives/resize'
@@ -25,40 +30,21 @@ export default {
   components: {
     SidePanel
   },
-  async created () {
+  data () {
-    this.getInstanceInfos()
+    return {
-  },
+      resizeOpts: {
-  computed: {
-    ...mapGetters('platform', { isPlatformOpen: 'isOpen' }),
-    ...mapGetters('core', { instanceInfos: 'version' }),
-    iFrameUrl () {
-      const instanceInfos = JSON.stringify(this.instanceInfos)
-      const authRedirectUrl = `${window.location.href.split('?')[0]}?platform=on`
-      const queryParams = `?authRedirectUrl=${encodeURIComponent(authRedirectUrl)}&instanceInfos=${encodeURIComponent(instanceInfos)}`
-
-      return `${this.platformUrl}/instances${queryParams}`
-    },
-    isOnline () {
-      return window.navigator.onLine
-    }
-  },
-  methods: {
-    ...mapActions('platform', { openPlatform: 'open', closePlatform: 'close' }),
-    ...mapActions('core', { getInstanceInfos: 'getVersion' }),
-    onIFrameLoad () {
-      iFrameResize({
         log: false,
         resize: false,
         scrolling: true,
         onMessage: ({ iframe, message }) => {
           if (typeof message === 'string') {
-            switch (message) {
+            // 1st condition for backward compatibility
-              case 'open:profile':
+            if (message === 'open:profile') {
-                this.openPlatform()
+              this.openPlatform('/')
-                break
+            } else if (message.includes('open:')) {
-              case 'logout':
+              this.openPlatform(message.split('open:')[1])
-                this.closePlatform()
+            } else if (message === 'logout') {
-                break
+              this.closePlatform()
             }
           } else if (message.type) {
             switch (message.type) {
@@ -70,16 +56,36 @@ export default {
             this.isAuthenticated = message.isAuthenticated
           }
         }
-      }, '#platform-iframe')
+      }
     }
   },
+  created () {
+    this.getInstanceInfos()
+  },
+  computed: {
+    ...mapGetters('platform', { isPlatformOpen: 'isOpen', platformPath: 'path' }),
+    ...mapGetters('core', { instanceInfos: 'version' }),
+    iFrameUrl () {
+      const instanceInfos = JSON.stringify(this.instanceInfos)
+      const authRedirectUrl = `${window.location.href.split('?')[0]}?platform=${this.platformPath}`
+
+      return qs.stringifyUrl({ url: `${this.platformUrl}${this.platformPath}`, query: { authRedirectUrl, instanceInfos } })
+    },
+    isOnline () {
+      return window.navigator.onLine
+    }
+  },
+  methods: {
+    ...mapActions('platform', { openPlatform: 'open', closePlatform: 'close' }),
+    ...mapActions('core', { getInstanceInfos: 'getVersion' })
+  },
   watch: {
     $route (to, from) {
-      const wasOpen = from.query && from.query.platform === 'on'
+      const wasOpen = from.query && from.query.platform
-      const isOpen = to.query && to.query.platform === 'on'
+      const isOpen = to.query && to.query.platform
 
       if (!wasOpen && isOpen) {
-        this.openPlatform()
+        this.openPlatform(to.query.platform)
       }
     },
     isPlatformOpen (newValue, oldValue) {
@@ -90,7 +96,7 @@ export default {
           path: this.$route.path,
           query: Helps.removeEmptyObjects({
             ...this.$route.query,
-            platform: newValue ? 'on' : undefined
+            platform: this.platformPath ? this.platformPath : undefined
           })
         })
       }

webui/src/pages/dashboard/Index.vue

@@ -1,7 +1,5 @@
 <template>
   <page-default>
-    <platform-notification />
-
     <section class="app-section">
       <div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-xl q-pb-lg">
         <div class="row no-wrap items-center q-mb-lg app-title">
@@ -151,7 +149,6 @@ import PanelEntry from '../../components/dashboard/PanelEntry'
 import PanelChart from '../../components/dashboard/PanelChart'
 import PanelFeature from '../../components/dashboard/PanelFeature'
 import PanelProvider from '../../components/dashboard/PanelProvider'
-import PlatformNotification from '../../components/platform/PlatformNotification'
 
 export default {
   name: 'PageDashboardIndex',
@@ -161,8 +158,7 @@ export default {
     PanelEntry,
     PanelChart,
     PanelFeature,
-    PanelProvider,
+    PanelProvider
-    PlatformNotification
   },
   data () {
     return {

webui/src/store/platform/index.js

@@ -1,6 +1,9 @@
 export default {
   namespaced: true,
   getters: {
+    path (state) {
+      return state.path
+    },
     isOpen (state) {
       return state.isOpen
     },
@@ -11,6 +14,12 @@ export default {
   mutations: {
     toggle (state, isOpen) {
       state.isOpen = isOpen || !state.isOpen
+      if (!state.isOpen) {
+        state.path = '/'
+      }
+    },
+    setPath (state, path = '/') {
+      state.path = path
     },
     toggleNotifVisibility (state, isHidden) {
       state.notificationIsHidden = isHidden || !state.isHidden
@@ -20,10 +29,12 @@ export default {
     toggle ({ commit }) {
       commit('toggle')
     },
-    open ({ commit }) {
+    open ({ commit }, path) {
+      commit('setPath', path)
       commit('toggle', true)
     },
     close ({ commit }) {
+      commit('setPath', '/')
       commit('toggle', false)
     },
     hideNotification ({ commit }) {
@@ -31,6 +42,7 @@ export default {
     }
   },
   state: {
+    path: '/',
     isOpen: false,
     notificationIsHidden: false
   }