74 lines
1.8 KiB
React
74 lines
1.8 KiB
React
import { Box, Stack, Tooltip, Typography } from "@mui/material";
|
|
import { useMonitorUtils } from "../../../../Hooks/useMonitorUtils";
|
|
import { useTheme } from "@emotion/react";
|
|
import { useTranslation } from "react-i18next";
|
|
import PulseDot from "../../../../Components/Animated/PulseDot";
|
|
import PropTypes from "prop-types";
|
|
const MonitorStatusHeader = ({ monitor, infrastructureMonitor }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
const { statusColor, pagespeedStatusMsg, determineState } = useMonitorUtils();
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
height="fit-content"
|
|
gap={theme.spacing(2)}
|
|
>
|
|
<Tooltip
|
|
title={pagespeedStatusMsg[determineState(monitor)]}
|
|
disableInteractive
|
|
slotProps={{
|
|
popper: {
|
|
modifiers: [
|
|
{
|
|
name: "offset",
|
|
options: { offset: [0, -8] },
|
|
},
|
|
],
|
|
},
|
|
}}
|
|
>
|
|
<Box>
|
|
<PulseDot color={statusColor[determineState(monitor)]} />
|
|
</Box>
|
|
</Tooltip>
|
|
<Typography
|
|
component="h2"
|
|
variant="monitorUrl"
|
|
>
|
|
{infrastructureMonitor.url?.replace(/^https?:\/\//, "") || "..."}
|
|
</Typography>
|
|
<Typography
|
|
position="relative"
|
|
variant="body2"
|
|
ml={theme.spacing(6)}
|
|
mt={theme.spacing(1)}
|
|
sx={{
|
|
"&:before": {
|
|
position: "absolute",
|
|
content: `""`,
|
|
width: theme.spacing(2),
|
|
height: theme.spacing(2),
|
|
borderRadius: "50%",
|
|
backgroundColor: theme.palette.primary.contrastTextTertiary,
|
|
opacity: 0.8,
|
|
left: theme.spacing(-5),
|
|
top: "50%",
|
|
transform: "translateY(-50%)",
|
|
},
|
|
}}
|
|
>
|
|
{t("editing")}
|
|
</Typography>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
MonitorStatusHeader.propTypes = {
|
|
monitor: PropTypes.object.isRequired,
|
|
infrastructureMonitor: PropTypes.object.isRequired,
|
|
};
|
|
|
|
export default MonitorStatusHeader;
|