Merge pull request #7 from uprockcom/feat/map-and-ticker

feat: map and ticker, resolves #4

src/Components/StatBox/index.jsx

@@ -32,6 +32,7 @@ import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils";
 
 const StatBox = ({
 	img,
+	icon: Icon,
 	alt,
 	heading,
 	subHeading,
@@ -114,6 +115,9 @@ const StatBox = ({
 					sx={{ marginRight: theme.spacing(8) }}
 				/>
 			)}
+			{Icon && (
+				<Icon sx={{ width: "30px", height: "30px", marginRight: theme.spacing(8) }} />
+			)}
 			<Stack>
 				<Typography component="h2">{heading}</Typography>
 				<Typography>{subHeading}</Typography>
@@ -128,6 +132,9 @@ StatBox.propTypes = {
 	gradient: PropTypes.bool,
 	status: PropTypes.string,
 	sx: PropTypes.object,
+	icon: PropTypes.node,
+	img: PropTypes.node,
+	alt: PropTypes.string,
 };
 
 export default StatBox;

src/Pages/DistributedUptimeStatus/Status/index.jsx

@@ -12,6 +12,10 @@ import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader";
 import GenericFallback from "../../../Components/GenericFallback";
 import Dialog from "../../../Components/Dialog";
 import SkeletonLayout from "./Components/Skeleton";
+import StatBox from "../../../Components/StatBox";
+import UptLogo from "../../../assets/icons/upt_logo.png";
+import PeopleAltOutlinedIcon from "@mui/icons-material/PeopleAltOutlined";
+
 //Utils
 import { useTheme } from "@mui/material/styles";
 import { useState } from "react";
@@ -45,6 +49,7 @@ const DistributedUptimeStatus = () => {
 	const [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger] =
 		useSubscribeToDetails({ monitorId, dateRange, isPublic, isPublished });
 
+	console.log(monitor);
 	const [deleteStatusPage, isDeleting] = useStatusPageDelete(() => {
 		navigate("/distributed-uptime");
 	}, url);
@@ -144,10 +149,7 @@ const DistributedUptimeStatus = () => {
 				url={url}
 				type="distributed"
 			/>
-			<StatBoxes
-				monitor={monitor}
-				lastUpdateTrigger={lastUpdateTrigger}
-			/>
+
 			<NextExpectedCheck
 				lastUpdateTime={monitor?.timeSinceLastCheck ?? 0}
 				interval={monitor?.interval ?? 0}
@@ -157,7 +159,6 @@ const DistributedUptimeStatus = () => {
 				dateRange={dateRange}
 				setDateRange={setDateRange}
 			/>
-			<DistributedUptimeResponseChart checks={monitor?.groupedChecks ?? []} />
 			<Stack
 				direction="row"
 				gap={theme.spacing(8)}
@@ -165,14 +166,43 @@ const DistributedUptimeStatus = () => {
 				<DistributedUptimeMap
 					checks={monitor?.groupedMapChecks ?? []}
 					height={"100%"}
-					width={"100%"}
-				/>
-				<DeviceTicker
-					width={"25vw"}
-					data={monitor?.latestChecks ?? []}
-					connectionStatus={connectionStatus}
+					width={"50%"}
 				/>
+				<Stack
+					width={"50%"}
+					gap={theme.spacing(8)}
+				>
+					<Stack
+						direction="row"
+						gap={theme.spacing(8)}
+					>
+						<StatBox
+							heading="Devices"
+							subHeading={monitor?.totalChecks ?? 0}
+							icon={PeopleAltOutlinedIcon}
+							alt="Upt Logo"
+							sx={{ width: "50%" }}
+						/>
+						<StatBox
+							heading="UPT Burned"
+							subHeading={monitor?.totalUptBurnt ?? 0}
+							img={UptLogo}
+							alt="Upt Logo"
+							sx={{ width: "50%" }}
+						/>
+					</Stack>
+
+					<DeviceTicker
+						data={monitor?.latestChecks ?? []}
+						connectionStatus={connectionStatus}
+					/>
+				</Stack>
 			</Stack>
+			<DistributedUptimeResponseChart checks={monitor?.groupedChecks ?? []} />
+			<StatBoxes
+				monitor={monitor}
+				lastUpdateTrigger={lastUpdateTrigger}
+			/>
 			<Footer />
 			<Dialog
 				// open={isOpen.deleteStats}