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

many update again

Browse Source
This commit is contained in:
LouisLam
2021-06-30 21:04:58 +08:00
parent 9fa84a0a2b
commit 46f07fc17e
9 changed files with 345 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/CountUp.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<span v-if="isNum" ref="output">{{ output }}</span> <span v-if="isNum">{{ unit }}</span>
<span v-else>{{ value }}</span>
</template>
<script>
import {sleep} from "../../server/util";
export default {
props: {
value: [String, Number],
time: {
Number,
default: 0.3,
},
unit: {
String,
default: "ms",
}
},
mounted() {
this.output = this.value;
},
data() {
return {
output: "",
frameDuration: 30,
}
},
methods: {
},
computed: {
isNum() {
return typeof this.value === 'number'
}
},
watch: {
async value(from, to) {
let diff = to - from;
let frames = 12;
let step = Math.floor(diff / frames);
if ((diff > 0 && step < 1) || (diff < 0 && step > 1) || diff === 0) {
// Lazy to NOT this condition, hahaha.
} else {
for (let i = 1; i < frames; i++) {
this.output += step;
await sleep(15)
}
}
this.output = this.value;
},
},
}
</script>
<style scoped>
</style>

25
src/components/Datetime.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<span>{{ displayText }}</span>
</template>
<script>
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime"
dayjs.extend(relativeTime)
export default {
props: {
value: String,
},
computed: {
displayText() {
return this.value
},
}
}
</script>
<style scoped>
</style>

39
src/components/Status.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<span class="badge rounded-pill" :class=" 'bg-' + color ">{{ text }}</span>
</template>
<script>
export default {
props: {
status: Number
},
computed: {
color() {
if (this.status === 0) {
return "danger"
} else if (this.status === 1) {
return "primary"
} else {
return "secondary"
}
},
text() {
if (this.status === 0) {
return "Down"
} else if (this.status === 1) {
return "Up"
} else {
return "Unknown"
}
},
}
}
</script>
<style scoped>
span {
width: 45px;
}
</style>

9
src/layouts/Layout.vue
View File

@@ -8,7 +8,7 @@
<header class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom">
<router-link to="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<router-link to="/dashboard" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<object class="bi me-2 ms-4" width="40" data="/icon.svg"></object>
<span class="fs-4 title">Uptime Kuma</span>
</router-link>
@@ -21,7 +21,8 @@
</header>
<main>
<router-view v-if="$root.loggedIn" />
<!-- Add :key to disable vue router re-use the same component -->
<router-view v-if="$root.loggedIn" :key="$route.fullPath" />
<Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
</main>
@@ -66,4 +67,8 @@ export default {
background-color: crimson;
color: white;
}
main {
margin-bottom: 30px;
}
</style>

76
src/mixins/socket.js
View File

@@ -20,10 +20,15 @@ export default {
monitorList: [
],
heartbeatList: {
},
importantHeartbeatList: {
},
avgPingList: {
}
}
},
@@ -42,6 +47,30 @@ export default {
}
this.heartbeatList[data.monitorID].push(data)
// Add to important list if it is important
// Also toast
if (data.important) {
if (data.status === 0) {
toast.error(`[${this.monitorList[data.monitorID].name}] [DOWN] ${data.msg}`, {
timeout: false,
});
} else if (data.status === 1) {
toast.success(`[${this.monitorList[data.monitorID].name}] [Up] ${data.msg}`, {
timeout: 20000,
});
} else {
toast(`[${this.monitorList[data.monitorID].name}] ${data.msg}`);
}
if (! (data.monitorID in this.importantHeartbeatList)) {
this.importantHeartbeatList[data.monitorID] = [];
}
this.importantHeartbeatList[data.monitorID].unshift(data)
}
});
socket.on('heartbeatList', (monitorID, data) => {
@@ -52,6 +81,17 @@ export default {
}
});
socket.on('avgPing', (monitorID, data) => {
this.avgPingList[monitorID] = data
});
socket.on('importantHeartbeatList', (monitorID, data) => {
if (! (monitorID in this.importantHeartbeatList)) {
this.importantHeartbeatList[monitorID] = data;
} else {
this.importantHeartbeatList[monitorID] = data.concat(this.importantHeartbeatList[monitorID])
}
});
socket.on('disconnect', () => {
console.log("disconnect")
@@ -65,8 +105,7 @@ export default {
// Reset Heartbeat list if it is re-connect
if (this.socket.connectCount >= 2) {
console.log("reset heartbeat list")
this.heartbeatList = {}
this.clearData()
}
if (storage.token) {
@@ -128,10 +167,9 @@ export default {
logout() {
storage.removeItem("token");
this.socket.token = null;
this.loggedIn = false;
socket.emit("logout", () => {
window.location.reload()
})
this.clearData()
},
add(monitor, callback) {
@@ -142,6 +180,12 @@ export default {
socket.emit("deleteMonitor", monitorID, callback)
},
clearData() {
console.log("reset heartbeat list")
this.heartbeatList = {}
this.importantHeartbeatList = {}
},
},
computed: {
@@ -156,26 +200,6 @@ export default {
return result;
},
// TODO: handle history + real time
importantHeartbeatList() {
let result = {}
for (let monitorID in this.heartbeatList) {
result[monitorID] = [];
let index = this.heartbeatList[monitorID].length - 1;
let list = this.heartbeatList[monitorID];
for (let heartbeat of list) {
if (heartbeat.important) {
result[monitorID].push(heartbeat)
}
}
}
return result;
},
statusList() {
let result = {}

4
src/pages/Dashboard.vue
View File

@@ -2,7 +2,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-12 col-xl-4">
<div class="col-12 col-md-5 col-xl-4">
<div>
<router-link to="/add" class="btn btn-primary">Add New Monitor</router-link>
</div>
@@ -31,7 +31,7 @@
</div>
</div>
<div class="col-12 col-xl-8">
<div class="col-12 col-md-7 col-xl-8">
<router-view />
</div>
</div>

122
src/pages/Details.vue
View File

@@ -5,14 +5,11 @@
<div class="functions">
<button class="btn btn-light" @click="pauseDialog" v-if="monitor.active">Pause</button>
<button class="btn btn-primary" @click="resumeMonitor" v-if="! monitor.active">Resume</button>
<router-link :to=" '/edit/' + monitor.id " class="btn btn-light">Edit</router-link>
<router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary">Edit</router-link>
<button class="btn btn-danger" @click="deleteDialog">Delete</button>
</div>
<div class="shadow-box">
<div class="row">
<div class="col-md-8">
<HeartbeatBar :monitor-id="monitor.id" />
@@ -24,6 +21,54 @@
</div>
</div>
<div class="shadow-box big-padding text-center stats">
<div class="row">
<div class="col">
<h4>{{ pingTitle }}</h4>
<p>(Current)</p>
<span class="num"><CountUp :value="ping" /></span>
</div>
<div class="col">
<h4>Avg.{{ pingTitle }}</h4>
<p>(24-hour)</p>
<span class="num"><CountUp :value="avgPing" /></span>
</div>
<div class="col">
<h4>Uptime</h4>
<p>(24-hour)</p>
<span class="num"></span>
</div>
<div class="col">
<h4>Uptime</h4>
<p>(30-day)</p>
<span class="num"></span>
</div>
</div>
</div>
<div class="shadow-box">
<table class="table table-borderless table-hover">
<thead>
<tr>
<th>Status</th>
<th>DateTime</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<tr v-for="beat in importantHeartBeatList">
<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="3">No important events</td>
</tr>
</tbody>
</table>
</div>
<Confirm ref="confirmPause" @yes="pauseMonitor">
Are you sure want to pause?
</Confirm>
@@ -38,11 +83,17 @@ import { useToast } from 'vue-toastification'
const toast = useToast()
import Confirm from "../components/Confirm.vue";
import HeartbeatBar from "../components/HeartbeatBar.vue";
import Status from "../components/Status.vue";
import Datetime from "../components/Datetime.vue";
import CountUp from "../components/CountUp.vue";
export default {
components: {
CountUp,
Datetime,
HeartbeatBar,
Confirm
Confirm,
Status,
},
mounted() {
@@ -53,6 +104,15 @@ export default {
}
},
computed: {
pingTitle() {
if (this.monitor.type === "http") {
return "Response"
} else {
return "Ping"
}
},
monitor() {
let id = this.$route.params.id
return this.$root.monitorList[id];
@@ -66,34 +126,65 @@ export default {
}
},
ping() {
if (this.lastHeartBeat.ping) {
return this.lastHeartBeat.ping;
} else {
return "N/A"
}
},
avgPing() {
if (this.$root.avgPingList[this.monitor.id]) {
return this.$root.avgPingList[this.monitor.id];
} else {
return "N/A"
}
},
importantHeartBeatList() {
if (this.$root.importantHeartbeatList[this.monitor.id]) {
return this.$root.importantHeartbeatList[this.monitor.id]
} else {
return [];
}
},
status() {
if (this.$root.statusList[this.monitor.id]) {
return this.$root.statusList[this.monitor.id]
} else {
return {
}
return { }
}
}
},
methods: {
testNotification() {
this.$root.getSocket().emit("testNotification", this.monitor.id)
toast.success("Test notification is requested.")
},
pauseDialog() {
this.$refs.confirmPause.show();
},
resumeMonitor() {
this.$root.getSocket().emit("resumeMonitor", this.monitor.id, (res) => {
this.$root.toastRes(res)
})
},
pauseMonitor() {
this.$root.getSocket().emit("pauseMonitor", this.monitor.id, (res) => {
this.$root.toastRes(res)
})
},
deleteDialog() {
this.$refs.confirmDelete.show();
},
deleteMonitor() {
this.$root.deleteMonitor(this.monitor.id, (res) => {
if (res.ok) {
@@ -104,6 +195,7 @@ export default {
}
})
}
}
}
</script>
@@ -136,4 +228,18 @@ export default {
color: #AAA;
font-size: 14px;
}
table {
font-size: 14px;
tr {
--bs-table-accent-bg: white;
transition: all ease-in-out 0.2ms;
}
}
.stats p {
font-size: 13px;
color: #AAA;
}
</style>