426 lines
13 KiB
Vue
426 lines
13 KiB
Vue
<template>
|
|
<page-default>
|
|
<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-xl">
|
|
<div
|
|
v-if="!loading"
|
|
class="row items-start"
|
|
>
|
|
<div
|
|
v-if="entryPoints.length"
|
|
class="col-12 col-md-3 q-mb-lg path-block"
|
|
>
|
|
<div class="row no-wrap items-center q-mb-lg app-title">
|
|
<q-icon name="eva-log-in-outline" />
|
|
<div class="app-title-label">
|
|
Entrypoints
|
|
</div>
|
|
</div>
|
|
<div class="row items-start q-col-gutter-lg">
|
|
<div class="col-12 col-md-8">
|
|
<div class="row items-start q-col-gutter-md">
|
|
<div
|
|
v-for="(entryPoint, index) in entryPoints"
|
|
:key="index"
|
|
class="col-12"
|
|
>
|
|
<panel-entry
|
|
type="detail"
|
|
ex-size="true"
|
|
:name="entryPoint.name"
|
|
:address="entryPoint.address"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4 xs-hide sm-hide">
|
|
<q-icon
|
|
name="eva-arrow-forward-outline"
|
|
class="arrow"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="routerByName.item.name"
|
|
class="col-12 col-md-3 q-mb-lg path-block"
|
|
>
|
|
<div class="row no-wrap items-center q-mb-lg app-title">
|
|
<q-icon name="eva-globe-outline" />
|
|
<div class="app-title-label">
|
|
{{ routerType }}
|
|
</div>
|
|
</div>
|
|
<div class="row items-start q-col-gutter-lg">
|
|
<div class="col-12 col-md-8">
|
|
<div class="row items-start q-col-gutter-md">
|
|
<div class="col-12">
|
|
<panel-entry
|
|
focus="true"
|
|
type="detail"
|
|
name="router"
|
|
:address="routerByName.item.name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4 xs-hide sm-hide">
|
|
<q-icon
|
|
name="eva-arrow-forward-outline"
|
|
class="arrow"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="hasMiddlewares"
|
|
class="col-12 col-md-3 q-mb-lg path-block"
|
|
>
|
|
<div class="row no-wrap items-center q-mb-lg app-title">
|
|
<q-icon name="eva-layers" />
|
|
<div class="app-title-label">
|
|
{{ middlewareType }}
|
|
</div>
|
|
</div>
|
|
<div class="row items-start q-col-gutter-lg">
|
|
<div class="col-12 col-md-8">
|
|
<div class="row items-start q-col-gutter-md">
|
|
<div
|
|
v-for="(middleware, index) in middlewares"
|
|
:key="index"
|
|
class="col-12"
|
|
>
|
|
<panel-entry
|
|
type="detail"
|
|
name="Middleware"
|
|
:address="middleware.type"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4 xs-hide sm-hide">
|
|
<q-icon
|
|
name="eva-arrow-forward-outline"
|
|
class="arrow"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="routerByName.item.service"
|
|
class="service col-12 col-md-3 q-mb-lg path-block"
|
|
@click="$router.push({ path: `/${protocol}/services/${getServiceId(routerByName.item)}`})"
|
|
>
|
|
<div class="row no-wrap items-center q-mb-lg app-title">
|
|
<q-icon name="eva-flash" />
|
|
<div class="app-title-label">
|
|
Service
|
|
</div>
|
|
</div>
|
|
<div class="row items-start q-col-gutter-lg">
|
|
<div class="col-12 col-md-8">
|
|
<div class="row items-start q-col-gutter-md">
|
|
<div class="col-12">
|
|
<panel-entry
|
|
type="detail"
|
|
name="Service"
|
|
:address="routerByName.item.service"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="row items-start"
|
|
>
|
|
<div class="col-12">
|
|
<p
|
|
v-for="n in 4"
|
|
:key="n"
|
|
class="flex"
|
|
>
|
|
<SkeletonBox
|
|
:min-width="15"
|
|
:max-width="15"
|
|
style="margin-right: 2%"
|
|
/> <SkeletonBox
|
|
:min-width="50"
|
|
:max-width="83"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<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-xl">
|
|
<div
|
|
v-if="!loading"
|
|
class="row items-start q-col-gutter-md"
|
|
>
|
|
<div
|
|
v-if="routerByName.item"
|
|
class="col-12 col-md-4 q-mb-lg path-block"
|
|
>
|
|
<div class="row no-wrap items-center q-mb-lg app-title">
|
|
<q-icon name="eva-info" />
|
|
<div class="app-title-label">
|
|
Router Details
|
|
</div>
|
|
</div>
|
|
<div class="row items-start q-col-gutter-lg">
|
|
<div class="col-12">
|
|
<div class="row items-start q-col-gutter-md">
|
|
<div class="col-12">
|
|
<panel-router-details
|
|
:data="routerByName.item"
|
|
:protocol="protocol"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="protocol !== 'udp'"
|
|
class="col-12 col-md-4 q-mb-lg path-block"
|
|
>
|
|
<div class="row no-wrap items-center q-mb-lg app-title">
|
|
<q-icon name="eva-shield" />
|
|
<div class="app-title-label">
|
|
TLS
|
|
</div>
|
|
</div>
|
|
<div class="row items-start q-col-gutter-lg">
|
|
<div class="col-12">
|
|
<div class="row items-start q-col-gutter-md">
|
|
<div class="col-12">
|
|
<panel-t-l-s
|
|
:data="routerByName.item.tls"
|
|
:protocol="protocol"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="protocol !== 'udp'"
|
|
class="col-12 col-md-4 q-mb-lg path-block"
|
|
>
|
|
<div class="row no-wrap items-center q-mb-lg app-title">
|
|
<q-icon name="eva-layers" />
|
|
<div class="app-title-label">
|
|
Middlewares
|
|
</div>
|
|
</div>
|
|
<div class="row items-start q-col-gutter-lg">
|
|
<div class="col-12">
|
|
<div class="row items-start q-col-gutter-md">
|
|
<div class="col-12">
|
|
<panel-middlewares :data="middlewares" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="row items-start"
|
|
>
|
|
<div class="col-12">
|
|
<p
|
|
v-for="n in 4"
|
|
:key="n"
|
|
class="flex"
|
|
>
|
|
<SkeletonBox
|
|
:min-width="15"
|
|
:max-width="15"
|
|
style="margin-right: 2%"
|
|
/> <SkeletonBox
|
|
:min-width="50"
|
|
:max-width="83"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</page-default>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent } from 'vue'
|
|
import { mapActions, mapGetters } from 'vuex'
|
|
import PageDefault from '../../components/_commons/PageDefault.vue'
|
|
import SkeletonBox from '../../components/_commons/SkeletonBox.vue'
|
|
import PanelEntry from '../../components/dashboard/PanelEntry.vue'
|
|
import PanelRouterDetails from '../../components/_commons/PanelRouterDetails.vue'
|
|
import PanelTLS from '../../components/_commons/PanelTLS.vue'
|
|
import PanelMiddlewares from '../../components/_commons/PanelMiddlewares.vue'
|
|
|
|
export default defineComponent({
|
|
name: 'PageRouterDetail',
|
|
components: {
|
|
PageDefault,
|
|
SkeletonBox,
|
|
PanelEntry,
|
|
PanelRouterDetails,
|
|
PanelTLS,
|
|
PanelMiddlewares
|
|
},
|
|
props: {
|
|
name: {
|
|
default: '',
|
|
type: String
|
|
},
|
|
type: {
|
|
default: '',
|
|
type: String
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
loading: true,
|
|
entryPoints: [],
|
|
middlewares: [],
|
|
timeOutGetAll: null
|
|
}
|
|
},
|
|
computed: {
|
|
hasTLSConfiguration () {
|
|
return this.routerByName.item.tls
|
|
},
|
|
middlewareType () {
|
|
return this.$route.meta.protocol.toUpperCase() + ' Middlewares'
|
|
},
|
|
routerType () {
|
|
return this.$route.meta.protocol.toUpperCase() + ' Router'
|
|
},
|
|
...mapGetters('http', { http_routerByName: 'routerByName' }),
|
|
...mapGetters('tcp', { tcp_routerByName: 'routerByName' }),
|
|
...mapGetters('udp', { udp_routerByName: 'routerByName' }),
|
|
hasMiddlewares () {
|
|
return this.$route.meta.protocol !== 'udp' && this.middlewares.length > 0
|
|
},
|
|
protocol () {
|
|
return this.$route.meta.protocol
|
|
},
|
|
routerByName () {
|
|
return this[`${this.protocol}_routerByName`]
|
|
},
|
|
getRouterByName () {
|
|
return this[`${this.protocol}_getRouterByName`]
|
|
},
|
|
getMiddlewareByName () {
|
|
return this[`${this.protocol}_getMiddlewareByName`]
|
|
}
|
|
},
|
|
created () {
|
|
this.refreshAll()
|
|
},
|
|
beforeUnmount () {
|
|
clearInterval(this.timeOutGetAll)
|
|
this.$store.commit('http/getRouterByNameClear')
|
|
this.$store.commit('tcp/getRouterByNameClear')
|
|
this.$store.commit('udp/getRouterByNameClear')
|
|
},
|
|
methods: {
|
|
...mapActions('http', { http_getRouterByName: 'getRouterByName', http_getMiddlewareByName: 'getMiddlewareByName' }),
|
|
...mapActions('tcp', { tcp_getRouterByName: 'getRouterByName', tcp_getMiddlewareByName: 'getMiddlewareByName' }),
|
|
...mapActions('udp', { udp_getRouterByName: 'getRouterByName' }),
|
|
...mapActions('entrypoints', { getEntrypointsByName: 'getByName' }),
|
|
refreshAll () {
|
|
if (this.routerByName.loading) {
|
|
return
|
|
}
|
|
this.onGetAll()
|
|
},
|
|
onGetAll () {
|
|
this.getRouterByName(this.name)
|
|
.then(body => {
|
|
if (!body) {
|
|
this.loading = false
|
|
return
|
|
}
|
|
// Get entryPoints
|
|
if (body.using) {
|
|
for (const entryPoint in body.using) {
|
|
if (Object.getOwnPropertyDescriptor(body.using, entryPoint)) {
|
|
this.getEntrypointsByName(body.using[entryPoint])
|
|
.then(body => {
|
|
if (body) {
|
|
this.entryPoints.push(body)
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log('Error -> entrypoints/byName', error)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
// Get middlewares
|
|
if (body.middlewares) {
|
|
for (const middleware in body.middlewares) {
|
|
if (Object.getOwnPropertyDescriptor(body.middlewares, middleware)) {
|
|
this.getMiddlewareByName(body.middlewares[middleware])
|
|
.then(body => {
|
|
if (body) {
|
|
this.middlewares.push(body)
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log('Error -> middlewares/byName', error)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
clearTimeout(this.timeOutGetAll)
|
|
this.timeOutGetAll = setTimeout(() => {
|
|
this.loading = false
|
|
}, 300)
|
|
})
|
|
.catch(error => {
|
|
console.log('Error -> routers/byName', error)
|
|
})
|
|
},
|
|
getServiceId (data) {
|
|
const words = data.service.split('@')
|
|
if (words.length === 2) {
|
|
return data.service
|
|
}
|
|
|
|
return `${encodeURIComponent(data.service)}@${data.provider}`
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../css/sass/variables";
|
|
|
|
.path-block {
|
|
.arrow {
|
|
font-size: 40px;
|
|
margin-top: 20px;
|
|
margin-left: 20px;
|
|
color: #b2b2b2;
|
|
}
|
|
|
|
&.service {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
</style>
|