Merge pull request #1675 from bluewave-labs/fix/fe/pagespeed-details-empty-view

fix: fe/pagespeed details empty view, resolves #1674

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;

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,

Client/src/Components/MonitorTimeFrameHeader/index.jsx

@@ -3,25 +3,22 @@ import { useTheme } from "@emotion/react";
 import SkeletonLayout from "./skeleton";
 import PropTypes from "prop-types";
 
-const TimeFramePicker = ({ shouldRender = true, dateRange, setDateRange }) => {
+const MonitorTimeFrameHeader = ({
+	shouldRender = true,
+	hasDateRange = 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>
+	let timeFramePicker = null;
+
+	if (hasDateRange) {
+		timeFramePicker = (
 			<ButtonGroup sx={{ height: 32 }}>
 				<Button
 					variant="group"
@@ -45,14 +42,31 @@ const TimeFramePicker = ({ shouldRender = true, dateRange, setDateRange }) => {
 					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>
 	);
 };
 
-TimeFramePicker.propTypes = {
+MonitorTimeFrameHeader.propTypes = {
 	shouldRender: PropTypes.bool,
+	hasDateRange: PropTypes.bool,
 	dateRange: PropTypes.string,
 	setDateRange: PropTypes.func,
 };
 
-export default TimeFramePicker;
+export default MonitorTimeFrameHeader;

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