2021-06-25 13:55:49 +00:00
|
|
|
<template>
|
2021-08-19 18:37:59 +00:00
|
|
|
<transition name="slide-fade" appear>
|
|
|
|
<div v-if="$route.name === 'DashboardHome'">
|
|
|
|
<h1 class="mb-3">
|
2021-08-24 10:26:44 +00:00
|
|
|
{{ $t("Quick Stats") }}
|
2021-08-19 18:37:59 +00:00
|
|
|
</h1>
|
2021-06-25 13:55:49 +00:00
|
|
|
|
2021-08-19 18:37:59 +00:00
|
|
|
<div class="shadow-box big-padding text-center">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col">
|
2021-08-24 10:26:44 +00:00
|
|
|
<h3>{{ $t("Up") }}</h3>
|
2021-08-19 18:37:59 +00:00
|
|
|
<span class="num">{{ stats.up }}</span>
|
|
|
|
</div>
|
|
|
|
<div class="col">
|
2021-08-24 10:26:44 +00:00
|
|
|
<h3>{{ $t("Down") }}</h3>
|
2021-08-19 18:37:59 +00:00
|
|
|
<span class="num text-danger">{{ stats.down }}</span>
|
|
|
|
</div>
|
|
|
|
<div class="col">
|
2021-08-24 10:26:44 +00:00
|
|
|
<h3>{{ $t("Unknown") }}</h3>
|
2021-08-19 18:37:59 +00:00
|
|
|
<span class="num text-secondary">{{ stats.unknown }}</span>
|
|
|
|
</div>
|
|
|
|
<div class="col">
|
2021-08-24 10:26:44 +00:00
|
|
|
<h3>{{ $t("Pause") }}</h3>
|
2021-08-19 18:37:59 +00:00
|
|
|
<span class="num text-secondary">{{ stats.pause }}</span>
|
|
|
|
</div>
|
2021-06-25 13:55:49 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2021-08-24 15:38:25 +00:00
|
|
|
<div class="shadow-box table-shadow-box" style="overflow-x: scroll;">
|
2021-08-19 18:37:59 +00:00
|
|
|
<table class="table table-borderless table-hover">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
2021-08-24 10:26:44 +00:00
|
|
|
<th>{{ $t("Name") }}</th>
|
|
|
|
<th>{{ $t("Status") }}</th>
|
|
|
|
<th>{{ $t("DateTime") }}</th>
|
|
|
|
<th>{{ $t("Message") }}</th>
|
2021-08-19 18:37:59 +00:00
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
2021-08-21 19:12:44 +00:00
|
|
|
<tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
|
2021-08-19 18:37:59 +00:00
|
|
|
<td>{{ beat.name }}</td>
|
|
|
|
<td><Status :status="beat.status" /></td>
|
2021-08-21 19:12:44 +00:00
|
|
|
<td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
|
|
|
|
<td class="border-0">{{ beat.msg }}</td>
|
2021-08-19 18:37:59 +00:00
|
|
|
</tr>
|
2021-07-27 17:47:13 +00:00
|
|
|
|
2021-08-19 18:37:59 +00:00
|
|
|
<tr v-if="importantHeartBeatList.length === 0">
|
|
|
|
<td colspan="4">
|
2021-08-24 10:26:44 +00:00
|
|
|
{{ $t("No important events") }}
|
2021-08-19 18:37:59 +00:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
2021-07-18 01:04:40 +00:00
|
|
|
|
2021-08-19 18:37:59 +00:00
|
|
|
<div class="d-flex justify-content-center kuma_pagination">
|
|
|
|
<pagination
|
|
|
|
v-model="page"
|
|
|
|
:records="importantHeartBeatList.length"
|
|
|
|
:per-page="perPage"
|
|
|
|
/>
|
|
|
|
</div>
|
2021-07-18 01:04:40 +00:00
|
|
|
</div>
|
2021-06-25 13:55:49 +00:00
|
|
|
</div>
|
2021-08-19 18:37:59 +00:00
|
|
|
</transition>
|
2021-06-25 13:55:49 +00:00
|
|
|
<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-07-18 01:04:40 +00:00
|
|
|
import Pagination from "v-pagination-3";
|
|
|
|
|
2021-06-25 13:55:49 +00:00
|
|
|
export default {
|
2021-07-18 01:04:40 +00:00
|
|
|
components: {
|
|
|
|
Datetime,
|
|
|
|
Status,
|
|
|
|
Pagination,
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
page: 1,
|
|
|
|
perPage: 25,
|
|
|
|
heartBeatList: [],
|
|
|
|
}
|
|
|
|
},
|
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++;
|
2021-07-19 16:23:06 +00:00
|
|
|
} else if (beat.status === 2) {
|
2021-07-27 17:47:13 +00:00
|
|
|
result.up++;
|
2021-06-27 08:10:55 +00:00
|
|
|
} 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) {
|
2021-07-27 17:47:13 +00:00
|
|
|
let list = this.$root.importantHeartbeatList[monitorID]
|
2021-07-01 09:00:23 +00:00
|
|
|
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;
|
2021-07-27 17:53:59 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (a.time < b.time) {
|
2021-07-01 09:05:02 +00:00
|
|
|
return 1;
|
|
|
|
}
|
2021-07-27 17:47:13 +00:00
|
|
|
|
|
|
|
return 0;
|
2021-07-01 09:05:02 +00:00
|
|
|
});
|
|
|
|
|
2021-07-18 01:04:40 +00:00
|
|
|
this.heartBeatList = result;
|
|
|
|
|
2021-07-01 09:00:23 +00:00
|
|
|
return result;
|
2021-07-18 01:04:40 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
displayedRecords() {
|
|
|
|
const startIndex = this.perPage * (this.page - 1);
|
|
|
|
const endIndex = startIndex + this.perPage;
|
|
|
|
return this.heartBeatList.slice(startIndex, endIndex);
|
|
|
|
},
|
2021-07-27 17:47:13 +00:00
|
|
|
},
|
2021-06-25 13:55:49 +00:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2021-08-08 05:47:29 +00:00
|
|
|
<style lang="scss" scoped>
|
2021-06-25 13:55:49 +00:00
|
|
|
@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;
|
2021-08-22 23:22:55 +00:00
|
|
|
margin-top: 25px;
|
2021-07-01 09:00:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
table {
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
tr {
|
|
|
|
transition: all ease-in-out 0.2ms;
|
|
|
|
}
|
2021-06-25 13:55:49 +00:00
|
|
|
}
|
|
|
|
</style>
|