Merge remote-tracking branch 'origin/master' into fix-1448-discord-service-url

server/model/monitor.js

@@ -182,7 +182,7 @@ class Monitor extends BeanModel {
             // undefined if not https
             let tlsInfo = undefined;
 
-            if (!previousBeat) {
+            if (!previousBeat || this.type === "push") {
                 previousBeat = await R.findOne("heartbeat", " monitor_id = ? ORDER BY time DESC", [
                     this.id,
                 ]);
@@ -377,9 +377,6 @@ class Monitor extends BeanModel {
                     log.debug("monitor", "heartbeatCount" + heartbeatCount + " " + time);
 
                     if (heartbeatCount <= 0) {
-                        // Fix #922, since previous heartbeat could be inserted by api, it should get from database
-                        previousBeat = await Monitor.getPreviousHeartbeat(this.id);
-
                         throw new Error("No heartbeat in the time window");
                     } else {
                         // No need to insert successful heartbeat for push type, so end here

src/assets/app.scss

@@ -367,7 +367,7 @@ textarea.form-control {
     .item {
         display: block;
         text-decoration: none;
-        padding: 13px 15px 10px 15px;
+        padding: 15px;
         border-radius: 10px;
         transition: all ease-in-out 0.15s;
 

src/components/HeartbeatBar.vue

@@ -1,6 +1,6 @@
 <template>
     <div ref="wrap" class="wrap" :style="wrapStyle">
-        <div class="hp-bar-big" :style="barStyle">
+        <div class="hp-bar-big d-flex" :style="barStyle">
             <div
                 v-for="(beat, index) in shortBeatList"
                 :key="index"
@@ -8,7 +8,11 @@
                 :class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2) }"
                 :style="beatStyle"
                 :title="getBeatTitle(beat)"
-            />
+                @mouseenter="toggleActivateSibling"
+                @mouseleave="toggleActivateSibling"
+            >
+                <div class="beat-inner" />
+            </div>
         </div>
     </div>
 </template>
@@ -168,6 +172,29 @@ export default {
 
         getBeatTitle(beat) {
             return `${this.$root.datetime(beat.time)}` + ((beat.msg) ? ` - ${beat.msg}` : "");
+        },
+
+        // Toggling the activeSibling class on hover over the current hover item
+        toggleActivateSibling(e) {
+            // Variable definition
+            const element = e.target;
+            const previous = element.previousSibling;
+            const next = element.nextSibling;
+
+            // Return if the hovered element has empty class
+            if (element.classList.contains("empty")) {
+                return;
+            }
+
+            // Check if Previous Sibling is heartbar element and doesn't have the empty class
+            if (previous.children && !previous.classList.contains("empty")) {
+                previous.classList.toggle("active-sibling");
+            }
+
+            // Check if Next Sibling is heartbar element and doesn't have the empty class
+            if (next.children && !next.classList.contains("empty")) {
+                next.classList.toggle("active-sibling");
+            }
         }
     },
 };
@@ -184,9 +211,10 @@ export default {
 
 .hp-bar-big {
     .beat {
-        display: inline-block;
         background-color: $primary;
         border-radius: $border-radius;
+        display: inline-block;
+        transition: all ease 0.6s;
 
         &.empty {
             background-color: aliceblue;
@@ -200,11 +228,23 @@ export default {
             background-color: $warning;
         }
 
+        .beat-inner {
+            border-radius: $border-radius;
+            display: inline-block;
+            height: 100%;
+            width: 5px;
+        }
+
         &:not(.empty):hover {
-            transition: all ease-in-out 0.15s;
+            transition: all ease 0.15s;
             opacity: 0.8;
             transform: scale(var(--hover-scale));
         }
+
+        &.active-sibling {
+            transform: scale(1.15);
+            transition: all ease 0.15s;
+        }
     }
 }
 

src/components/PublicGroupList.vue

@@ -33,19 +33,19 @@
                         <template #item="monitor">
                             <div class="item">
                                 <div class="row">
-                                    <div class="col-9 col-md-8 small-padding">
+                                    <div class="col-9 col-md-8 small-padding d-flex align-items-center flex-wrap">
-                                        <div class="info">
+                                        <div class="info d-flex align-items-center gap-3 w-100">
                                             <font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
                                             <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
 
                                             <Uptime :monitor="monitor.element" type="24" :pill="true" />
                                             {{ monitor.element.name }}
                                         </div>
-                                        <div v-if="showTags" class="tags">
+                                        <div v-if="showTags && monitor.element.tags.length > 0" class="tags">
                                             <Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
                                         </div>
                                     </div>
-                                    <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
+                                    <div :key="$root.userHeartbeatBar" class="col-3 col-md-4 d-flex align-items-center">
                                         <HeartbeatBar size="small" :monitor-id="monitor.element.id" />
                                     </div>
                                 </div>