diff --git a/src/Components/StandardContainer/index.jsx b/src/Components/StandardContainer/index.jsx index d0ade6805..c736b3ecc 100644 --- a/src/Components/StandardContainer/index.jsx +++ b/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 }} diff --git a/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx b/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx new file mode 100644 index 000000000..332ae812e --- /dev/null +++ b/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 ( + + + + + + + {MSG_MAP[connectionStatus]} + + + Uptime: {(monitor.totalUptime * 100).toFixed(2)}% + + + + Last updated{" "} + + + + + + ); +}; + +StatusHeader.propTypes = { + monitor: PropTypes.object, + connectionStatus: PropTypes.string, +}; + +export default StatusHeader; diff --git a/src/Pages/DistributedUptimeStatus/Status/index.jsx b/src/Pages/DistributedUptimeStatus/Status/index.jsx index e4e54f272..a714f6976 100644 --- a/src/Pages/DistributedUptimeStatus/Status/index.jsx +++ b/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" /> + +