Added the possibility to clear monitor data

This commit is contained in:
Ponkhy 2021-08-29 18:47:01 +02:00
parent 78b7e36a38
commit 1952e34110
6 changed files with 153 additions and 4 deletions

View File

@ -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") debug("added all socket handlers")
// *************************** // ***************************

View File

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

View File

@ -104,4 +104,9 @@ export default {
rrtypeDescription: "Wähle den RR-Typ aus, welchen du überwachen möchtest.", rrtypeDescription: "Wähle den RR-Typ aus, welchen du überwachen möchtest.",
"Last Result": "Letztes Ergebnis", "Last Result": "Letztes Ergebnis",
pauseMonitorMsg: "Bist du sicher das du den Monitor pausieren möchtest?", 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",
} }

View File

@ -16,4 +16,6 @@ export default {
resoverserverDescription: "Cloudflare is the default server, you can change the resolver server anytime.", resoverserverDescription: "Cloudflare is the default server, you can change the resolver server anytime.",
rrtypeDescription: "Select the RR-Type you want to monitor", rrtypeDescription: "Select the RR-Type you want to monitor",
pauseMonitorMsg: "Are you sure want to pause?", 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?",
} }

View File

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

View File

@ -133,6 +133,23 @@
</div> </div>
<div class="shadow-box table-shadow-box"> <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"> <table class="table table-borderless table-hover">
<thead> <thead>
<tr> <tr>
@ -172,6 +189,14 @@
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteMonitor"> <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteMonitor">
{{ $t("deleteMonitorMsg") }} {{ $t("deleteMonitorMsg") }}
</Confirm> </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> </div>
</transition> </transition>
</template> </template>
@ -313,6 +338,14 @@ export default {
this.$refs.confirmDelete.show(); this.$refs.confirmDelete.show();
}, },
clearEventsDialog() {
this.$refs.confirmClearEvents.show();
},
clearHeartbeatsDialog() {
this.$refs.confirmClearHeartbeats.show();
},
deleteMonitor() { deleteMonitor() {
this.$root.deleteMonitor(this.monitor.id, (res) => { this.$root.deleteMonitor(this.monitor.id, (res) => {
if (res.ok) { 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> </script>
@ -340,16 +394,20 @@ export default {
@media (max-width: 550px) { @media (max-width: 550px) {
.functions { .functions {
text-align: center; 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 { .ping-chart-wrapper {
padding: 10px !important; padding: 10px !important;
} }
.dropdown-clear-data {
margin-bottom: 10px;
}
} }
@media (max-width: 400px) { @media (max-width: 400px) {
@ -364,6 +422,13 @@ export default {
padding-left: 25px; padding-left: 25px;
padding-right: 25px; padding-right: 25px;
} }
.dropdown-clear-data {
button {
display: block;
padding-top: 4px;
}
}
} }
.url { .url {
@ -417,9 +482,29 @@ table {
color: black; color: black;
} }
.dropdown-clear-data {
float: right;
}
.dark { .dark {
.keyword { .keyword {
color: $dark-font-color; 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> </style>