feat: Traefik Pilot WebUI

webui/package-lock.json

@@ -7269,6 +7269,11 @@
       "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
       "dev": true
     },
+    "iframe-resizer": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.2.10.tgz",
+      "integrity": "sha512-9T/AWavGI5Q7nw2ch7qatkKvhK6S11eatuSh0SXpPXN3MV0HtN97KyifWJSuMj47rD6jbqe1CXT91PLQbexvEQ=="
+    },
     "ignore": {
       "version": "3.3.10",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
@@ -9003,7 +9008,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -9024,12 +9030,14 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -9044,17 +9052,20 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -9171,7 +9182,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -9183,6 +9195,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -9197,6 +9210,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -9204,12 +9218,14 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -9228,6 +9244,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -9308,7 +9325,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -9320,6 +9338,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -9405,7 +9424,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -9441,6 +9461,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -9460,6 +9481,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -9503,12 +9525,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },
@@ -14418,7 +14442,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -14439,12 +14464,14 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -14459,17 +14486,20 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -14586,7 +14616,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -14598,6 +14629,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -14612,6 +14644,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -14619,12 +14652,14 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -14643,6 +14678,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -14723,7 +14759,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -14735,6 +14772,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -14820,7 +14858,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -14856,6 +14895,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -14875,6 +14915,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -14918,12 +14959,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },
@@ -15465,7 +15508,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -15486,12 +15530,14 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -15506,17 +15552,20 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -15633,7 +15682,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -15645,6 +15695,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -15659,6 +15710,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -15666,12 +15718,14 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -15690,6 +15744,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -15770,7 +15825,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -15782,6 +15838,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -15867,7 +15924,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -15903,6 +15961,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -15922,6 +15981,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -15965,12 +16025,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },

webui/package.json

@@ -21,6 +21,7 @@
     "bowser": "^2.5.2",
     "chart.js": "^2.8.0",
     "dot-prop": "^5.2.0",
+    "iframe-resizer": "^4.2.10",
     "lodash.isequal": "4.5.0",
     "moment": "^2.24.0",
     "quasar": "^1.4.4",

webui/quasar.conf.js

@@ -118,11 +118,13 @@ module.exports = function (ctx) {
       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_API: JSON.stringify(process.env.APP_API || '/api'),
+          PLATFORM_URL: JSON.stringify(process.env.PLATFORM_URL || 'https://pilot.traefik.io')
         }
         : { // production:
           APP_ENV: JSON.stringify(process.env.APP_ENV),
-          APP_API: JSON.stringify(process.env.APP_API || '/api')
+          APP_API: JSON.stringify(process.env.APP_API || '/api'),
+          PLATFORM_URL: JSON.stringify(process.env.PLATFORM_URL || 'https://pilot.traefik.io')
         },
       uglifyOptions: {
         compress: {

webui/src/App.vue

@@ -1,14 +1,19 @@
 <template>
   <div id="q-app">
     <router-view />
+    <platform-panel />
   </div>
 </template>
 
 <script>
 import { APP } from './_helpers/APP'
+import PlatformPanel from './components/platform/PlatformPanel'
 
 export default {
   name: 'App',
+  components: {
+    PlatformPanel
+  },
   beforeCreate () {
     // Set vue instance
     APP.vue = () => this.$root

webui/src/_directives/resize.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import iFrameResize from 'iframe-resizer/js/iframeResizer'
+
+Vue.directive('resize', {
+  bind: function (el, { value = {} }) {
+    el.addEventListener('load', () => iFrameResize(value, el))
+  }
+})

webui/src/_helpers/APP.js

@@ -1,7 +1,8 @@
 const APP = {
   config: {
     env: process.env.APP_ENV,
-    apiUrl: process.env.APP_API
+    apiUrl: process.env.APP_API,
+    platformUrl: process.env.PLATFORM_URL
   }
 }
 

webui/src/_middleware/Boot.js

@@ -15,6 +15,9 @@ const Boot = {
         env () {
           return APP.config.env
         },
+        platformUrl () {
+          return APP.config.platformUrl
+        },
         appThumbStyle () {
           return {
             right: '2px',

webui/src/components/_commons/NavBar.vue

@@ -5,6 +5,7 @@
         <q-toolbar class="row no-wrap items-center">
           <div class="q-pr-md logo">
             <img alt="logo" src="~assets/logo.svg">
+            <q-btn v-if="version" type="a" href="https://github.com/containous/traefik/" target="_blank" stretch flat no-caps :label="version" class="btn-menu version" />
           </div>
           <q-tabs align="left" inline-label indicator-color="transparent" active-color="white" stretch>
             <q-route-tab to="/" icon="eva-home-outline" no-caps label="Dashboard" />
@@ -12,10 +13,23 @@
             <q-route-tab to="/tcp" icon="eva-globe-2-outline" no-caps label="TCP" />
             <q-route-tab to="/udp" icon="eva-globe-2-outline" no-caps label="UDP" />
           </q-tabs>
-          <q-space />
+          <div class="right-menu">
-          <q-btn @click="$q.dark.toggle()" stretch flat no-caps icon="invert_colors" :label="`${$q.dark.isActive ? 'Light' : 'Dark'} theme`" class="btn-menu" />
+            <q-tabs>
-          <q-btn type="a" :href="`https://docs.traefik.io/${parsedVersion}`" target="_blank" stretch flat no-caps label="Documentation" class="btn-menu" />
+              <q-btn @click="$q.dark.toggle()" stretch flat no-caps icon="invert_colors" :label="`${$q.dark.isActive ? 'Light' : 'Dark'} theme`" class="btn-menu" />
-          <q-btn v-if="version" type="a" href="https://github.com/containous/traefik/" target="_blank" stretch flat no-caps :label="`${name} ${version}`" class="btn-menu" />
+              <q-btn stretch flat icon="eva-question-mark-circle-outline">
+                <q-menu anchor="bottom left" auto-close>
+                  <q-item>
+                    <q-btn type="a" :href="`https://docs.traefik.io/${parsedVersion}`" target="_blank" flat color="accent" align="left" icon="eva-book-open-outline" no-caps label="Documentation" class="btn-submenu full-width"/>
+                  </q-item>
+                  <q-separator />
+                  <q-item>
+                    <q-btn type="a" href="https://github.com/containous/traefik/" target="_blank" flat color="accent" align="left" icon="eva-github-outline" no-caps label="Github repository" class="btn-submenu full-width"/>
+                  </q-item>
+                </q-menu>
+              </q-btn>
+            </q-tabs>
+            <platform-auth-state />
+          </div>
         </q-toolbar>
       </div>
     </section>
@@ -30,14 +44,12 @@
 
 <script>
 import config from '../../../package'
+import PlatformAuthState from '../platform/PlatformAuthState'
 import { mapActions, mapGetters } from 'vuex'
 
 export default {
   name: 'NavBar',
-  data () {
+  components: { PlatformAuthState },
-    return {
-    }
-  },
   computed: {
     ...mapGetters('core', { coreVersion: 'version' }),
     version () {
@@ -73,14 +85,29 @@ export default {
     min-height: 64px;
   }
 
-  .body--dark .sub-nav {
+  .body--dark {
-    background-color: #0e204c;
+    .sub-nav {
+      background-color: #0e204c;
+    }
+  }
+
+  .q-item--dark {
+    background: var(--q-color-dark);
   }
 
   .logo {
-    display: inline-block;
+    display: flex;
+    align-items: center;
+
     img {
       height: 24px;
+      margin-right: 10px;
+    }
+
+    .version {
+      min-height: inherit;
+      line-height:  inherit;
+      padding: 0 4px;
     }
   }
 
@@ -97,9 +124,25 @@ export default {
     }
   }
 
-  .btn-menu{
+  .right-menu {
+    flex: 1;
+    height: 64px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .btn-menu {
     color: rgba( $app-text-white, .4 );
     font-size: 16px;
     font-weight: 600;
   }
+
+  .q-item {
+    padding: 0;
+  }
+
+  .btn-submenu {
+    font-weight: 700;
+    align-items: flex-start;
+  }
 </style>

webui/src/components/_commons/SidePanel.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="panel">
+    <div
+      class="panel-backdrop"
+      @click="close"
+      v-if="isOpen"
+    ></div>
+    <transition name="slide">
+      <div v-if="isOpen" class="panel-content">
+        <slot></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+
+export default {
+  props: ['isOpen'],
+  methods: {
+    close () {
+      this.$emit('onClose')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  @import "../../css/sass/mixins";
+
+  .slide-enter-active,
+  .slide-leave-active {
+    transition: transform 0.2s ease;
+  }
+
+  .slide-enter,
+  .slide-leave-to {
+    transform: translateX(100%);
+    transition: all 150ms ease-in 0s;
+  }
+
+  .panel-backdrop {
+    z-index: 3000;
+    background-color: rgba(255, 255, 255, 0.47);
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+  }
+
+  .panel-content {
+    z-index: 9999;
+    overflow-y: auto;
+    background-color: white;
+    position: fixed;
+    right: 0;
+    top: 0;
+    height: 100vh;
+    padding: 0;
+    width: 100vw;
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
+    box-shadow: 2px 0 6px 0 #000;
+
+    @include respond-to(md) {
+      width: 80vw;
+      max-width: 1500px;
+    }
+  }
+</style>

webui/src/components/platform/PlatformActionButton.vue

@@ -0,0 +1,20 @@
+<template>
+  <q-btn color="accent" class="btn" @click="$emit('click', $event)" :bind="$attrs">{{label}}</q-btn>
+</template>
+
+<script>
+
+export default {
+  name: 'ConnectButton',
+  props: ['label']
+}
+</script>
+
+<style>
+  .btn {
+    font-family: 'Nunito', 'Roboto', sans-serif;
+    font-weight: bold;
+    font-size: 14px;
+    text-transform: inherit;
+  }
+</style>

webui/src/components/platform/PlatformAuthState.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="iframe-wrapper" v-if="isOnline">
+    <iframe
+      v-if="renderIrame"
+      id="platform-auth-state"
+      :src="AuthStateIFrameUrl"
+      @load="onAuthStateIFrameLoad"
+      height="64px"
+      frameBorder="0"
+    />
+  </div>
+
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import iFrameResize from 'iframe-resizer/js/iframeResizer'
+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({
+        log: false,
+        resize: true,
+        onMessage: ({ iframe, message }) => {
+          if (typeof message === 'string') {
+            if (message === 'open:profile') {
+              this.openPlatform()
+            }
+
+            if (message === 'logout') {
+              this.closePlatform()
+            }
+          }
+        }
+      }, '#platform-auth-state')
+    }
+  },
+  created () {
+    const authRedirectUrl = `${window.location.href.split('?')[0]}?platform=on`
+    const queryParams = `?authRedirectUrl=${encodeURIComponent(authRedirectUrl)}`
+
+    this.AuthStateIFrameUrl = `${this.platformUrl}/partials/auth-state${queryParams}`
+  },
+  watch: {
+    isPlatformOpen (isOpen, wasOpen) {
+      if (!isOpen && wasOpen) {
+        this.renderIrame = false
+        this.$nextTick().then(() => {
+          this.renderIrame = true
+        })
+      }
+    }
+  }
+}
+</script>

webui/src/components/platform/PlatformNotification.vue

@@ -0,0 +1,90 @@
+<template>
+  <transition name="slide" v-if="!instanceIsRegistered && isOnline">
+    <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="platform-notification">
+          <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" />
+        </div>
+      </div>
+    </section>
+  </transition>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import PlatformActionButton from './PlatformActionButton'
+
+export default {
+  name: 'PlatformNotification',
+  components: { PlatformActionButton },
+  created () {
+    this.getInstanceInfos()
+  },
+  computed: {
+    ...mapGetters('platform', { isPlatformOpen: 'isOpen' }),
+    ...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' }),
+    ...mapActions('core', { getInstanceInfos: 'getVersion' })
+  },
+  watch: {
+    isPlatformOpen (newValue, oldValue) {
+      const isClosed = !newValue && oldValue
+      if (isClosed) {
+        this.getInstanceInfos()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  @import "../../css/sass/variables";
+
+  .platform-notification {
+    min-height: 100px;
+    padding: 40px 36px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 6px;
+    color: $accent;
+    background-color: rgba($accent, 0.1);
+    font-size: 16px;
+  }
+
+  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

@@ -0,0 +1,106 @@
+<template>
+  <side-panel :isOpen="isPlatformOpen" @onClose="closePlatform()" v-if="isOnline">
+    <div class="iframe-wrapper">
+      <iframe
+        id="platform-iframe"
+        :src="iFrameUrl"
+        style="position: relative; height: 100%; width: 100%;"
+        frameBorder="0"
+        scrolling="yes"
+        @load="onIFrameLoad"
+      />
+    </div>
+  </side-panel>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import iFrameResize from 'iframe-resizer/js/iframeResizer'
+import SidePanel from '../_commons/SidePanel'
+import Helps from '../../_helpers/Helps'
+import '../../_directives/resize'
+
+export default {
+  name: 'PlatformPanel',
+  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({
+        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
+            }
+          } else if (message.type) {
+            switch (message.type) {
+              case 'copy-to-clipboard':
+                navigator.clipboard.writeText(message.value)
+                break
+            }
+          } else if (message.isAuthenticated) {
+            this.isAuthenticated = message.isAuthenticated
+          }
+        }
+      }, '#platform-iframe')
+    }
+  },
+  watch: {
+    $route (to, from) {
+      const wasOpen = from.query && from.query.platform === 'on'
+      const isOpen = to.query && to.query.platform === 'on'
+
+      if (!wasOpen && isOpen) {
+        this.openPlatform()
+      }
+    },
+    isPlatformOpen (newValue, oldValue) {
+      if (newValue !== oldValue) {
+        document.querySelector('body').style.overflow = newValue ? 'hidden' : 'visible'
+
+        this.$router.push({
+          path: this.$route.path,
+          query: Helps.removeEmptyObjects({
+            ...this.$route.query,
+            platform: newValue ? 'on' : undefined
+          })
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .iframe-wrapper {
+    height: 100%;
+  }
+</style>

webui/src/pages/dashboard/Index.vue

@@ -1,5 +1,6 @@
 <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">
@@ -150,6 +151,7 @@ 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',
@@ -159,7 +161,8 @@ export default {
     PanelEntry,
     PanelChart,
     PanelFeature,
-    PanelProvider
+    PanelProvider,
+    PlatformNotification
   },
   data () {
     return {

webui/src/store/index.js

@@ -6,6 +6,7 @@ import entrypoints from './entrypoints'
 import http from './http'
 import tcp from './tcp'
 import udp from './udp'
+import platform from './platform'
 
 Vue.use(Vuex)
 
@@ -21,7 +22,8 @@ export default function (/* { ssrContext } */) {
       entrypoints,
       http,
       tcp,
-      udp
+      udp,
+      platform
     },
 
     // enable strict mode (adds overhead!)

webui/src/store/platform/index.js

@@ -0,0 +1,27 @@
+export default {
+  namespaced: true,
+  getters: {
+    isOpen (state) {
+      return state.isOpen
+    }
+  },
+  mutations: {
+    toggle (state, isOpen) {
+      state.isOpen = isOpen || !state.isOpen
+    }
+  },
+  actions: {
+    toggle ({ commit }) {
+      commit('toggle')
+    },
+    open ({ commit }) {
+      commit('toggle', true)
+    },
+    close ({ commit }) {
+      commit('toggle', false)
+    }
+  },
+  state: {
+    isOpen: false
+  }
+}