many update again

server/model/monitor.js

@@ -66,6 +66,8 @@ class Monitor extends BeanModel {
 
             io.to(this.user_id).emit("heartbeat", bean.toJSON());
 
+            Monitor.sendStats(io, this.id, this.user_id)
+
             await R.store(bean)
 
             previousBeat = bean;
@@ -78,6 +80,29 @@ class Monitor extends BeanModel {
     stop() {
         clearInterval(this.heartbeatInterval)
     }
+
+    static async sendStats(io, monitorID, userID) {
+        Monitor.sendAvgPing(24, io, monitorID, userID);
+        //Monitor.sendUptime(24, io, this.id);
+        //Monitor.sendUptime(24 * 30, io, this.id);
+    }
+
+    static async sendAvgPing(duration, io, monitorID, userID) {
+        let avgPing = parseInt(await R.getCell(`
+            SELECT AVG(ping)
+            FROM heartbeat
+            WHERE time > DATE('now', ? || ' hours')
+            AND monitor_id = ? `, [
+            -duration,
+            monitorID
+        ]));
+
+        io.to(userID).emit("avgPing", monitorID, avgPing);
+    }
+
+    sendUptime(duration) {
+
+    }
 }
 
 module.exports = Monitor;

server/server.js

@@ -39,10 +39,6 @@ let monitorList = {};
 
         // Public API
 
-        /*
-            firstConnect - true = send monitor list + heartbeat list history
-                                  false = do not send
-         */
         socket.on("loginByToken", async (token, callback) => {
 
             try {
@@ -336,6 +332,8 @@ async function afterLogin(socket, user) {
 
     for (let monitorID in monitorList) {
         await sendHeartbeatList(socket, monitorID);
+        await sendImportantHeartbeatList(socket, monitorID);
+        await Monitor.sendStats(io, monitorID, user.id)
     }
 }
 
@@ -348,11 +346,8 @@ async function getMonitorJSONList(userID) {
 
     for (let monitor of monitorList) {
         result[monitor.id] = monitor.toJSON();
-
     }
 
-
-
     return result;
 }
 
@@ -455,3 +450,15 @@ async function sendHeartbeatList(socket, monitorID) {
     socket.emit("heartbeatList", monitorID, result)
 }
 
+async function sendImportantHeartbeatList(socket, monitorID) {
+    let list = await R.find("heartbeat", `
+        monitor_id = ?
+        AND important = 1
+        ORDER BY time DESC
+        LIMIT 500
+    `, [
+        monitorID
+    ])
+
+    socket.emit("importantHeartbeatList", monitorID, list)
+}

src/components/CountUp.vue

@@ -0,0 +1,69 @@
+<template>
+    <span v-if="isNum" ref="output">{{ output }}</span> <span v-if="isNum">{{ unit }}</span>
+    <span v-else>{{ value }}</span>
+</template>
+
+<script>
+
+import {sleep} from "../../server/util";
+
+export default {
+
+    props: {
+        value: [String, Number],
+        time: {
+            Number,
+            default: 0.3,
+        },
+        unit: {
+            String,
+            default: "ms",
+        }
+    },
+
+    mounted() {
+        this.output = this.value;
+    },
+
+    data() {
+        return {
+            output: "",
+            frameDuration: 30,
+        }
+    },
+
+    methods: {
+
+    },
+
+    computed: {
+        isNum() {
+            return typeof this.value === 'number'
+        }
+    },
+
+    watch: {
+        async value(from, to) {
+            let diff = to - from;
+            let frames = 12;
+            let step = Math.floor(diff / frames);
+
+            if ((diff > 0 && step < 1) || (diff < 0 && step > 1) || diff === 0) {
+                // Lazy to NOT this condition, hahaha.
+            } else {
+                for (let i = 1; i < frames; i++) {
+                    this.output += step;
+                    await sleep(15)
+                }
+            }
+
+            this.output = this.value;
+        },
+    },
+
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Datetime.vue

@@ -0,0 +1,25 @@
+<template>
+    <span>{{ displayText }}</span>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import relativeTime  from "dayjs/plugin/relativeTime"
+dayjs.extend(relativeTime)
+
+export default {
+    props: {
+        value: String,
+    },
+
+    computed: {
+        displayText() {
+            return this.value
+        },
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Status.vue

@@ -0,0 +1,39 @@
+<template>
+    <span class="badge rounded-pill" :class=" 'bg-' + color ">{{ text }}</span>
+</template>
+
+<script>
+export default {
+    props: {
+        status: Number
+    },
+
+    computed: {
+        color() {
+            if (this.status === 0) {
+                return "danger"
+            } else if (this.status === 1) {
+                return "primary"
+            } else {
+                return "secondary"
+            }
+        },
+
+        text() {
+            if (this.status === 0) {
+                return "Down"
+            } else if (this.status === 1) {
+                return "Up"
+            } else {
+                return "Unknown"
+            }
+        },
+    }
+}
+</script>
+
+<style scoped>
+    span {
+        width: 45px;
+    }
+</style>

src/layouts/Layout.vue

@@ -8,7 +8,7 @@
 
     <header class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom">
 
-        <router-link to="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
+        <router-link to="/dashboard" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
             <object class="bi me-2 ms-4" width="40" data="/icon.svg"></object>
             <span class="fs-4 title">Uptime Kuma</span>
         </router-link>
@@ -21,7 +21,8 @@
     </header>
 
     <main>
-        <router-view v-if="$root.loggedIn" />
+        <!-- Add :key to disable vue router re-use the same component -->
+        <router-view v-if="$root.loggedIn" :key="$route.fullPath" />
         <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
     </main>
 
@@ -66,4 +67,8 @@ export default {
         background-color: crimson;
         color: white;
     }
+
+    main {
+        margin-bottom: 30px;
+    }
 </style>

src/mixins/socket.js

@@ -20,10 +20,15 @@ export default {
             monitorList: [
 
             ],
-
             heartbeatList: {
 
             },
+            importantHeartbeatList: {
+
+            },
+            avgPingList: {
+
+            }
         }
     },
 
@@ -42,6 +47,30 @@ export default {
             }
 
             this.heartbeatList[data.monitorID].push(data)
+
+            // Add to important list if it is important
+            // Also toast
+            if (data.important) {
+
+                if (data.status === 0) {
+                    toast.error(`[${this.monitorList[data.monitorID].name}] [DOWN] ${data.msg}`, {
+                        timeout: false,
+                    });
+                } else if (data.status === 1) {
+                    toast.success(`[${this.monitorList[data.monitorID].name}] [Up] ${data.msg}`, {
+                        timeout: 20000,
+                    });
+                } else {
+                    toast(`[${this.monitorList[data.monitorID].name}] ${data.msg}`);
+                }
+
+
+                if (! (data.monitorID in this.importantHeartbeatList)) {
+                    this.importantHeartbeatList[data.monitorID] = [];
+                }
+
+                this.importantHeartbeatList[data.monitorID].unshift(data)
+            }
         });
 
         socket.on('heartbeatList', (monitorID, data) => {
@@ -52,6 +81,17 @@ export default {
             }
         });
 
+        socket.on('avgPing', (monitorID, data) => {
+            this.avgPingList[monitorID] = data
+        });
+
+        socket.on('importantHeartbeatList', (monitorID, data) => {
+            if (! (monitorID in this.importantHeartbeatList)) {
+                this.importantHeartbeatList[monitorID] = data;
+            } else {
+                this.importantHeartbeatList[monitorID] = data.concat(this.importantHeartbeatList[monitorID])
+            }
+        });
 
         socket.on('disconnect', () => {
             console.log("disconnect")
@@ -65,8 +105,7 @@ export default {
 
             // Reset Heartbeat list if it is re-connect
             if (this.socket.connectCount >= 2) {
-                console.log("reset heartbeat list")
-                this.heartbeatList = {}
+                this.clearData()
             }
 
             if (storage.token) {
@@ -128,10 +167,9 @@ export default {
         logout() {
             storage.removeItem("token");
             this.socket.token = null;
+            this.loggedIn = false;
 
-            socket.emit("logout", () => {
-                window.location.reload()
-            })
+            this.clearData()
         },
 
         add(monitor, callback) {
@@ -142,6 +180,12 @@ export default {
             socket.emit("deleteMonitor", monitorID, callback)
         },
 
+        clearData() {
+            console.log("reset heartbeat list")
+            this.heartbeatList = {}
+            this.importantHeartbeatList = {}
+        },
+
     },
 
     computed: {
@@ -156,26 +200,6 @@ export default {
             return result;
         },
 
-        // TODO: handle history + real time
-        importantHeartbeatList() {
-            let result = {}
-
-            for (let monitorID in this.heartbeatList) {
-                result[monitorID] = [];
-
-                let index = this.heartbeatList[monitorID].length - 1;
-                let list = this.heartbeatList[monitorID];
-
-                for (let heartbeat of list) {
-                    if (heartbeat.important) {
-                        result[monitorID].push(heartbeat)
-                    }
-                }
-            }
-
-            return result;
-        },
-
         statusList() {
             let result = {}
 

src/pages/Dashboard.vue

@@ -2,7 +2,7 @@
 
     <div class="container-fluid">
         <div class="row">
-            <div class="col-12 col-xl-4">
+            <div class="col-12 col-md-5 col-xl-4">
                 <div>
                     <router-link to="/add" class="btn btn-primary">Add New Monitor</router-link>
                 </div>
@@ -31,7 +31,7 @@
 
                 </div>
             </div>
-            <div class="col-12 col-xl-8">
+            <div class="col-12 col-md-7 col-xl-8">
                 <router-view />
             </div>
         </div>

src/pages/Details.vue

@@ -5,14 +5,11 @@
     <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>
-        <router-link :to=" '/edit/' + monitor.id " class="btn btn-light">Edit</router-link>
+        <router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary">Edit</router-link>
         <button class="btn btn-danger" @click="deleteDialog">Delete</button>
     </div>
 
     <div class="shadow-box">
-
-
-
         <div class="row">
             <div class="col-md-8">
                 <HeartbeatBar :monitor-id="monitor.id" />
@@ -24,6 +21,54 @@
         </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"></span>
+            </div>
+            <div class="col">
+                <h4>Uptime</h4>
+                <p>(30-day)</p>
+                <span class="num"></span>
+            </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>
+
     <Confirm ref="confirmPause" @yes="pauseMonitor">
         Are you sure want to pause?
     </Confirm>
@@ -38,11 +83,17 @@ 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";
 
 export default {
     components: {
+        CountUp,
+        Datetime,
         HeartbeatBar,
-        Confirm
+        Confirm,
+        Status,
     },
     mounted() {
 
@@ -53,6 +104,15 @@ export default {
         }
     },
     computed: {
+
+        pingTitle() {
+            if (this.monitor.type === "http") {
+                return "Response"
+            } else {
+                return "Ping"
+            }
+        },
+
         monitor() {
             let id = this.$route.params.id
             return this.$root.monitorList[id];
@@ -66,34 +126,65 @@ export default {
             }
         },
 
+        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 [];
+            }
+        },
+
         status() {
             if (this.$root.statusList[this.monitor.id]) {
                 return this.$root.statusList[this.monitor.id]
             } else {
-                return {
-
-                }
+                return { }
             }
         }
 
     },
     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) {
@@ -104,6 +195,7 @@ export default {
                 }
             })
         }
+
     }
 }
 </script>
@@ -136,4 +228,18 @@ export default {
     color: #AAA;
     font-size: 14px;
 }
+
+table {
+    font-size: 14px;
+
+    tr {
+        --bs-table-accent-bg: white;
+        transition: all ease-in-out 0.2ms;
+    }
+}
+
+.stats p {
+    font-size: 13px;
+    color: #AAA;
+}
 </style>