Add empty veiw to PageSpeed Details, fix config path

Author: ajhollid

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}

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}
 			/>