Avoid Traefik Pilot iframe code in Traefik webui regarding notifications

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