Add more pages in the WebUI
This commit is contained in:
Jorge Gonzalez
Traefiker Bot
parent
2b828765e3
commit
fcc1109e76
82 changed files with 5005 additions and 249 deletions
161
webui/src/pages/_commons/MiddlewareDetail.vue
Normal file
161
webui/src/pages/_commons/MiddlewareDetail.vue
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<page-default>
|
||||
|
||||
<section v-if="!loading" class="app-section">
|
||||
<div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-xl q-pb-sm">
|
||||
<div v-if="middlewareByName.item" class="row no-wrap items-center app-title">
|
||||
<div class="app-title-label" style="font-size: 26px">{{ middlewareByName.item.name }}</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-sm q-pb-lg">
|
||||
<div v-if="!loading" class="row items-start q-col-gutter-md">
|
||||
|
||||
<div v-if="middlewareByName.item" class="col-12 col-md-4 q-mb-lg path-block">
|
||||
<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 dense :data="[middlewareByName.item]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else class="row items-start q-mt-xl">
|
||||
<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 v-if="!loading && allRouters.length" class="app-section">
|
||||
<div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-lg q-pb-xl">
|
||||
<div class="row no-wrap items-center q-mb-lg app-title">
|
||||
<div class="app-title-label">Used by Routers</div>
|
||||
</div>
|
||||
<div class="row items-center q-col-gutter-lg">
|
||||
<div class="col-12">
|
||||
<main-table :data="allRouters" :request="()=>{}" :loading="routersLoading" :pagination.sync="routersPagination" :filter="routersFilter" :type="`${protocol}-routers`"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</page-default>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import PageDefault from '../../components/_commons/PageDefault'
|
||||
import SkeletonBox from '../../components/_commons/SkeletonBox'
|
||||
import PanelMiddlewares from '../../components/_commons/PanelMiddlewares'
|
||||
import MainTable from '../../components/_commons/MainTable'
|
||||
|
||||
export default {
|
||||
name: 'PageMiddlewareDetail',
|
||||
props: ['name', 'type'],
|
||||
components: {
|
||||
PageDefault,
|
||||
SkeletonBox,
|
||||
PanelMiddlewares,
|
||||
MainTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
timeOutGetAll: null,
|
||||
allRouters: [],
|
||||
routersLoading: true,
|
||||
routersFilter: '',
|
||||
routersStatus: '',
|
||||
routersPagination: {
|
||||
sortBy: '',
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 1000,
|
||||
rowsNumber: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('http', { http_middlewareByName: 'middlewareByName' }),
|
||||
protocol () {
|
||||
return this.$route.meta.protocol
|
||||
},
|
||||
middlewareByName () {
|
||||
return this[`${this.protocol}_middlewareByName`]
|
||||
},
|
||||
getMiddlewareByName () {
|
||||
return this[`${this.protocol}_getMiddlewareByName`]
|
||||
},
|
||||
getRouterByName () {
|
||||
return this[`${this.protocol}_getRouterByName`]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('http', { http_getMiddlewareByName: 'getMiddlewareByName', http_getRouterByName: 'getRouterByName' }),
|
||||
refreshAll () {
|
||||
if (this.middlewareByName.loading) {
|
||||
return
|
||||
}
|
||||
this.onGetAll()
|
||||
},
|
||||
onGetAll () {
|
||||
this.getMiddlewareByName(this.name)
|
||||
.then(body => {
|
||||
if (!body) {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
// Get routers
|
||||
if (body.usedBy) {
|
||||
for (const router in body.usedBy) {
|
||||
if (body.usedBy.hasOwnProperty(router)) {
|
||||
this.getRouterByName(body.usedBy[router])
|
||||
.then(body => {
|
||||
if (body) {
|
||||
this.routersLoading = false
|
||||
this.allRouters.push(body)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error -> routers/byName', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
clearTimeout(this.timeOutGetAll)
|
||||
this.timeOutGetAll = setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 300)
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error -> middleware/byName', error)
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.refreshAll()
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timeOutGetAll)
|
||||
this.$store.commit('http/getMiddlewareByNameClear')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../css/sass/variables";
|
||||
|
||||
</style>
|
||||
293
webui/src/pages/_commons/RouterDetail.vue
Normal file
293
webui/src/pages/_commons/RouterDetail.vue
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
<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"></q-icon>
|
||||
<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" exSize="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"></q-icon>
|
||||
</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"></q-icon>
|
||||
<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"></q-icon>
|
||||
</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"></q-icon>
|
||||
<div class="app-title-label">HTTP Middlewares</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"></q-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="routerByName.item.service" 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-flash"></q-icon>
|
||||
<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"></q-icon>
|
||||
<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 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"></q-icon>
|
||||
<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 class="col-12 col-md-4 q-mb-lg path-block" v-if="protocol === 'http'">
|
||||
<div class="row no-wrap items-center q-mb-lg app-title">
|
||||
<q-icon name="eva-layers"></q-icon>
|
||||
<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 { mapActions, mapGetters } from 'vuex'
|
||||
import PageDefault from '../../components/_commons/PageDefault'
|
||||
import SkeletonBox from '../../components/_commons/SkeletonBox'
|
||||
import PanelEntry from '../../components/dashboard/PanelEntry'
|
||||
import PanelRouterDetails from '../../components/_commons/PanelRouterDetails'
|
||||
import PanelTLS from '../../components/_commons/PanelTLS'
|
||||
import PanelMiddlewares from '../../components/_commons/PanelMiddlewares'
|
||||
|
||||
export default {
|
||||
name: 'PageRouterDetail',
|
||||
props: ['name', 'type'],
|
||||
components: {
|
||||
PageDefault,
|
||||
SkeletonBox,
|
||||
PanelEntry,
|
||||
PanelRouterDetails,
|
||||
PanelTLS,
|
||||
PanelMiddlewares
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
entryPoints: [],
|
||||
middlewares: [],
|
||||
timeOutGetAll: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasTLSConfiguration () {
|
||||
return this.routerByName.item.tls
|
||||
},
|
||||
routerType () {
|
||||
return this.$route.meta.protocol.toUpperCase() + ' Router'
|
||||
},
|
||||
...mapGetters('http', { http_routerByName: 'routerByName' }),
|
||||
...mapGetters('tcp', { tcp_routerByName: 'routerByName' }),
|
||||
hasMiddlewares () {
|
||||
return this.$route.meta.protocol === 'http' && this.middlewares.length > 0
|
||||
},
|
||||
protocol () {
|
||||
return this.$route.meta.protocol
|
||||
},
|
||||
routerByName () {
|
||||
return this[`${this.protocol}_routerByName`]
|
||||
},
|
||||
getRouterByName () {
|
||||
return this[`${this.protocol}_getRouterByName`]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('http', { http_getRouterByName: 'getRouterByName', getMiddlewareByName: 'getMiddlewareByName' }),
|
||||
...mapActions('tcp', { tcp_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 (body.using.hasOwnProperty(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 (body.middlewares.hasOwnProperty(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)
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.refreshAll()
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timeOutGetAll)
|
||||
this.$store.commit('http/getRouterByNameClear')
|
||||
this.$store.commit('tcp/getRouterByNameClear')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../css/sass/variables";
|
||||
|
||||
.path-block {
|
||||
.arrow {
|
||||
font-size: 40px;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
239
webui/src/pages/_commons/ServiceDetail.vue
Normal file
239
webui/src/pages/_commons/ServiceDetail.vue
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<template>
|
||||
<page-default>
|
||||
|
||||
<section v-if="!loading" 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 v-if="serviceByName.item" class="row no-wrap items-center app-title">
|
||||
<div class="app-title-label" style="font-size: 26px">{{ serviceByName.item.name }}</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-lg q-pb-lg">
|
||||
<div v-if="!loading" class="row items-start q-col-gutter-md">
|
||||
|
||||
<div v-if="serviceByName.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"></q-icon>
|
||||
<div class="app-title-label">Service 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-service-details dense :data="serviceByName.item" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="serviceByName.item.loadBalancer && serviceByName.item.loadBalancer.healthCheck" 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"></q-icon>
|
||||
<div class="app-title-label">Health Check</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-health-check dense :data="serviceByName.item.loadBalancer.healthCheck"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="serviceByName.item.loadBalancer && serviceByName.item.loadBalancer.servers" 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-globe-outline"></q-icon>
|
||||
<div class="app-title-label">Servers</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-servers dense :data="serviceByName.item"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="serviceByName.item.weighted && serviceByName.item.weighted.services" 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-globe-outline"></q-icon>
|
||||
<div class="app-title-label">Services</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-weighted-services dense :data="serviceByName.item"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="serviceByName.item.mirroring && serviceByName.item.mirroring.mirrors" 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-globe-outline"></q-icon>
|
||||
<div class="app-title-label">Mirror Services</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-mirroring-services dense :data="serviceByName.item"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else class="row items-start q-mt-xl">
|
||||
<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 v-if="!loading && allRouters.length" class="app-section">
|
||||
<div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-lg q-pb-xl">
|
||||
<div class="row no-wrap items-center q-mb-lg app-title">
|
||||
<div class="app-title-label">Used by Routers</div>
|
||||
</div>
|
||||
<div class="row items-center q-col-gutter-lg">
|
||||
<div class="col-12">
|
||||
<main-table :data="allRouters" :request="()=>{}" :loading="routersLoading" :pagination.sync="routersPagination" :filter="routersFilter" :type="`${protocol}-routers`"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</page-default>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import PageDefault from '../../components/_commons/PageDefault'
|
||||
import SkeletonBox from '../../components/_commons/SkeletonBox'
|
||||
import PanelServiceDetails from '../../components/_commons/PanelServiceDetails'
|
||||
import PanelHealthCheck from '../../components/_commons/PanelHealthCheck'
|
||||
import PanelServers from '../../components/_commons/PanelServers'
|
||||
import MainTable from '../../components/_commons/MainTable'
|
||||
import PanelWeightedServices from '../../components/_commons/PanelWeightedServices'
|
||||
import PanelMirroringServices from '../../components/_commons/PanelMirroringServices'
|
||||
|
||||
export default {
|
||||
name: 'PageServiceDetail',
|
||||
props: ['name', 'type'],
|
||||
components: {
|
||||
PanelMirroringServices,
|
||||
PanelWeightedServices,
|
||||
PageDefault,
|
||||
SkeletonBox,
|
||||
PanelServiceDetails,
|
||||
PanelHealthCheck,
|
||||
PanelServers,
|
||||
MainTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
timeOutGetAll: null,
|
||||
allRouters: [],
|
||||
routersLoading: true,
|
||||
routersFilter: '',
|
||||
routersStatus: '',
|
||||
routersPagination: {
|
||||
sortBy: '',
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 1000,
|
||||
rowsNumber: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('http', { http_serviceByName: 'serviceByName' }),
|
||||
...mapGetters('tcp', { tcp_serviceByName: 'serviceByName' }),
|
||||
protocol () {
|
||||
return this.$route.meta.protocol
|
||||
},
|
||||
serviceByName () {
|
||||
return this[`${this.protocol}_serviceByName`]
|
||||
},
|
||||
getServiceByName () {
|
||||
return this[`${this.protocol}_getServiceByName`]
|
||||
},
|
||||
getRouterByName () {
|
||||
return this[`${this.protocol}_getRouterByName`]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('http', { http_getServiceByName: 'getServiceByName', http_getRouterByName: 'getRouterByName' }),
|
||||
...mapActions('tcp', { tcp_getServiceByName: 'getServiceByName', tcp_getRouterByName: 'getRouterByName' }),
|
||||
refreshAll () {
|
||||
if (this.serviceByName.loading) {
|
||||
return
|
||||
}
|
||||
this.onGetAll()
|
||||
},
|
||||
onGetAll () {
|
||||
this.getServiceByName(this.name)
|
||||
.then(body => {
|
||||
if (!body) {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
// Get routers
|
||||
if (body.usedBy) {
|
||||
for (const router in body.usedBy) {
|
||||
if (body.usedBy.hasOwnProperty(router)) {
|
||||
this.getRouterByName(body.usedBy[router])
|
||||
.then(body => {
|
||||
if (body) {
|
||||
this.routersLoading = false
|
||||
this.allRouters.push(body)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error -> routers/byName', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
clearTimeout(this.timeOutGetAll)
|
||||
this.timeOutGetAll = setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 300)
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error -> service/byName', error)
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.refreshAll()
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timeOutGetAll)
|
||||
this.$store.commit('http/getServiceByNameClear')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../css/sass/variables";
|
||||
|
||||
</style>
|
||||
|
|
@ -1,14 +1,108 @@
|
|||
<template>
|
||||
<q-page class="flex flex-center">
|
||||
<h2>HTTP Middlewares</h2>
|
||||
</q-page>
|
||||
<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 class="row no-wrap items-center q-mb-lg">
|
||||
<tool-bar-table :status.sync="status" :filter.sync="filter"/>
|
||||
</div>
|
||||
<div class="row items-center q-col-gutter-lg">
|
||||
<div class="col-12">
|
||||
<main-table :data="allMiddlewares.items" :request="onGetAll" :loading="loading" :pagination.sync="pagination" :filter="filter" type="http-middlewares"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</page-default>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import PageDefault from '../../components/_commons/PageDefault'
|
||||
import ToolBarTable from '../../components/_commons/ToolBarTable'
|
||||
import MainTable from '../../components/_commons/MainTable'
|
||||
|
||||
export default {
|
||||
name: 'PageHTTPMiddlewares'
|
||||
name: 'PageHTTPMiddlewares',
|
||||
components: {
|
||||
PageDefault,
|
||||
ToolBarTable,
|
||||
MainTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
filter: '',
|
||||
status: '',
|
||||
pagination: {
|
||||
sortBy: '',
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
rowsNumber: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('http', { allMiddlewares: 'allMiddlewares' })
|
||||
},
|
||||
methods: {
|
||||
...mapActions('http', { getAllMiddlewares: 'getAllMiddlewares' }),
|
||||
refreshAll () {
|
||||
if (this.allMiddlewares.loading) {
|
||||
return
|
||||
}
|
||||
this.pagination.page = 1
|
||||
this.onGetAll({
|
||||
pagination: this.pagination,
|
||||
filter: this.filter
|
||||
})
|
||||
},
|
||||
onGetAll (props) {
|
||||
let { page, rowsPerPage, sortBy, descending } = props.pagination
|
||||
|
||||
this.getAllMiddlewares({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
|
||||
.then(body => {
|
||||
if (!body) {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
this.loading = false
|
||||
console.log('Success -> http/middlewares', body)
|
||||
// update rowsNumber with appropriate value
|
||||
this.pagination.rowsNumber = body.total
|
||||
// update local pagination object
|
||||
this.pagination.page = page
|
||||
this.pagination.rowsPerPage = rowsPerPage
|
||||
this.pagination.sortBy = sortBy
|
||||
this.pagination.descending = descending
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error -> http/middlewares', error)
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'status' () {
|
||||
this.refreshAll()
|
||||
},
|
||||
'filter' () {
|
||||
this.refreshAll()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
mounted () {
|
||||
this.refreshAll()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$store.commit('http/getAllMiddlewaresClear')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,108 @@
|
|||
<template>
|
||||
<q-page class="flex flex-center">
|
||||
<h2>HTTP Routers</h2>
|
||||
</q-page>
|
||||
<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 class="row no-wrap items-center q-mb-lg">
|
||||
<tool-bar-table :status.sync="status" :filter.sync="filter"/>
|
||||
</div>
|
||||
<div class="row items-center q-col-gutter-lg">
|
||||
<div class="col-12">
|
||||
<main-table :data="allRouters.items" :request="onGetAll" :loading="loading" :pagination.sync="pagination" :filter="filter" type="http-routers"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</page-default>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import PageDefault from '../../components/_commons/PageDefault'
|
||||
import ToolBarTable from '../../components/_commons/ToolBarTable'
|
||||
import MainTable from '../../components/_commons/MainTable'
|
||||
|
||||
export default {
|
||||
name: 'PageHTTPRouters'
|
||||
name: 'PageHTTPRouters',
|
||||
components: {
|
||||
PageDefault,
|
||||
ToolBarTable,
|
||||
MainTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
filter: '',
|
||||
status: '',
|
||||
pagination: {
|
||||
sortBy: '',
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
rowsNumber: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('http', { allRouters: 'allRouters' })
|
||||
},
|
||||
methods: {
|
||||
...mapActions('http', { getAllRouters: 'getAllRouters' }),
|
||||
refreshAll () {
|
||||
if (this.allRouters.loading) {
|
||||
return
|
||||
}
|
||||
this.pagination.page = 1
|
||||
this.onGetAll({
|
||||
pagination: this.pagination,
|
||||
filter: this.filter
|
||||
})
|
||||
},
|
||||
onGetAll (props) {
|
||||
let { page, rowsPerPage, sortBy, descending } = props.pagination
|
||||
|
||||
this.getAllRouters({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
|
||||
.then(body => {
|
||||
if (!body) {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
this.loading = false
|
||||
console.log('Success -> http/routers', body)
|
||||
// update rowsNumber with appropriate value
|
||||
this.pagination.rowsNumber = body.total
|
||||
// update local pagination object
|
||||
this.pagination.page = page
|
||||
this.pagination.rowsPerPage = rowsPerPage
|
||||
this.pagination.sortBy = sortBy
|
||||
this.pagination.descending = descending
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error -> http/router', error)
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'status' () {
|
||||
this.refreshAll()
|
||||
},
|
||||
'filter' () {
|
||||
this.refreshAll()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
mounted () {
|
||||
this.refreshAll()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$store.commit('http/getAllRoutersClear')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,108 @@
|
|||
<template>
|
||||
<q-page class="flex flex-center">
|
||||
<h2>HTTP Services</h2>
|
||||
</q-page>
|
||||
<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 class="row no-wrap items-center q-mb-lg">
|
||||
<tool-bar-table :status.sync="status" :filter.sync="filter"/>
|
||||
</div>
|
||||
<div class="row items-center q-col-gutter-lg">
|
||||
<div class="col-12">
|
||||
<main-table :data="allServices.items" :request="onGetAll" :loading="loading" :pagination.sync="pagination" :filter="filter" type="http-services"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</page-default>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import PageDefault from '../../components/_commons/PageDefault'
|
||||
import ToolBarTable from '../../components/_commons/ToolBarTable'
|
||||
import MainTable from '../../components/_commons/MainTable'
|
||||
|
||||
export default {
|
||||
name: 'PageHTTPServices'
|
||||
name: 'PageHTTPServices',
|
||||
components: {
|
||||
PageDefault,
|
||||
ToolBarTable,
|
||||
MainTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
filter: '',
|
||||
status: '',
|
||||
pagination: {
|
||||
sortBy: '',
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
rowsNumber: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('http', { allServices: 'allServices' })
|
||||
},
|
||||
methods: {
|
||||
...mapActions('http', { getAllServices: 'getAllServices' }),
|
||||
refreshAll () {
|
||||
if (this.allServices.loading) {
|
||||
return
|
||||
}
|
||||
this.pagination.page = 1
|
||||
this.onGetAll({
|
||||
pagination: this.pagination,
|
||||
filter: this.filter
|
||||
})
|
||||
},
|
||||
onGetAll (props) {
|
||||
let { page, rowsPerPage, sortBy, descending } = props.pagination
|
||||
|
||||
this.getAllServices({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
|
||||
.then(body => {
|
||||
if (!body) {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
this.loading = false
|
||||
console.log('Success -> http/services', body)
|
||||
// update rowsNumber with appropriate value
|
||||
this.pagination.rowsNumber = body.total
|
||||
// update local pagination object
|
||||
this.pagination.page = page
|
||||
this.pagination.rowsPerPage = rowsPerPage
|
||||
this.pagination.sortBy = sortBy
|
||||
this.pagination.descending = descending
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error -> http/services', error)
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'status' () {
|
||||
this.refreshAll()
|
||||
},
|
||||
'filter' () {
|
||||
this.refreshAll()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
mounted () {
|
||||
this.refreshAll()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$store.commit('http/getAllServicesClear')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,108 @@
|
|||
<template>
|
||||
<q-page class="flex flex-center">
|
||||
<h2>TCP Routers</h2>
|
||||
</q-page>
|
||||
<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 class="row no-wrap items-center q-mb-lg">
|
||||
<tool-bar-table :status.sync="status" :filter.sync="filter"/>
|
||||
</div>
|
||||
<div class="row items-center q-col-gutter-lg">
|
||||
<div class="col-12">
|
||||
<main-table :data="allRouters.items" :request="onGetAll" :loading="loading" :pagination.sync="pagination" :filter="filter" type="tcp-routers"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</page-default>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import PageDefault from '../../components/_commons/PageDefault'
|
||||
import ToolBarTable from '../../components/_commons/ToolBarTable'
|
||||
import MainTable from '../../components/_commons/MainTable'
|
||||
|
||||
export default {
|
||||
name: 'PageTCPRouters'
|
||||
name: 'PageTCPRouters',
|
||||
components: {
|
||||
PageDefault,
|
||||
ToolBarTable,
|
||||
MainTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
filter: '',
|
||||
status: '',
|
||||
pagination: {
|
||||
sortBy: '',
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
rowsNumber: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('tcp', { allRouters: 'allRouters' })
|
||||
},
|
||||
methods: {
|
||||
...mapActions('tcp', { getAllRouters: 'getAllRouters' }),
|
||||
refreshAll () {
|
||||
if (this.allRouters.loading) {
|
||||
return
|
||||
}
|
||||
this.pagination.page = 1
|
||||
this.onGetAll({
|
||||
pagination: this.pagination,
|
||||
filter: this.filter
|
||||
})
|
||||
},
|
||||
onGetAll (props) {
|
||||
let { page, rowsPerPage, sortBy, descending } = props.pagination
|
||||
|
||||
this.getAllRouters({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
|
||||
.then(body => {
|
||||
if (!body) {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
this.loading = false
|
||||
console.log('Success -> tcp/routers', body)
|
||||
// update rowsNumber with appropriate value
|
||||
this.pagination.rowsNumber = body.total
|
||||
// update local pagination object
|
||||
this.pagination.page = page
|
||||
this.pagination.rowsPerPage = rowsPerPage
|
||||
this.pagination.sortBy = sortBy
|
||||
this.pagination.descending = descending
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error -> tcp/router', error)
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'status' () {
|
||||
this.refreshAll()
|
||||
},
|
||||
'filter' () {
|
||||
this.refreshAll()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
mounted () {
|
||||
this.refreshAll()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$store.commit('tcp/getAllRoutersClear')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,108 @@
|
|||
<template>
|
||||
<q-page class="flex flex-center">
|
||||
<h2>TCP Services</h2>
|
||||
</q-page>
|
||||
<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 class="row no-wrap items-center q-mb-lg">
|
||||
<tool-bar-table :status.sync="status" :filter.sync="filter"/>
|
||||
</div>
|
||||
<div class="row items-center q-col-gutter-lg">
|
||||
<div class="col-12">
|
||||
<main-table :data="allServices.items" :request="onGetAll" :loading="loading" :pagination.sync="pagination" :filter="filter" type="tcp-services"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</page-default>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import PageDefault from '../../components/_commons/PageDefault'
|
||||
import ToolBarTable from '../../components/_commons/ToolBarTable'
|
||||
import MainTable from '../../components/_commons/MainTable'
|
||||
|
||||
export default {
|
||||
name: 'PageTCPServices'
|
||||
name: 'PageTCPServices',
|
||||
components: {
|
||||
PageDefault,
|
||||
ToolBarTable,
|
||||
MainTable
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
filter: '',
|
||||
status: '',
|
||||
pagination: {
|
||||
sortBy: '',
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
rowsNumber: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('tcp', { allServices: 'allServices' })
|
||||
},
|
||||
methods: {
|
||||
...mapActions('tcp', { getAllServices: 'getAllServices' }),
|
||||
refreshAll () {
|
||||
if (this.allServices.loading) {
|
||||
return
|
||||
}
|
||||
this.pagination.page = 1
|
||||
this.onGetAll({
|
||||
pagination: this.pagination,
|
||||
filter: this.filter
|
||||
})
|
||||
},
|
||||
onGetAll (props) {
|
||||
let { page, rowsPerPage, sortBy, descending } = props.pagination
|
||||
|
||||
this.getAllServices({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
|
||||
.then(body => {
|
||||
if (!body) {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
this.loading = false
|
||||
console.log('Success -> tcp/services', body)
|
||||
// update rowsNumber with appropriate value
|
||||
this.pagination.rowsNumber = body.total
|
||||
// update local pagination object
|
||||
this.pagination.page = page
|
||||
this.pagination.rowsPerPage = rowsPerPage
|
||||
this.pagination.sortBy = sortBy
|
||||
this.pagination.descending = descending
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error -> tcp/services', error)
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'status' () {
|
||||
this.refreshAll()
|
||||
},
|
||||
'filter' () {
|
||||
this.refreshAll()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
mounted () {
|
||||
this.refreshAll()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$store.commit('tcp/getAllServicesClear')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue