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

many update

Browse Source
This commit is contained in:
LouisLam
2021-06-27 16:10:55 +08:00
parent 6974f0f3ad
commit d02401b1c2
12 changed files with 344 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/Dashboard.vue
View File

@@ -23,20 +23,7 @@
</div>
<div class="col-6">
<div class="hp-bar">
<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>
<HeartbeatBar size="small" :monitor-id="item.id" />
</div>
</div>
@@ -54,8 +41,11 @@
<script>
import HeartbeatBar from "../components/HeartbeatBar.vue";
export default {
components: {
HeartbeatBar
},
data() {
return {
@@ -78,6 +68,8 @@ export default {
.list {
margin-top: 25px;
height: auto;
min-height: calc(100vh - 200px);
.item {
display: block;
@@ -92,6 +84,8 @@ export default {
.info {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:hover {
@@ -118,6 +112,10 @@ export default {
border-radius: 50rem;
transition: all ease-in-out 0.15s;
&.empty {
background-color: aliceblue;
}
&:hover {
opacity: 0.8;
transform: scale(1.5);

40
src/pages/DashboardHome.vue
View File

@@ -61,15 +61,19 @@
<div class="col">
<h3>Up</h3>
<span class="num">2</span>
<span class="num">{{ stats.up }}</span>
</div>
<div class="col">
<h3>Down</h3>
<span class="num text-danger">0</span>
<span class="num text-danger">{{ stats.down }}</span>
</div>
<div class="col">
<h3>Unknown</h3>
<span class="num text-secondary">{{ stats.unknown }}</span>
</div>
<div class="col">
<h3>Pause</h3>
<span class="num">0</span>
<span class="num text-secondary">{{ stats.pause }}</span>
</div>
</div>
</div>
@@ -107,7 +111,37 @@
<script>
export default {
computed: {
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 {
result.unknown++;
}
} else {
console.log(monitorID + " Unknown?")
console.log(beat)
result.unknown++;
}
}
return result;
},
}
}
</script>

50
src/pages/Details.vue
View File

@@ -1,6 +1,6 @@
<template>
<h1>{{ monitor.name }}</h1>
<h2>{{ monitor.url }}</h2>
<h1> {{ monitor.name }}</h1>
<p class="url"><a :href="monitor.url" target="_blank" v-if="monitor.type === 'http'">{{ monitor.url }}</a></p>
<div class="functions">
<button class="btn btn-light" @click="pauseDialog" v-if="monitor.active">Pause</button>
@@ -11,14 +11,15 @@
<div class="shadow-box">
<HeartbeatBar />
<div class="row">
<div class="col-md-8">
<HeartbeatBar :monitor-id="monitor.id" />
<span class="word">Check every {{ monitor.interval }} seconds.</span>
</div>
<div class="col-md-4">
<div class="col-md-4 text-center">
<span class="badge rounded-pill" :class=" 'bg-' + status.color " style="font-size: 30px">{{ status.text }}</span>
</div>
</div>
</div>
@@ -53,15 +54,28 @@ export default {
},
computed: {
monitor() {
let id = parseInt(this.$route.params.id)
let id = this.$route.params.id
return this.$root.monitorList[id];
},
lastHeartBeat() {
if (this.monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[this.monitor.id]) {
return this.$root.lastHeartbeatList[this.monitor.id]
} else {
return { status: -1 }
}
},
status() {
if (this.$root.statusList[this.monitor.id]) {
return this.$root.statusList[this.monitor.id]
} else {
return {
for (let monitor of this.$root.monitorList) {
if (monitor.id === id) {
return monitor;
}
}
return {};
},
}
},
methods: {
pauseDialog() {
@@ -97,9 +111,14 @@ export default {
<style lang="scss" scoped>
@import "../assets/vars.scss";
h2 {
.url {
color: $primary;
margin-bottom: 20px;
font-weight: bold;
a {
color: $primary;
}
}
.functions {
@@ -112,4 +131,9 @@ h2 {
padding: 20px;
margin-top: 25px;
}
.word {
color: #AAA;
font-size: 14px;
}
</style>

57
src/pages/EditMonitor.vue
View File

@@ -29,7 +29,7 @@
<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" step="20">
<input type="number" class="form-control" id="interval" v-model="monitor.interval" required min="20">
</div>
<div>
@@ -59,24 +59,7 @@ export default {
},
mounted() {
if (this.isAdd) {
this.monitor = {
type: "http",
name: "",
url: "https://",
interval: 60,
}
} else {
this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => {
if (res.ok) {
this.monitor = res.monitor;
} else {
toast.error(res.msg)
}
})
}
this.init();
},
data() {
return {
@@ -90,9 +73,33 @@ export default {
},
isAdd() {
return this.$route.path === "/add";
},
isEdit() {
return this.$route.path.startsWith("/edit");
}
},
methods: {
init() {
if (this.isAdd) {
console.log("??????")
this.monitor = {
type: "http",
name: "",
url: "https://",
interval: 60,
}
} else if (this.isEdit) {
this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => {
if (res.ok) {
this.monitor = res.monitor;
} else {
toast.error(res.msg)
}
})
}
},
submit() {
this.processing = true;
@@ -109,10 +116,18 @@ export default {
})
} else {
this.$root.getSocket().emit("editMonitor", this.monitor, (res) => {
this.processing = false;
this.$root.toastRes(res)
})
}
}
}
},
watch: {
'$route.fullPath' () {
this.init();
}
},
}
</script>