homelab/traefik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a new dashboard page.

Browse source
This commit is contained in:
Jorge Gonzalez 2019-08-26 18:15:41 +02:00 • committed by Ludovic Fernandez
parent 89150e1164
commit fd24b1898e
133 changed files with 17303 additions and 11112 deletions
Download patch file Download diff file Expand all files Collapse all files

196
webui/src/components/dashboard/PanelChart.vue Normal file
View file

@ -0,0 +1,196 @@
<template>
<q-card flat bordered>
<q-card-section>
<div class="row items-center no-wrap">
<div class="col">
<div class="text-h6 text-weight-bold">{{getName}}</div>
</div>
</div>
</q-card-section>
<q-card-section>
<div class="row items-center q-col-gutter-md">
<div class="col-12 col-sm-6">
<ChartDoughnut
:chartdata="getChartdata()"
:options="options"/>
</div>
<div class="col-12 col-sm-6">
<q-list>
<q-item class="label-state">
<q-item-section avatar>
<avatar-state state="positive"/>
</q-item-section>
<q-item-section class="label-state-text">
<q-item-label>Success</q-item-label>
<q-item-label caption lines="1">{{getSuccess(true)}}%</q-item-label>
</q-item-section>
<q-item-section side class="label-state-side">
{{getSuccess()}}
</q-item-section>
</q-item>
<q-item class="label-state">
<q-item-section avatar>
<avatar-state state="warning"/>
</q-item-section>
<q-item-section class="label-state-text">
<q-item-label>Warnings</q-item-label>
<q-item-label caption lines="1">{{getWarnings(true)}}%</q-item-label>
</q-item-section>
<q-item-section side class="label-state-side">
{{getWarnings()}}
</q-item-section>
</q-item>
<q-item class="label-state">
<q-item-section avatar>
<avatar-state state="negative"/>
</q-item-section>
<q-item-section class="label-state-text">
<q-item-label>Errors</q-item-label>
<q-item-label caption lines="1">{{getErrors(true)}}%</q-item-label>
</q-item-section>
<q-item-section side class="label-state-side">
{{getErrors()}}
</q-item-section>
</q-item>
</q-list>
</div>
</div>
</q-card-section>
</q-card>
</template>
<script>
import Helps from '../../_helpers/Helps'
import ChartDoughnut from '../_commons/ChartDoughnut'
import AvatarState from '../_commons/AvatarState'
export default {
name: 'PanelChart',
props: ['name', 'data', 'type'],
components: {
ChartDoughnut,
AvatarState
},
data () {
return {
loading: true,
options: {
legend: {
display: false
},
animation: {
duration: 1000
},
tooltips: {
enabled: true
}
}
}
},
computed: {
getName () {
return Helps.capFirstLetter(this.name)
},
getUrl () {
return `/${this.type}/${this.getName.toLowerCase()}`
}
},
methods: {
getSuccess (inPercent = false) {
const num = this.data.total - (this.data.errors + this.data.warnings)
let result = 0
if (inPercent) {
result = Helps.getPercent(num, this.data.total).toFixed(0)
} else {
result = num
}
return isNaN(result) ? 0 : result
},
getWarnings (inPercent = false) {
const num = this.data.warnings
let result = 0
if (inPercent) {
result = Helps.getPercent(num, this.data.total).toFixed(0)
} else {
result = num
}
return isNaN(result) ? 0 : result
},
getErrors (inPercent = false) {
const num = this.data.errors
let result = 0
if (inPercent) {
result = Helps.getPercent(num, this.data.total).toFixed(0)
} else {
result = num
}
return isNaN(result) ? 0 : result
},
getData () {
return [this.getSuccess(), this.getWarnings(), this.getErrors()]
},
getChartdata () {
if (this.getData()[0] === 0 && this.getData()[1] === 0 && this.getData()[2] === 0) {
this.options.tooltips.enabled = false
return {
datasets: [{
backgroundColor: [
'#f2f3f5'
],
data: [1]
}]
}
} else {
this.options.tooltips.enabled = true
return {
datasets: [{
backgroundColor: [
'#00a697',
'#db7d11',
'#ff0039'
],
data: this.getData()
}],
labels: [
'Success',
'Warnings',
'Errors'
]
}
}
}
}
}
</script>
<style scoped lang="scss">
@import "../../css/sass/variables";
.label-state {
min-height: 32px;
padding: 8px;
.q-item__section--avatar{
min-width: 32px;
padding: 0 8px 0 0;
}
&-text{
.q-item__label{
font-size: 16px;
line-height: 16px !important;
font-weight: 600;
}
.q-item__label--caption{
font-size: 14px;
line-height: 14px !important;
font-weight: 500;
color: $app-text-grey;
}
}
&-side{
font-size: 22px;
font-weight: 700;
padding: 0 0 0 8px;
color: inherit;
}
}
</style>