uptime-kuma/src/pages/Details.vue

255 lines
6.9 KiB
Vue
Raw Normal View History

2021-06-25 09:55:49 -04:00
<template>
2021-06-27 04:10:55 -04:00
<h1> {{ monitor.name }}</h1>
2021-07-01 02:03:06 -04:00
<p class="url">
2021-07-01 05:19:28 -04:00
<a :href="monitor.url" target="_blank" v-if="monitor.type === 'http' || monitor.type === 'keyword' ">{{ monitor.url }}</a>
2021-07-01 05:00:23 -04:00
<span v-if="monitor.type === 'port'">TCP Ping {{ monitor.hostname }}:{{ monitor.port }}</span>
<span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
2021-07-01 05:19:28 -04:00
<span v-if="monitor.type === 'keyword'">
<br />
<span>Keyword:</span> <span style="color: black">{{ monitor.keyword }}</span>
</span>
2021-07-01 02:03:06 -04:00
</p>
2021-06-25 09:55:49 -04:00
<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>
2021-06-30 09:04:58 -04:00
<router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary">Edit</router-link>
2021-06-25 09:55:49 -04:00
<button class="btn btn-danger" @click="deleteDialog">Delete</button>
</div>
<div class="shadow-box">
<div class="row">
<div class="col-md-8">
2021-06-27 04:10:55 -04:00
<HeartbeatBar :monitor-id="monitor.id" />
<span class="word">Check every {{ monitor.interval }} seconds.</span>
2021-06-25 09:55:49 -04:00
</div>
2021-06-27 04:10:55 -04:00
<div class="col-md-4 text-center">
<span class="badge rounded-pill" :class=" 'bg-' + status.color " style="font-size: 30px">{{ status.text }}</span>
2021-06-25 09:55:49 -04:00
</div>
</div>
</div>
2021-06-30 09:04:58 -04:00
<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>
2021-07-01 01:11:16 -04:00
<span class="num"><Uptime :monitor="monitor" type="24" /></span>
2021-06-30 09:04:58 -04:00
</div>
<div class="col">
<h4>Uptime</h4>
<p>(30-day)</p>
2021-07-01 01:11:16 -04:00
<span class="num"><Uptime :monitor="monitor" type="720" /></span>
2021-06-30 09:04:58 -04:00
</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>
2021-06-25 09:55:49 -04:00
<Confirm ref="confirmPause" @yes="pauseMonitor">
Are you sure want to pause?
</Confirm>
<Confirm ref="confirmDelete" btnStyle="btn-danger" @yes="deleteMonitor">
Are you sure want to delete this monitor?
</Confirm>
</template>
<script>
import { useToast } from 'vue-toastification'
const toast = useToast()
import Confirm from "../components/Confirm.vue";
2021-06-25 15:03:06 -04:00
import HeartbeatBar from "../components/HeartbeatBar.vue";
2021-06-30 09:04:58 -04:00
import Status from "../components/Status.vue";
import Datetime from "../components/Datetime.vue";
import CountUp from "../components/CountUp.vue";
2021-07-01 01:11:16 -04:00
import Uptime from "../components/Uptime.vue";
2021-06-25 09:55:49 -04:00
export default {
components: {
2021-07-01 01:11:16 -04:00
Uptime,
2021-06-30 09:04:58 -04:00
CountUp,
Datetime,
2021-06-25 15:03:06 -04:00
HeartbeatBar,
2021-06-30 09:04:58 -04:00
Confirm,
Status,
2021-06-25 09:55:49 -04:00
},
mounted() {
},
data() {
return {
}
},
computed: {
2021-06-30 09:04:58 -04:00
pingTitle() {
if (this.monitor.type === "http") {
return "Response"
} else {
return "Ping"
}
},
2021-06-25 09:55:49 -04:00
monitor() {
2021-06-27 04:10:55 -04:00
let id = this.$route.params.id
return this.$root.monitorList[id];
},
2021-06-25 09:55:49 -04:00
2021-06-27 04:10:55 -04:00
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 }
2021-06-25 09:55:49 -04:00
}
},
2021-06-27 04:10:55 -04:00
2021-06-30 09:04:58 -04:00
ping() {
2021-07-11 23:20:18 -04:00
if (this.lastHeartBeat.ping || this.lastHeartBeat.ping === 0) {
2021-06-30 09:04:58 -04:00
return this.lastHeartBeat.ping;
} else {
return "N/A"
}
},
avgPing() {
2021-07-11 23:20:18 -04:00
if (this.$root.avgPingList[this.monitor.id] || this.$root.avgPingList[this.monitor.id] === 0) {
2021-06-30 09:04:58 -04:00
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 [];
}
},
2021-06-27 04:10:55 -04:00
status() {
if (this.$root.statusList[this.monitor.id]) {
return this.$root.statusList[this.monitor.id]
} else {
2021-06-30 09:04:58 -04:00
return { }
2021-06-27 04:10:55 -04:00
}
}
2021-06-25 09:55:49 -04:00
},
methods: {
2021-06-30 09:04:58 -04:00
testNotification() {
this.$root.getSocket().emit("testNotification", this.monitor.id)
toast.success("Test notification is requested.")
},
2021-06-25 09:55:49 -04:00
pauseDialog() {
this.$refs.confirmPause.show();
},
2021-06-30 09:04:58 -04:00
2021-06-25 09:55:49 -04:00
resumeMonitor() {
this.$root.getSocket().emit("resumeMonitor", this.monitor.id, (res) => {
this.$root.toastRes(res)
})
},
2021-06-30 09:04:58 -04:00
2021-06-25 09:55:49 -04:00
pauseMonitor() {
this.$root.getSocket().emit("pauseMonitor", this.monitor.id, (res) => {
this.$root.toastRes(res)
})
},
2021-06-30 09:04:58 -04:00
2021-06-25 09:55:49 -04:00
deleteDialog() {
this.$refs.confirmDelete.show();
},
2021-06-30 09:04:58 -04:00
2021-06-25 09:55:49 -04:00
deleteMonitor() {
this.$root.deleteMonitor(this.monitor.id, (res) => {
if (res.ok) {
toast.success(res.msg);
this.$router.push("/dashboard")
} else {
toast.error(res.msg);
}
})
}
2021-06-30 09:04:58 -04:00
2021-06-25 09:55:49 -04:00
}
}
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
2021-06-27 04:10:55 -04:00
.url {
2021-06-25 09:55:49 -04:00
color: $primary;
margin-bottom: 20px;
2021-06-27 04:10:55 -04:00
font-weight: bold;
a {
color: $primary;
}
2021-06-25 09:55:49 -04:00
}
.functions {
button, a {
margin-right: 20px;
}
}
.shadow-box {
padding: 20px;
margin-top: 25px;
}
2021-06-27 04:10:55 -04:00
.word {
color: #AAA;
font-size: 14px;
}
2021-06-30 09:04:58 -04:00
table {
font-size: 14px;
tr {
transition: all ease-in-out 0.2ms;
}
}
.stats p {
font-size: 13px;
color: #AAA;
}
2021-06-25 09:55:49 -04:00
</style>