Merge pull request #1234 from peterpardo/feat/create-monitor-display-name-v2

feat: Create monitor display name v2, resolves #992

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,
@@ -79,6 +80,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 },

Client/src/Pages/Monitors/CreateMonitor/index.jsx

@@ -18,6 +18,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;
@@ -91,7 +92,7 @@ const CreateMonitor = () => {
 			}
 		};
 		fetchMonitor();
-	}, [monitorId, authToken, monitors]);
+	}, [monitorId, authToken, monitors, dispatch, navigate]);
 
 	const handleChange = (event, name) => {
 		const { value, id } = event.target;
@@ -141,6 +142,14 @@ const CreateMonitor = () => {
 		}
 	};
 
+	const onUrlBlur = (event) => {
+		const { value } = event.target;
+		setMonitor((prev) => ({
+			...prev,
+			name: parseDomainName(value),
+		}));
+	};
+
 	const handleCreateMonitor = async (event) => {
 		event.preventDefault();
 		//obj to submit
@@ -259,6 +268,7 @@ const CreateMonitor = () => {
 							placeholder={monitorTypeMaps[monitor.type].placeholder || ""}
 							value={monitor.url}
 							onChange={handleChange}
+							onBlur={onUrlBlur}
 							error={errors["url"] ? true : false}
 							helperText={errors["url"]}
 						/>

Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx

@@ -18,6 +18,7 @@ import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import { parseDomainName } from "../../../Utils/monitorUtils";
 import "./index.css";
 
 const CreatePageSpeed = () => {
@@ -95,6 +96,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
@@ -214,6 +225,7 @@ const CreatePageSpeed = () => {
 							placeholder="google.com"
 							value={monitor.url}
 							onChange={handleChange}
+							onBlur={onUrlBlur}
 							error={errors["url"] ? true : false}
 							helperText={errors["url"]}
 						/>

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.
@@ -15,3 +17,22 @@ 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 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.map((part) => capitalizeFirstLetter(part)).join(" ")
+			: capitalizeFirstLetter(cleanParts[0]);
+
+	if (domainPart) return domainPart;
+
+	return url;
+};