feat(app): #5120 Upcoming heartbeat timer

This commit is contained in:
mohit-nagaraj 2024-10-12 00:54:37 +05:30
parent dda40610c7
commit f010d7f874
No known key found for this signature in database

View file

@ -76,7 +76,7 @@
<div class="row">
<div class="col-md-8">
<HeartbeatBar :monitor-id="monitor.id" />
<span class="word">{{ $t("checkEverySecond", [ monitor.interval ]) }}</span>
<div><span v-if="monitor.active" class="mr-2">Next in {{ formattedTime }}&nbsp;</span><span class="word">({{ $t("checkEverySecond", [ monitor.interval ]) }})</span></div>
</div>
<div class="col-md-4 text-center">
<span class="badge rounded-pill" :class=" 'bg-' + status.color " style="font-size: 30px;" data-testid="monitor-status">{{ status.text }}</span>
@ -293,6 +293,7 @@ import "prismjs/components/prism-css";
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css";
import ScreenshotDialog from "../components/ScreenshotDialog.vue";
import dayjs from "dayjs";
export default {
components: {
@ -313,6 +314,7 @@ export default {
return {
page: 1,
perPage: 25,
timeRemaining: 0,
heartBeatList: [],
toggleCertInfoBox: false,
showPingChartBox: true,
@ -340,6 +342,8 @@ export default {
// Also trigger screenshot refresh here
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
this.cacheTime = Date.now();
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
this.timeRemaining = this.monitor.interval;
if (this.monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[this.monitor.id]) {
return this.$root.lastHeartbeatList[this.monitor.id];
@ -399,7 +403,13 @@ export default {
screenshotURL() {
return getResBaseURL() + this.monitor.screenshot + "?time=" + this.cacheTime;
}
},
formattedTime() {
const minutes = Math.floor(this.timeRemaining / 60);
const seconds = this.timeRemaining % 60;
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
},
},
watch: {
@ -419,7 +429,14 @@ export default {
this.loadPushExample();
},
},
created() {
if (this.lastHeartBeat.end_time) {
const lastpingtime = dayjs().utc().diff(dayjs.utc(this.lastHeartBeat.end_time), "seconds")
this.timeRemaining = this.monitor.interval - lastpingtime;
} else {
this.timeRemaining = this.monitor.interval;
}
},
mounted() {
this.getImportantHeartbeatListLength();
@ -431,10 +448,17 @@ export default {
}
this.loadPushExample();
}
this.interval = setInterval(() => {
if (this.timeRemaining > 1) {
this.timeRemaining--;
}
}, 1000);
},
beforeUnmount() {
this.$root.emitter.off("newImportantHeartbeat", this.onNewImportantHeartbeat);
clearInterval(this.interval);
},
methods: {
@ -464,6 +488,7 @@ export default {
this.$root.getSocket().emit("resumeMonitor", this.monitor.id, (res) => {
this.$root.toastRes(res);
});
this.timeRemaining = this.monitor.interval;
},
/**