From 4268966b44066dfa2d325fdd8870c389e6c683af Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 22 Jan 2025 11:10:09 -0800
Subject: [PATCH] Add hour filter to incidents page

---
 .../Pages/Incidents/IncidentTable/index.jsx   |  10 +-
 Client/src/Pages/Incidents/index.jsx          | 160 +++++++++++++-----
 2 files changed, 121 insertions(+), 49 deletions(-)

diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index ab7af33ca..e3ddba24a 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -15,7 +15,8 @@ import { Empty } from "./Empty/Empty";
 import { IncidentSkeleton } from "./Skeleton/Skeleton";
 import DataTable from "../../../Components/Table";
 import Pagination from "../../../Components/Table/TablePagination";
-const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
+
+const IncidentTable = ({ monitors, selectedMonitor, filter, dateRange }) => {
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 
 	const theme = useTheme();
@@ -25,7 +26,6 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 	const [checksCount, setChecksCount] = useState(0);
 	const [page, setPage] = useState(0);
 	const [rowsPerPage, setRowsPerPage] = useState(10);
-
 	const [isLoading, setIsLoading] = useState(false);
 
 	useEffect(() => {
@@ -42,7 +42,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 						teamId: user.teamId,
 						sortOrder: "desc",
 						limit: null,
-						dateRange: null,
+						dateRange,
 						filter: filter,
 						page: page,
 						rowsPerPage: rowsPerPage,
@@ -53,7 +53,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 						monitorId: selectedMonitor,
 						sortOrder: "desc",
 						limit: null,
-						dateRange: null,
+						dateRange,
 						filter: filter,
 						page,
 						rowsPerPage,
@@ -69,7 +69,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 			}
 		};
 		fetchPage();
-	}, [authToken, user, monitors, selectedMonitor, filter, page, rowsPerPage]);
+	}, [authToken, user, monitors, selectedMonitor, filter, page, rowsPerPage, dateRange]);
 
 	const handlePageChange = (_, newPage) => {
 		setPage(newPage);
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 6e3f513f7..0256b89b3 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -20,6 +20,7 @@ const Incidents = () => {
 
 	// TODO do something with these filters
 	const [filter, setFilter] = useState("all");
+	const [dateRange, setDateRange] = useState("hour");
 
 	useEffect(() => {
 		const fetchMonitors = async () => {
@@ -67,6 +68,7 @@ const Incidents = () => {
 	return (
 		<Stack
 			className="incidents"
+			justifyContent="space-between"
 			pt={theme.spacing(6)}
 			gap={theme.spacing(12)}
 		>
@@ -76,62 +78,132 @@ const Incidents = () => {
 				<>
 					<Stack
 						direction="row"
-						alignItems="center"
+						justifyContent="space-between"
 						gap={theme.spacing(6)}
 					>
-						<Typography
-							display="inline-block"
-							component="h1"
-							color={theme.palette.primary.contrastTextSecondary}
+						<Stack
+							direction="row"
+							alignItems="center"
+							gap={theme.spacing(6)}
 						>
-							Incidents for
-						</Typography>
-						<Select
-							id="incidents-select-monitor"
-							placeholder="All servers"
-							value={selectedMonitor}
-							onChange={handleSelect}
-							items={Object.values(monitors)}
-							sx={{
-								backgroundColor: theme.palette.primary.main,
-								color: theme.palette.primary.contrastTextSecondary,
-							}}
-						/>
-						<ButtonGroup
-							sx={{
-								ml: "auto",
-								"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
-									borderColor: theme.palette.primary.lowContrast,
-								},
-							}}
+							<Typography
+								display="inline-block"
+								component="h1"
+								color={theme.palette.primary.contrastTextSecondary}
+							>
+								Incidents for
+							</Typography>
+							<Select
+								id="incidents-select-monitor"
+								placeholder="All servers"
+								value={selectedMonitor}
+								onChange={handleSelect}
+								items={Object.values(monitors)}
+								sx={{
+									backgroundColor: theme.palette.primary.main,
+									color: theme.palette.primary.contrastTextSecondary,
+								}}
+							/>
+						</Stack>
+						<Stack
+							direction="row"
+							alignItems="center"
+							gap={theme.spacing(6)}
 						>
-							<Button
-								variant="group"
-								filled={(filter === "all").toString()}
-								onClick={() => setFilter("all")}
+							<Typography
+								display="inline-block"
+								component="h1"
+								color={theme.palette.primary.contrastTextSecondary}
+							>
+								Filter by:
+							</Typography>
+							<ButtonGroup
+								sx={{
+									ml: "auto",
+									"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
+										borderColor: theme.palette.primary.lowContrast,
+									},
+								}}
 							>
-								All
-							</Button>
-							<Button
-								variant="group"
-								filled={(filter === "down").toString()}
-								onClick={() => setFilter("down")}
+								<Button
+									variant="group"
+									filled={(filter === "all").toString()}
+									onClick={() => setFilter("all")}
+								>
+									All
+								</Button>
+								<Button
+									variant="group"
+									filled={(filter === "down").toString()}
+									onClick={() => setFilter("down")}
+								>
+									Down
+								</Button>
+								<Button
+									variant="group"
+									filled={(filter === "resolve").toString()}
+									onClick={() => setFilter("resolve")}
+								>
+									Cannot Resolve
+								</Button>
+							</ButtonGroup>
+						</Stack>
+						<Stack
+							direction="row"
+							alignItems="center"
+							gap={theme.spacing(6)}
+						>
+							<Typography
+								display="inline-block"
+								component="h1"
+								color={theme.palette.primary.contrastTextSecondary}
 							>
-								Down
-							</Button>
-							<Button
-								variant="group"
-								filled={(filter === "resolve").toString()}
-								onClick={() => setFilter("resolve")}
+								Limit by:
+							</Typography>
+							<ButtonGroup
+								sx={{
+									ml: "auto",
+									"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
+										borderColor: theme.palette.primary.lowContrast,
+									},
+								}}
 							>
-								Cannot Resolve
-							</Button>
-						</ButtonGroup>
+								<Button
+									variant="group"
+									filled={(dateRange === "hour").toString()}
+									onClick={() => setDateRange("hour")}
+								>
+									Hour
+								</Button>
+								<Button
+									variant="group"
+									filled={(dateRange === "day").toString()}
+									onClick={() => setDateRange("day")}
+								>
+									Day
+								</Button>
+								<Button
+									variant="group"
+									filled={(dateRange === "week").toString()}
+									onClick={() => setDateRange("week")}
+								>
+									Week
+								</Button>
+								<Button
+									variant="group"
+									filled={(dateRange === "all").toString()}
+									onClick={() => setDateRange("all")}
+								>
+									All
+								</Button>
+							</ButtonGroup>
+						</Stack>
 					</Stack>
 					<IncidentTable
 						monitors={monitors}
 						selectedMonitor={selectedMonitor}
 						filter={filter}
+						dateRange={dateRange}
 					/>
 				</>
 			)}