7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-09 21:14:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

add ping and fix uptime

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CountUp.vue
View File

@@ -48,7 +48,7 @@ export default {
let frames = 12;
let step = Math.floor(diff / frames);
if (! this.isNum || (diff > 0 && step < 1) || (diff < 0 && step > 1) || diff === 0) {
if (isNaN(step) || ! this.isNum || (diff > 0 && step < 1) || (diff < 0 && step > 1) || diff === 0) {
// Lazy to NOT this condition, hahaha.
} else {
for (let i = 1; i < frames; i++) {

2
src/components/Uptime.vue
View File

@@ -18,7 +18,7 @@ export default {
let key = this.monitor.id + "_" + this.type;
if (this.$root.uptimeList[key]) {
if (this.$root.uptimeList[key] !== undefined) {
return Math.round(this.$root.uptimeList[key] * 10000) / 100 + "%";
} else {
return "N/A"

146
src/pages/DashboardHome.vue
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>

3
src/pages/Details.vue
View File

@@ -2,7 +2,8 @@
<h1> {{ monitor.name }}</h1>
<p class="url">
<a :href="monitor.url" target="_blank" v-if="monitor.type === 'http'">{{ monitor.url }}</a>
<span v-if="monitor.type === 'port'">{{ monitor.hostname }}:{{ monitor.port }}</span>
<span v-if="monitor.type === 'port'">TCP Ping {{ monitor.hostname }}:{{ monitor.port }}</span>
<span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
</p>
<div class="functions">

21
src/pages/EditMonitor.vue
View File

@@ -27,22 +27,19 @@
<input type="url" class="form-control" id="url" v-model="monitor.url" pattern="https?://.+" required>
</div>
<template v-if="monitor.type === 'port' ">
<div class="mb-3">
<label for="hostname" class="form-label">Hostname</label>
<input type="text" class="form-control" id="hostname" v-model="monitor.hostname" required>
</div>
<div class="mb-3">
<label for="port" class="form-label">Port</label>
<input type="number" class="form-control" id="port" v-model="monitor.port" required min="0" max="65535">
</div>
</template>
<div class="mb-3" v-if="monitor.type === 'port' || monitor.type === 'ping' ">
<label for="hostname" class="form-label">Hostname</label>
<input type="text" class="form-control" id="hostname" v-model="monitor.hostname" required>
</div>
<div class="mb-3" v-if="monitor.type === 'port' ">
<label for="port" class="form-label">Port</label>
<input type="number" class="form-control" id="port" v-model="monitor.port" required min="0" max="65535" step="1">
</div>
<div class="mb-3">
<label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label>
<input type="number" class="form-control" id="interval" v-model="monitor.interval" required min="20">
<input type="number" class="form-control" id="interval" v-model="monitor.interval" required min="20" step="1">
</div>
<div>