add ping and fix uptime

This commit is contained in:
LouisLam 2021-07-01 17:00:23 +08:00
parent 9c653c3d05
commit a6b5986dd6
9 changed files with 285 additions and 97 deletions

View file

@ -5,60 +5,6 @@
<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>
<span class="num">{{ stats.up }}</span>
@ -76,32 +22,43 @@
<span class="num text-secondary">{{ stats.pause }}</span>
</div>
</div>
<div class="row" v-if="false">
<div class="col-3">
<h3>Uptime</h3>
<p>(24-hour)</p>
<span class="num"></span>
</div>
<div class="col-3">
<h3>Uptime</h3>
<p>(30-day)</p>
<span class="num"></span>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-8">
<h4>Latest Incident</h4>
<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>
<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>
<tr v-if="importantHeartBeatList.length === 0">
<td colspan="4">No important events</td>
</tr>
</tbody>
</table>
</div>
</div>
@ -109,7 +66,10 @@
</template>
<script>
import Status from "../components/Status.vue";
import Datetime from "../components/Datetime.vue";
export default {
components: {Datetime, Status},
computed: {
stats() {
let result = {
@ -140,6 +100,25 @@ export default {
return result;
},
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
}
}
return result;
}
}
}
</script>
@ -151,5 +130,18 @@ export default {
font-size: 30px;
color: $primary;
font-weight: bold;
display: block;
}
.shadow-box {
padding: 20px;
}
table {
font-size: 14px;
tr {
transition: all ease-in-out 0.2ms;
}
}
</style>