121 lines
3.3 KiB
Vue
121 lines
3.3 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 { mapActions, mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
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
|
|
}
|
|
},
|
|
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)
|
|
})
|
|
}
|
|
},
|
|
created () {
|
|
this.refreshAll()
|
|
this.intervalRefresh = setInterval(this.onGetAll, this.intervalRefreshTime)
|
|
},
|
|
beforeDestroy () {
|
|
clearInterval(this.intervalRefresh)
|
|
this.$store.commit('core/getOverviewClear')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../css/sass/variables";
|
|
|
|
.q-toolbar {
|
|
min-height: 48px;
|
|
padding: 0;
|
|
}
|
|
|
|
.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>
|