Avoid Traefik Pilot iframe code in Traefik webui regarding notifications

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"
-      @load="onAuthStateIFrameLoad"
+      :src="iFrameUrl"
+      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
-    }
-  },
-  computed: {
-    ...mapGetters('platform', { isPlatformOpen: 'isOpen' }),
-    isOnline () {
-      return window.navigator.onLine
-    }
-  },
-  methods: {
-    ...mapActions('platform', { openPlatform: 'open' }, { closePlatform: 'close' }),
-    onAuthStateIFrameLoad () {
-      iFrameResize({
+      renderIrame: true,
+      resizeOpts: {
         log: false,
-        resize: true,
         onMessage: ({ iframe, message }) => {
           if (typeof message === 'string') {
+            // 1st condition for backward compatibility
             if (message === 'open:profile') {
-              this.openPlatform()
-            }
-
-            if (message === 'logout') {
+              this.openPlatform('/')
+            } else if (message.includes('open:')) {
+              this.openPlatform(message.split('open:')[1])
+            } else if (message === 'logout') {
               this.closePlatform()
             }
           }
         }
-      }, '#platform-auth-state')
+      }
     }
   },
   created () {
-    const authRedirectUrl = `${window.location.href.split('?')[0]}?platform=on`
-    const queryParams = `?authRedirectUrl=${encodeURIComponent(authRedirectUrl)}`
+    this.getInstanceInfos()
+  },
+  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 () {
-    this.getInstanceInfos()
-  },
-  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({
+  data () {
+    return {
+      resizeOpts: {
         log: false,
         resize: false,
         scrolling: true,
         onMessage: ({ iframe, message }) => {
           if (typeof message === 'string') {
-            switch (message) {
-              case 'open:profile':
-                this.openPlatform()
-                break
-              case 'logout':
-                this.closePlatform()
-                break
+            // 1st condition for backward compatibility
+            if (message === 'open:profile') {
+              this.openPlatform('/')
+            } else if (message.includes('open:')) {
+              this.openPlatform(message.split('open:')[1])
+            } else if (message === 'logout') {
+              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 isOpen = to.query && to.query.platform === 'on'
+      const wasOpen = from.query && from.query.platform
+      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
           })
         })
       }