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
+
+