server/monitor-types/rabbitmq.js

@@ -33,6 +33,7 @@ class RabbitMqMonitorType extends MonitorType {
                         "Accept": "application/json",
                         "Authorization": "Basic " + Buffer.from(`${monitor.rabbitmqUsername || ""}:${monitor.rabbitmqPassword || ""}`).toString("base64"),
                     },
+                    // Use axios signal to handle connection timeouts https://stackoverflow.com/a/74739938
                     signal: axiosAbortSignal((monitor.timeout + 10) * 1000),
                     // Capture reason for 503 status
                     validateStatus: (status) => status === 200 || status === 503,

src/components/HeartbeatBar.vue

@@ -4,17 +4,11 @@
             <div
                 v-for="(beat, index) in shortBeatList"
                 :key="index"
-                class="beat-hover-area"
-                :class="{ 'empty': (beat === 0) }"
-                :style="beatHoverAreaStyle"
+                class="beat"
+                :class="{ 'empty': (beat === 0), 'down': (beat.status === 0), 'pending': (beat.status === 2), 'maintenance': (beat.status === 3) }"
+                :style="beatStyle"
                 :title="getBeatTitle(beat)"
-            >
-                <div
-                    class="beat"
-                    :class="{ 'empty': (beat === 0), 'down': (beat.status === 0), 'pending': (beat.status === 2), 'maintenance': (beat.status === 3) }"
-                    :style="beatStyle"
-                />
-            </div>
+            />
         </div>
         <div
             v-if="!$root.isMobile && size !== 'small' && beatList.length > 4 && $root.styleElapsedTime !== 'none'"
@@ -53,7 +47,7 @@ export default {
             beatWidth: 10,
             beatHeight: 30,
             hoverScale: 1.5,
-            beatHoverAreaPadding: 4,
+            beatMargin: 4,
             move: false,
             maxBeat: -1,
         };
@@ -129,7 +123,7 @@ export default {
 
         barStyle() {
             if (this.move && this.shortBeatList.length > this.maxBeat) {
-                let width = -(this.beatWidth + this.beatHoverAreaPadding * 2);
+                let width = -(this.beatWidth + this.beatMargin * 2);
 
                 return {
                     transition: "all ease-in-out 0.25s",
@@ -143,17 +137,12 @@ export default {
 
         },
 
-        beatHoverAreaStyle() {
-            return {
-                padding: this.beatHoverAreaPadding + "px",
-                "--hover-scale": this.hoverScale,
-            };
-        },
-
         beatStyle() {
             return {
                 width: this.beatWidth + "px",
                 height: this.beatHeight + "px",
+                margin: this.beatMargin + "px",
+                "--hover-scale": this.hoverScale,
             };
         },
 
@@ -163,7 +152,7 @@ export default {
          */
         timeStyle() {
             return {
-                "margin-left": this.numPadding * (this.beatWidth + this.beatHoverAreaPadding * 2) + "px",
+                "margin-left": this.numPadding * (this.beatWidth + this.beatMargin * 2) + "px",
             };
         },
 
@@ -230,20 +219,20 @@ export default {
         if (this.size !== "big") {
             this.beatWidth = 5;
             this.beatHeight = 16;
-            this.beatHoverAreaPadding = 2;
+            this.beatMargin = 2;
         }
 
         // Suddenly, have an idea how to handle it universally.
         // If the pixel * ratio != Integer, then it causes render issue, round it to solve it!!
         const actualWidth = this.beatWidth * window.devicePixelRatio;
-        const actualHoverAreaPadding = this.beatHoverAreaPadding * window.devicePixelRatio;
+        const actualMargin = this.beatMargin * window.devicePixelRatio;
 
         if (!Number.isInteger(actualWidth)) {
             this.beatWidth = Math.round(actualWidth) / window.devicePixelRatio;
         }
 
-        if (!Number.isInteger(actualHoverAreaPadding)) {
-            this.beatHoverAreaPadding = Math.round(actualHoverAreaPadding) / window.devicePixelRatio;
+        if (!Number.isInteger(actualMargin)) {
+            this.beatMargin = Math.round(actualMargin) / window.devicePixelRatio;
         }
 
         window.addEventListener("resize", this.resize);
@@ -256,7 +245,7 @@ export default {
          */
         resize() {
             if (this.$refs.wrap) {
-                this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatHoverAreaPadding * 2));
+                this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2));
             }
         },
 
@@ -284,41 +273,32 @@ export default {
 }
 
 .hp-bar-big {
-    .beat-hover-area {
+    .beat {
         display: inline-block;
+        background-color: $primary;
+        border-radius: $border-radius;
+
+        &.empty {
+            background-color: aliceblue;
+        }
+
+        &.down {
+            background-color: $danger;
+        }
+
+        &.pending {
+            background-color: $warning;
+        }
+
+        &.maintenance {
+            background-color: $maintenance;
+        }
 
         &:not(.empty):hover {
             transition: all ease-in-out 0.15s;
             opacity: 0.8;
             transform: scale(var(--hover-scale));
         }
-
-        .beat {
-            background-color: $primary;
-            border-radius: $border-radius;
-
-            /*
-            pointer-events needs to be changed because
-            tooltip momentarily disappears when crossing between .beat-hover-area and .beat
-            */
-            pointer-events: none;
-
-            &.empty {
-                background-color: aliceblue;
-            }
-
-            &.down {
-                background-color: $danger;
-            }
-
-            &.pending {
-                background-color: $warning;
-            }
-
-            &.maintenance {
-                background-color: $maintenance;
-            }
-        }
     }
 }
 

src/lang/en.json

@@ -1055,10 +1055,10 @@
     "RabbitMQ Nodes": "RabbitMQ Management Nodes",
     "rabbitmqNodesDescription": "Enter the URL for the RabbitMQ management nodes including protocol and port. Example: {0}",
     "rabbitmqNodesRequired": "Please set the nodes for this monitor.",
-    "rabbitmqNodesInvalid": "Please use a fully qualified (starting with 'http') URL for RabbitMQ nodes.",
+    "rabbitmqNodesInvalid": "Please use a complete URL for RabbitMQ nodes.",
     "RabbitMQ Username": "RabbitMQ Username",
     "RabbitMQ Password": "RabbitMQ Password",
-    "rabbitmqHelpText": "To use the monitor, you will need to enable the Management Plugin in your RabbitMQ setup. For more information, please consult the {rabitmq_documentation}.",
+    "RabbitMQ (using Management Plugin)": "RabbitMQ (using Management Plugin)",
     "SendGrid API Key": "SendGrid API Key",
     "Separate multiple email addresses with commas": "Separate multiple email addresses with commas"
 }

src/pages/EditMonitor.vue

@@ -65,7 +65,7 @@
                                             MQTT
                                         </option>
                                         <option value="rabbitmq">
-                                            RabbitMQ
+                                            {{ $t("RabbitMQ (using Management Plugin)") }}
                                         </option>
                                         <option value="kafka-producer">
                                             Kafka Producer
@@ -93,13 +93,6 @@
                                         </option>
                                     </optgroup>
                                 </select>
-                                <i18n-t v-if="monitor.type === 'rabbitmq'" keypath="rabbitmqHelpText" tag="div" class="form-text">
-                                    <template #rabitmq_documentation>
-                                        <a href="https://www.rabbitmq.com/management" target="_blank" rel="noopener noreferrer">
-                                            RabbitMQ documentation
-                                        </a>
-                                    </template>
-                                </i18n-t>
                             </div>
 
                             <div v-if="monitor.type === 'tailscale-ping'" class="alert alert-warning" role="alert">