uptime-kuma/src/pages/Details.vue

<template>
    <h1> {{ monitor.name }}</h1>
    <p class="url">
        <a :href="monitor.url" target="_blank" v-if="monitor.type === 'http' || monitor.type === 'keyword' ">{{ monitor.url }}</a>
        <span v-if="monitor.type === 'port'">TCP Ping {{ monitor.hostname }}:{{ monitor.port }}</span>
        <span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
        <span v-if="monitor.type === 'keyword'">
            <br />
            <span>Keyword:</span> <span style="color: black">{{ monitor.keyword }}</span>
        </span>
    </p>

    <div class="functions">
        <button class="btn btn-light" @click="pauseDialog" v-if="monitor.active"><font-awesome-icon icon="pause" /> Pause</button>
        <button class="btn btn-primary" @click="resumeMonitor" v-if="! monitor.active"><font-awesome-icon icon="pause" /> Resume</button>
        <router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary"><font-awesome-icon icon="edit" /> Edit</router-link>
        <button class="btn btn-danger" @click="deleteDialog"><font-awesome-icon icon="trash" /> Delete</button>
    </div>

    <div class="shadow-box">
        <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 text-center">
                <span class="badge rounded-pill" :class=" 'bg-' + status.color " style="font-size: 30px">{{ status.text }}</span>
            </div>
        </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"><Uptime :monitor="monitor" type="24" /></span>
            </div>
            <div class="col">
                <h4>Uptime</h4>
                <p>(30-day)</p>
                <span class="num"><Uptime :monitor="monitor" type="720" /></span>
            </div>

            <div class="col" v-if="certInfo">
                <h4>CertExp.</h4>
                <p>(<Datetime :value="certInfo.validTo" date-only />)</p>
                <span class="num" >
                    <a href="#"  @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{certInfo.daysRemaining}} days</a>
                </span>
            </div>
        </div>
    </div>

    <div class="shadow-box big-padding text-center" v-if="showCertInfoBox">
        <div class="row">
            <div class="col">
                <h4>Certificate Info</h4>
                <table class="text-start">
                    <tbody>
                        <tr class="my-3">
                            <td class="px-3">Valid: </td>
                            <td>{{ certInfo.valid }}</td>
                        </tr>
                        <tr class="my-3">
                            <td class="px-3">Valid To: </td>
                            <td><Datetime :value="certInfo.validTo" /></td>
                        </tr>
                        <tr class="my-3">
                            <td class="px-3">Days Remaining: </td>
                            <td>{{ certInfo.daysRemaining }}</td>
                        </tr>
                        <tr class="my-3">
                            <td class="px-3">Issuer: </td>
                            <td>{{ certInfo.issuer }}</td>
                        </tr>
                        <tr class="my-3">
                            <td class="px-3">Fingerprint: </td>
                            <td>{{ certInfo.fingerprint }}</td>
                        </tr>
                    </tbody>
                </table>
            </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, index) in displayedRecords" :key="index">
                    <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 class="d-flex justify-content-center kuma_pagination">
            <pagination
                v-model="page"
                :records=importantHeartBeatList.length
                :per-page="perPage" />
        </div>
    </div>

    <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";
import HeartbeatBar from "../components/HeartbeatBar.vue";
import Status from "../components/Status.vue";
import Datetime from "../components/Datetime.vue";
import CountUp from "../components/CountUp.vue";
import Uptime from "../components/Uptime.vue";
import Pagination from "v-pagination-3";

export default {
    components: {
        Uptime,
        CountUp,
        Datetime,
        HeartbeatBar,
        Confirm,
        Status,
        Pagination,
    },
    mounted() {

    },
    data() {
        return {
            page: 1,
            perPage: 25,
            heartBeatList: [],
            toggleCertInfoBox: false,
        }
    },
    computed: {

        pingTitle() {
            if (this.monitor.type === "http") {
                return "Response"
            } else {
                return "Ping"
            }
        },

        monitor() {
            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 }
            }
        },

        ping() {
            if (this.lastHeartBeat.ping || this.lastHeartBeat.ping === 0) {
                return this.lastHeartBeat.ping;
            } else {
                return "N/A"
            }
        },

        avgPing() {
            if (this.$root.avgPingList[this.monitor.id] || this.$root.avgPingList[this.monitor.id] === 0) {
                return this.$root.avgPingList[this.monitor.id];
            } else {
                return "N/A"
            }
        },

        importantHeartBeatList() {
            if (this.$root.importantHeartbeatList[this.monitor.id]) {
                this.heartBeatList = 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 { }
            }
        },

        certInfo() {
            if (this.$root.certInfoList[this.monitor.id]) {
                return this.$root.certInfoList[this.monitor.id]
            } else {
                return null
            }
        },

        showCertInfoBox() {
            return this.certInfo != null && this.toggleCertInfoBox;
        },

        displayedRecords() {
            const startIndex = this.perPage * (this.page - 1);
            const endIndex = startIndex + this.perPage;
            return this.heartBeatList.slice(startIndex, endIndex);
        },
    },
    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) {
                    toast.success(res.msg);
                    this.$router.push("/dashboard")
                } else {
                    toast.error(res.msg);
                }
            })
        }

    }
}
</script>

<style lang="scss" scoped>
@import "../assets/vars.scss";

.url {
    color: $primary;
    margin-bottom: 20px;
    font-weight: bold;

    a {
        color: $primary;
    }
}

.functions {
    button, a {
        margin-right: 20px;
    }
}

.shadow-box {
    padding: 20px;
    margin-top: 25px;
}

.word {
    color: #AAA;
    font-size: 14px;
}

table {
    font-size: 14px;

    tr {
        transition: all ease-in-out 0.2ms;
    }
}

.stats p {
    font-size: 13px;
    color: #AAA;
}

.stats {
    padding: 10px;

    .col {
        margin: 20px 0;
    }
}
</style>