uptime-kuma/src/pages/DashboardHome.vue

200 lines
6 KiB
Vue
Raw Normal View History

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">
{{ $t("Quick Stats") }}
2021-08-19 18:37:59 +00:00
</h1>
2021-06-25 13:55:49 +00:00
2021-08-29 18:22:49 +00:00
<div class="shadow-box big-padding text-center mb-4">
2021-08-19 18:37:59 +00:00
<div class="row">
<div class="col">
<h3>{{ $t("Up") }}</h3>
2021-08-19 18:37:59 +00:00
<span class="num">{{ stats.up }}</span>
</div>
<div class="col">
<h3>{{ $t("Down") }}</h3>
2021-08-19 18:37:59 +00:00
<span class="num text-danger">{{ stats.down }}</span>
</div>
<div class="col">
<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-26 00:43:26 +00:00
<h3>{{ $t("pauseDashboardHome") }}</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-09-11 10:56:27 +00:00
<div class="shadow-box table-shadow-box" style="overflow-x: hidden;">
2021-08-19 18:37:59 +00:00
<table class="table table-borderless table-hover">
<thead>
<tr>
<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>
<tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
2021-09-08 10:59:30 +00:00
<td><router-link :to="`/dashboard/${beat.monitorID}`">{{ beat.name }}</router-link></td>
2021-08-19 18:37:59 +00:00
<td><Status :status="beat.status" /></td>
<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">
{{ $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"
2021-09-26 15:20:12 +00:00
:options="paginationConfig"
2021-08-19 18:37:59 +00:00
/>
</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-09-26 15:20:12 +00:00
paginationConfig: {
texts:{
count:`${this.$t("Showing {from} to {to} of {count} records")}|{count} ${this.$t("records")}|${this.$t("One record")}`,
first:this.$t("First"),
last:this.$t("Last"),
nextPage:'>',
nextChunk:'>>',
prevPage:'<',
prevChunk:'<<'
}
}
2021-07-18 01:04:40 +00:00
}
},
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 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>
<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;
}
table {
font-size: 14px;
tr {
transition: all ease-in-out 0.2ms;
}
2021-09-11 10:56:27 +00:00
@media (max-width: 550px) {
table-layout: fixed;
overflow-wrap: break-word;
}
2021-06-25 13:55:49 +00:00
}
</style>