2021-06-25 13:55:49 +00:00
|
|
|
<template>
|
2021-06-27 08:10:55 +00:00
|
|
|
<h1> {{ monitor.name }}</h1>
|
|
|
|
<p class="url"><a :href="monitor.url" target="_blank" v-if="monitor.type === 'http'">{{ monitor.url }}</a></p>
|
2021-06-25 13:55:49 +00: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 13:04:58 +00:00
|
|
|
<router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary">Edit</router-link>
|
2021-06-25 13:55:49 +00: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 08:10:55 +00:00
|
|
|
<HeartbeatBar :monitor-id="monitor.id" />
|
|
|
|
<span class="word">Check every {{ monitor.interval }} seconds.</span>
|
2021-06-25 13:55:49 +00:00
|
|
|
</div>
|
2021-06-27 08:10:55 +00: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 13:55:49 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2021-06-30 13:04:58 +00: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 05:11:16 +00:00
|
|
|
<span class="num"><Uptime :monitor="monitor" type="24" /></span>
|
2021-06-30 13:04:58 +00:00
|
|
|
</div>
|
|
|
|
<div class="col">
|
|
|
|
<h4>Uptime</h4>
|
|
|
|
<p>(30-day)</p>
|
2021-07-01 05:11:16 +00:00
|
|
|
<span class="num"><Uptime :monitor="monitor" type="720" /></span>
|
2021-06-30 13:04:58 +00: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 13:55:49 +00: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 19:03:06 +00:00
|
|
|
import HeartbeatBar from "../components/HeartbeatBar.vue";
|
2021-06-30 13:04:58 +00:00
|
|
|
import Status from "../components/Status.vue";
|
|
|
|
import Datetime from "../components/Datetime.vue";
|
|
|
|
import CountUp from "../components/CountUp.vue";
|
2021-07-01 05:11:16 +00:00
|
|
|
import Uptime from "../components/Uptime.vue";
|
2021-06-25 13:55:49 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
2021-07-01 05:11:16 +00:00
|
|
|
Uptime,
|
2021-06-30 13:04:58 +00:00
|
|
|
CountUp,
|
|
|
|
Datetime,
|
2021-06-25 19:03:06 +00:00
|
|
|
HeartbeatBar,
|
2021-06-30 13:04:58 +00:00
|
|
|
Confirm,
|
|
|
|
Status,
|
2021-06-25 13:55:49 +00:00
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
2021-06-30 13:04:58 +00:00
|
|
|
|
|
|
|
pingTitle() {
|
|
|
|
if (this.monitor.type === "http") {
|
|
|
|
return "Response"
|
|
|
|
} else {
|
|
|
|
return "Ping"
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2021-06-25 13:55:49 +00:00
|
|
|
monitor() {
|
2021-06-27 08:10:55 +00:00
|
|
|
let id = this.$route.params.id
|
|
|
|
return this.$root.monitorList[id];
|
|
|
|
},
|
2021-06-25 13:55:49 +00:00
|
|
|
|
2021-06-27 08:10:55 +00: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 13:55:49 +00:00
|
|
|
}
|
|
|
|
},
|
2021-06-27 08:10:55 +00:00
|
|
|
|
2021-06-30 13:04:58 +00:00
|
|
|
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 [];
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2021-06-27 08:10:55 +00:00
|
|
|
status() {
|
|
|
|
if (this.$root.statusList[this.monitor.id]) {
|
|
|
|
return this.$root.statusList[this.monitor.id]
|
|
|
|
} else {
|
2021-06-30 13:04:58 +00:00
|
|
|
return { }
|
2021-06-27 08:10:55 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-06-25 13:55:49 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2021-06-30 13:04:58 +00:00
|
|
|
testNotification() {
|
|
|
|
this.$root.getSocket().emit("testNotification", this.monitor.id)
|
|
|
|
toast.success("Test notification is requested.")
|
|
|
|
},
|
|
|
|
|
2021-06-25 13:55:49 +00:00
|
|
|
pauseDialog() {
|
|
|
|
this.$refs.confirmPause.show();
|
|
|
|
},
|
2021-06-30 13:04:58 +00:00
|
|
|
|
2021-06-25 13:55:49 +00:00
|
|
|
resumeMonitor() {
|
|
|
|
this.$root.getSocket().emit("resumeMonitor", this.monitor.id, (res) => {
|
|
|
|
this.$root.toastRes(res)
|
|
|
|
})
|
|
|
|
},
|
2021-06-30 13:04:58 +00:00
|
|
|
|
2021-06-25 13:55:49 +00:00
|
|
|
pauseMonitor() {
|
|
|
|
this.$root.getSocket().emit("pauseMonitor", this.monitor.id, (res) => {
|
|
|
|
this.$root.toastRes(res)
|
|
|
|
})
|
|
|
|
},
|
2021-06-30 13:04:58 +00:00
|
|
|
|
2021-06-25 13:55:49 +00:00
|
|
|
deleteDialog() {
|
|
|
|
this.$refs.confirmDelete.show();
|
|
|
|
},
|
2021-06-30 13:04:58 +00:00
|
|
|
|
2021-06-25 13:55:49 +00: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 13:04:58 +00:00
|
|
|
|
2021-06-25 13:55:49 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
@import "../assets/vars.scss";
|
|
|
|
|
2021-06-27 08:10:55 +00:00
|
|
|
.url {
|
2021-06-25 13:55:49 +00:00
|
|
|
color: $primary;
|
|
|
|
margin-bottom: 20px;
|
2021-06-27 08:10:55 +00:00
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
a {
|
|
|
|
color: $primary;
|
|
|
|
}
|
2021-06-25 13:55:49 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.functions {
|
|
|
|
button, a {
|
|
|
|
margin-right: 20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.shadow-box {
|
|
|
|
padding: 20px;
|
|
|
|
margin-top: 25px;
|
|
|
|
}
|
2021-06-27 08:10:55 +00:00
|
|
|
|
|
|
|
.word {
|
|
|
|
color: #AAA;
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
2021-06-30 13:04:58 +00:00
|
|
|
|
|
|
|
table {
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
tr {
|
|
|
|
transition: all ease-in-out 0.2ms;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.stats p {
|
|
|
|
font-size: 13px;
|
|
|
|
color: #AAA;
|
|
|
|
}
|
2021-06-25 13:55:49 +00:00
|
|
|
</style>
|