You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
uptime-kuma/src/pages/DashboardHome.vue

156 lines
4.5 KiB

3 years ago
<template>
<div v-if="$route.name === 'DashboardHome'">
<h1 class="mb-3">Quick Stats</h1>
<div class="shadow-box big-padding text-center">
<div class="row">
<div class="col-12">
<div class="hp-bar-big">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="col">
<h3>Up</h3>
3 years ago
<span class="num">{{ stats.up }}</span>
3 years ago
</div>
<div class="col">
<h3>Down</h3>
3 years ago
<span class="num text-danger">{{ stats.down }}</span>
</div>
<div class="col">
<h3>Unknown</h3>
<span class="num text-secondary">{{ stats.unknown }}</span>
3 years ago
</div>
<div class="col">
<h3>Pause</h3>
3 years ago
<span class="num text-secondary">{{ stats.pause }}</span>
3 years ago
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-8">
<h4>Latest Incident</h4>
<div class="shadow-box bg-danger text-light">
MySQL was down.
</div>
<div class="shadow-box bg-primary text-light">
No issues was found.
</div>
</div>
<div class="col-4">
<h4>Overall Uptime</h4>
<div class="shadow-box">
<div>100.00% (24 hours)</div>
<div>100.00% (7 days)</div>
<div>100.00% (30 days)</div>
</div>
</div>
</div>
</div>
<router-view ref="child" />
</template>
<script>
export default {
computed: {
3 years ago
stats() {
let result = {
up: 0,
down: 0,
unknown: 0,
pause: 0,
};
for (let monitorID in this.$root.monitorList) {
let beat = this.$root.lastHeartbeatList[monitorID];
let monitor = this.$root.monitorList[monitorID]
if (monitor && ! monitor.active) {
result.pause++;
} else if (beat) {
if (beat.status === 1) {
result.up++;
} else if (beat.status === 0) {
result.down++;
} else {
result.unknown++;
}
} else {
result.unknown++;
}
}
return result;
},
3 years ago
}
}
</script>
<style scoped lang="scss">
@import "../assets/vars";
.num {
font-size: 30px;
color: $primary;
font-weight: bold;
}
</style>