feat: use dedicated entrypoint for the tunnels
Co-authored-by: Fernandez Ludovic <[ldez@users.noreply.github.com](mailto:ldez@users.noreply.github.com)>
This commit is contained in:
Baptiste Mayelle
GitHub
parent
619621f239
commit
86cc6df374
21 changed files with 386 additions and 384 deletions
|
|
@ -15,7 +15,6 @@
|
|||
</q-tabs>
|
||||
<div class="right-menu">
|
||||
<q-tabs>
|
||||
<q-btn type="a" href="https://hub.traefik.io/" target="_blank" flat no-caps label="Go to Hub Dashboard →" class="btn-menu btn-hub" />
|
||||
<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 stretch flat icon="eva-question-mark-circle-outline">
|
||||
<q-menu anchor="bottom left" auto-close>
|
||||
|
|
@ -29,6 +28,8 @@
|
|||
</q-menu>
|
||||
</q-btn>
|
||||
</q-tabs>
|
||||
<platform-auth-state
|
||||
v-if="pilotEnabled" />
|
||||
</div>
|
||||
</q-toolbar>
|
||||
</div>
|
||||
|
|
@ -44,10 +45,12 @@
|
|||
|
||||
<script>
|
||||
import config from '../../../package'
|
||||
import PlatformAuthState from '../platform/PlatformAuthState'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'NavBar',
|
||||
components: { PlatformAuthState },
|
||||
computed: {
|
||||
...mapGetters('core', { coreVersion: 'version' }),
|
||||
version () {
|
||||
|
|
@ -56,6 +59,9 @@ export default {
|
|||
? this.coreVersion.Version
|
||||
: this.coreVersion.Version.substring(0, 7)
|
||||
},
|
||||
pilotEnabled () {
|
||||
return this.coreVersion.pilotEnabled
|
||||
},
|
||||
parsedVersion () {
|
||||
if (!this.version) {
|
||||
return 'master'
|
||||
|
|
@ -138,11 +144,6 @@ export default {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-hub {
|
||||
color: #0e204c;
|
||||
background: #deea48;
|
||||
}
|
||||
|
||||
.q-item {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
82
webui/src/components/platform/PlatformAuthState.vue
Normal file
82
webui/src/components/platform/PlatformAuthState.vue
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<div class="iframe-wrapper" v-if="isOnline">
|
||||
<iframe
|
||||
id="platform-auth-state"
|
||||
:src="iFrameUrl"
|
||||
v-if="renderIrame"
|
||||
v-resize="resizeOpts"
|
||||
height="64px"
|
||||
frameBorder="0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import qs from 'query-string'
|
||||
import '../../_directives/resize'
|
||||
|
||||
export default {
|
||||
name: 'PlatformPanel',
|
||||
data () {
|
||||
return {
|
||||
renderIrame: true,
|
||||
resizeOpts: {
|
||||
log: false,
|
||||
onMessage: ({ iframe, message }) => {
|
||||
if (typeof message === 'string') {
|
||||
// 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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
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}`
|
||||
|
||||
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) {
|
||||
if (!isOpen && wasOpen) {
|
||||
this.renderIrame = false
|
||||
this.$nextTick().then(() => {
|
||||
this.renderIrame = true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../css/sass/variables";
|
||||
|
||||
#platform-auth-state {
|
||||
width: 1px;
|
||||
min-width: 296px;
|
||||
}
|
||||
</style>
|
||||
112
webui/src/components/platform/PlatformPanel.vue
Normal file
112
webui/src/components/platform/PlatformPanel.vue
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
<template>
|
||||
<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"
|
||||
@load="onIFrameLoad"
|
||||
/>
|
||||
</div>
|
||||
</side-panel>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import qs from 'query-string'
|
||||
import SidePanel from '../_commons/SidePanel'
|
||||
import Helps from '../../_helpers/Helps'
|
||||
import '../../_directives/resize'
|
||||
|
||||
export default {
|
||||
name: 'PlatformPanel',
|
||||
components: {
|
||||
SidePanel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
resizeOpts: {
|
||||
log: false,
|
||||
resize: false,
|
||||
scrolling: true,
|
||||
onMessage: ({ iframe, message }) => {
|
||||
if (typeof message === 'string') {
|
||||
// 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) {
|
||||
case 'copy-to-clipboard':
|
||||
navigator.clipboard.writeText(message.value)
|
||||
break
|
||||
}
|
||||
} else if (message.isAuthenticated) {
|
||||
this.isAuthenticated = message.isAuthenticated
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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
|
||||
const isOpen = to.query && to.query.platform
|
||||
|
||||
if (!wasOpen && isOpen) {
|
||||
this.openPlatform(to.query.platform)
|
||||
}
|
||||
},
|
||||
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: this.platformPath ? this.platformPath : undefined
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.iframe-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue