diff --git a/client/src/Components/MonitorDetailsControlHeader/index.jsx b/client/src/Components/MonitorDetailsControlHeader/index.jsx index 08729f882..c4dcf1ffc 100644 --- a/client/src/Components/MonitorDetailsControlHeader/index.jsx +++ b/client/src/Components/MonitorDetailsControlHeader/index.jsx @@ -11,7 +11,20 @@ import PropTypes from "prop-types"; import { useNavigate } from "react-router-dom"; import { useTheme } from "@mui/material/styles"; import { usePauseMonitor } from "../../Hooks/useMonitorControls"; -import { useEffect } from "react"; + +/** + * MonitorDetailsControlHeader component displays the control header for monitor details. + * It includes status display, pause/resume button, and a configure button for admins. + * + * @component + * @param {Object} props - Component props + * @param {string} props.path - The base path for navigation + * @param {boolean} [props.isLoading=false] - Flag indicating if the data is loading + * @param {boolean} [props.isAdmin=false] - Flag indicating if the user is an admin + * @param {Object} props.monitor - The monitor object containing details + * @param {Function} props.triggerUpdate - Function to trigger an update + * @returns {JSX.Element} The rendered component + */ const MonitorDetailsControlHeader = ({ path, isLoading = false, diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/MonitorDetailsControlHeader/status.jsx index 910a22210..9e01dd502 100644 --- a/client/src/Components/MonitorDetailsControlHeader/status.jsx +++ b/client/src/Components/MonitorDetailsControlHeader/status.jsx @@ -9,6 +9,18 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils"; +/** + * Status component displays the status information of a monitor. + * It includes the monitor's name, URL, and check interval. + * + * @component + * @param {Object} props - Component props + * @param {Object} props.monitor - The monitor object containing details + * @param {string} props.monitor.name - The name of the monitor + * @param {string} props.monitor.url - The URL of the monitor + * @param {number} props.monitor.interval - The interval at which the monitor checks + * @returns {JSX.Element} The rendered component + */ const Status = ({ monitor }) => { const theme = useTheme(); const { statusColor, determineState } = useUtils();