7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-10 02:23:20 +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

1
src/assets/vars.scss
View File

@@ -1,4 +1,5 @@
$primary: #5CDD8B;
$danger: #DC3545;
$link-color: #111;
$border-radius: 50rem;

57
src/components/HeartbeatBar.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="wrap" :style="wrapStyle" ref="wrap">
<div class="hp-bar-big" :style="barStyle">
<div class="beat" :style="beatStyle" v-for="(beat, index) in shortBeatList" :key="index">
<div class="beat" :class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0) }" :style="beatStyle" v-for="(beat, index) in shortBeatList" :key="index">
</div>
</div>
</div>
@@ -11,12 +11,15 @@
export default {
props: {
size: {
type: String,
default: "big"
},
monitorId: Number
},
data() {
return {
i: 1,
beatList: [
],
beatWidth: 10,
beatHeight: 30,
hoverScale: 1.5,
@@ -25,26 +28,38 @@ export default {
maxBeat: -1,
}
},
destroyed() {
unmounted() {
window.removeEventListener("resize", this.resize);
},
mounted() {
if (this.size === "small") {
this.beatWidth = 5.6;
this.beatMargin = 2.4;
this.beatHeight = 16
}
window.addEventListener("resize", this.resize);
this.resize();
setInterval(() => {
this.beatList.push(this.i++)
}, 3000)
},
methods: {
resize() {
this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2))
if (this.$refs.wrap) {
this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2))
}
}
},
computed: {
beatList() {
if (! (this.monitorId in this.$root.heartbeatList)) {
this.$root.heartbeatList[this.monitorId] = [];
}
return this.$root.heartbeatList[this.monitorId]
},
shortBeatList() {
let placeholders = []
let start = this.beatList.length - this.maxBeat;
if (this.move) {
@@ -52,10 +67,16 @@ export default {
}
if (start < 0) {
// Add empty placeholder
for (let i = start; i < 0; i++) {
placeholders.push(0)
}
start = 0;
}
return this.beatList.slice(start)
return placeholders.concat(this.beatList.slice(start))
},
wrapStyle() {
@@ -104,7 +125,6 @@ export default {
watch: {
beatList: {
handler(val, oldVal) {
console.log("add beat2")
this.move = true;
setTimeout(() => {
@@ -131,14 +151,17 @@ export default {
display: inline-block;
background-color: $primary;
border-radius: 50rem;
transition: all ease-in-out 0.15s;
&.new-beat {
&.empty {
background-color: aliceblue;
}
&.down {
background-color: $danger;
}
&:hover {
&:not(.empty):hover {
transition: all ease-in-out 0.15s;
opacity: 0.8;
transform: scale(var(--hover-scale));
}

13
src/layouts/EmptyLayout.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<router-view />
</template>
<script>
export default {
}
</script>
<style scoped>
</style>

19
src/main.js
View File

@@ -3,6 +3,7 @@ import {createRouter, createWebHistory} from 'vue-router'
import App from './App.vue'
import Layout from './layouts/Layout.vue'
import EmptyLayout from './layouts/EmptyLayout.vue'
import Settings from "./pages/Settings.vue";
import Dashboard from "./pages/Dashboard.vue";
import DashboardHome from "./pages/DashboardHome.vue";
@@ -30,17 +31,23 @@ const routes = [
component: DashboardHome,
children: [
{
path: ':id',
component: Details,
path: '/dashboard/:id',
component: EmptyLayout,
children: [
{
path: '',
component: Details,
},
{
path: '/edit/:id',
component: EditMonitor,
},
]
},
{
path: '/add',
component: EditMonitor,
},
{
path: '/edit/:id',
component: EditMonitor,
},
]
},
{

65
src/mixins/socket.js
View File

@@ -21,7 +21,10 @@ export default {
],
importantHeartbeatList: [
]
],
heartbeatList: {
},
}
},
@@ -34,6 +37,16 @@ export default {
this.monitorList = data;
});
socket.on('heartbeat', (data) => {
if (! (data.monitorID in this.heartbeatList)) {
this.heartbeatList[data.monitorID] = [];
}
this.heartbeatList[data.monitorID].push(data)
});
socket.on('disconnect', () => {
this.socket.connected = false;
});
@@ -53,9 +66,11 @@ export default {
},
methods: {
getSocket() {
return socket;
},
toastRes(res) {
if (res.ok) {
toast.success(res.msg);
@@ -63,6 +78,7 @@ export default {
toast.error(res.msg);
}
},
login(username, password, callback) {
socket.emit("login", {
username,
@@ -81,18 +97,19 @@ export default {
callback(res)
})
},
loginByToken(token) {
socket.emit("loginByToken", token, (res) => {
this.allowLoginDialog = true;
if (! res.ok) {
this.logout()
console.log(res.msg)
} else {
this.loggedIn = true;
}
})
},
logout() {
storage.removeItem("token");
this.socket.token = null;
@@ -102,19 +119,59 @@ export default {
toast.success("Logout Successfully")
})
},
add(monitor, callback) {
socket.emit("add", monitor, callback)
},
deleteMonitor(monitorID, callback) {
socket.emit("deleteMonitor", monitorID, callback)
},
loadMonitor(monitorID) {
}
},
computed: {
lastHeartbeatList() {
let result = {}
for (let monitorID in this.heartbeatList) {
let index = this.heartbeatList[monitorID].length - 1;
result[monitorID] = this.heartbeatList[monitorID][index];
}
return result;
},
statusList() {
let result = {}
let unknown = {
text: "Unknown",
color: "secondary"
}
for (let monitorID in this.lastHeartbeatList) {
let lastHeartBeat = this.lastHeartbeatList[monitorID]
if (! lastHeartBeat) {
result[monitorID] = unknown;
} else if (lastHeartBeat.status === 1) {
result[monitorID] = {
text: "Up",
color: "primary"
};
} else if (lastHeartBeat.status === 0) {
result[monitorID] = {
text: "Down",
color: "danger"
};
} else {
result[monitorID] = unknown;
}
}
return result;
}
}
}

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>