Merge pull request #1696 from bluewave-labs/feat/fe/distributed-uptime

feat: fe/distributed uptime
bluewave-labs · Feb 5, 2025 · 547f97f · 547f97f
2 parents b5977bb + bbf2777
commit 547f97f
Show file tree

Hide file tree

Showing 26 changed files with 2,063 additions and 20 deletions.
diff --git a/Client/package-lock.json b/Client/package-lock.json
diff --git a/Client/package.json b/Client/package.json
@@ -18,16 +18,17 @@
 		"@mui/icons-material": "6.4.3",
 		"@mui/lab": "6.0.0-beta.26",
 		"@mui/material": "6.4.3",
-
 		"@mui/x-charts": "^7.5.1",
 		"@mui/x-data-grid": "7.25.0",
 		"@mui/x-date-pickers": "7.25.0",
 		"@reduxjs/toolkit": "2.5.1",
 		"axios": "^1.7.4",
 		"dayjs": "1.11.13",
+		"flag-icons": "7.3.2",
 		"immutability-helper": "^3.1.1",
 		"joi": "17.13.3",
 		"jwt-decode": "^4.0.0",
+		"maplibre-gl": "5.1.0",
 		"mui-color-input": "^5.0.1",
 		"react": "^18.2.0",
 		"react-dnd": "^16.0.1",

diff --git a/Client/src/Components/Charts/ChartBox/index.jsx b/Client/src/Components/Charts/ChartBox/index.jsx
@@ -11,6 +11,7 @@ const ChartBox = ({
 	justifyContent = "space-between",
 	Legend,
 	borderRadiusRight = 4,
+	sx,
 }) => {
 	const theme = useTheme();
 	return (
@@ -70,8 +71,8 @@ const ChartBox = ({
 					alignItems="center"
 					gap={theme.spacing(6)}
 				>
-					<IconBox>{icon}</IconBox>
-					<Typography component="h2">{header}</Typography>
+					{icon && <IconBox>{icon}</IconBox>}
+					{header && <Typography component="h2">{header}</Typography>}
 				</Stack>
 				{children}
 			</Stack>
@@ -84,7 +85,7 @@ export default ChartBox;
 
 ChartBox.propTypes = {
 	children: PropTypes.node,
-	icon: PropTypes.node.isRequired,
-	header: PropTypes.string.isRequired,
+	icon: PropTypes.node,
+	header: PropTypes.string,
 	height: PropTypes.string,
 };
diff --git a/Client/src/Components/Image/index.jsx b/Client/src/Components/Image/index.jsx
@@ -14,6 +14,7 @@ const Image = ({
 	maxWidth = "auto",
 	maxHeight = "auto",
 	base64,
+	sx,
 }) => {
 	if (shouldRender === false) {
 		return null;
@@ -36,6 +37,7 @@ const Image = ({
 			maxHeight={maxHeight}
 			width={width}
 			height={height}
+			sx={{ ...sx }}
 		/>
 	);
 };
@@ -49,6 +51,7 @@ Image.propTypes = {
 	maxWidth: PropTypes.string,
 	maxHeight: PropTypes.string,
 	base64: PropTypes.string,
+	sx: PropTypes.object,
 };
 
 export default Image;
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
@@ -45,13 +45,15 @@ import Docs from "../../assets/icons/docs.svg?react";
 import Folder from "../../assets/icons/folder.svg?react";
 import StatusPages from "../../assets/icons/status-pages.svg?react";
 import ChatBubbleOutlineRoundedIcon from "@mui/icons-material/ChatBubbleOutlineRounded";
+import Groups from "../../assets/icons/groups.svg?react";
 
 import "./index.css";
 
 const menu = [
 	{ name: "Uptime", path: "uptime", icon: <Monitors /> },
 	{ name: "Pagespeed", path: "pagespeed", icon: <PageSpeed /> },
 	{ name: "Infrastructure", path: "infrastructure", icon: <Integrations /> },
+	{ name: "Distributed Uptime", path: "distributed-uptime", icon: <Groups /> },
 	{ name: "Incidents", path: "incidents", icon: <Incidents /> },
 
 	{ name: "Status pages", path: "status", icon: <StatusPages /> },
@@ -99,6 +101,7 @@ const PATH_MAP = {
 	monitors: "Dashboard",
 	pagespeed: "Dashboard",
 	infrastructure: "Dashboard",
+	["distributed-uptime"]: "Dashboard",
 	account: "Account",
 	settings: "Settings",
 };
@@ -337,15 +340,13 @@ function Sidebar() {
 							disableInteractive
 						>
 							<ListItemButton
-								className={location.pathname.includes(item.path) ? "selected-path" : ""}
+								className={location.pathname === `/${item.path}` ? "selected-path" : ""}
 								onClick={() => navigate(`/${item.path}`)}
 								sx={{
-									/* 
-									TODO we do not need this height
-									minHeight: "37px", */
-									p: theme.spacing(5),
+									height: "37px",
 									gap: theme.spacing(4),
 									borderRadius: theme.shape.borderRadius,
+									px: theme.spacing(4),
 								}}
 							>
 								<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>

diff --git a/Client/src/Components/StatBox/index.jsx b/Client/src/Components/StatBox/index.jsx
@@ -1,4 +1,5 @@
-import { Box, Typography } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
+import Image from "../Image";
 import { useTheme } from "@mui/material/styles";
 import PropTypes from "prop-types";
 import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils";
@@ -29,7 +30,15 @@ import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils";
  * @returns {React.ReactElement} A styled box containing the statistic
  */
 
-const StatBox = ({ heading, subHeading, gradient = false, status = "", sx }) => {
+const StatBox = ({
+	img,
+	alt,
+	heading,
+	subHeading,
+	gradient = false,
+	status = "",
+	sx,
+}) => {
 	const theme = useTheme();
 	const { statusToTheme } = useUtils();
 	const themeColor = statusToTheme[status];
@@ -70,7 +79,8 @@ const StatBox = ({ heading, subHeading, gradient = false, status = "", sx }) =>
 			};
 
 	return (
-		<Box
+		<Stack
+			direction="row"
 			sx={{
 				padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
 				/* TODO why are we using width and min width here? */
@@ -95,9 +105,20 @@ const StatBox = ({ heading, subHeading, gradient = false, status = "", sx }) =>
 				...sx,
 			}}
 		>
-			<Typography component="h2">{heading}</Typography>
-			<Typography>{subHeading}</Typography>
-		</Box>
+			{img && (
+				<Image
+					src={img}
+					height={"30px"}
+					width={"30px"}
+					alt={alt}
+					sx={{ marginRight: theme.spacing(8) }}
+				/>
+			)}
+			<Stack>
+				<Typography component="h2">{heading}</Typography>
+				<Typography>{subHeading}</Typography>
+			</Stack>
+		</Stack>
 	);
 };