add timeframe header and monitorslist

src/Pages/DistributedUptimeStatus/Status/Components/MonitorsList/index.jsx

@@ -0,0 +1,66 @@
+// Components
+import { Stack, Box } from "@mui/material";
+import Host from "../../../../../Components/Host";
+import DePINStatusPageBarChart from "../../../../../Components/Charts/DePINStatusPageBarChart";
+import { StatusLabel } from "../../../../../Components/Label";
+
+//Utils
+import { useTheme } from "@mui/material/styles";
+import useUtils from "../../../../Uptime/Monitors/Hooks/useUtils";
+import PropTypes from "prop-types";
+const MonitorsList = ({
+	isLoading = false,
+	shouldRender = true,
+	monitors = [],
+	timeFrame,
+}) => {
+	const theme = useTheme();
+	const { determineState } = useUtils();
+	return (
+		<>
+			{monitors?.map((monitor) => {
+				const status = determineState(monitor);
+				return (
+					<Stack
+						key={monitor._id}
+						width="100%"
+						gap={theme.spacing(2)}
+					>
+						<Host
+							key={monitor._id}
+							url={monitor.url}
+							title={monitor.name}
+							percentageColor={monitor.percentageColor}
+							percentage={monitor.percentage}
+						/>
+						<Stack
+							direction="row"
+							alignItems="center"
+							gap={theme.spacing(20)}
+						>
+							<Box flex={9}>
+								<DePINStatusPageBarChart
+									checks={monitor?.checks?.slice().reverse()}
+									daysToShow={timeFrame}
+								/>
+							</Box>
+							<Box flex={1}>
+								<StatusLabel
+									status={status}
+									text={status}
+									customStyles={{ textTransform: "capitalize" }}
+								/>
+							</Box>
+						</Stack>
+					</Stack>
+				);
+			})}
+		</>
+	);
+};
+
+MonitorsList.propTypes = {
+	monitors: PropTypes.array.isRequired,
+};
+
+export default MonitorsList;

src/Pages/DistributedUptimeStatus/Status/Components/TimeframeHeader/index.jsx

@@ -0,0 +1,39 @@
+import { Stack, Button, ButtonGroup } from "@mui/material";
+import { RowContainer } from "../../../../../Components/StandardContainer";
+import { useTheme } from "@emotion/react";
+
+const TimeFrameHeader = ({ timeFrame, setTimeFrame }) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction="row"
+			justifyContent="flex-end"
+		>
+			<ButtonGroup>
+				<Button
+					variant="group"
+					filled={(timeFrame === 30).toString()}
+					onClick={() => setTimeFrame(30)}
+				>
+					30 days
+				</Button>
+				<Button
+					variant="group"
+					filled={(timeFrame === 60).toString()}
+					onClick={() => setTimeFrame(60)}
+				>
+					60 days
+				</Button>
+				<Button
+					variant="group"
+					filled={(timeFrame === 90).toString()}
+					onClick={() => setTimeFrame(90)}
+				>
+					90 days
+				</Button>
+			</ButtonGroup>
+		</Stack>
+	);
+};
+
+export default TimeFrameHeader;

src/Pages/DistributedUptimeStatus/Status/Hooks/useStatusPageFetchByUrl.jsx

@@ -2,25 +2,41 @@ import { useState, useEffect } from "react";
 import { networkService } from "../../../../main";
 import { createToast } from "../../../../Utils/toastUtils";
 import { useSelector } from "react-redux";
+import { useTheme } from "@emotion/react";
+import { useMonitorUtils } from "../../../../Hooks/useMonitorUtils";
 
-const useStatusPageFetchByUrl = ({ url }) => {
+const useStatusPageFetchByUrl = ({ url, timeFrame }) => {
 	const [isLoading, setIsLoading] = useState(true);
 	const [networkError, setNetworkError] = useState(false);
 	const [statusPage, setStatusPage] = useState(undefined);
 	const [monitorId, setMonitorId] = useState(undefined);
 	const [isPublished, setIsPublished] = useState(false);
 	const { authToken } = useSelector((state) => state.auth);
+	const theme = useTheme();
+	const { getMonitorWithPercentage } = useMonitorUtils();
+
 	useEffect(() => {
 		const fetchStatusPageByUrl = async () => {
 			try {
-				const response = await networkService.getStatusPageByUrl({
+				const response = await networkService.getDistributedStatusPageByUrl({
 					authToken,
 					url,
 					type: "distributed",
+					timeFrame,
 				});
 				if (!response?.data?.data) return;
 				const statusPage = response.data.data;
-				setStatusPage(statusPage);
+
+				const monitorsWithPercentage = statusPage?.subMonitors.map((monitor) =>
+					getMonitorWithPercentage(monitor, theme)
+				);
+
+				const statusPageWithSubmonitorPercentages = {
+					...statusPage,
+					subMonitors: monitorsWithPercentage,
+				};
+				setStatusPage(statusPageWithSubmonitorPercentages);
+
 				setMonitorId(statusPage?.monitors[0]);
 				setIsPublished(statusPage?.isPublished);
 			} catch (error) {
@@ -33,7 +49,7 @@ const useStatusPageFetchByUrl = ({ url }) => {
 			}
 		};
 		fetchStatusPageByUrl();
-	}, [authToken, url]);
+	}, [authToken, url, getMonitorWithPercentage, theme, timeFrame]);
 
 	return [isLoading, networkError, statusPage, monitorId, isPublished];
 };

src/Pages/DistributedUptimeStatus/Status/index.jsx

@@ -16,7 +16,7 @@ import UptLogo from "../../../assets/icons/upt_logo.png";
 import PeopleAltOutlinedIcon from "@mui/icons-material/PeopleAltOutlined";
 import InfoBox from "../../../Components/InfoBox";
 import StatusHeader from "../../DistributedUptime/Details/Components/StatusHeader";
-import MonitorsList from "../../StatusPage/Status/Components/MonitorsList";
+import MonitorsList from "./Components/MonitorsList";
 
 //Utils
 import { useTheme } from "@mui/material/styles";
@@ -27,6 +27,7 @@ import { useStatusPageFetchByUrl } from "./Hooks/useStatusPageFetchByUrl";
 import { useStatusPageDelete } from "../../StatusPage/Status/Hooks/useStatusPageDelete";
 import { useNavigate } from "react-router-dom";
 import { useLocation } from "react-router-dom";
+import TimeFrameHeader from "./Components/TimeframeHeader";
 
 const DistributedUptimeStatus = () => {
 	const { url } = useParams();
@@ -37,6 +38,7 @@ const DistributedUptimeStatus = () => {
 	// Local State
 	const [dateRange, setDateRange] = useState("day");
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+	const [timeFrame, setTimeFrame] = useState(30);
 	// Utils
 	const theme = useTheme();
 	const navigate = useNavigate();
@@ -49,6 +51,7 @@ const DistributedUptimeStatus = () => {
 		isPublished,
 	] = useStatusPageFetchByUrl({
 		url,
+		timeFrame,
 	});
 
 	const [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger] =
@@ -217,7 +220,14 @@ const DistributedUptimeStatus = () => {
 				monitor={monitor}
 				lastUpdateTrigger={lastUpdateTrigger}
 			/>
-			<MonitorsList monitors={statusPage?.subMonitors} />
+			<TimeFrameHeader
+				timeFrame={timeFrame}
+				setTimeFrame={setTimeFrame}
+			/>
+			<MonitorsList
+				monitors={statusPage?.subMonitors}
+				timeFrame={timeFrame}
+			/>
 			<Footer />
 			<Dialog
 				// open={isOpen.deleteStats}