diff --git a/src/lang/en.json b/src/lang/en.json
index 009d24ee6..23832f48d 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -64,6 +64,7 @@
"Expected Value": "Expected Value",
"Json Query Expression": "Json Query Expression",
"Friendly Name": "Friendly Name",
+ "defaultFriendlyName": "New Monitor",
"URL": "URL",
"Hostname": "Hostname",
"Host URL": "Host URL",
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index a83f91cab..10d944270 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -109,7 +109,7 @@
-
+
@@ -1157,6 +1157,25 @@ export default {
},
computed: {
+ defaultFriendlyName() {
+ if (this.monitor.hostname) {
+ return this.monitor.hostname;
+ }
+ if (this.monitor.url) {
+ if (this.monitor.url !== "http://" && this.monitor.url !== "https://") {
+ // Ensure monitor without a URL is not affected by invisible URL.
+ try {
+ const url = new URL(this.monitor.url);
+ return url.hostname;
+ } catch (e) {
+ return this.monitor.url.replace(/https?:\/\//, "");
+ }
+ }
+ }
+ // Default placeholder if neither hostname nor URL is available
+ return this.$t("defaultFriendlyName");
+ },
+
ipRegex() {
// Allow to test with simple dns server with port (127.0.0.1:5300)
@@ -1700,6 +1719,10 @@ message HealthCheckResponse {
this.processing = true;
+ if (!this.monitor.name) {
+ this.monitor.name = this.defaultFriendlyName;
+ }
+
if (!this.isInputValid()) {
this.processing = false;
return;
diff --git a/test/e2e/specs/fridendly-name.spec.js b/test/e2e/specs/fridendly-name.spec.js
new file mode 100644
index 000000000..7dbe9dd06
--- /dev/null
+++ b/test/e2e/specs/fridendly-name.spec.js
@@ -0,0 +1,83 @@
+import { expect, test } from "@playwright/test";
+import { login, restoreSqliteSnapshot, screenshot } from "../util-test";
+
+test.describe("Friendly Name Tests", () => {
+ test.beforeEach(async ({ page }) => {
+ await restoreSqliteSnapshot(page);
+ });
+
+ test("hostname", async ({ page }, testInfo) => {
+ // Test DNS monitor with hostname
+ await page.goto("./add");
+ await login(page);
+ await screenshot(testInfo, page);
+
+ await page.getByTestId("monitor-type-select").selectOption("dns");
+ await page.getByTestId("hostname-input").fill("example.com");
+ await screenshot(testInfo, page);
+
+ await page.getByTestId("save-button").click();
+ await page.waitForURL("/dashboard/*");
+
+ expect(page.getByTestId("monitor-list")).toContainText("example.com");
+ await screenshot(testInfo, page);
+ });
+
+ test("URL hostname", async ({ page }, testInfo) => {
+ // Test HTTP monitor with URL
+ await page.goto("./add");
+ await login(page);
+ await screenshot(testInfo, page);
+
+ await page.getByTestId("monitor-type-select").selectOption("http");
+ await page.getByTestId("url-input").fill("https://www.example.com/");
+ await screenshot(testInfo, page);
+
+ await page.getByTestId("save-button").click();
+ await page.waitForURL("/dashboard/*");
+
+ expect(page.getByTestId("monitor-list")).toContainText("www.example.com");
+ await screenshot(testInfo, page);
+ });
+
+ test("custom friendly name", async ({ page }, testInfo) => {
+ // Test custom friendly name for HTTP monitor
+ await page.goto("./add");
+ await login(page);
+ await screenshot(testInfo, page);
+
+ await page.getByTestId("monitor-type-select").selectOption("http");
+ await page.getByTestId("url-input").fill("https://www.example.com/");
+
+ // Check if the friendly name placeholder is set to the hostname
+ const friendlyNameInput = page.getByTestId("friendly-name-input");
+ expect(friendlyNameInput).toHaveAttribute("placeholder", "www.example.com");
+ await screenshot(testInfo, page);
+
+ const customName = "Example Monitor";
+ await friendlyNameInput.fill(customName);
+ await screenshot(testInfo, page);
+
+ await page.getByTestId("save-button").click();
+ await page.waitForURL("/dashboard/*");
+
+ expect(page.getByTestId("monitor-list")).toContainText(customName);
+ await screenshot(testInfo, page);
+ });
+
+ test("default friendly name", async ({ page }, testInfo) => {
+ // Test default friendly name when no custom name is provided
+ await page.goto("./add");
+ await login(page);
+ await screenshot(testInfo, page);
+
+ await page.getByTestId("monitor-type-select").selectOption("group");
+ await screenshot(testInfo, page);
+
+ await page.getByTestId("save-button").click();
+ await page.waitForURL("/dashboard/*");
+
+ expect(page.getByTestId("monitor-list")).toContainText("New Monitor");
+ await screenshot(testInfo, page);
+ });
+});