2021-06-25 13:55:49 +00:00
|
|
|
<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">
|
|
|
|
<h3>Up</h3>
|
2021-06-27 08:10:55 +00:00
|
|
|
<span class="num">{{ stats.up }}</span>
|
2021-06-25 13:55:49 +00:00
|
|
|
</div>
|
|
|
|
<div class="col">
|
|
|
|
<h3>Down</h3>
|
2021-06-27 08:10:55 +00:00
|
|
|
<span class="num text-danger">{{ stats.down }}</span>
|
|
|
|
</div>
|
|
|
|
<div class="col">
|
|
|
|
<h3>Unknown</h3>
|
|
|
|
<span class="num text-secondary">{{ stats.unknown }}</span>
|
2021-06-25 13:55:49 +00:00
|
|
|
</div>
|
|
|
|
<div class="col">
|
|
|
|
<h3>Pause</h3>
|
2021-06-27 08:10:55 +00:00
|
|
|
<span class="num text-secondary">{{ stats.pause }}</span>
|
2021-06-25 13:55:49 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-07-01 09:00:23 +00:00
|
|
|
<div class="row" v-if="false">
|
|
|
|
<div class="col-3">
|
|
|
|
<h3>Uptime</h3>
|
|
|
|
<p>(24-hour)</p>
|
|
|
|
<span class="num"></span>
|
2021-06-25 13:55:49 +00:00
|
|
|
</div>
|
2021-07-01 09:00:23 +00:00
|
|
|
<div class="col-3">
|
|
|
|
<h3>Uptime</h3>
|
|
|
|
<p>(30-day)</p>
|
|
|
|
<span class="num"></span>
|
2021-06-25 13:55:49 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-07-01 09:00:23 +00:00
|
|
|
</div>
|
2021-06-25 13:55:49 +00:00
|
|
|
|
2021-07-01 09:00:23 +00:00
|
|
|
<div class="shadow-box" style="margin-top: 25px;">
|
|
|
|
<table class="table table-borderless table-hover">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>Name</th>
|
|
|
|
<th>Status</th>
|
|
|
|
<th>DateTime</th>
|
|
|
|
<th>Message</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr v-for="beat in importantHeartBeatList">
|
|
|
|
<td>{{ beat.name }}</td>
|
|
|
|
<td><Status :status="beat.status" /></td>
|
|
|
|
<td><Datetime :value="beat.time" /></td>
|
|
|
|
<td>{{ beat.msg }}</td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr v-if="importantHeartBeatList.length === 0">
|
|
|
|
<td colspan="4">No important events</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
2021-06-25 13:55:49 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<router-view ref="child" />
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2021-07-01 09:00:23 +00:00
|
|
|
import Status from "../components/Status.vue";
|
|
|
|
import Datetime from "../components/Datetime.vue";
|
2021-06-25 13:55:49 +00:00
|
|
|
export default {
|
2021-07-01 09:00:23 +00:00
|
|
|
components: {Datetime, Status},
|
2021-06-25 13:55:49 +00:00
|
|
|
computed: {
|
2021-06-27 08:10:55 +00:00
|
|
|
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;
|
|
|
|
},
|
2021-07-01 09:00:23 +00:00
|
|
|
|
|
|
|
importantHeartBeatList() {
|
|
|
|
let result = [];
|
|
|
|
|
|
|
|
for (let monitorID in this.$root.importantHeartbeatList) {
|
|
|
|
let list = this.$root.importantHeartbeatList[monitorID]
|
|
|
|
result = result.concat(list);
|
|
|
|
}
|
|
|
|
|
|
|
|
for (let beat of result) {
|
|
|
|
let monitor = this.$root.monitorList[beat.monitorID];
|
|
|
|
|
|
|
|
if (monitor) {
|
|
|
|
beat.name = monitor.name
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-07-01 09:05:02 +00:00
|
|
|
result.sort((a, b) => {
|
|
|
|
if (a.time > b.time) {
|
|
|
|
return -1;
|
|
|
|
} else if (a.time < b.time) {
|
|
|
|
return 1;
|
|
|
|
} else {
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2021-07-01 09:00:23 +00:00
|
|
|
return result;
|
|
|
|
}
|
2021-06-25 13:55:49 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
@import "../assets/vars";
|
|
|
|
|
|
|
|
.num {
|
|
|
|
font-size: 30px;
|
|
|
|
color: $primary;
|
|
|
|
font-weight: bold;
|
2021-07-01 09:00:23 +00:00
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
|
|
|
.shadow-box {
|
|
|
|
padding: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
table {
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
tr {
|
|
|
|
transition: all ease-in-out 0.2ms;
|
|
|
|
}
|
2021-06-25 13:55:49 +00:00
|
|
|
}
|
|
|
|
</style>
|