add header

client/src/Components/v2/Inputs/Button.tsx

@@ -1,10 +1,12 @@
 import Button from "@mui/material/Button";
 import type { ButtonProps } from "@mui/material/Button";
-export const ButtonInput: React.FC<ButtonProps> = ({ ...props }) => {
+
+export const ButtonInput: React.FC<ButtonProps> = ({ filled, sx, ...props }) => {
 	return (
 		<Button
+			filled={filled}
 			{...props}
-			sx={{ textTransform: "none", height: 34, fontWeight: 400, borderRadius: 2 }}
+			sx={{ textTransform: "none", height: 34, fontWeight: 400, borderRadius: 2, ...sx }}
 		/>
 	);
 };

client/src/Components/v2/Inputs/ButtonGroup.tsx

@@ -11,17 +11,6 @@ export const ButtonGroupInput: React.FC<ButtonGroupProps> = ({
 		<ButtonGroup
 			orientation={orientation}
 			{...props}
-			sx={{
-				...(orientation !== "vertical" && { height: 34 }),
-				width: orientation === "vertical" ? "100%" : "auto",
-				border: 1,
-				borderStyle: "solid",
-				borderColor: theme.palette.primary.lowContrast,
-				borderRadius: 2,
-				"& .MuiButtonGroup-grouped": {
-					height: "100%",
-				},
-			}}
 		/>
 	);
 };

client/src/Components/v2/Monitors/HeaderRange.tsx

@@ -0,0 +1,60 @@
+import Stack from "@mui/material/Stack";
+import { ButtonGroup, Button } from "@/Components/v2/Inputs";
+import { useTheme } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import { theme } from "@/Utils/Theme/v2/theme";
+
+export const HeaderRange = ({
+	range,
+	setRange,
+	loading,
+}: {
+	range: string;
+	setRange: Function;
+	loading: boolean;
+}) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			gap={theme.spacing(9)}
+			direction="row"
+			alignItems={"center"}
+			justifyContent="flex-end"
+		>
+			<Typography variant="body2">{`Showing statistics for past ${range}`}</Typography>
+			<ButtonGroup
+				variant="contained"
+				color={"primary"}
+			>
+				<Button
+					color={range === "2h" ? "secondary" : "inherit"}
+					onClick={() => setRange("2h")}
+					loading={loading}
+				>
+					Recent
+				</Button>
+				<Button
+					color={range === "24h" ? "secondary" : "inherit"}
+					onClick={() => setRange("24h")}
+					loading={loading}
+				>
+					Day
+				</Button>
+				<Button
+					color={range === "7d" ? "secondary" : "inherit"}
+					onClick={() => setRange("7d")}
+					loading={loading}
+				>
+					7 days
+				</Button>
+				<Button
+					color={range === "30d" ? "secondary" : "inherit"}
+					onClick={() => setRange("30d")}
+					loading={loading}
+				>
+					30 days
+				</Button>
+			</ButtonGroup>
+		</Stack>
+	);
+};

client/src/Pages/v2/Uptime/Create.tsx

@@ -5,7 +5,7 @@ import { ConfigBox, BasePage } from "@/Components/v2/DesignElements";
 import RadioGroup from "@mui/material/RadioGroup";
 import FormControl from "@mui/material/FormControl";
 import { RadioWithDescription } from "@/Components/v2/Inputs/RadioInput";
-import Button from "@mui/material/Button";
+import { Button } from "@/Components/v2/Inputs";
 import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
 import { Typography } from "@mui/material";
 import humanInterval from "human-interval";

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

@@ -13,6 +13,7 @@ import { useState } from "react";
 import { getStatusPalette } from "@/Utils/MonitorUtils";
 import prettyMilliseconds from "pretty-ms";
 import { ChartResponseTime } from "@/Components/v2/Monitors/ChartResponseTime";
+import { HeaderRange } from "@/Components/v2/Monitors/HeaderRange";
 
 const UptimeDetailsPage = () => {
 	const { id } = useParams();
@@ -73,8 +74,10 @@ const UptimeDetailsPage = () => {
 		: -1;
 
 	const checks = response?.data?.checks || [];
-	const upChecks = upResponse?.data?.checks || [];
-	const downChecks = downResponse?.data?.checks || [];
+	const upChecks = upResponse?.data?.checks ? [...upResponse.data.checks].reverse() : [];
+	const downChecks = downResponse?.data?.checks
+		? [...downResponse.data.checks].reverse()
+		: [];
 
 	// TODO something with these
 
@@ -112,6 +115,10 @@ const UptimeDetailsPage = () => {
 					subtitle={stats?.lastResponseTime ? `${stats?.lastResponseTime} ms` : "N/A"}
 				/>
 			</Stack>
+			<HeaderRange
+				range={range}
+				setRange={setRange}
+			/>
 			<Stack
 				direction={isSmall ? "column" : "row"}
 				gap={theme.spacing(8)}
@@ -119,12 +126,12 @@ const UptimeDetailsPage = () => {
 				<HistogramStatus
 					title="Uptime"
 					status={"up"}
-					checks={upChecks.reverse()}
+					checks={upChecks}
 					range={range}
 				/>
 				<HistogramStatus
 					title="Incidents"
-					checks={downChecks.reverse()}
+					checks={downChecks}
 					status={"down"}
 					range={range}
 				/>

client/src/Types/mui.d.ts

@@ -22,3 +22,19 @@ declare module "@mui/material/Button" {
 		accent: true;
 	}
 }
+
+declare module "@mui/material/Button" {
+	interface ButtonPropsVariantOverrides {
+		group: true;
+	}
+}
+
+declare module "@mui/material/ButtonGroup" {
+	interface ButtonGroupPropsColorOverrides {
+		accent: true;
+	}
+
+	interface ButtonGroupPropsVariantOverrides {
+		group: true;
+	}
+}