Feat: Show elapsed time in HeartbeatBar (#3219)

* Feat: Show elapsed time in HeartbeatBar

* Chore: Fix lint

* Feat: Fix calculation & improve efficiency

* Fix: Fix getting tolerance in statusPage

* Chore: Improve comments & apply suggestions

* Optional elapsed time

---------

Co-authored-by: Louis Lam <louislam@users.noreply.github.com>

src/components/HeartbeatBar.vue

@@ -5,15 +5,24 @@
                 v-for="(beat, index) in shortBeatList"
                 :key="index"
                 class="beat"
-                :class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2), 'maintenance' : (beat.status === 3) }"
+                :class="{ 'empty': (beat === 0), 'down': (beat.status === 0), 'pending': (beat.status === 2), 'maintenance': (beat.status === 3) }"
                 :style="beatStyle"
                 :title="getBeatTitle(beat)"
             />
         </div>
+        <div
+            v-if="size !== 'small' && beatList.length > 4 && $root.styleElapsedTime !== 'none'"
+            class="d-flex justify-content-between align-items-center word" :style="timeStyle"
+        >
+            <div>{{ timeSinceFirstBeat }} ago</div>
+            <div v-if="$root.styleElapsedTime === 'with-line'" class="connecting-line"></div>
+            <div>{{ timeSinceLastBeat }}</div>
+        </div>
     </div>
 </template>
 
 <script>
+import dayjs from "dayjs";
 
 export default {
     props: {
@@ -56,8 +65,30 @@ export default {
             }
         },
 
+        /**
+         * Calculates the amount of beats of padding needed to fill the length of shortBeatList.
+         *
+         * @return {number} The amount of beats of padding needed to fill the length of shortBeatList.
+         */
+        numPadding() {
+            if (!this.beatList) {
+                return 0;
+            }
+            let num = this.beatList.length - this.maxBeat;
+
+            if (this.move) {
+                num = num - 1;
+            }
+
+            if (num > 0) {
+                return 0;
+            }
+
+            return -1 * num;
+        },
+
         shortBeatList() {
-            if (! this.beatList) {
+            if (!this.beatList) {
                 return [];
             }
 
@@ -115,6 +146,53 @@ export default {
             };
         },
 
+        /**
+         * Returns the style object for positioning the time element.
+         * @return {Object} The style object containing the CSS properties for positioning the time element.
+         */
+        timeStyle() {
+            return {
+                "margin-left": this.numPadding * (this.beatWidth + this.beatMargin * 2) + "px",
+            };
+        },
+
+        /**
+         * Calculates the time elapsed since the first valid beat.
+         *
+         * @return {string} The time elapsed in minutes or hours.
+         */
+        timeSinceFirstBeat() {
+            const firstValidBeat = this.shortBeatList.at(this.numPadding);
+            const minutes = dayjs().diff(dayjs.utc(firstValidBeat?.time), "minutes");
+            if (minutes > 60) {
+                return (minutes / 60).toFixed(0) + "h";
+            } else {
+                return minutes + "m";
+            }
+        },
+
+        /**
+         * Calculates the elapsed time since the last valid beat was registered.
+         *
+         * @return {string} The elapsed time in a minutes, hours or "now".
+         */
+        timeSinceLastBeat() {
+            const lastValidBeat = this.shortBeatList.at(-1);
+            const seconds = dayjs().diff(dayjs.utc(lastValidBeat?.time), "seconds");
+
+            let tolerance = 60 * 2; // default for when monitorList not available
+            if (this.$root.monitorList[this.monitorId] != null) {
+                tolerance = this.$root.monitorList[this.monitorId].interval * 2;
+            }
+
+            if (seconds < tolerance) {
+                return "now";
+            } else if (seconds < 60 * 60) {
+                return (seconds / 60).toFixed(0) + "m ago";
+            } else {
+                return (seconds / 60 / 60).toFixed(0) + "h ago";
+            }
+        }
     },
     watch: {
         beatList: {
@@ -133,14 +211,14 @@ export default {
     },
     beforeMount() {
         if (this.heartbeatList === null) {
-            if (! (this.monitorId in this.$root.heartbeatList)) {
+            if (!(this.monitorId in this.$root.heartbeatList)) {
                 this.$root.heartbeatList[this.monitorId] = [];
             }
         }
     },
 
     mounted() {
-        if (this.size === "small") {
+        if (this.size !== "big") {
             this.beatWidth = 5;
             this.beatHeight = 16;
             this.beatMargin = 2;
@@ -151,11 +229,11 @@ export default {
         const actualWidth = this.beatWidth * window.devicePixelRatio;
         const actualMargin = this.beatMargin * window.devicePixelRatio;
 
-        if (! Number.isInteger(actualWidth)) {
+        if (!Number.isInteger(actualWidth)) {
             this.beatWidth = Math.round(actualWidth) / window.devicePixelRatio;
         }
 
-        if (! Number.isInteger(actualMargin)) {
+        if (!Number.isInteger(actualMargin)) {
             this.beatMargin = Math.round(actualMargin) / window.devicePixelRatio;
         }
 
@@ -229,4 +307,21 @@ export default {
     }
 }
 
+.word {
+    color: #aaa;
+    font-size: 12px;
+}
+
+.connecting-line {
+    flex-grow: 1;
+    height: 1px;
+    background-color: #ededed;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-top: 2px;
+
+    .dark & {
+        background-color: #333;
+    }
+}
 </style>