this.maxBeat) {
- let width = -(this.beatWidth + this.beatMargin * 2);
+ let width = -(this.beatWidth + this.beatHoverAreaPadding * 2);
return {
transition: "all ease-in-out 0.25s",
@@ -137,12 +143,17 @@ 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,
};
},
@@ -152,7 +163,7 @@ export default {
*/
timeStyle() {
return {
- "margin-left": this.numPadding * (this.beatWidth + this.beatMargin * 2) + "px",
+ "margin-left": this.numPadding * (this.beatWidth + this.beatHoverAreaPadding * 2) + "px",
};
},
@@ -219,20 +230,20 @@ export default {
if (this.size !== "big") {
this.beatWidth = 5;
this.beatHeight = 16;
- this.beatMargin = 2;
+ this.beatHoverAreaPadding = 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 actualMargin = this.beatMargin * window.devicePixelRatio;
+ const actualHoverAreaPadding = this.beatHoverAreaPadding * window.devicePixelRatio;
if (!Number.isInteger(actualWidth)) {
this.beatWidth = Math.round(actualWidth) / window.devicePixelRatio;
}
- if (!Number.isInteger(actualMargin)) {
- this.beatMargin = Math.round(actualMargin) / window.devicePixelRatio;
+ if (!Number.isInteger(actualHoverAreaPadding)) {
+ this.beatHoverAreaPadding = Math.round(actualHoverAreaPadding) / window.devicePixelRatio;
}
window.addEventListener("resize", this.resize);
@@ -245,7 +256,7 @@ export default {
*/
resize() {
if (this.$refs.wrap) {
- this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2));
+ this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatHoverAreaPadding * 2));
}
},
@@ -273,31 +284,40 @@ export default {
}
.hp-bar-big {
- .beat {
+ .beat-hover-area {
display: inline-block;
- background-color: $primary;
- border-radius: $border-radius;
- &.empty {
- background-color: aliceblue;
+ &:not(.empty):hover {
+ transition: all ease-in-out 0.15s;
+ opacity: 0.8;
+ transform: scale(var(--hover-scale));
}
- &.down {
- background-color: $danger;
- }
+ .beat {
+ background-color: $primary;
+ border-radius: $border-radius;
- &.pending {
- background-color: $warning;
- }
+ /*
+ pointer-events needs to be changed because
+ tooltip momentarily disappears when crossing between .beat-hover-area and .beat
+ */
+ pointer-events: none;
- &.maintenance {
- background-color: $maintenance;
- }
+ &.empty {
+ background-color: aliceblue;
+ }
- &:not(.empty):hover {
- transition: all ease-in-out 0.15s;
- opacity: 0.8;
- transform: scale(var(--hover-scale));
+ &.down {
+ background-color: $danger;
+ }
+
+ &.pending {
+ background-color: $warning;
+ }
+
+ &.maintenance {
+ background-color: $maintenance;
+ }
}
}
}
diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue
index f6d72802..8a747072 100644
--- a/src/components/NotificationDialog.vue
+++ b/src/components/NotificationDialog.vue
@@ -232,6 +232,9 @@ export default {
mounted() {
this.modal = new Modal(this.$refs.modal);
},
+ beforeUnmount() {
+ this.cleanupModal();
+ },
methods: {
/**
@@ -336,6 +339,20 @@ export default {
});
} while (this.$root.notificationList.find(it => it.name === name));
return name;
+ },
+
+ /**
+ * Clean up modal and restore scroll behavior
+ * @returns {void}
+ */
+ cleanupModal() {
+ if (this.modal) {
+ try {
+ this.modal.hide();
+ } catch (e) {
+ console.warn("Modal hide failed:", e);
+ }
+ }
}
},
};
diff --git a/src/components/ProxyDialog.vue b/src/components/ProxyDialog.vue
index fc92359b..2f7ed7b6 100644
--- a/src/components/ProxyDialog.vue
+++ b/src/components/ProxyDialog.vue
@@ -125,11 +125,12 @@ export default {
}
};
},
-
mounted() {
this.modal = new Modal(this.$refs.modal);
},
-
+ beforeUnmount() {
+ this.cleanupModal();
+ },
methods: {
/**
* Show dialog to confirm deletion
@@ -209,6 +210,20 @@ export default {
}
});
},
+
+ /**
+ * Clean up modal and restore scroll behavior
+ * @returns {void}
+ */
+ cleanupModal() {
+ if (this.modal) {
+ try {
+ this.modal.hide();
+ } catch (e) {
+ console.warn("Modal hide failed:", e);
+ }
+ }
+ }
},
};
diff --git a/src/components/TagsManager.vue b/src/components/TagsManager.vue
index 19c8e481..368ea18c 100644
--- a/src/components/TagsManager.vue
+++ b/src/components/TagsManager.vue
@@ -248,6 +248,9 @@ export default {
this.modal = new Modal(this.$refs.modal);
this.getExistingTags();
},
+ beforeUnmount() {
+ this.cleanupModal();
+ },
methods: {
/**
* Show the add tag dialog
@@ -459,6 +462,19 @@ export default {
this.newTags = [];
this.deleteTags = [];
this.processing = false;
+ },
+ /**
+ * Clean up modal and restore scroll behavior
+ * @returns {void}
+ */
+ cleanupModal() {
+ if (this.modal) {
+ try {
+ this.modal.hide();
+ } catch (e) {
+ console.warn("Modal hide failed:", e);
+ }
+ }
}
},
};
diff --git a/src/lang/en.json b/src/lang/en.json
index 1d45b7a9..0187c021 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -1052,6 +1052,13 @@
"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.",
+ "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.",
+ "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}.",
"nextCheckIn": "Next in ",
"SendGrid API Key": "SendGrid API Key",
"Separate multiple email addresses with commas": "Separate multiple email addresses with commas"
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index 5d999b59..677210c4 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -64,6 +64,9 @@
+
@@ -90,6 +93,13 @@
+
+
+
+ RabbitMQ documentation
+
+
+
+
@@ -1122,6 +1169,9 @@ const monitorDefaults = {
kafkaProducerAllowAutoTopicCreation: false,
gamedigGivenPortOnly: true,
remote_browser: null,
+ rabbitmqNodes: [],
+ rabbitmqUsername: "",
+ rabbitmqPassword: "",
conditions: []
};
@@ -1709,6 +1759,10 @@ message HealthCheckResponse {
this.monitor.kafkaProducerBrokers.push(newBroker);
},
+ addRabbitmqNode(newNode) {
+ this.monitor.rabbitmqNodes.push(newNode);
+ },
+
/**
* Validate form input
* @returns {boolean} Is the form input valid?
@@ -1736,6 +1790,17 @@ message HealthCheckResponse {
return false;
}
}
+
+ if (this.monitor.type === "rabbitmq") {
+ if (this.monitor.rabbitmqNodes.length === 0) {
+ toast.error(this.$t("rabbitmqNodesRequired"));
+ return false;
+ }
+ if (!this.monitor.rabbitmqNodes.every(node => node.startsWith("http://") || node.startsWith("https://"))) {
+ toast.error(this.$t("rabbitmqNodesInvalid"));
+ return false;
+ }
+ }
return true;
},
diff --git a/test/backend-test/test-rabbitmq.js b/test/backend-test/test-rabbitmq.js
new file mode 100644
index 00000000..5782ef25
--- /dev/null
+++ b/test/backend-test/test-rabbitmq.js
@@ -0,0 +1,53 @@
+const { describe, test } = require("node:test");
+const assert = require("node:assert");
+const { RabbitMQContainer } = require("@testcontainers/rabbitmq");
+const { RabbitMqMonitorType } = require("../../server/monitor-types/rabbitmq");
+const { UP, DOWN, PENDING } = require("../../src/util");
+
+describe("RabbitMQ Single Node", {
+ skip: !!process.env.CI && (process.platform !== "linux" || process.arch !== "x64"),
+}, () => {
+ test("RabbitMQ is running", async () => {
+ // The default timeout of 30 seconds might not be enough for the container to start
+ const rabbitMQContainer = await new RabbitMQContainer().withStartupTimeout(60000).start();
+ const rabbitMQMonitor = new RabbitMqMonitorType();
+ const connectionString = `http://${rabbitMQContainer.getHost()}:${rabbitMQContainer.getMappedPort(15672)}`;
+
+ const monitor = {
+ rabbitmqNodes: JSON.stringify([ connectionString ]),
+ rabbitmqUsername: "guest",
+ rabbitmqPassword: "guest",
+ };
+
+ const heartbeat = {
+ msg: "",
+ status: PENDING,
+ };
+
+ try {
+ await rabbitMQMonitor.check(monitor, heartbeat, {});
+ assert.strictEqual(heartbeat.status, UP);
+ assert.strictEqual(heartbeat.msg, "OK");
+ } finally {
+ rabbitMQContainer.stop();
+ }
+ });
+
+ test("RabbitMQ is not running", async () => {
+ const rabbitMQMonitor = new RabbitMqMonitorType();
+ const monitor = {
+ rabbitmqNodes: JSON.stringify([ "http://localhost:15672" ]),
+ rabbitmqUsername: "rabbitmqUser",
+ rabbitmqPassword: "rabbitmqPass",
+ };
+
+ const heartbeat = {
+ msg: "",
+ status: PENDING,
+ };
+
+ await rabbitMQMonitor.check(monitor, heartbeat, {});
+ assert.strictEqual(heartbeat.status, DOWN);
+ });
+
+});