From 00a9630e299646c162be64001dbbe013bb5ee51c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 31 Jan 2025 10:06:28 -0800
Subject: [PATCH 1/5] Add reusable TimeFrameHeader component

---
 .../MonitorTimeFrameHeader/index.jsx          | 72 +++++++++++++++++++
 .../MonitorTimeFrameHeader/skeleton.jsx       | 23 ++++++
 2 files changed, 95 insertions(+)
 create mode 100644 Client/src/Components/MonitorTimeFrameHeader/index.jsx
 create mode 100644 Client/src/Components/MonitorTimeFrameHeader/skeleton.jsx

diff --git a/Client/src/Components/MonitorTimeFrameHeader/index.jsx b/Client/src/Components/MonitorTimeFrameHeader/index.jsx
new file mode 100644
index 000000000..e43d63494
--- /dev/null
+++ b/Client/src/Components/MonitorTimeFrameHeader/index.jsx
@@ -0,0 +1,72 @@
+import { Stack, Typography, Button, ButtonGroup } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import SkeletonLayout from "./skeleton";
+import PropTypes from "prop-types";
+
+const MonitorTimeFrameHeader = ({
+	shouldRender = true,
+	hasDateRange = true,
+	dateRange,
+	setDateRange,
+}) => {
+	const theme = useTheme();
+
+	if (!shouldRender) {
+		return <SkeletonLayout />;
+	}
+
+	let timeFramePicker = null;
+
+	if (hasDateRange) {
+		timeFramePicker = (
+			<ButtonGroup sx={{ height: 32 }}>
+				<Button
+					variant="group"
+					filled={(dateRange === "day").toString()}
+					onClick={() => setDateRange("day")}
+				>
+					Day
+				</Button>
+				<Button
+					variant="group"
+					filled={(dateRange === "week").toString()}
+					onClick={() => setDateRange("week")}
+				>
+					Week
+				</Button>
+				<Button
+					variant="group"
+					filled={(dateRange === "month").toString()}
+					onClick={() => setDateRange("month")}
+				>
+					Month
+				</Button>
+			</ButtonGroup>
+		);
+	}
+
+	return (
+		<Stack
+			direction="row"
+			justifyContent="space-between"
+			alignItems="flex-end"
+			gap={theme.spacing(4)}
+			mb={theme.spacing(8)}
+		>
+			<Typography variant="body2">
+				Showing statistics for past{" "}
+				{dateRange === "day" ? "24 hours" : dateRange === "week" ? "7 days" : "30 days"}.
+			</Typography>
+			{timeFramePicker}
+		</Stack>
+	);
+};
+
+MonitorTimeFrameHeader.propTypes = {
+	shouldRender: PropTypes.bool,
+	hasDateRange: PropTypes.bool,
+	dateRange: PropTypes.string,
+	setDateRange: PropTypes.func,
+};
+
+export default MonitorTimeFrameHeader;
diff --git a/Client/src/Components/MonitorTimeFrameHeader/skeleton.jsx b/Client/src/Components/MonitorTimeFrameHeader/skeleton.jsx
new file mode 100644
index 000000000..d7c395d54
--- /dev/null
+++ b/Client/src/Components/MonitorTimeFrameHeader/skeleton.jsx
@@ -0,0 +1,23 @@
+import { Stack, Skeleton } from "@mui/material";
+
+const SkeletonLayout = () => {
+	return (
+		<Stack
+			direction="row"
+			justifyContent="space-between"
+		>
+			<Skeleton
+				variant="rounded"
+				width="20%"
+				height={34}
+			/>
+			<Skeleton
+				variant="rounded"
+				width="20%"
+				height={34}
+			/>
+		</Stack>
+	);
+};
+
+export default SkeletonLayout;

From 4d8f0b72873bfeeadf654faeafd8a170677f6fe5 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 31 Jan 2025 10:06:57 -0800
Subject: [PATCH 2/5] conditionally render time frame picker

---
 .../Components/MonitorStatusHeader/ConfigButton/index.jsx  | 7 ++++---
 Client/src/Components/MonitorStatusHeader/index.jsx        | 4 +++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/Client/src/Components/MonitorStatusHeader/ConfigButton/index.jsx b/Client/src/Components/MonitorStatusHeader/ConfigButton/index.jsx
index fc6407f31..c966abf33 100644
--- a/Client/src/Components/MonitorStatusHeader/ConfigButton/index.jsx
+++ b/Client/src/Components/MonitorStatusHeader/ConfigButton/index.jsx
@@ -3,7 +3,7 @@ import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
-const ConfigButton = ({ shouldRender, monitorId }) => {
+const ConfigButton = ({ shouldRender = true, monitorId, path }) => {
 	const theme = useTheme();
 	const navigate = useNavigate();
 
@@ -14,7 +14,7 @@ const ConfigButton = ({ shouldRender, monitorId }) => {
 			<Button
 				variant="contained"
 				color="secondary"
-				onClick={() => navigate(`/uptime/configure/${monitorId}`)}
+				onClick={() => navigate(`/${path}/configure/${monitorId}`)}
 				sx={{
 					px: theme.spacing(5),
 					"& svg": {
@@ -34,7 +34,8 @@ const ConfigButton = ({ shouldRender, monitorId }) => {
 
 ConfigButton.propTypes = {
 	shouldRender: PropTypes.bool,
-	monitorId: PropTypes.string,
+	monitorId: PropTypes.string.isRequired,
+	path: PropTypes.string.isRequired,
 };
 
 export default ConfigButton;
diff --git a/Client/src/Components/MonitorStatusHeader/index.jsx b/Client/src/Components/MonitorStatusHeader/index.jsx
index c246a928f..cbbba52b2 100644
--- a/Client/src/Components/MonitorStatusHeader/index.jsx
+++ b/Client/src/Components/MonitorStatusHeader/index.jsx
@@ -8,7 +8,7 @@ import ConfigButton from "./ConfigButton";
 import SkeletonLayout from "./skeleton";
 import PropTypes from "prop-types";
 
-const MonitorStatusHeader = ({ shouldRender = true, isAdmin, monitor }) => {
+const MonitorStatusHeader = ({ path, shouldRender = true, isAdmin, monitor }) => {
 	const theme = useTheme();
 	const { statusColor, statusMsg, determineState } = useUtils();
 	if (!shouldRender) {
@@ -38,6 +38,7 @@ const MonitorStatusHeader = ({ shouldRender = true, isAdmin, monitor }) => {
 				</Stack>
 			</Stack>
 			<ConfigButton
+				path={path}
 				shouldRender={isAdmin}
 				monitorId={monitor?._id}
 			/>
@@ -46,6 +47,7 @@ const MonitorStatusHeader = ({ shouldRender = true, isAdmin, monitor }) => {
 };
 
 MonitorStatusHeader.propTypes = {
+	path: PropTypes.string.isRequired,
 	shouldRender: PropTypes.bool,
 	isAdmin: PropTypes.bool,
 	monitor: PropTypes.object,

From 34f06493ec0219eec1d32332ee38faf031e14748 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 31 Jan 2025 10:07:19 -0800
Subject: [PATCH 3/5] Remove unused component

---
 Client/src/Pages/PageSpeed/Details/Components/EmptyView/index.jsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 Client/src/Pages/PageSpeed/Details/Components/EmptyView/index.jsx

diff --git a/Client/src/Pages/PageSpeed/Details/Components/EmptyView/index.jsx b/Client/src/Pages/PageSpeed/Details/Components/EmptyView/index.jsx
deleted file mode 100644
index e69de29bb..000000000

From 2ba2e497ed8fe152219ea72bd55c0475b7cd861f Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 31 Jan 2025 10:07:40 -0800
Subject: [PATCH 4/5] replace TimeFramePicker with reusabe component

---
 .../Components/TimeFramePicker/index.jsx      | 58 -------------------
 .../Components/TimeFramePicker/skeleton.jsx   | 23 --------
 2 files changed, 81 deletions(-)
 delete mode 100644 Client/src/Pages/Uptime/Details/Components/TimeFramePicker/index.jsx
 delete mode 100644 Client/src/Pages/Uptime/Details/Components/TimeFramePicker/skeleton.jsx

diff --git a/Client/src/Pages/Uptime/Details/Components/TimeFramePicker/index.jsx b/Client/src/Pages/Uptime/Details/Components/TimeFramePicker/index.jsx
deleted file mode 100644
index 789030282..000000000
--- a/Client/src/Pages/Uptime/Details/Components/TimeFramePicker/index.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Stack, Typography, Button, ButtonGroup } from "@mui/material";
-import { useTheme } from "@emotion/react";
-import SkeletonLayout from "./skeleton";
-import PropTypes from "prop-types";
-
-const TimeFramePicker = ({ shouldRender = true, dateRange, setDateRange }) => {
-	const theme = useTheme();
-
-	if (!shouldRender) {
-		return <SkeletonLayout />;
-	}
-
-	return (
-		<Stack
-			direction="row"
-			justifyContent="space-between"
-			alignItems="flex-end"
-			gap={theme.spacing(4)}
-			mb={theme.spacing(8)}
-		>
-			<Typography variant="body2">
-				Showing statistics for past{" "}
-				{dateRange === "day" ? "24 hours" : dateRange === "week" ? "7 days" : "30 days"}.
-			</Typography>
-			<ButtonGroup sx={{ height: 32 }}>
-				<Button
-					variant="group"
-					filled={(dateRange === "day").toString()}
-					onClick={() => setDateRange("day")}
-				>
-					Day
-				</Button>
-				<Button
-					variant="group"
-					filled={(dateRange === "week").toString()}
-					onClick={() => setDateRange("week")}
-				>
-					Week
-				</Button>
-				<Button
-					variant="group"
-					filled={(dateRange === "month").toString()}
-					onClick={() => setDateRange("month")}
-				>
-					Month
-				</Button>
-			</ButtonGroup>
-		</Stack>
-	);
-};
-
-TimeFramePicker.propTypes = {
-	shouldRender: PropTypes.bool,
-	dateRange: PropTypes.string,
-	setDateRange: PropTypes.func,
-};
-
-export default TimeFramePicker;
diff --git a/Client/src/Pages/Uptime/Details/Components/TimeFramePicker/skeleton.jsx b/Client/src/Pages/Uptime/Details/Components/TimeFramePicker/skeleton.jsx
deleted file mode 100644
index d7c395d54..000000000
--- a/Client/src/Pages/Uptime/Details/Components/TimeFramePicker/skeleton.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Stack, Skeleton } from "@mui/material";
-
-const SkeletonLayout = () => {
-	return (
-		<Stack
-			direction="row"
-			justifyContent="space-between"
-		>
-			<Skeleton
-				variant="rounded"
-				width="20%"
-				height={34}
-			/>
-			<Skeleton
-				variant="rounded"
-				width="20%"
-				height={34}
-			/>
-		</Stack>
-	);
-};
-
-export default SkeletonLayout;

From 0b3cd9ed174f5ddc0daa96ca8f5511f97775d357 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 31 Jan 2025 10:07:59 -0800
Subject: [PATCH 5/5] Add empty veiw to PageSpeed Details, fix config path

---
 Client/src/Pages/PageSpeed/Details/index.jsx | 34 ++++++++++++++++----
 Client/src/Pages/Uptime/Details/index.jsx    |  6 ++--
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 6fa4aa82c..c52c1c817 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -1,10 +1,12 @@
 // Components
-import { Stack, Typography, Skeleton } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader";
 import MonitorStatusHeader from "../../../Components/MonitorStatusHeader";
 import PageSpeedStatusBoxes from "./Components/PageSpeedStatusBoxes";
 import PageSpeedAreaChart from "./Components/PageSpeedAreaChart";
 import PerformanceReport from "./Components/PerformanceReport";
+import GenericFallback from "../../../Components/GenericFallback";
 // Utils
 import { useTheme } from "@emotion/react";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
@@ -41,10 +43,28 @@ const PageSpeedDetails = () => {
 		setMetrics((prev) => ({ ...prev, [id]: !prev[id] }));
 	};
 
+	// Empty view, displayed when loading is complete and there are no checks
+	if (!isLoading && monitor?.checks?.length === 0) {
+		return (
+			<Stack gap={theme.spacing(10)}>
+				<Breadcrumbs list={BREADCRUMBS} />
+				<MonitorStatusHeader
+					path={"pagespeed"}
+					isAdmin={isAdmin}
+					monitor={monitor}
+				/>
+				<GenericFallback>
+					<Typography>There is no history for this monitor yet.</Typography>
+				</GenericFallback>
+			</Stack>
+		);
+	}
+
 	return (
 		<Stack gap={theme.spacing(10)}>
 			<Breadcrumbs list={BREADCRUMBS} />
 			<MonitorStatusHeader
+				path={"pagespeed"}
 				isAdmin={isAdmin}
 				shouldRender={!isLoading}
 				monitor={monitor}
@@ -53,12 +73,12 @@ const PageSpeedDetails = () => {
 				shouldRender={!isLoading}
 				monitor={monitor}
 			/>
-			<Typography
-				variant="body2"
-				my={theme.spacing(8)}
-			>
-				Showing statistics for past 24 hours.
-			</Typography>
+			<MonitorTimeFrameHeader
+				shouldRender={!isLoading}
+				dateRange={"day"}
+				hasDateRange={false}
+			/>
+
 			<PageSpeedAreaChart
 				shouldRender={!isLoading}
 				monitor={monitor}
diff --git a/Client/src/Pages/Uptime/Details/index.jsx b/Client/src/Pages/Uptime/Details/index.jsx
index 33583b0cb..acbd7c398 100644
--- a/Client/src/Pages/Uptime/Details/index.jsx
+++ b/Client/src/Pages/Uptime/Details/index.jsx
@@ -1,7 +1,7 @@
 // Components
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import MonitorStatusHeader from "../../../Components/MonitorStatusHeader";
-import TimeFramePicker from "./Components/TimeFramePicker";
+import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader";
 import ChartBoxes from "./Components/ChartBoxes";
 import ResponseTimeChart from "./Components/Charts/ResponseTimeChart";
 import ResponseTable from "./Components/ResponseTable";
@@ -81,6 +81,7 @@ const UptimeDetails = () => {
 		<Stack gap={theme.spacing(10)}>
 			<Breadcrumbs list={BREADCRUMBS} />
 			<MonitorStatusHeader
+				path={"uptime"}
 				isAdmin={isAdmin}
 				shouldRender={!monitorIsLoading}
 				monitor={monitor}
@@ -90,8 +91,9 @@ const UptimeDetails = () => {
 				monitor={monitor}
 				certificateExpiry={certificateExpiry}
 			/>
-			<TimeFramePicker
+			<MonitorTimeFrameHeader
 				shouldRender={!monitorIsLoading}
+				hasDateRange={true}
 				dateRange={dateRange}
 				setDateRange={setDateRange}
 			/>