Merge pull request #3145 from bluewave-labs/fix/pagespeed-stats

fix: stats fixes

client/src/Hooks/monitorHooks.js

@@ -243,6 +243,7 @@ export const useFetchPageSpeedMonitorById = ({ monitorId, dateRange, updateTrigg
 	const [isLoading, setIsLoading] = useState(true);
 	const [networkError, setNetworkError] = useState(false);
 	const [monitor, setMonitor] = useState(undefined);
+	const [monitorStats, setMonitorStats] = useState(undefined);
 
 	useEffect(() => {
 		const fetchMonitor = async () => {
@@ -254,7 +255,8 @@ export const useFetchPageSpeedMonitorById = ({ monitorId, dateRange, updateTrigg
 					monitorId: monitorId,
 					dateRange: dateRange,
 				});
-				setMonitor(response.data.data);
+				setMonitor(response.data.data.monitor);
+				setMonitorStats(response.data.data.monitorStats);
 			} catch (error) {
 				setNetworkError(true);
 			} finally {
@@ -263,7 +265,7 @@ export const useFetchPageSpeedMonitorById = ({ monitorId, dateRange, updateTrigg
 		};
 		fetchMonitor();
 	}, [monitorId, dateRange, updateTrigger]);
-	return [monitor, isLoading, networkError];
+	return [monitor, monitorStats, isLoading, networkError];
 };
 
 export const useFetchUptimeMonitorById = ({ monitorId, dateRange, trigger }) => {

client/src/Pages/PageSpeed/Details/Components/PageSpeedStatusBoxes/index.jsx

@@ -4,9 +4,21 @@ import { Typography } from "@mui/material";
 import { getHumanReadableDuration } from "../../../../../Utils/timeUtils.js";
 import { useTranslation } from "react-i18next";
 
-const PageSpeedStatusBoxes = ({ shouldRender, monitor }) => {
-	const uptimeDuration = getHumanReadableDuration(monitor?.uptimeDuration);
-	const time = getHumanReadableDuration(monitor?.lastChecked);
+const PageSpeedStatusBoxes = ({ shouldRender, monitorStats }) => {
+	const lastChecked = monitorStats?.lastCheckTimestamp
+		? Date.now() - monitorStats.lastCheckTimestamp
+		: 0;
+
+	// Determine time since last failure
+	const timeOfLastFailure = monitorStats?.timeOfLastFailure;
+	const timeSinceLastFailure =
+		timeOfLastFailure > 0
+			? Date.now() - timeOfLastFailure
+			: Date.now() - new Date(monitorStats?.createdAt);
+
+	const streakTime = getHumanReadableDuration(timeSinceLastFailure);
+
+	const time = getHumanReadableDuration(lastChecked);
 
 	const { t } = useTranslation();
 
@@ -16,7 +28,7 @@ const PageSpeedStatusBoxes = ({ shouldRender, monitor }) => {
 				heading="checks since"
 				subHeading={
 					<>
-						{uptimeDuration}
+						{streakTime}
 						<Typography component="span">{t("ago")}</Typography>
 					</>
 				}

client/src/Pages/PageSpeed/Details/index.jsx

@@ -35,7 +35,7 @@ const PageSpeedDetails = () => {
 	});
 	const [trigger, setTrigger] = useState(false);
 	// Network
-	const [monitor, isLoading, networkError] = useFetchPageSpeedMonitorById({
+	const [monitor, monitorStats, isLoading, networkError] = useFetchPageSpeedMonitorById({
 		monitorId,
 		dateRange: "day",
 		updateTrigger: trigger,
@@ -95,7 +95,7 @@ const PageSpeedDetails = () => {
 			/>
 			<PageSpeedStatusBoxes
 				shouldRender={!isLoading}
-				monitor={monitor}
+				monitorStats={monitorStats}
 			/>
 			<MonitorTimeFrameHeader
 				shouldRender={!isLoading}

client/src/Pages/Uptime/Details/Components/UptimeStatusBoxes/index.jsx

@@ -18,7 +18,10 @@ const UptimeStatusBoxes = ({
 
 	// Determine time since last failure
 	const timeOfLastFailure = monitorStats?.timeOfLastFailure;
-	const timeSinceLastFailure = timeOfLastFailure > 0 ? Date.now() - timeOfLastFailure : 0;
+	const timeSinceLastFailure =
+		timeOfLastFailure > 0
+			? Date.now() - timeOfLastFailure
+			: Date.now() - new Date(monitorStats?.createdAt);
 
 	// Determine time since last check
 	const timeOfLastCheck = monitorStats?.lastCheckTimestamp;

server/src/controllers/monitorController.ts

@@ -124,7 +124,7 @@ class MonitorController {
 			const dateRange = requireString(req?.query?.dateRange, "dateRange");
 			const teamId = requireTeamId(req?.user?.teamId);
 
-			const monitor = await this.monitorService.getPageSpeedDetailsById({
+			const data = await this.monitorService.getPageSpeedDetailsById({
 				teamId,
 				monitorId,
 				dateRange,
@@ -133,7 +133,7 @@ class MonitorController {
 			return res.status(200).json({
 				success: true,
 				msg: "Page speed details retrieved successfully",
-				data: monitor,
+				data,
 			});
 		} catch (error) {
 			next(error);

server/src/service/business/monitorService.ts

@@ -330,9 +330,15 @@ export class MonitorService implements IMonitorService {
 		if (checksData.monitorType !== "pagespeed") {
 			throw new AppError({ message: "Unable to load pagespeed stats for this monitor", status: 500 });
 		}
+
+		const monitorStats = await this.monitorStatsRepository.findByMonitorId(monitor.id);
+
 		return {
-			...monitor,
-			checks: checksData.checks,
+			monitor: {
+				...monitor,
+				checks: checksData.checks,
+			},
+			monitorStats,
 		};
 	};
 	getMonitorById = async ({ teamId, monitorId }: { teamId: string; monitorId: string }): Promise<any> => {