Merge 6d25d6d772 into a7e9bdd43e

src/components/NextPingTimer.vue

@@ -0,0 +1,54 @@
+<template>
+    <span class="word">&nbsp;({{ $t("nextCheckIn") }}: {{ formattedTime }})</span>
+</template>
+
+<script>
+
+export default {
+    props: {
+        /** Time remaining in seconds */
+        timeRemaining: {
+            type: Number,
+            required: true,
+        },
+    },
+    computed: {
+        /**
+         * Formatted time remaining
+         * @returns {string} Formatted time
+         */
+        formattedTime() {
+            const days = Math.floor(this.timeRemaining / 86400);
+            const hours = Math.floor((this.timeRemaining % 86400) / 3600);
+            const minutes = Math.floor((this.timeRemaining % 3600) / 60);
+            const seconds = this.timeRemaining % 60;
+
+            let formattedTime = "";
+            if (seconds >= 0) {
+                formattedTime = seconds > 1 ? `${seconds}secs` : `${seconds}sec`;
+            }
+            if (minutes > 0) {
+                formattedTime = minutes > 1 ? `~ ${minutes}mins` : `~ ${minutes}min`;
+            }
+            if (hours > 0) {
+                formattedTime = hours > 1 ? `~ ${hours}hrs` : `~ ${hours}hr`;
+            }
+            if (days > 0) {
+                formattedTime = days > 1 ? `~ ${days}days` : `~ ${days}day`;
+            }
+
+            return formattedTime.trim();
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.word {
+    color: $secondary-text;
+    font-size: 12px;
+}
+
+</style>

src/lang/en.json

@@ -1052,6 +1052,7 @@
     "Can be found on:": "Can be found on: {0}",
     "The phone number of the recipient in E.164 format.": "The phone number of the recipient in E.164 format.",
     "Either a text sender ID or a phone number in E.164 format if you want to be able to receive replies.":"Either a text sender ID or a phone number in E.164 format if you want to be able to receive replies.",
+    "nextCheckIn": "Next in ",
     "SendGrid API Key": "SendGrid API Key",
     "Separate multiple email addresses with commas": "Separate multiple email addresses with commas"
 }

src/pages/Details.vue

@@ -76,7 +76,10 @@
                 <div class="row">
                     <div class="col-md-8">
                         <HeartbeatBar :monitor-id="monitor.id" />
+                        <div>
                             <span class="word">{{ $t("checkEverySecond", [ monitor.interval ]) }}</span>
+                            <span class="word"><NextPingTimer :timeRemaining="timeRemaining" /></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>
@@ -275,6 +278,7 @@ import { useToast } from "vue-toastification";
 const toast = useToast();
 import Confirm from "../components/Confirm.vue";
 import HeartbeatBar from "../components/HeartbeatBar.vue";
+import NextPingTimer from "../components/NextPingTimer.vue";
 import Status from "../components/Status.vue";
 import Datetime from "../components/Datetime.vue";
 import CountUp from "../components/CountUp.vue";
@@ -293,6 +297,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: {
@@ -300,6 +305,7 @@ export default {
         CountUp,
         Datetime,
         HeartbeatBar,
+        NextPingTimer,
         Confirm,
         Status,
         Pagination,
@@ -313,6 +319,7 @@ export default {
         return {
             page: 1,
             perPage: 25,
+            timeRemaining: 0,
             heartBeatList: [],
             toggleCertInfoBox: false,
             showPingChartBox: true,
@@ -340,6 +347,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 +408,7 @@ export default {
 
         screenshotURL() {
             return getResBaseURL() + this.monitor.screenshot + "?time=" + this.cacheTime;
-        }
+        },
     },
 
     watch: {
@@ -419,7 +428,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 +447,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 +487,7 @@ export default {
             this.$root.getSocket().emit("resumeMonitor", this.monitor.id, (res) => {
                 this.$root.toastRes(res);
             });
+            this.timeRemaining = this.monitor.interval;
         },
 
         /**