mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-11-23 14:54:05 +00:00
feat(app): #5120 Upcoming heartbeat timer
This commit is contained in:
parent
dda40610c7
commit
f010d7f874
1 changed files with 28 additions and 3 deletions
|
@ -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 }} </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;
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue