69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import Stack from "@mui/material/Stack";
|
|
import Tooltip from "@mui/material/Tooltip";
|
|
import Typography from "@mui/material/Typography";
|
|
import { formatDateWithTz } from "@/utils/TimeUtils";
|
|
import { useAppSelector } from "@/hooks/AppHooks";
|
|
import type { LatestCheck } from "@/types/check";
|
|
import { useTheme } from "@mui/material/styles";
|
|
|
|
export const HeatmapResponseTimeTooltip: React.FC<{
|
|
children: React.ReactElement;
|
|
check: LatestCheck;
|
|
}> = ({ children, check }) => {
|
|
const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
|
|
const theme = useTheme();
|
|
|
|
const getColor = (status: string) => {
|
|
if (status === "up") return theme.palette.success.lowContrast;
|
|
if (status === "down") return theme.palette.error.lowContrast;
|
|
};
|
|
|
|
if (check.status === "placeholder") {
|
|
return children;
|
|
}
|
|
return (
|
|
<Tooltip
|
|
slotProps={{
|
|
tooltip: {
|
|
sx: {
|
|
backgroundColor: "transparent",
|
|
color: "inherit",
|
|
boxShadow: "none",
|
|
},
|
|
},
|
|
}}
|
|
title={
|
|
<Stack
|
|
sx={{
|
|
backgroundColor: theme.palette.secondary.main,
|
|
border: 1,
|
|
borderColor: theme.palette.primary.lowContrast,
|
|
borderRadius: theme.shape.borderRadius,
|
|
p: theme.spacing(4),
|
|
}}
|
|
>
|
|
<Typography>
|
|
{formatDateWithTz(
|
|
check?.checkedAt,
|
|
"ddd, MMMM D, YYYY, HH:mm A",
|
|
uiTimezone
|
|
)}
|
|
</Typography>
|
|
{check?.responseTime && (
|
|
<Typography>Response Time: {check.responseTime} ms</Typography>
|
|
)}
|
|
|
|
<Typography textTransform={"capitalize"}>
|
|
Status:{" "}
|
|
<span style={{ color: getColor(check?.status) }}>
|
|
{check?.status}
|
|
</span>
|
|
</Typography>
|
|
</Stack>
|
|
}
|
|
>
|
|
{children}
|
|
</Tooltip>
|
|
);
|
|
};
|