160 lines
3.7 KiB
Vue
160 lines
3.7 KiB
Vue
<template>
|
|
<q-toolbar class="row no-wrap items-center">
|
|
<q-tabs
|
|
align="left"
|
|
inline-label
|
|
indicator-color="transparent"
|
|
stretch
|
|
>
|
|
<q-route-tab
|
|
:to="`/${protocol}/routers`"
|
|
no-caps
|
|
:label="`${protocolLabel} Routers`"
|
|
>
|
|
<q-badge
|
|
v-if="routerTotal !== 0"
|
|
align="middle"
|
|
:label="routerTotal"
|
|
class="q-ml-sm"
|
|
/>
|
|
</q-route-tab>
|
|
<q-route-tab
|
|
:to="`/${protocol}/services`"
|
|
no-caps
|
|
:label="`${protocolLabel} Services`"
|
|
>
|
|
<q-badge
|
|
v-if="servicesTotal !== 0"
|
|
align="middle"
|
|
:label="servicesTotal"
|
|
class="q-ml-sm"
|
|
/>
|
|
</q-route-tab>
|
|
<q-route-tab
|
|
v-if="protocol !== 'udp'"
|
|
:to="`/${protocol}/middlewares`"
|
|
no-caps
|
|
:label="`${protocolLabel} Middlewares`"
|
|
>
|
|
<q-badge
|
|
v-if="middlewaresTotal !== 0"
|
|
align="middle"
|
|
:label="middlewaresTotal"
|
|
class="q-ml-sm"
|
|
/>
|
|
</q-route-tab>
|
|
</q-tabs>
|
|
</q-toolbar>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent } from 'vue'
|
|
import { useStore, mapActions, mapGetters } from 'vuex'
|
|
|
|
export default defineComponent({
|
|
name: 'ToolBar',
|
|
data () {
|
|
return {
|
|
loadingOverview: true,
|
|
intervalRefresh: null,
|
|
intervalRefreshTime: 5000
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters('core', { overviewAll: 'allOverview' }),
|
|
protocol () {
|
|
return this.$route.meta.protocol
|
|
},
|
|
protocolLabel () {
|
|
return this.protocol.toUpperCase()
|
|
},
|
|
routerTotal () {
|
|
const data = this.overviewAll.items && this.overviewAll.items[`${this.protocol}`]
|
|
return (data && data.routers && data.routers.total) || 0
|
|
},
|
|
servicesTotal () {
|
|
const data = this.overviewAll.items && this.overviewAll.items[`${this.protocol}`]
|
|
return (data && data.services && data.services.total) || 0
|
|
},
|
|
middlewaresTotal () {
|
|
const data = this.overviewAll.items && this.overviewAll.items[`${this.protocol}`]
|
|
return (data && data.middlewares && data.middlewares.total) || 0
|
|
}
|
|
},
|
|
created () {
|
|
this.refreshAll()
|
|
this.intervalRefresh = setInterval(this.onGetAll, this.intervalRefreshTime)
|
|
},
|
|
beforeUnmount () {
|
|
const $store = useStore()
|
|
|
|
clearInterval(this.intervalRefresh)
|
|
$store.commit('core/getOverviewClear')
|
|
},
|
|
methods: {
|
|
...mapActions('core', { getOverview: 'getOverview' }),
|
|
refreshAll () {
|
|
this.onGetAll()
|
|
},
|
|
onGetAll () {
|
|
this.getOverview()
|
|
.then(body => {
|
|
console.log('Success -> toolbar/overview', body)
|
|
if (!body) {
|
|
this.loadingOverview = false
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log('Error -> toolbar/overview', error)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../css/sass/variables";
|
|
|
|
.q-toolbar {
|
|
min-height: 48px;
|
|
padding: 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.body--dark .q-toolbar {
|
|
background-color: #0e204c;
|
|
}
|
|
|
|
.q-tabs {
|
|
:deep(.q-tabs__content) {
|
|
.q-tab__label {
|
|
color: $app-text-grey;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
.q-badge {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 30px;
|
|
padding: 6px;
|
|
color: $app-text-grey;
|
|
background-color: rgba( $app-text-grey, .1 );
|
|
}
|
|
.q-tab--active {
|
|
.q-tab__label {
|
|
color: $accent;
|
|
}
|
|
.q-badge {
|
|
color: $accent;
|
|
background-color: rgba( $accent, .1 );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|