From df42932e0cf1683e81e93e59ab91b676efb0cf07 Mon Sep 17 00:00:00 2001
From: Deepanshu <deepanshusaini2711@gmail.com>
Date: Mon, 16 Jun 2025 20:40:19 +0530
Subject: [PATCH 1/6] fix(ui): shorten URL label and resize notification button
 (#2470)

---
 .../MonitorDetailsControlHeader/index.jsx     | 83 ++++++++++---------
 .../MonitorDetailsControlHeader/status.jsx    | 42 +++++-----
 2 files changed, 66 insertions(+), 59 deletions(-)

diff --git a/client/src/Components/MonitorDetailsControlHeader/index.jsx b/client/src/Components/MonitorDetailsControlHeader/index.jsx
index d569ec840..9db38c0cf 100644
--- a/client/src/Components/MonitorDetailsControlHeader/index.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/index.jsx
@@ -56,46 +56,49 @@ const MonitorDetailsControlHeader = ({
 		>
 			<Status monitor={monitor} />
 
-			<Stack
-				direction="row"
-				gap={theme.spacing(2)}
-			>
-				<Button
-					variant="contained"
-					color="secondary"
-					loading={isSending}
-					startIcon={<EmailIcon />}
-					onClick={() => {
-						testAllNotifications({ monitorId: monitor?._id });
-					}}
-				>
-					{t("sendTestNotifications")}
-				</Button>
-				<Button
-					variant="contained"
-					color="secondary"
-					onClick={(e) => {
-						navigate(`/incidents/${monitor?._id}`);
-					}}
-				>
-					{t("menu.incidents")}
-				</Button>
-				<Button
-					variant="contained"
-					color="secondary"
-					loading={isPausing}
-					startIcon={
-						monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
-					}
-					onClick={() => {
-						pauseMonitor({
-							monitorId: monitor?._id,
-							triggerUpdate,
-						});
-					}}
-				>
-					{monitor?.isActive ? "Pause" : "Resume"}
-				</Button>
+      <Stack
+        direction="row"
+        gap={theme.spacing(2)}
+      >
+        <Button
+          variant="contained"
+          color="secondary"
+          loading={isSending}
+          startIcon={<EmailIcon />}
+          onClick={() => {
+            testAllNotifications({ monitorId: monitor?._id });
+          }}
+          sx={{
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {t("sendTestNotifications")}
+        </Button>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={(e) => {
+            navigate(`/incidents/${monitor?._id}`);
+          }}
+        >
+          {t("menu.incidents")}
+        </Button>
+        <Button
+          variant="contained"
+          color="secondary"
+          loading={isPausing}
+          startIcon={
+            monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
+          }
+          onClick={() => {
+            pauseMonitor({
+              monitorId: monitor?._id,
+              triggerUpdate,
+            });
+          }}
+        >
+          {monitor?.isActive ? "Pause" : "Resume"}
+        </Button>
 
 				{isAdmin && (
 					<Button
diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/MonitorDetailsControlHeader/status.jsx
index fdfb955f4..f5c9aa597 100644
--- a/client/src/Components/MonitorDetailsControlHeader/status.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/status.jsx
@@ -24,25 +24,29 @@ const Status = ({ monitor }) => {
 	const theme = useTheme();
 	const { statusColor, determineState } = useMonitorUtils();
 
-	return (
-		<Stack>
-			<Typography variant="monitorName">{monitor?.name}</Typography>
-			<Stack
-				direction="row"
-				alignItems={"center"}
-				gap={theme.spacing(4)}
-			>
-				<PulseDot color={statusColor[determineState(monitor)]} />
-				<Typography variant="monitorUrl">
-					{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
-				</Typography>
-				<Dot />
-				<Typography>
-					Checking every {formatDurationRounded(monitor?.interval)}.
-				</Typography>
-			</Stack>
-		</Stack>
-	);
+  return (
+    <Stack>
+      <Typography variant="monitorName">{monitor?.name}</Typography>
+      <Stack
+        direction="row"
+        alignItems={"center"}
+        gap={theme.spacing(4)}
+      >
+        <PulseDot color={statusColor[determineState(monitor)]} />
+        <Typography variant="monitorUrl" noWrap>
+          {monitor?.url ? (
+            monitor.url?.length > 55
+              ? `${monitor.url.replace(/^https?:\/\//, "")?.slice(0, 55)}…`
+              : monitor.url.replace(/^https?:\/\//, "")
+          ) : "…"}
+        </Typography>
+        <Dot />
+        <Typography>
+          Checking every {formatDurationRounded(monitor?.interval)}.
+        </Typography>
+      </Stack>
+    </Stack>
+  );
 };
 
 Status.propTypes = {

From e818f1cd610a56a4cd3fd6c4e5ff606f70ad13a1 Mon Sep 17 00:00:00 2001
From: Deepanshu <deepanshusaini2711@gmail.com>
Date: Tue, 17 Jun 2025 10:57:30 +0530
Subject: [PATCH 2/6] chore: fix formatting

---
 .../MonitorDetailsControlHeader/index.jsx     | 86 +++++++++----------
 .../MonitorDetailsControlHeader/status.jsx    | 50 ++++++-----
 2 files changed, 70 insertions(+), 66 deletions(-)

diff --git a/client/src/Components/MonitorDetailsControlHeader/index.jsx b/client/src/Components/MonitorDetailsControlHeader/index.jsx
index 9db38c0cf..5ad665069 100644
--- a/client/src/Components/MonitorDetailsControlHeader/index.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/index.jsx
@@ -56,49 +56,49 @@ const MonitorDetailsControlHeader = ({
 		>
 			<Status monitor={monitor} />
 
-      <Stack
-        direction="row"
-        gap={theme.spacing(2)}
-      >
-        <Button
-          variant="contained"
-          color="secondary"
-          loading={isSending}
-          startIcon={<EmailIcon />}
-          onClick={() => {
-            testAllNotifications({ monitorId: monitor?._id });
-          }}
-          sx={{
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {t("sendTestNotifications")}
-        </Button>
-        <Button
-          variant="contained"
-          color="secondary"
-          onClick={(e) => {
-            navigate(`/incidents/${monitor?._id}`);
-          }}
-        >
-          {t("menu.incidents")}
-        </Button>
-        <Button
-          variant="contained"
-          color="secondary"
-          loading={isPausing}
-          startIcon={
-            monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
-          }
-          onClick={() => {
-            pauseMonitor({
-              monitorId: monitor?._id,
-              triggerUpdate,
-            });
-          }}
-        >
-          {monitor?.isActive ? "Pause" : "Resume"}
-        </Button>
+			<Stack
+				direction="row"
+				gap={theme.spacing(2)}
+			>
+				<Button
+					variant="contained"
+					color="secondary"
+					loading={isSending}
+					startIcon={<EmailIcon />}
+					onClick={() => {
+						testAllNotifications({ monitorId: monitor?._id });
+					}}
+					sx={{
+						whiteSpace: "nowrap",
+					}}
+				>
+					{t("sendTestNotifications")}
+				</Button>
+				<Button
+					variant="contained"
+					color="secondary"
+					onClick={(e) => {
+						navigate(`/incidents/${monitor?._id}`);
+					}}
+				>
+					{t("menu.incidents")}
+				</Button>
+				<Button
+					variant="contained"
+					color="secondary"
+					loading={isPausing}
+					startIcon={
+						monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
+					}
+					onClick={() => {
+						pauseMonitor({
+							monitorId: monitor?._id,
+							triggerUpdate,
+						});
+					}}
+				>
+					{monitor?.isActive ? "Pause" : "Resume"}
+				</Button>
 
 				{isAdmin && (
 					<Button
diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/MonitorDetailsControlHeader/status.jsx
index f5c9aa597..5371fe445 100644
--- a/client/src/Components/MonitorDetailsControlHeader/status.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/status.jsx
@@ -23,30 +23,34 @@ import { useMonitorUtils } from "../../Hooks/useMonitorUtils";
 const Status = ({ monitor }) => {
 	const theme = useTheme();
 	const { statusColor, determineState } = useMonitorUtils();
+	const URL_TRUNCATION_LENGTH = 55;
 
-  return (
-    <Stack>
-      <Typography variant="monitorName">{monitor?.name}</Typography>
-      <Stack
-        direction="row"
-        alignItems={"center"}
-        gap={theme.spacing(4)}
-      >
-        <PulseDot color={statusColor[determineState(monitor)]} />
-        <Typography variant="monitorUrl" noWrap>
-          {monitor?.url ? (
-            monitor.url?.length > 55
-              ? `${monitor.url.replace(/^https?:\/\//, "")?.slice(0, 55)}…`
-              : monitor.url.replace(/^https?:\/\//, "")
-          ) : "…"}
-        </Typography>
-        <Dot />
-        <Typography>
-          Checking every {formatDurationRounded(monitor?.interval)}.
-        </Typography>
-      </Stack>
-    </Stack>
-  );
+	return (
+		<Stack>
+			<Typography variant="monitorName">{monitor?.name}</Typography>
+			<Stack
+				direction="row"
+				alignItems={"center"}
+				gap={theme.spacing(4)}
+			>
+				<PulseDot color={statusColor[determineState(monitor)]} />
+				<Typography
+					variant="monitorUrl"
+					noWrap
+				>
+					{monitor?.url
+						? monitor.url?.length > URL_TRUNCATION_LENGTH
+							? `${monitor.url.replace(/^https?:\/\//, "")?.slice(0, URL_TRUNCATION_LENGTH)}…`
+							: monitor.url.replace(/^https?:\/\//, "")
+						: "…"}
+				</Typography>
+				<Dot />
+				<Typography>
+					Checking every {formatDurationRounded(monitor?.interval)}.
+				</Typography>
+			</Stack>
+		</Stack>
+	);
 };
 
 Status.propTypes = {

From f474d63e882f3be93c93bbb9de95b7785b9a94b1 Mon Sep 17 00:00:00 2001
From: Deepanshu <deepanshusaini2711@gmail.com>
Date: Tue, 17 Jun 2025 17:30:11 +0530
Subject: [PATCH 3/6] chore: extract monitor URL formatting to utils

---
 .../src/Components/MonitorDetailsControlHeader/status.jsx | 8 ++------
 client/src/Utils/utils.js                                 | 8 ++++++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/MonitorDetailsControlHeader/status.jsx
index 5371fe445..4c828a520 100644
--- a/client/src/Components/MonitorDetailsControlHeader/status.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/status.jsx
@@ -8,6 +8,7 @@ import { formatDurationRounded } from "../../Utils/timeUtils";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { useMonitorUtils } from "../../Hooks/useMonitorUtils";
+import { formatMonitorUrl } from "../../Utils/utils";
 /**
  * Status component displays the status information of a monitor.
  * It includes the monitor's name, URL, and check interval.
@@ -23,7 +24,6 @@ import { useMonitorUtils } from "../../Hooks/useMonitorUtils";
 const Status = ({ monitor }) => {
 	const theme = useTheme();
 	const { statusColor, determineState } = useMonitorUtils();
-	const URL_TRUNCATION_LENGTH = 55;
 
 	return (
 		<Stack>
@@ -38,11 +38,7 @@ const Status = ({ monitor }) => {
 					variant="monitorUrl"
 					noWrap
 				>
-					{monitor?.url
-						? monitor.url?.length > URL_TRUNCATION_LENGTH
-							? `${monitor.url.replace(/^https?:\/\//, "")?.slice(0, URL_TRUNCATION_LENGTH)}…`
-							: monitor.url.replace(/^https?:\/\//, "")
-						: "…"}
+					{formatMonitorUrl(monitor?.url)}
 				</Typography>
 				<Dot />
 				<Typography>
diff --git a/client/src/Utils/utils.js b/client/src/Utils/utils.js
index 8bd9c9019..639a43da0 100644
--- a/client/src/Utils/utils.js
+++ b/client/src/Utils/utils.js
@@ -5,3 +5,11 @@ export const safelyParseFloat = (value) => {
 	}
 	return parsedValue;
 };
+
+export const formatMonitorUrl = (url, maxLength = 50) => {
+	if (!url) return "";
+	const strippedUrl = url.replace(/^https?:\/\//, "");
+	return strippedUrl.length > maxLength
+		? `${strippedUrl.slice(0, maxLength)}…`
+		: strippedUrl;
+};

From e3b6ed27bafd0c4291227ff9df46d6b06f4c801a Mon Sep 17 00:00:00 2001
From: Deepanshu <deepanshusaini2711@gmail.com>
Date: Tue, 17 Jun 2025 17:33:21 +0530
Subject: [PATCH 4/6] chore: remove nowrap as already exists in monitorUrl
 varient

---
 .../src/Components/MonitorDetailsControlHeader/status.jsx  | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/MonitorDetailsControlHeader/status.jsx
index 4c828a520..65671a609 100644
--- a/client/src/Components/MonitorDetailsControlHeader/status.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/status.jsx
@@ -34,12 +34,7 @@ const Status = ({ monitor }) => {
 				gap={theme.spacing(4)}
 			>
 				<PulseDot color={statusColor[determineState(monitor)]} />
-				<Typography
-					variant="monitorUrl"
-					noWrap
-				>
-					{formatMonitorUrl(monitor?.url)}
-				</Typography>
+				<Typography variant="monitorUrl">{formatMonitorUrl(monitor?.url)}</Typography>
 				<Dot />
 				<Typography>
 					Checking every {formatDurationRounded(monitor?.interval)}.

From 75309fc53c1ff7e98cfba50169ad2e570f8691ee Mon Sep 17 00:00:00 2001
From: Deepanshu <deepanshusaini2711@gmail.com>
Date: Tue, 17 Jun 2025 17:36:06 +0530
Subject: [PATCH 5/6] chore: add URL_TRUNCATE_LENGTH

---
 client/src/Components/MonitorDetailsControlHeader/status.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/MonitorDetailsControlHeader/status.jsx
index 65671a609..717cf31d9 100644
--- a/client/src/Components/MonitorDetailsControlHeader/status.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/status.jsx
@@ -24,6 +24,7 @@ import { formatMonitorUrl } from "../../Utils/utils";
 const Status = ({ monitor }) => {
 	const theme = useTheme();
 	const { statusColor, determineState } = useMonitorUtils();
+	const URL_TRUNCATION_LENGTH = 55;
 
 	return (
 		<Stack>
@@ -34,7 +35,9 @@ const Status = ({ monitor }) => {
 				gap={theme.spacing(4)}
 			>
 				<PulseDot color={statusColor[determineState(monitor)]} />
-				<Typography variant="monitorUrl">{formatMonitorUrl(monitor?.url)}</Typography>
+				<Typography variant="monitorUrl">
+					{formatMonitorUrl(monitor?.url, URL_TRUNCATION_LENGTH)}
+				</Typography>
 				<Dot />
 				<Typography>
 					Checking every {formatDurationRounded(monitor?.interval)}.

From 6b3773ed76f304e4412ce779a0dfae153dab9d04 Mon Sep 17 00:00:00 2001
From: Deepanshu <deepanshusaini2711@gmail.com>
Date: Wed, 18 Jun 2025 11:09:23 +0530
Subject: [PATCH 6/6] chore: remove URL_TRUNCATE_LENGTH from component

---
 client/src/Components/MonitorDetailsControlHeader/status.jsx | 5 +----
 client/src/Utils/utils.js                                    | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/MonitorDetailsControlHeader/status.jsx
index 717cf31d9..65671a609 100644
--- a/client/src/Components/MonitorDetailsControlHeader/status.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/status.jsx
@@ -24,7 +24,6 @@ import { formatMonitorUrl } from "../../Utils/utils";
 const Status = ({ monitor }) => {
 	const theme = useTheme();
 	const { statusColor, determineState } = useMonitorUtils();
-	const URL_TRUNCATION_LENGTH = 55;
 
 	return (
 		<Stack>
@@ -35,9 +34,7 @@ const Status = ({ monitor }) => {
 				gap={theme.spacing(4)}
 			>
 				<PulseDot color={statusColor[determineState(monitor)]} />
-				<Typography variant="monitorUrl">
-					{formatMonitorUrl(monitor?.url, URL_TRUNCATION_LENGTH)}
-				</Typography>
+				<Typography variant="monitorUrl">{formatMonitorUrl(monitor?.url)}</Typography>
 				<Dot />
 				<Typography>
 					Checking every {formatDurationRounded(monitor?.interval)}.
diff --git a/client/src/Utils/utils.js b/client/src/Utils/utils.js
index 639a43da0..81ec44b06 100644
--- a/client/src/Utils/utils.js
+++ b/client/src/Utils/utils.js
@@ -6,7 +6,7 @@ export const safelyParseFloat = (value) => {
 	return parsedValue;
 };
 
-export const formatMonitorUrl = (url, maxLength = 50) => {
+export const formatMonitorUrl = (url, maxLength = 55) => {
 	if (!url) return "";
 	const strippedUrl = url.replace(/^https?:\/\//, "");
 	return strippedUrl.length > maxLength