diff --git a/Client/src/Pages/Infrastructure/Details/index.jsx b/Client/src/Pages/Infrastructure/Details/index.jsx index 100e785c8..4fb547a5a 100644 --- a/Client/src/Pages/Infrastructure/Details/index.jsx +++ b/Client/src/Pages/Infrastructure/Details/index.jsx @@ -5,6 +5,9 @@ import { Stack, Box, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; import CustomGauge from "../../../Components/Charts/CustomGauge"; import AreaChart from "../../../Components/Charts/AreaChart"; +import PulseDot from "../../../Components/Animated/PulseDot"; +import useUtils from "../../Monitors/utils"; +import { formatDurationRounded, formatDurationSplit } from "../../../Utils/timeUtils"; import axios from "axios"; import { TzTick, @@ -164,7 +167,7 @@ const InfrastructureDetails = () => { { name: "details", path: `/infrastructure/${monitorId}` }, ]; const [monitor, setMonitor] = useState(null); - + const { statusColor, determineState } = useUtils(); // These calculations are needed because ResponsiveContainer // doesn't take padding of parent/siblings into account // when calculating height. @@ -283,6 +286,30 @@ const InfrastructureDetails = () => { gap={theme.spacing(10)} mt={theme.spacing(10)} > + + + + + + {monitor.name} + + {monitor.url || "..."} + + + Checking every {formatDurationRounded(monitor?.interval)} + + + Last checked {formatDurationSplit(monitor?.lastChecked).time}{" "} + {formatDurationSplit(monitor?.lastChecked).format} ago + +