move monitor status generation to header

Client/src/Pages/StatusPage/Status/Components/StatusBar/index.jsx

@@ -1,11 +1,54 @@
 // Components
 import { Stack, Typography } from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 
 // Utils
 import { useTheme } from "@mui/material/styles";
 import PropTypes from "prop-types";
-const StatusBar = ({ status }) => {
+
+const getMonitorStatus = (monitors, theme) => {
+	const monitorsStatus = {
+		icon: (
+			<ErrorOutlineIcon
+				sx={{ color: theme.palette.primary.contrastTextSecondaryDarkBg }}
+			/>
+		),
+	};
+	if (monitors.every((monitor) => monitor.status === true)) {
+		monitorsStatus.msg = "All systems operational";
+		monitorsStatus.color = theme.palette.success.lowContrast;
+		monitorsStatus.icon = (
+			<CheckCircleIcon
+				sx={{ color: theme.palette.primary.contrastTextSecondaryDarkBg }}
+			/>
+		);
+	}
+
+	if (monitors.every((monitor) => monitor.status === false)) {
+		monitorsStatus.msg = "All systems down";
+		monitorsStatus.color = theme.palette.error.lowContrast;
+	}
+
+	if (monitors.some((monitor) => monitor.status === false)) {
+		monitorsStatus.msg = "Degraded performance";
+		monitorsStatus.color = theme.palette.warning.lowContrast;
+	}
+
+	// Paused or unknown
+	if (monitors.some((monitor) => typeof monitor.status === "undefined")) {
+		monitorsStatus.msg = "Unknown status";
+		monitorsStatus.color = theme.palette.warning.lowContrast;
+	}
+	return monitorsStatus;
+};
+
+const StatusBar = ({ monitors }) => {
 	const theme = useTheme();
+
+	if (typeof monitors === "undefined") return;
+
+	const monitorsStatus = getMonitorStatus(monitors, theme);
 	return (
 		<Stack
 			direction="row"
@@ -14,12 +57,12 @@ const StatusBar = ({ status }) => {
 			gap={theme.spacing(2)}
 			height={theme.spacing(30)}
 			width={"100%"}
-			backgroundColor={status?.color}
+			backgroundColor={monitorsStatus.color}
 			borderRadius={theme.spacing(2)}
 		>
-			{status?.icon}
+			{monitorsStatus.icon}
 			{/* CAIO_REVIEW */}
-			<Typography variant="h2DarkBg">{status?.msg}</Typography>
+			<Typography variant="h2DarkBg">{monitorsStatus.msg}</Typography>
 		</Stack>
 	);
 };