feat: Set default friendly name using hostname or the URL host (#5795)

Co-authored-by: Frank Elsinga <frank@elsinga.de>

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

src/pages/EditMonitor.vue

@@ -109,7 +109,7 @@
                             <!-- Friendly Name -->
                             <div class="my-3">
                                 <label for="name" class="form-label">{{ $t("Friendly Name") }}</label>
-                                <input id="name" v-model="monitor.name" type="text" class="form-control" required data-testid="friendly-name-input">
+                                <input id="name" v-model="monitor.name" type="text" class="form-control" data-testid="friendly-name-input" :placeholder="defaultFriendlyName">
                             </div>
 
                             <!-- URL -->
@@ -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;

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