diff --git a/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx index 2af4f0f2f..c143702d6 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, @@ -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 }, diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx index ebb812658..6a794e464 100644 --- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx +++ b/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"]} /> diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx index e70576ebd..ba3a7bb4a 100644 --- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx +++ b/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"]} /> diff --git a/Client/src/Utils/monitorUtils.js b/Client/src/Utils/monitorUtils.js index 3e6b0116d..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. @@ -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; +};