reset the heartbeat list instead of reload the page after cleared events or heartbeats

server/client.js

@@ -0,0 +1,91 @@
+/*
+ * For Client Socket
+ */
+const { TimeLogger } = require("../src/util");
+const { R } = require("redbean-node");
+const { io } = require("./server");
+
+async function sendNotificationList(socket) {
+    const timeLogger = new TimeLogger();
+
+    let result = [];
+    let list = await R.find("notification", " user_id = ? ", [
+        socket.userID,
+    ]);
+
+    for (let bean of list) {
+        result.push(bean.export())
+    }
+
+    io.to(socket.userID).emit("notificationList", result)
+
+    timeLogger.print("Send Notification List");
+
+    return list;
+}
+
+/**
+ * Send Heartbeat History list to socket
+ * @param toUser  True = send to all browsers with the same user id, False = send to the current browser only
+ * @param overwrite Overwrite client-side's heartbeat list
+ */
+async function sendHeartbeatList(socket, monitorID, toUser = false, overwrite = false) {
+    const timeLogger = new TimeLogger();
+
+    let list = await R.find("heartbeat", `
+        monitor_id = ?
+        ORDER BY time DESC
+        LIMIT 100
+    `, [
+        monitorID,
+    ])
+
+    let result = [];
+
+    for (let bean of list) {
+        result.unshift(bean.toJSON());
+    }
+
+    if (toUser) {
+        io.to(socket.userID).emit("heartbeatList", monitorID, result, overwrite);
+    } else {
+        socket.emit("heartbeatList", monitorID, result, overwrite);
+    }
+
+    timeLogger.print(`[Monitor: ${monitorID}] sendHeartbeatList`);
+}
+
+/**
+ *  Important Heart beat list (aka event list)
+ * @param socket
+ * @param monitorID
+ * @param toUser  True = send to all browsers with the same user id, False = send to the current browser only
+ * @param overwrite Overwrite client-side's heartbeat list
+ */
+async function sendImportantHeartbeatList(socket, monitorID, toUser = false, overwrite = false) {
+    const timeLogger = new TimeLogger();
+
+    let list = await R.find("heartbeat", `
+        monitor_id = ?
+        AND important = 1
+        ORDER BY time DESC
+        LIMIT 500
+    `, [
+        monitorID,
+    ])
+
+    timeLogger.print(`[Monitor: ${monitorID}] sendImportantHeartbeatList`);
+
+    if (toUser) {
+        io.to(socket.userID).emit("importantHeartbeatList", monitorID, list, overwrite);
+    } else {
+        socket.emit("importantHeartbeatList", monitorID, list, overwrite);
+    }
+
+}
+
+module.exports = {
+    sendNotificationList,
+    sendImportantHeartbeatList,
+    sendHeartbeatList,
+}

server/server.js

@@ -82,7 +82,12 @@ if (sslKey && sslCert) {
 }
 
 const io = new Server(server);
-app.use(express.json())
+module.exports.io = io;
+
+// Must be after io instantiation
+const { sendNotificationList, sendHeartbeatList, sendImportantHeartbeatList } = require("./client");
+
+app.use(express.json());
 
 /**
  * Total WebSocket client connected to server currently, no actual use
@@ -597,6 +602,8 @@ let indexHTML = fs.readFileSync("./dist/index.html").toString();
                     monitorID,
                 ]);
 
+                await sendImportantHeartbeatList(socket, monitorID, true, true);
+
                 callback({
                     ok: true,
                 });
@@ -619,6 +626,8 @@ let indexHTML = fs.readFileSync("./dist/index.html").toString();
                     monitorID
                 ]);
 
+                await sendHeartbeatList(socket, monitorID, true, true);
+
                 callback({
                     ok: true,
                 });
@@ -719,25 +728,6 @@ async function sendMonitorList(socket) {
     return list;
 }
 
-async function sendNotificationList(socket) {
-    const timeLogger = new TimeLogger();
-
-    let result = [];
-    let list = await R.find("notification", " user_id = ? ", [
-        socket.userID,
-    ]);
-
-    for (let bean of list) {
-        result.push(bean.export())
-    }
-
-    io.to(socket.userID).emit("notificationList", result)
-
-    timeLogger.print("Send Notification List");
-
-    return list;
-}
-
 async function afterLogin(socket, user) {
     socket.userID = user.id;
     socket.join(user.id)
@@ -872,48 +862,6 @@ async function startMonitors() {
     }
 }
 
-/**
- * Send Heartbeat History list to socket
- */
-async function sendHeartbeatList(socket, monitorID) {
-    const timeLogger = new TimeLogger();
-
-    let list = await R.find("heartbeat", `
-        monitor_id = ?
-        ORDER BY time DESC
-        LIMIT 100
-    `, [
-        monitorID,
-    ])
-
-    let result = [];
-
-    for (let bean of list) {
-        result.unshift(bean.toJSON())
-    }
-
-    socket.emit("heartbeatList", monitorID, result)
-
-    timeLogger.print(`[Monitor: ${monitorID}] sendHeartbeatList`)
-}
-
-async function sendImportantHeartbeatList(socket, monitorID) {
-    const timeLogger = new TimeLogger();
-
-    let list = await R.find("heartbeat", `
-        monitor_id = ?
-        AND important = 1
-        ORDER BY time DESC
-        LIMIT 500
-    `, [
-        monitorID,
-    ])
-
-    timeLogger.print(`[Monitor: ${monitorID}] sendImportantHeartbeatList`);
-
-    socket.emit("importantHeartbeatList", monitorID, list)
-}
-
 async function shutdownFunction(signal) {
     console.log("Shutdown requested");
     console.log("Called signal: " + signal);

src/mixins/socket.js

@@ -107,8 +107,8 @@ export default {
             }
         });
 
-        socket.on("heartbeatList", (monitorID, data) => {
+        socket.on("heartbeatList", (monitorID, data, overwrite = false) => {
-            if (! (monitorID in this.heartbeatList)) {
+            if (! (monitorID in this.heartbeatList) || overwrite) {
                 this.heartbeatList[monitorID] = data;
             } else {
                 this.heartbeatList[monitorID] = data.concat(this.heartbeatList[monitorID])
@@ -127,8 +127,8 @@ export default {
             this.certInfoList[monitorID] = JSON.parse(data)
         });
 
-        socket.on("importantHeartbeatList", (monitorID, data) => {
+        socket.on("importantHeartbeatList", (monitorID, data, overwrite) => {
-            if (! (monitorID in this.importantHeartbeatList)) {
+            if (! (monitorID in this.importantHeartbeatList) || overwrite) {
                 this.importantHeartbeatList[monitorID] = data;
             } else {
                 this.importantHeartbeatList[monitorID] = data.concat(this.importantHeartbeatList[monitorID])

src/pages/Details.vue

@@ -276,6 +276,7 @@ export default {
 
         importantHeartBeatList() {
             if (this.$root.importantHeartbeatList[this.monitor.id]) {
+                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                 this.heartBeatList = this.$root.importantHeartbeatList[this.monitor.id];
                 return this.$root.importantHeartbeatList[this.monitor.id]
             }
@@ -359,9 +360,7 @@ export default {
 
         clearEvents() {
             this.$root.clearEvents(this.monitor.id, (res) => {
-                if (res.ok) {
+                if (! res.ok) {
-                    this.$router.go();
-                } else {
                     toast.error(res.msg);
                 }
             })
@@ -369,9 +368,7 @@ export default {
 
         clearHeartbeats() {
             this.$root.clearHeartbeats(this.monitor.id, (res) => {
-                if (res.ok) {
+                if (! res.ok) {
-                    this.$router.go();
-                } else {
                     toast.error(res.msg);
                 }
             })
@@ -495,7 +492,7 @@ table {
             border-color: $dark-bg2;
             border-width: 2px;
 
-            li button{
+            li button {
                 color: $dark-font-color;
             }