time range header

client/src/Components/v2/common/controls/HeaderTimeRange.tsx

@@ -0,0 +1,70 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import ToggleButton from "@mui/material/ToggleButton";
+import { useTheme } from "@mui/material/styles";
+
+interface MonitorTimeFrameHeaderProps {
+	isLoading?: boolean;
+	hasDateRange?: boolean;
+	dateRange: string;
+	setDateRange: (dateRange: string) => void;
+}
+
+export const HeaderTimeRange = ({
+	isLoading = false,
+	hasDateRange = true,
+	dateRange,
+	setDateRange,
+}: MonitorTimeFrameHeaderProps) => {
+	const theme = useTheme();
+
+	const handleChange = (
+		_event: React.MouseEvent<HTMLElement>,
+		newValue: string | null
+	) => {
+		if (newValue !== null) {
+			setDateRange(newValue);
+		}
+	};
+
+	let timeFramePicker = null;
+
+	if (hasDateRange) {
+		timeFramePicker = (
+			<ToggleButtonGroup
+				value={dateRange}
+				exclusive
+				onChange={handleChange}
+				size="small"
+			>
+				<ToggleButton value="recent">Recent</ToggleButton>
+				<ToggleButton value="day">Day</ToggleButton>
+				<ToggleButton value="week">Week</ToggleButton>
+				<ToggleButton value="month">Month</ToggleButton>
+			</ToggleButtonGroup>
+		);
+	}
+
+	return (
+		<Stack
+			direction="row"
+			justifyContent="flex-end"
+			alignItems="center"
+			gap={theme.spacing(4)}
+		>
+			<Typography variant="body2">
+				Showing statistics for past{" "}
+				{dateRange === "recent"
+					? "2 hours"
+					: dateRange === "day"
+						? "24 hours"
+						: dateRange === "week"
+							? "7 days"
+							: "30 days"}
+				.
+			</Typography>
+			{timeFramePicker}
+		</Stack>
+	);
+};

client/src/Components/v2/common/index.ts

@@ -3,3 +3,4 @@ export * from "../common/charts/HeatmapResponseTime";
 export * from "../common/charts/HeatmapResponseTimeTooltip";
 export * from "../common/controls/HeaderCreate";
 export * from "../common/controls/HeaderMonitorControls";
+export * from "../common/controls/HeaderTimeRange";

client/src/Pages/Uptime/Details/index.tsx

@@ -1,5 +1,5 @@
 import { BasePage } from "@/Components/v2/design-elements";
-import { HeaderMonitorControls } from "@/Components/v2/common";
+import { HeaderMonitorControls, HeaderTimeRange } from "@/Components/v2/common";
 
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import { useState, useMemo } from "react";
@@ -62,7 +62,13 @@ const UptimeDetailsPage = () => {
 		if (!certificateData?.certificateDate) {
 			return undefined;
 		}
-		return formatDateWithTz(certificateData.certificateDate, certificateDateFormat, uiTimezone) ?? "N/A";
+		return (
+			formatDateWithTz(
+				certificateData.certificateDate,
+				certificateDateFormat,
+				uiTimezone
+			) ?? "N/A"
+		);
 	}, [certificateData, uiTimezone]);
 
 	const checksUrl = useMemo(() => {
@@ -87,22 +93,6 @@ const UptimeDetailsPage = () => {
 	const checks = checksData?.checks ?? [];
 	const checksCount = checksData?.checksCount ?? 0;
 
-	// TODO: Add UI components here
-	// Placeholder to consume all data fetching results
-	console.log({
-		monitorIsLoading,
-		monitorError,
-		refetchMonitor,
-		monitorStats,
-		checksIsLoading,
-		checksError,
-		checks,
-		checksCount,
-		setPage,
-		setRowsPerPage,
-		setDateRange,
-	});
-
 	return (
 		<BasePage>
 			<HeaderMonitorControls
@@ -115,6 +105,12 @@ const UptimeDetailsPage = () => {
 				monitorStats={monitorStats}
 				certificateExpiry={certificateExpiry}
 			/>
+			<HeaderTimeRange
+				isLoading={monitorIsLoading || checksIsLoading}
+				hasDateRange={true}
+				dateRange={dateRange}
+				setDateRange={setDateRange}
+			/>
 		</BasePage>
 	);
 };