From 715df3463215d30eceb42f9a9fb8e02d9c48fcc3 Mon Sep 17 00:00:00 2001
From: Ionys <9364594+Ionys320@users.noreply.github.com>
Date: Fri, 9 May 2025 20:28:28 +0200
Subject: [PATCH] feat(status page): Move the public URL into the status page
 monitor settings' and rename it Custom URL

---
 .../2025-05-09-0000-add-custom-url.js         | 13 +++++++++++
 server/model/group.js                         |  2 +-
 server/model/monitor.js                       |  3 +--
 server/server.js                              |  1 -
 .../status-page-socket-handler.js             |  4 ++++
 src/components/MonitorSettingDialog.vue       | 22 +++++++++++++++++++
 src/lang/en.json                              |  6 ++---
 src/pages/EditMonitor.vue                     | 14 ------------
 test/e2e/specs/status-page.spec.js            |  6 ++---
 9 files changed, 47 insertions(+), 24 deletions(-)
 create mode 100644 db/knex_migrations/2025-05-09-0000-add-custom-url.js

diff --git a/db/knex_migrations/2025-05-09-0000-add-custom-url.js b/db/knex_migrations/2025-05-09-0000-add-custom-url.js
new file mode 100644
index 000000000..b3465c87f
--- /dev/null
+++ b/db/knex_migrations/2025-05-09-0000-add-custom-url.js
@@ -0,0 +1,13 @@
+// Add column custom_url to monitor_group table
+exports.up = function (knex) {
+    return knex.schema
+        .alterTable("monitor_group", function (table) {
+            table.text("custom_url", "text");
+        });
+};
+
+exports.down = function (knex) {
+    return knex.schema.alterTable("monitor_group", function (table) {
+        table.dropColumn("custom_url");
+    });
+};
diff --git a/server/model/group.js b/server/model/group.js
index bd2c30189..16c482759 100644
--- a/server/model/group.js
+++ b/server/model/group.js
@@ -33,7 +33,7 @@ class Group extends BeanModel {
      */
     async getMonitorList() {
         return R.convertToBeans("monitor", await R.getAll(`
-            SELECT monitor.*, monitor_group.send_url FROM monitor, monitor_group
+            SELECT monitor.*, monitor_group.send_url, monitor_group.custom_url FROM monitor, monitor_group
             WHERE monitor.id = monitor_group.monitor_id
             AND group_id = ?
             ORDER BY monitor_group.weight
diff --git a/server/model/monitor.js b/server/model/monitor.js
index e9f7380dc..85293bbdc 100644
--- a/server/model/monitor.js
+++ b/server/model/monitor.js
@@ -53,7 +53,7 @@ class Monitor extends BeanModel {
         };
 
         if (this.sendUrl) {
-            obj.url = this.publicUrl ?? this.url;
+            obj.url = this.customUrl ?? this.url;
         }
 
         if (showTags) {
@@ -91,7 +91,6 @@ class Monitor extends BeanModel {
             id: this.id,
             name: this.name,
             description: this.description,
-            publicUrl: this.publicUrl,
             path,
             pathName,
             parent: this.parent,
diff --git a/server/server.js b/server/server.js
index 15f062a6f..ec5ad49f6 100644
--- a/server/server.js
+++ b/server/server.js
@@ -790,7 +790,6 @@ let needSetup = false;
                 bean.parent = monitor.parent;
                 bean.type = monitor.type;
                 bean.url = monitor.url;
-                bean.publicUrl = monitor.publicUrl;
                 bean.method = monitor.method;
                 bean.body = monitor.body;
                 bean.headers = monitor.headers;
diff --git a/server/socket-handlers/status-page-socket-handler.js b/server/socket-handlers/status-page-socket-handler.js
index 1114d81fd..952ec2fa7 100644
--- a/server/socket-handlers/status-page-socket-handler.js
+++ b/server/socket-handlers/status-page-socket-handler.js
@@ -211,6 +211,10 @@ module.exports.statusPageSocketHandler = (socket) => {
                         relationBean.send_url = monitor.sendUrl;
                     }
 
+                    if (monitor.url !== undefined) {
+                        relationBean.custom_url = monitor.url;
+                    }
+
                     await R.store(relationBean);
                 }
 
diff --git a/src/components/MonitorSettingDialog.vue b/src/components/MonitorSettingDialog.vue
index 9e2b780b0..8723c4862 100644
--- a/src/components/MonitorSettingDialog.vue
+++ b/src/components/MonitorSettingDialog.vue
@@ -19,6 +19,16 @@
                         </div>
                     </div>
 
+                    <!-- Custom URL -->
+                    <template v-if="monitor.isClickAble">
+                        <label for="customUrl" class="form-label">{{ $t("Custom URL") }}</label>
+                        <input id="customUrl" :value="monitor.url" type="url" class="form-control" data-testid="custom-url-input" @input="e => changeUrl(monitor.group_index, monitor.monitor_index, e.target!.value)">
+
+                        <div class="form-text mb-3">
+                            {{ $t("customUrlDescription") }}
+                        </div>
+                    </template>
+
                     <button
                         class="btn btn-primary btn-add-group me-2"
                         @click="$refs.badgeGeneratorDialog.show(monitor.id, monitor.name)"
@@ -78,6 +88,7 @@ export default {
                 monitor_index: monitor.index,
                 group_index: group.index,
                 isClickAble: this.showLink(monitor),
+                url: monitor.element.url,
             };
 
             this.MonitorSettingDialog.show();
@@ -110,6 +121,17 @@ export default {
             }
             return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://" && !this.editMode;
         },
+
+        /**
+         * Toggle the value of sendUrl
+         * @param {number} groupIndex Index of group monitor is member of
+         * @param {number} index Index of monitor within group
+         * @param {string} value The new value of the url
+         * @returns {void}
+         */
+        changeUrl(groupIndex, index, value) {
+            this.$root.publicGroupList[groupIndex].monitorList[index].url = value;
+        },
     },
 };
 </script>
diff --git a/src/lang/en.json b/src/lang/en.json
index 4ba1a1fc6..9cbe36761 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -1074,8 +1074,8 @@
     "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}.",
     "SendGrid API Key": "SendGrid API Key",
     "Separate multiple email addresses with commas": "Separate multiple email addresses with commas",
-    "Public URL": "Public URL",
-    "publicUrlDescription": "The public URL of the monitor. Can be displayed on the status page as the monitor link.",
+    "Custom URL": "Custom URL",
+    "customUrlDescription": "Will be used as the clickable URL instead of the monitor's one.",
     "OneChatAccessToken": "OneChat Access Token",
     "OneChatUserIdOrGroupId": "OneChat User ID or Group ID",
     "OneChatBotId": "OneChat Bot ID",
@@ -1098,4 +1098,4 @@
     "Sender name": "Sender name",
     "smsplanetNeedToApproveName": "Needs to be approved in the client panel",
     "Disable URL in Notification": "Disable URL in Notification"
-}
+}
\ No newline at end of file
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index f8f23d6e3..10d944270 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -719,16 +719,6 @@
                                 <input id="description" v-model="monitor.description" type="text" class="form-control">
                             </div>
 
-                            <!-- Public URL -->
-                            <div class="my-3">
-                                <label for="publicUrl" class="form-label">{{ $t("Public URL") }}</label>
-                                <input id="publicUrl" v-model="monitor.publicUrl" type="url" class="form-control" data-testid="public-url-input">
-
-                                <div class="form-text">
-                                    {{ $t("publicUrlDescription") }}
-                                </div>
-                            </div>
-
                             <div class="my-3">
                                 <tags-manager ref="tagsManager" :pre-selected-tags="monitor.tags"></tags-manager>
                             </div>
@@ -1760,10 +1750,6 @@ message HealthCheckResponse {
                 this.monitor.url = this.monitor.url.trim();
             }
 
-            if (this.monitor.publicUrl) {
-                this.monitor.publicUrl = this.monitor.publicUrl.trim();
-            }
-
             let createdNewParent = false;
 
             if (this.draftGroupName && this.monitor.parent === -1) {
diff --git a/test/e2e/specs/status-page.spec.js b/test/e2e/specs/status-page.spec.js
index 18aadba52..0231aa225 100644
--- a/test/e2e/specs/status-page.spec.js
+++ b/test/e2e/specs/status-page.spec.js
@@ -13,7 +13,7 @@ test.describe("Status Page", () => {
         const tagName = "Client";
         const tagValue = "Acme Inc";
         const monitorUrl = "https://www.example.com/status";
-        const monitorPublicUrl = "https://www.example.com";
+        const monitorCustomUrl = "https://www.example.com";
 
         // Status Page
         const footerText = "This is footer text.";
@@ -39,7 +39,6 @@ test.describe("Status Page", () => {
         await page.getByTestId("tag-color-select").click(); // Vue-Multiselect component
         await page.getByTestId("tag-color-select").getByRole("option", { name: "Orange" }).click();
         await page.getByTestId("tag-submit-button").click();
-        await page.getByTestId("public-url-input").fill(monitorPublicUrl);
         await page.getByTestId("save-button").click();
         await page.waitForURL("/dashboard/*"); // wait for the monitor to be created
 
@@ -87,6 +86,7 @@ test.describe("Status Page", () => {
         // Set public url on
         await page.getByTestId("monitor-settings").click();
         await page.getByTestId("show-clickable-link").check();
+        await page.getByTestId("custom-url-input").fill(monitorCustomUrl);
         await page.getByTestId("monitor-settings-close").click();
 
         // Save the changes
@@ -103,7 +103,7 @@ test.describe("Status Page", () => {
         await expect(page.getByTestId("footer-text")).toContainText(footerText);
         await expect(page.getByTestId("powered-by")).toHaveCount(0);
 
-        await expect(page.getByTestId("monitor-name")).toHaveAttribute("href", monitorPublicUrl);
+        await expect(page.getByTestId("monitor-name")).toHaveAttribute("href", monitorCustomUrl);
 
         await expect(page.getByTestId("update-countdown-text")).toContainText("00:");
         const updateCountdown = Number((await page.getByTestId("update-countdown-text").textContent()).match(/(\d+):(\d+)/)[2]);