fix(monitor): Addressing review comments for PR #6577

src/lang/en.json

@@ -276,6 +276,11 @@
     "mqttWebsocketPathExplanation": "WebSocket path for MQTT over WebSocket connections (e.g., /mqtt)",
     "mqttWebsocketPathInvalid": "Please use a valid WebSocket Path format",
     "mqttHostnameTip": "Please use this format {hostnameFormat}",
+    "hostnameCannotBeIP": "DNS hostname cannot be an IP. Did you mean to use the resolver field?",
+    "invalidHostnameOrIP": "Invalid hostname or IP. Hostname must be a valid FQDN. Cannot use wildcard. Can have underscore, or end with a dot.",
+    "invalidDNSHostname": "Invalid hostname. Hostname must be a valid FQDN. Can be a wildcard, have underscore or end with a dot.",
+    "wildcardOnlyForDNS": "Wildcard hostnames are only supported for DNS monitors.",
+    "invalidURL": "Invalid URL",
     "successKeyword": "Success Keyword",
     "successKeywordExplanation": "MQTT Keyword that will be considered as success",
     "recent": "Recent",

src/pages/EditMonitor.vue

@@ -326,7 +326,6 @@
                                     v-model="monitor.hostname"
                                     type="text"
                                     class="form-control"
-                                    :pattern="monitor.type === 'mqtt' ? mqttIpOrHostnameRegexPattern : (monitor.type === 'dns' ? null : ipOrHostnameRegexPattern)"
                                     required
                                     data-testid="hostname-input"
                                 >
@@ -1329,7 +1328,7 @@ import {
     MIN_INTERVAL_SECOND,
     sleep,
 } from "../util.ts";
-import { hostNameRegexPattern, timeDurationFormatter } from "../util-frontend";
+import { timeDurationFormatter } from "../util-frontend";
 import isFQDN from "validator/lib/isFQDN";
 import isIP from "validator/lib/isIP";
 import HiddenInput from "../components/HiddenInput.vue";
@@ -1419,8 +1418,6 @@ export default {
             acceptedWebsocketCodeOptions: [],
             dnsresolvetypeOptions: [],
             kafkaSaslMechanismOptions: [],
-            ipOrHostnameRegexPattern: hostNameRegexPattern(),
-            mqttIpOrHostnameRegexPattern: hostNameRegexPattern(true),
             gameList: null,
             connectionStringTemplates: {
                 "sqlserver": "Server=<hostname>,<port>;Database=<your database>;User Id=<your user id>;Password=<your password>;Encrypt=<true/false>;TrustServerCertificate=<Yes/No>;Connection Timeout=<int>",
@@ -2085,32 +2082,42 @@ message HealthCheckResponse {
                 }
             }
 
-            // Validate the DNS Monitor hostname input
+            // Validate hostname field input for various monitors
-            if (this.monitor.type === "dns" && this.monitor.hostname) {
+            if (this.monitor.hostname && [ "mqtt", "dns", "port", "ping", "steam", "gamedig", "radius", "tailscale-ping", "smtp", "snmp" ].includes(this.monitor.type)) {
                 let hostname = this.monitor.hostname.trim();
 
-                if (isIP(hostname)) {
+                if (this.monitor.type === "mqtt") {
-                    toast.error("DNS hostname cannot be an IP. Did you mean to use the resolver field?");
+                    hostname = hostname.replace(/^(mqtt|ws)s?:\/\//, "");
+                }
+
+                if (this.monitor.type === "dns" && isIP(hostname)) {
+                    toast.error(this.$t("hostnameCannotBeIP"));
                     return false;
                 }
 
+                // Wildcard is allowed only for DNS
                 if (!isFQDN(hostname, {
-                    allow_wildcard: true,
+                    allow_wildcard: this.monitor.type === "dns",
                     require_tld: false,
                     allow_underscores: true,
                     allow_trailing_dot: true,
-                })) {
+                }) && !isIP(hostname)) {
-                    toast.error("Invalid hostname. Must be a FQDN, wildcard, underscore, or end with a dot.");
+                    if(this.monitor.type === "dns") {
+                        toast.error(this.$t("invalidDNSHostname"));
+                    } else {
+                        toast.error(this.$t("invalidHostnameOrIP"));
+                    }
                     return false;
                 }
             }
 
-            // Validate URL field input
+            // Validate URL field input for various monitors
             if ((this.monitor.type === "http" || this.monitor.type === "keyword" || this.monitor.type === "json-query" || this.monitor.type === "websocket-upgrade" || this.monitor.type === "real-browser") && this.monitor.url) {
                 try {
                     const url = new URL(this.monitor.url);
-                    if (url.hostname.includes("*")) {
+                    // Browser can encode *.hostname.com to %2A.hostname.com
-                        toast.error("Wildcard hostnames are only supported for DNS monitors.");
+                    if (url.hostname.includes("*") || url.hostname.includes("%2A")) {
+                        toast.error(this.$t("wildcardOnlyForDNS"));
                         return false;
                     }
                     if (!isFQDN(url.hostname, {
@@ -2118,11 +2125,11 @@ message HealthCheckResponse {
                         allow_underscores: true,
                         allow_trailing_dot: true,
                     }) && !isIP(url.hostname)) {
-                        toast.error("Invalid hostname");
+                        toast.error(this.$t("invalidHostnameOrIP"));
                         return false;
                     }
                 } catch (err) {
-                    toast.error("Invalid URL");
+                    toast.error(this.$t("invalidURL"));
                     return false;
                 }
             }

src/util-frontend.js

@@ -108,23 +108,6 @@ export function getDevContainerServerHostname() {
     return CODESPACE_NAME + "-3001." + GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN;
 }
 
-/**
- * Regex pattern for identifying hostnames and IP addresses
- * @param {boolean} mqtt whether or not the regex should take into
- * account the fact that it is an mqtt uri
- * @returns {string} The requested regex string
- */
-export function hostNameRegexPattern(mqtt = false) {
-    // mqtt, mqtts, ws and wss schemes accepted by mqtt.js (https://github.com/mqttjs/MQTT.js/#connect)
-    const mqttSchemeRegexPattern = "((mqtt|ws)s?:\\/\\/)?";
-    // Source: https://digitalfortress.tech/tips/top-15-commonly-used-regex/
-    const ipRegexPattern = `((^${mqtt ? mqttSchemeRegexPattern : ""}((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))$)|(^((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:)))(%.+)?$))`;
-    // Source: https://stackoverflow.com/questions/106179/regular-expression-to-match-dns-hostname-or-ip-address
-    const hostNameRegexPattern = `^${mqtt ? mqttSchemeRegexPattern : ""}([a-zA-Z0-9])?(([a-zA-Z0-9_]|[a-zA-Z0-9_][a-zA-Z0-9\\-_]*[a-zA-Z0-9_])\\.)*([A-Za-z0-9_]|[A-Za-z0-9_][A-Za-z0-9\\-_]*[A-Za-z0-9_])(\\.)?$`;
-
-    return `${ipRegexPattern}|${hostNameRegexPattern}`;
-}
-
 /**
  * Get the tag color options
  * Shared between components