Added the possibility to clear monitor data

server/server.js

@@ -552,6 +552,54 @@ let indexHTML = fs.readFileSync("./dist/index.html").toString();
             }
         });
 
+        socket.on("clearEvents", async (monitorID, callback) => {
+            try {
+                checkLogin(socket)
+
+                console.log(`Clear Events Monitor: ${monitorID} User ID: ${socket.userID}`)
+
+                await R.exec("UPDATE heartbeat SET msg = ?, important = ? WHERE monitor_id = ? ", [
+                    "",
+                    "0",
+                    monitorID,
+                ]);
+
+                callback({
+                    ok: true,
+                    msg: "Events Successfully Cleared.",
+                });
+
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message,
+                });
+            }
+        });
+
+        socket.on("clearHeartbeats", async (monitorID, callback) => {
+            try {
+                checkLogin(socket)
+
+                console.log(`Clear Heartbeats Monitor: ${monitorID} User ID: ${socket.userID}`)
+
+                await R.exec("DELETE FROM heartbeat WHERE monitor_id = ?", [
+                    monitorID
+                ]);
+
+                callback({
+                    ok: true,
+                    msg: "Heartbeats Successfully Cleared.",
+                });
+
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message,
+                });
+            }
+        });
+
         debug("added all socket handlers")
 
         // ***************************

src/assets/vars.scss

@@ -16,3 +16,5 @@ $dark-border-color: #1d2634;
 $easing-in: cubic-bezier(0.54, 0.78, 0.55, 0.97);
 $easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 $easing-in-out: cubic-bezier(0.79, 0.14, 0.15, 0.86);
+
+$dropdown-border-radius: 0.5rem;

src/languages/de-DE.js

@@ -104,4 +104,9 @@ export default {
     rrtypeDescription: "Wähle den RR-Typ aus, welchen du überwachen möchtest.",
     "Last Result": "Letztes Ergebnis",
     pauseMonitorMsg: "Bist du sicher das du den Monitor pausieren möchtest?",
+    clearEventsMsg: "Bist du sicher das du alle Ereignisse löschen möchtest?",
+    clearHeartbeatsMsg: "Bist du sicher das du alle Statistiken löschen möchtest?",
+    "Clear Data": "Lösche Daten",
+    "Events": "Ereignisse",
+    "Heartbeats": "Statistiken",
 }

src/languages/en.js

@@ -16,4 +16,6 @@ export default {
     resoverserverDescription: "Cloudflare is the default server, you can change the resolver server anytime.",
     rrtypeDescription: "Select the RR-Type you want to monitor",
     pauseMonitorMsg: "Are you sure want to pause?",
+    clearEventsMsg: "Are you sure want to delete all events?",
+    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats?",
 }

src/mixins/socket.js

@@ -254,6 +254,13 @@ export default {
             this.importantHeartbeatList = {}
         },
 
+        clearEvents(monitorID, callback) {
+            socket.emit("clearEvents", monitorID, callback)
+        },
+
+        clearHeartbeats(monitorID, callback) {
+            socket.emit("clearHeartbeats", monitorID, callback)
+        },
     },
 
     computed: {

src/pages/Details.vue

@@ -133,6 +133,23 @@
             </div>
 
             <div class="shadow-box table-shadow-box">
+                <div class="dropdown dropdown-clear-data">
+                    <button class="btn btn-sm btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown">
+                        <font-awesome-icon icon="trash" /> {{ $t("Clear Data") }}
+                    </button>
+                    <ul class="dropdown-menu dropdown-menu-end">
+                        <li>
+                            <button type="button" class="dropdown-item" @click="clearEventsDialog">
+                                {{ $t("Events") }}
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" @click="clearHeartbeatsDialog">
+                                {{ $t("Heartbeats") }}
+                            </button>
+                        </li>
+                    </ul>
+                </div>
                 <table class="table table-borderless table-hover">
                     <thead>
                         <tr>
@@ -172,6 +189,14 @@
             <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteMonitor">
                 {{ $t("deleteMonitorMsg") }}
             </Confirm>
+
+            <Confirm ref="confirmClearEvents" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="clearEvents">
+                {{ $t("clearEventsMsg") }}
+            </Confirm>
+
+            <Confirm ref="confirmClearHeartbeats" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="clearHeartbeats">
+                {{ $t("clearHeartbeatsMsg") }}
+            </Confirm>
         </div>
     </transition>
 </template>
@@ -313,6 +338,14 @@ export default {
             this.$refs.confirmDelete.show();
         },
 
+        clearEventsDialog() {
+            this.$refs.confirmClearEvents.show();
+        },
+
+        clearHeartbeatsDialog() {
+            this.$refs.confirmClearHeartbeats.show();
+        },
+
         deleteMonitor() {
             this.$root.deleteMonitor(this.monitor.id, (res) => {
                 if (res.ok) {
@@ -324,6 +357,27 @@ export default {
             })
         },
 
+        clearEvents() {
+            this.$root.clearEvents(this.monitor.id, (res) => {
+                if (res.ok) {
+                    toast.success(res.msg);
+                    this.$router.go();
+                } else {
+                    toast.error(res.msg);
+                }
+            })
+        },
+
+        clearHeartbeats() {
+            this.$root.clearHeartbeats(this.monitor.id, (res) => {
+                if (res.ok) {
+                    toast.success(res.msg);
+                    this.$router.go();
+                } else {
+                    toast.error(res.msg);
+                }
+            })
+        },
     },
 }
 </script>
@@ -340,16 +394,20 @@ export default {
 @media (max-width: 550px) {
     .functions {
         text-align: center;
-    }
 
-    button, a {
+        button, a {
-        margin-left: 10px !important;
+            margin-left: 10px !important;
-        margin-right: 10px !important;
+            margin-right: 10px !important;
+        }
     }
 
     .ping-chart-wrapper {
         padding: 10px !important;
     }
+
+    .dropdown-clear-data {
+        margin-bottom: 10px;
+    }
 }
 
 @media (max-width: 400px) {
@@ -364,6 +422,13 @@ export default {
         padding-left: 25px;
         padding-right: 25px;
     }
+
+    .dropdown-clear-data {
+        button {
+            display: block;
+            padding-top: 4px;
+        }
+    }
 }
 
 .url {
@@ -417,9 +482,29 @@ table {
     color: black;
 }
 
+.dropdown-clear-data {
+    float: right;
+}
+
 .dark {
     .keyword {
         color: $dark-font-color;
     }
+
+    .dropdown-clear-data {
+        ul {
+            background-color: $dark-bg;
+            border-color: $dark-bg2;
+            border-width: 2px;
+
+            li button{
+                color: $dark-font-color;
+            }
+
+            li button:hover {
+                background-color: $dark-bg2;
+            }
+        }
+    }
 }
 </style>