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>

src/components/PublicGroupList.vue

@@ -71,7 +71,7 @@
                                         </div>
                                     </div>
                                     <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
-                                        <HeartbeatBar size="small" :monitor-id="monitor.element.id" />
+                                        <HeartbeatBar size="mid" :monitor-id="monitor.element.id" />
                                     </div>
                                 </div>
                             </div>

src/components/settings/Appearance.vue

@@ -112,6 +112,53 @@
                 </div>
             </div>
         </div>
+
+        <!-- Timeline -->
+        <div class="my-4">
+            <label class="form-label">{{ $t("styleElapsedTime") }}</label>
+            <div>
+                <div class="btn-group" role="group">
+                    <input
+                        id="styleElapsedTimeShowNoLine"
+                        v-model="$root.styleElapsedTime"
+                        type="radio"
+                        class="btn-check"
+                        name="styleElapsedTime"
+                        autocomplete="off"
+                        value="no-line"
+                    />
+                    <label class="btn btn-outline-primary" for="styleElapsedTimeShowNoLine">
+                        {{ $t("styleElapsedTimeShowNoLine") }}
+                    </label>
+
+                    <input
+                        id="styleElapsedTimeShowWithLine"
+                        v-model="$root.styleElapsedTime"
+                        type="radio"
+                        class="btn-check"
+                        name="styleElapsedTime"
+                        autocomplete="off"
+                        value="with-line"
+                    />
+                    <label class="btn btn-outline-primary" for="styleElapsedTimeShowWithLine">
+                        {{ $t("styleElapsedTimeShowWithLine") }}
+                    </label>
+
+                    <input
+                        id="styleElapsedTimeNone"
+                        v-model="$root.styleElapsedTime"
+                        type="radio"
+                        class="btn-check"
+                        name="styleElapsedTime"
+                        autocomplete="off"
+                        value="none"
+                    />
+                    <label class="btn btn-outline-primary" for="styleElapsedTimeNone">
+                        {{ $t("None") }}
+                    </label>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 

src/lang/en.json

@@ -87,6 +87,9 @@
     "Dark": "Dark",
     "Auto": "Auto",
     "Theme - Heartbeat Bar": "Theme - Heartbeat Bar",
+    "styleElapsedTime": "Elapsed time under the heartbeat bar",
+    "styleElapsedTimeShowNoLine": "Show (No Line)",
+    "styleElapsedTimeShowWithLine": "Show (With Line)",
     "Normal": "Normal",
     "Bottom": "Bottom",
     "None": "None",

src/mixins/theme.js

@@ -5,6 +5,7 @@ export default {
             system: (window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light",
             userTheme: localStorage.theme,
             userHeartbeatBar: localStorage.heartbeatBarTheme,
+            styleElapsedTime: localStorage.styleElapsedTime,
             statusPageTheme: "light",
             forceStatusPageTheme: false,
             path: "",
@@ -22,6 +23,11 @@ export default {
             this.userHeartbeatBar = "normal";
         }
 
+        // Default Elapsed Time Style
+        if (!this.styleElapsedTime) {
+            this.styleElapsedTime = "no-line";
+        }
+
         document.body.classList.add(this.theme);
         this.updateThemeColorMeta();
     },
@@ -68,6 +74,10 @@ export default {
             localStorage.theme = to;
         },
 
+        styleElapsedTime(to, from) {
+            localStorage.styleElapsedTime = to;
+        },
+
         theme(to, from) {
             document.body.classList.remove(from);
             document.body.classList.add(this.theme);