chore(webui): Migrate to Quasar 2.x and Vue.js 3.x
This commit is contained in:
Andi Sardina Ramos
GitHub
parent
153765f99f
commit
f7edb394f2
65 changed files with 4374 additions and 7999 deletions
|
|
@ -1,90 +1,158 @@
|
|||
<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
|
||||
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>
|
||||
<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" exSize="true" :name="entryPoint.name" :address="entryPoint.address"/>
|
||||
<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"></q-icon>
|
||||
<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
|
||||
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>
|
||||
<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"/>
|
||||
<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>
|
||||
<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
|
||||
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">{{ middlewareType }}</div>
|
||||
<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
|
||||
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>
|
||||
<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
|
||||
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"></q-icon>
|
||||
<div class="app-title-label">Service</div>
|
||||
<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"/>
|
||||
<panel-entry
|
||||
type="detail"
|
||||
name="Service"
|
||||
:address="routerByName.item.service"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else class="row items-start">
|
||||
<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
|
||||
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>
|
||||
|
|
@ -93,82 +161,117 @@
|
|||
|
||||
<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
|
||||
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>
|
||||
<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"/>
|
||||
<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" v-if="protocol !== 'udp'">
|
||||
<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"></q-icon>
|
||||
<div class="app-title-label">TLS</div>
|
||||
<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"/>
|
||||
<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 !== 'udp'">
|
||||
<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"></q-icon>
|
||||
<div class="app-title-label">Middlewares</div>
|
||||
<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"/>
|
||||
<panel-middlewares :data="middlewares" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else class="row items-start">
|
||||
<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
|
||||
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'
|
||||
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'
|
||||
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 {
|
||||
export default defineComponent({
|
||||
name: 'PageRouterDetail',
|
||||
props: ['name', 'type'],
|
||||
components: {
|
||||
PageDefault,
|
||||
SkeletonBox,
|
||||
|
|
@ -177,6 +280,10 @@ export default {
|
|||
PanelTLS,
|
||||
PanelMiddlewares
|
||||
},
|
||||
props: {
|
||||
name: String,
|
||||
type: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
|
|
@ -214,6 +321,15 @@ export default {
|
|||
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' }),
|
||||
|
|
@ -235,7 +351,7 @@ export default {
|
|||
// Get entryPoints
|
||||
if (body.using) {
|
||||
for (const entryPoint in body.using) {
|
||||
if (body.using.hasOwnProperty(entryPoint)) {
|
||||
if (Object.getOwnPropertyDescriptor(body.using, entryPoint)) {
|
||||
this.getEntrypointsByName(body.using[entryPoint])
|
||||
.then(body => {
|
||||
if (body) {
|
||||
|
|
@ -251,7 +367,7 @@ export default {
|
|||
// Get middlewares
|
||||
if (body.middlewares) {
|
||||
for (const middleware in body.middlewares) {
|
||||
if (body.middlewares.hasOwnProperty(middleware)) {
|
||||
if (Object.getOwnPropertyDescriptor(body.middlewares, middleware)) {
|
||||
this.getMiddlewareByName(body.middlewares[middleware])
|
||||
.then(body => {
|
||||
if (body) {
|
||||
|
|
@ -281,20 +397,8 @@ export default {
|
|||
|
||||
return `${encodeURIComponent(data.service)}@${data.provider}`
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.refreshAll()
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timeOutGetAll)
|
||||
this.$store.commit('http/getRouterByNameClear')
|
||||
this.$store.commit('tcp/getRouterByNameClear')
|
||||
this.$store.commit('udp/getRouterByNameClear')
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue