Merge pull request #12 from uprockcom/feat/du-header

feat: Distributed Uptime Status Header, resolves #2

src/Components/StandardContainer/index.jsx

@@ -17,7 +17,6 @@ const Container = ({ children, direction, backgroundColor, sx }) => {
 			gap={theme.spacing(2)}
 			border={1}
 			borderColor={theme.palette.primary.lowContrast}
-			borderStyle="solid"
 			borderRadius={theme.spacing(4)}
 			backgroundColor={bgColor}
 			sx={{ ...sx }}

src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx

@@ -0,0 +1,84 @@
+// Components
+import { ColContainer } from "../../../../../Components/StandardContainer";
+import { Stack, Typography } from "@mui/material";
+import PulseDot from "../../../../../Components/Animated/PulseDot";
+import LastUpdate from "../LastUpdate";
+
+// Utils
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+
+const StatusHeader = ({ monitor, connectionStatus }) => {
+	console.log(monitor);
+
+	const theme = useTheme();
+
+	const COLOR_MAP = {
+		up: theme.palette.distributedStatusHeader.up,
+		down: theme.palette.distributedStatusHeader.down,
+	};
+
+	const MSG_MAP = {
+		up: "All Systems Operational",
+		down: "Last Check Failed",
+	};
+
+	const PULSE_COLOR = {
+		up: theme.palette.success.main,
+		down: theme.palette.error.main,
+	};
+
+	let bgColor = COLOR_MAP[connectionStatus];
+
+	return (
+		<ColContainer backgroundColor={bgColor}>
+			<Stack
+				direction="row"
+				gap={theme.spacing(8)}
+			>
+				<PulseDot color={PULSE_COLOR[connectionStatus]} />
+				<Stack>
+					<Stack
+						direction="row"
+						gap={theme.spacing(8)}
+					>
+						<Typography
+							variant="h1"
+							color={theme.palette.distributedStatusHeader.primaryText}
+						>
+							{MSG_MAP[connectionStatus]}
+						</Typography>
+						<Typography
+							variant="body2"
+							borderRadius={theme.spacing(8)}
+							padding={theme.spacing(4)}
+							backgroundColor={
+								theme.palette.distributedStatusHeader.primaryTextBackground
+							}
+							color={theme.palette.distributedStatusHeader.primaryText}
+						>
+							Uptime: {(monitor.totalUptime * 100).toFixed(2)}%
+						</Typography>
+					</Stack>
+					<Typography
+						variant="body2"
+						color={theme.palette.distributedStatusHeader.secondaryText}
+					>
+						Last updated{" "}
+						<LastUpdate
+							suffix={"seconds ago"}
+							lastUpdateTime={monitor.timeSinceLastCheck}
+						/>
+					</Typography>
+				</Stack>
+			</Stack>
+		</ColContainer>
+	);
+};
+
+StatusHeader.propTypes = {
+	monitor: PropTypes.object,
+	connectionStatus: PropTypes.string,
+};
+
+export default StatusHeader;

src/Pages/DistributedUptimeStatus/Status/index.jsx

@@ -12,10 +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";
 import InfoBox from "../../../Components/InfoBox";
+import StatusHeader from "../../DistributedUptime/Details/Components/StatusHeader";
 
 //Utils
 import { useTheme } from "@mui/material/styles";
@@ -150,6 +150,11 @@ const DistributedUptimeStatus = () => {
 				type="distributed"
 			/>
 
+			<StatusHeader
+				monitor={monitor}
+				connectionStatus={connectionStatus}
+			/>
+
 			<NextExpectedCheck
 				lastUpdateTime={monitor?.timeSinceLastCheck ?? 0}
 				interval={monitor?.interval ?? 0}

src/Utils/Theme/constants.js

@@ -266,6 +266,29 @@ const newSemanticColors = {
 			dark: undefined,
 		},
 	},
+
+	distributedStatusHeader: {
+		up: {
+			light: "#073C2D",
+			dark: "#073C2D",
+		},
+		down: {
+			light: newColors.red700,
+			dark: newColors.red700,
+		},
+		primaryText: {
+			light: "#34D399",
+			dark: "#34D399",
+		},
+		primaryTextBackground: {
+			light: "#094434",
+			dark: "#094434",
+		},
+		secondaryText: {
+			light: "#22946C",
+			dark: "#22946C",
+		},
+	},
 };
 
 export { typographyLevels, semanticColors as colors, newSemanticColors };