75 lines
1.9 KiB
React
75 lines
1.9 KiB
React
// 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 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"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
gap={theme.spacing(2)}
|
|
height={theme.spacing(30)}
|
|
width={"100%"}
|
|
backgroundColor={monitorsStatus.color}
|
|
borderRadius={theme.spacing(2)}
|
|
>
|
|
{monitorsStatus.icon}
|
|
{/* CAIO_REVIEW */}
|
|
<Typography variant="h2DarkBg">{monitorsStatus.msg}</Typography>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default StatusBar;
|
|
|
|
StatusBar.propTypes = {
|
|
status: PropTypes.object,
|
|
};
|