93 lines
2.3 KiB
React
93 lines
2.3 KiB
React
// Components
|
|
import { ColContainer } from "../../../../../Components/StandardContainer";
|
|
import { Stack, Typography } from "@mui/material";
|
|
import PulseDot from "../../../../../Components/Animated/PulseDot";
|
|
import LastUpdate from "../LastUpdate";
|
|
import ChatBot from "../Chatbot";
|
|
import ShareComponent from "../../../../../Components/ShareComponent";
|
|
|
|
// Utils
|
|
import { useTheme } from "@emotion/react";
|
|
import PropTypes from "prop-types";
|
|
|
|
const StatusHeader = ({ monitor, connectionStatus, elementToCapture }) => {
|
|
const theme = useTheme();
|
|
const COLOR_MAP = {
|
|
up: theme.palette.successSecondary.main,
|
|
down: theme.palette.error.lowContrast,
|
|
};
|
|
|
|
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={{ s: "column", md: "row" }}
|
|
justifyContent="space-between"
|
|
gap={theme.spacing(8)}
|
|
>
|
|
<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.success.lowContrast}
|
|
>
|
|
{MSG_MAP[connectionStatus]}
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
borderRadius={theme.spacing(8)}
|
|
padding={theme.spacing(4)}
|
|
backgroundColor={theme.palette.successSecondary.lowContrast}
|
|
color={theme.palette.success.lowContrast}
|
|
>
|
|
Uptime: {(monitor.uptimePercentage * 100).toFixed(2)}%
|
|
</Typography>
|
|
</Stack>
|
|
<Typography
|
|
variant="body2"
|
|
color={theme.palette.success.lowContrast}
|
|
>
|
|
Last updated{" "}
|
|
<LastUpdate
|
|
suffix={"seconds ago"}
|
|
lastUpdateTime={monitor?.timeSinceLastCheck}
|
|
/>
|
|
</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
<ShareComponent
|
|
elementToCapture={elementToCapture}
|
|
fileName={monitor.name}
|
|
/>
|
|
</Stack>
|
|
<ChatBot sx={{ marginTop: theme.spacing(10) }} />
|
|
</ColContainer>
|
|
);
|
|
};
|
|
|
|
StatusHeader.propTypes = {
|
|
monitor: PropTypes.object,
|
|
connectionStatus: PropTypes.string,
|
|
};
|
|
|
|
export default StatusHeader;
|