Avoid Traefik Pilot iframe code in Traefik webui regarding notifications

This commit is contained in:
Matthieu Hostache 2020-09-15 10:26:03 +02:00 committed by GitHub
parent cd1f03d4f4
commit b980c87eff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 143 additions and 198 deletions

View file

@ -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=",
"dev": true
"integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
},
"deep-eql": {
"version": "3.0.1",
@ -7270,9 +7269,9 @@
"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=="
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.2.11.tgz",
"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",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
"integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
"dev": true,
"version": "6.13.1",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-6.13.1.tgz",
"integrity": "sha512-RfoButmcK+yCta1+FuU8REvisx1oEzhMKwhLUNcepQTPGcNMp1sIqjnfCtfnvGSQZQEhaBHvccujtWoUV3TTbA==",
"requires": {
"object-assign": "^4.1.0",
"strict-uri-encode": "^1.0.0"
"decode-uri-component": "^0.2.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",
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
"integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
},
"string-width": {
"version": "2.1.1",

View file

@ -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"

View file

@ -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) {

View file

@ -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>

View file

@ -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>

View file

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

View file

@ -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,
PlatformNotification
PanelProvider
},
data () {
return {

View file

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