feat(status page): Move the public URL into the status page monitor settings' and rename it Custom URL

This commit is contained in:
Ionys 2025-05-09 20:28:28 +02:00
parent ab70a99f90
commit 715df34632
9 changed files with 47 additions and 24 deletions

View file

@ -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");
});
};

View file

@ -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

View file

@ -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,

View file

@ -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;

View file

@ -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);
}

View file

@ -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>

View file

@ -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"
}
}

View file

@ -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) {

View file

@ -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]);