TT#122202 ProxiedFeature - As SubscriberAdmin, I want to be able to access the "Customer Details" page in v1 from within v2
AC:
Can click on a main menu point to open Subscriber management
Can see a page opening and loading the page from v1 within v2
Note, to test it locally:
1. you need to create the "quasar.conf.dev.js" file with content like
module.exports = {
public: '',
publicPath: '/v2/',
proxyAPI2localhost: true,
proxyAPIFromURL: 'https://dev-web3-trunk.mgm.sipwise.com'
}
2. "src/config.js" should have
baseHttpUrl: '',
3. to login into system you have to use "username@domain" login !!!
Change-Id: I3af7caeb242a52e573d87c50fe05c9462f95bfb3
mr9.5.2
Sergii Leonenko
4 years ago
parent
ccdf8971bb
commit
31f00c6aa0
@ -0,0 +1,7 @@
|
||||
|
||||
module.exports = {
|
||||
public: '',
|
||||
publicPath: '/v2/',
|
||||
proxyAPI2localhost: true,
|
||||
proxyAPIFromURL: 'https://{{sipwiseVoipPlatformIPorFDQN}}'
|
||||
}
|
||||
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div
|
||||
class="proxy-iframe-wrapper flex flex-center"
|
||||
>
|
||||
<iframe
|
||||
v-show="loaded"
|
||||
ref="proxyIframe"
|
||||
class="proxy-iframe"
|
||||
:src="finalSrc"
|
||||
@load="loadedEvent"
|
||||
/>
|
||||
<q-spinner
|
||||
v-if="!loaded"
|
||||
color="primary"
|
||||
size="xl"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import {
|
||||
mapActions,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
import { showGlobalError } from 'src/helpers/ui'
|
||||
import { getCurrentLangAsV1Format } from 'src/i18n'
|
||||
export default {
|
||||
name: 'Proxy',
|
||||
data () {
|
||||
return {
|
||||
loaded: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('user', [
|
||||
'currentPathIframe'
|
||||
]),
|
||||
language () {
|
||||
return getCurrentLangAsV1Format()
|
||||
},
|
||||
finalSrc () {
|
||||
let url = null
|
||||
if (_.isString(this.$config.baseHttpUrl) && _.trim(this.$config.baseHttpUrl) !== '') {
|
||||
url = new URL(this.$config.baseHttpUrl)
|
||||
} else {
|
||||
url = new URL(location.origin)
|
||||
}
|
||||
url.searchParams.set('framed', '1')
|
||||
url.searchParams.set('lang', this.language)
|
||||
if (this.$route?.meta?.proxyRewrite) {
|
||||
return this.$route?.meta?.proxyRewrite({
|
||||
route: this.$route,
|
||||
url: url
|
||||
}).toString()
|
||||
} else {
|
||||
url.pathname = this.$route.path
|
||||
return url.toString()
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentPathIframe (path) {
|
||||
const routeData = this.$router.resolve(path)
|
||||
if (!routeData?.route?.meta?.proxy && !routeData?.route?.meta?.proxyReverseInvisible) {
|
||||
this.$router.push({
|
||||
path: path
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
window.addEventListener('message', this.trackMessagesFromV1, false)
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('message', this.trackMessagesFromV1, false)
|
||||
},
|
||||
methods: {
|
||||
...mapActions('user', [
|
||||
'logout'
|
||||
]),
|
||||
loadedEvent () {
|
||||
try {
|
||||
const domEl = this.$refs.proxyIframe.contentWindow.document.getElementById('login_page_v1')
|
||||
if (domEl !== null) {
|
||||
this.logout()
|
||||
return
|
||||
}
|
||||
|
||||
this.injectDarkUITheme()
|
||||
} catch (err) {
|
||||
console.debug('Session expiration detection is disabled')
|
||||
console.debug(err)
|
||||
} finally {
|
||||
this.loaded = true
|
||||
}
|
||||
},
|
||||
injectDarkUITheme () {
|
||||
const framedWindow = this.$refs.proxyIframe.contentWindow
|
||||
const $ = framedWindow.$
|
||||
const darkThemeCSS = `
|
||||
body {
|
||||
background: #3b3440; /* $darkBase */
|
||||
color: white;
|
||||
overflow: auto;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 { color: white; }
|
||||
|
||||
.table-hover, .table-highlight { color: black; }
|
||||
.table-hover tbody tr:hover > td,
|
||||
.table-hover tbody tr:hover > th { background: none; }
|
||||
|
||||
.table-highlight.table-bordered tbody tr td,
|
||||
.table-highlight.table-bordered tbody tr th { background-color: #F0F3F7; }
|
||||
|
||||
.table-highlight.table-bordered thead tr,
|
||||
table.ngcp-datatable tfoot tr { background: silver; }
|
||||
|
||||
.table-highlight.table-bordered thead th,
|
||||
table.ngcp-datatable tfoot td {
|
||||
text-shadow: none;
|
||||
color: black;
|
||||
border-left: 1px solid #F1F1F1;
|
||||
border-right: 1px solid #CCC;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ngcp-modal,
|
||||
.jquery-msgbox { color: #333; }
|
||||
.modal-header { background: silver; border-color: white; }
|
||||
.modal-header h3 { color: black; text-shadow: none; }
|
||||
|
||||
.accordion-inner { border-top: none; }
|
||||
`
|
||||
$(`<style>${darkThemeCSS}</style>`).appendTo(framedWindow.document.head)
|
||||
},
|
||||
trackMessagesFromV1 (event) {
|
||||
if (event?.data?.origin === 'ngcp-panel') {
|
||||
if (event?.data?.error) {
|
||||
showGlobalError(event.data.error)
|
||||
}
|
||||
}
|
||||
if (event?.data?.origin === 'ngcp-panel-beforeunload') {
|
||||
this.loaded = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" rel="stylesheet/sass">
|
||||
.proxy-iframe-wrapper
|
||||
height: calc(100vh - 100px)
|
||||
width: 100%
|
||||
.proxy-iframe
|
||||
border: none
|
||||
height: calc(100vh - 100px)
|
||||
width: 100%
|
||||
</style>
|
||||
Loading…
Reference in new issue