From 4e2303b98585e3fd6f376b0bb7b7a6df62c266c6 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 27 Nov 2024 15:47:51 +0800 Subject: [PATCH 1/4] Add domain parsing function --- Client/src/Utils/monitorUtils.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/Client/src/Utils/monitorUtils.js b/Client/src/Utils/monitorUtils.js index 3e6b0116d..393d903b7 100644 --- a/Client/src/Utils/monitorUtils.js +++ b/Client/src/Utils/monitorUtils.js @@ -15,3 +15,28 @@ export const getLastChecked = (checks, duration = true) => { } return new Date() - new Date(checks[0].createdAt); }; + +export const parseDomainName = (url) => { + url = url.replace(/^https?:\/\//, ""); + // Remove leading/trailing dots + url = url.replace(/^\.+|\.+$/g, ""); + // Split by dots + const parts = url.split("."); + // Remove common prefixes and empty parts + const cleanParts = parts.filter((part) => part !== "www" && part !== ""); + if (cleanParts.length > 2) { + // Don't know how to parse this, return URL + return url; + } + // If there's more than one part, take the second to last + const domainPart = + cleanParts.length > 1 + ? cleanParts[cleanParts.length - 2] + : cleanParts[cleanParts.length - 1]; + + if (domainPart) { + return domainPart.charAt(0).toUpperCase() + domainPart.slice(1).toLowerCase(); + } + + return url; +}; From ea4ddfc157b30c83d57eddf90dd609a85faa032d Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 27 Nov 2024 15:48:06 +0800 Subject: [PATCH 2/4] set name field onBlur when URL is changed --- .../Pages/Infrastructure/CreateMonitor/index.jsx | 10 ++++++++++ Client/src/Pages/Monitors/CreateMonitor/index.jsx | 14 +++++++++++++- .../src/Pages/PageSpeed/CreatePageSpeed/index.jsx | 12 ++++++++++++ 3 files changed, 35 insertions(+), 1 deletion(-) diff --git a/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx index 61070ba7d..59eeafdab 100644 --- a/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx +++ b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx @@ -3,6 +3,7 @@ import { Box, Stack, Typography } from "@mui/material"; import LoadingButton from "@mui/lab/LoadingButton"; import { useSelector, useDispatch } from "react-redux"; import { infrastructureMonitorValidation } from "../../../Validation/validation"; +import { parseDomainName } from "../../../Utils/monitorUtils"; import { createInfrastructureMonitor, checkInfrastructureEndpointResolution, @@ -80,6 +81,15 @@ const CreateInfrastructureMonitor = () => { const handleBlur = (event, appendID) => { event.preventDefault(); const { value, id } = event.target; + + let name = idMap[id] ?? id; + if (name === "url" && infrastructureMonitor.name === "") { + setInfrastructureMonitor((prev) => ({ + ...prev, + name: parseDomainName(value), + })); + } + if (id?.startsWith("notify-email-")) return; const { error } = infrastructureMonitorValidation.validate( { [id ?? appendID]: value }, diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx index 84e599322..c1b4cab8b 100644 --- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx +++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx @@ -17,6 +17,7 @@ import Checkbox from "../../../Components/Inputs/Checkbox"; import Breadcrumbs from "../../../Components/Breadcrumbs"; import { getUptimeMonitorById } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice"; import "./index.css"; +import { parseDomainName } from "../../../Utils/monitorUtils"; const CreateMonitor = () => { const MS_PER_MINUTE = 60000; @@ -90,7 +91,7 @@ const CreateMonitor = () => { } }; fetchMonitor(); - }, [monitorId, authToken, monitors]); + }, [monitorId, authToken, monitors, dispatch, navigate]); const handleChange = (event, name) => { const { value, id } = event.target; @@ -140,6 +141,16 @@ const CreateMonitor = () => { } }; + const onUrlBlur = (event) => { + const { value } = event.target; + if (monitor.name === "") { + setMonitor((prev) => ({ + ...prev, + name: parseDomainName(value), + })); + } + }; + const handleCreateMonitor = async (event) => { event.preventDefault(); //obj to submit @@ -257,6 +268,7 @@ const CreateMonitor = () => { placeholder={monitorTypeMaps[monitor.type].placeholder || ""} value={monitor.url} onChange={handleChange} + onBlur={onUrlBlur} error={errors["url"]} /> { @@ -94,6 +95,16 @@ const CreatePageSpeed = () => { } }; + const onUrlBlur = (event) => { + const { value } = event.target; + if (monitor.name === "") { + setMonitor((prev) => ({ + ...prev, + name: parseDomainName(value), + })); + } + }; + const handleCreateMonitor = async (event) => { event.preventDefault(); //obj to submit @@ -213,6 +224,7 @@ const CreatePageSpeed = () => { placeholder="google.com" value={monitor.url} onChange={handleChange} + onBlur={onUrlBlur} error={errors["url"]} /> Date: Sat, 30 Nov 2024 23:00:06 +0800 Subject: [PATCH 3/4] Updated domain parsing logic --- Client/src/Utils/monitorUtils.js | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/Client/src/Utils/monitorUtils.js b/Client/src/Utils/monitorUtils.js index 393d903b7..cc92a86ae 100644 --- a/Client/src/Utils/monitorUtils.js +++ b/Client/src/Utils/monitorUtils.js @@ -1,3 +1,5 @@ +import { capitalizeFirstLetter } from "./stringUtils"; + /** * Helper function to get duration since last check or the last date checked * @param {Array} checks Array of check objects. @@ -22,21 +24,15 @@ export const parseDomainName = (url) => { url = url.replace(/^\.+|\.+$/g, ""); // Split by dots const parts = url.split("."); - // Remove common prefixes and empty parts - const cleanParts = parts.filter((part) => part !== "www" && part !== ""); - if (cleanParts.length > 2) { - // Don't know how to parse this, return URL - return url; - } - // If there's more than one part, take the second to last + // Remove common prefixes and empty parts and exclude the last element of the array (the last element should be the TLD) + const cleanParts = parts.filter((part) => part !== "www" && part !== "").slice(0, -1); + // If there's more than one part, append the two words and capitalize the first letters (e.g. ["api", "test"] -> "Api Test") const domainPart = cleanParts.length > 1 - ? cleanParts[cleanParts.length - 2] - : cleanParts[cleanParts.length - 1]; + ? cleanParts.map((part) => capitalizeFirstLetter(part)).join(" ") + : capitalizeFirstLetter(cleanParts[0]); - if (domainPart) { - return domainPart.charAt(0).toUpperCase() + domainPart.slice(1).toLowerCase(); - } + if (domainPart) return domainPart; return url; }; From 5678771bae89a9d8d022442570846488c0696d1b Mon Sep 17 00:00:00 2001 From: Peter Carl Pardo Date: Sat, 30 Nov 2024 23:00:59 +0800 Subject: [PATCH 4/4] Always update display name on when URL changes --- Client/src/Pages/Monitors/CreateMonitor/index.jsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx index c1b4cab8b..7eb9a19f1 100644 --- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx +++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx @@ -143,12 +143,10 @@ const CreateMonitor = () => { const onUrlBlur = (event) => { const { value } = event.target; - if (monitor.name === "") { - setMonitor((prev) => ({ - ...prev, - name: parseDomainName(value), - })); - } + setMonitor((prev) => ({ + ...prev, + name: parseDomainName(value), + })); }; const handleCreateMonitor = async (event) => {