Add a new dashboard page.
This commit is contained in:
Jorge Gonzalez
Ludovic Fernandez
parent
89150e1164
commit
fd24b1898e
133 changed files with 17303 additions and 11112 deletions
216
webui/src/pages/dashboard/Index.vue
Normal file
216
webui/src/pages/dashboard/Index.vue
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
<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-lg">
|
||||
<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 v-if="!loadingEntryGetAll" class="row items-center q-col-gutter-lg">
|
||||
<div
|
||||
v-for="(entryItems, index) in entryAll.items" :key="index"
|
||||
class="col-12 col-sm-6 col-md-2">
|
||||
<panel-entry :name="entryItems.name" :address="entryItems.address"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="row items-center q-col-gutter-lg">
|
||||
<div class="col-12 col-sm-6 col-md-2">
|
||||
<p v-for="n in 3" :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-lg q-pb-lg">
|
||||
<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">HTTP</div>
|
||||
</div>
|
||||
<div v-if="!loadingOverview" class="row items-center q-col-gutter-lg">
|
||||
<div
|
||||
v-for="(overviewHTTP, index) in allHTTP" :key="index"
|
||||
class="col-12 col-sm-6 col-md-4">
|
||||
<panel-chart :name="index" :data="overviewHTTP" type="http"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="row items-center q-col-gutter-lg">
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<p v-for="n in 6" :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-lg q-pb-lg">
|
||||
<div class="row no-wrap items-center q-mb-lg app-title">
|
||||
<q-icon name="eva-globe-3"></q-icon>
|
||||
<div class="app-title-label">TCP</div>
|
||||
</div>
|
||||
<div v-if="!loadingOverview" class="row items-center q-col-gutter-lg">
|
||||
<div
|
||||
v-for="(overviewTCP, index) in allTCP" :key="index"
|
||||
class="col-12 col-sm-6 col-md-4">
|
||||
<panel-chart :name="index" :data="overviewTCP" type="tcp"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="row items-center q-col-gutter-lg">
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<p v-for="n in 6" :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-lg q-pb-lg">
|
||||
<div class="row no-wrap items-center q-mb-lg app-title">
|
||||
<q-icon name="eva-toggle-right"></q-icon>
|
||||
<div class="app-title-label">Features</div>
|
||||
</div>
|
||||
<div v-if="!loadingOverview" class="row items-center q-col-gutter-lg">
|
||||
<div
|
||||
v-for="(overviewFeature, index) in allFeatures" :key="index"
|
||||
class="col-12 col-sm-6 col-md-2">
|
||||
<panel-feature :feature-key="index" :feature-val="overviewFeature"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="row items-center q-col-gutter-lg">
|
||||
<div class="col-12 col-sm-6 col-md-2">
|
||||
<p v-for="n in 3" :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-lg q-pb-xl">
|
||||
<div class="row no-wrap items-center q-mb-lg app-title">
|
||||
<q-icon name="eva-cube"></q-icon>
|
||||
<div class="app-title-label">Providers</div>
|
||||
</div>
|
||||
<div v-if="!loadingOverview" class="row items-center q-col-gutter-lg">
|
||||
<div
|
||||
v-for="(overviewProvider, index) in allProviders" :key="index"
|
||||
class="col-12 col-sm-6 col-md-2">
|
||||
<panel-provider :name="overviewProvider"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="row items-center q-col-gutter-lg">
|
||||
<div class="col-12 col-sm-6 col-md-2">
|
||||
<p v-for="n in 3" :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 PanelChart from '../../components/dashboard/PanelChart'
|
||||
import PanelFeature from '../../components/dashboard/PanelFeature'
|
||||
import PanelProvider from '../../components/dashboard/PanelProvider'
|
||||
|
||||
export default {
|
||||
name: 'PageDashboardIndex',
|
||||
components: {
|
||||
PageDefault,
|
||||
SkeletonBox,
|
||||
PanelEntry,
|
||||
PanelChart,
|
||||
PanelFeature,
|
||||
PanelProvider
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loadingEntryGetAll: true,
|
||||
loadingOverview: true,
|
||||
timeOutEntryGetAll: null,
|
||||
timeOutOverviewAll: null,
|
||||
intervalRefreshAll: null,
|
||||
intervalRefreshAllTime: 5000
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('entrypoints', { entryAll: 'all' }),
|
||||
...mapGetters('core', { overviewAll: 'allOverview' }),
|
||||
allHTTP () {
|
||||
return this.overviewAll.items.http
|
||||
},
|
||||
allTCP () {
|
||||
return this.overviewAll.items.tcp
|
||||
},
|
||||
allFeatures () {
|
||||
return this.overviewAll.items.features
|
||||
},
|
||||
allProviders () {
|
||||
return this.overviewAll.items.providers
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('entrypoints', { entryGetAll: 'getAll' }),
|
||||
...mapActions('core', { getOverview: 'getOverview' }),
|
||||
refreshAll () {
|
||||
this.onGetAll()
|
||||
},
|
||||
onGetAll () {
|
||||
this.entryGetAll()
|
||||
.then(body => {
|
||||
console.log('Success -> dashboard/entrypoints', body)
|
||||
clearTimeout(this.timeOutEntryGetAll)
|
||||
this.timeOutEntryGetAll = setTimeout(() => {
|
||||
this.loadingEntryGetAll = false
|
||||
}, 300)
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error -> dashboard/entrypoints', error)
|
||||
})
|
||||
this.getOverview()
|
||||
.then(body => {
|
||||
console.log('Success -> dashboard/overview', body)
|
||||
clearTimeout(this.timeOutOverviewAll)
|
||||
this.timeOutOverviewAll = setTimeout(() => {
|
||||
this.loadingOverview = false
|
||||
}, 300)
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error -> dashboard/overview', error)
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.refreshAll()
|
||||
this.intervalRefreshAll = setInterval(() => {
|
||||
this.refreshAll()
|
||||
}, this.intervalRefreshAllTime)
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.intervalRefreshAll)
|
||||
clearTimeout(this.timeOutEntryGetAll)
|
||||
clearTimeout(this.timeOutOverviewAll)
|
||||
this.$store.commit('entrypoints/getAllClear')
|
||||
this.$store.commit('core/getOverviewClear')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue