diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index 886f66fb9..bdc34982a 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -138,6 +138,11 @@ const StatusLabel = ({ status, text, customStyles }) => { bgColor: theme.palette.error.bg, borderColor: theme.palette.error.light, }, + paused: { + dotColor: theme.palette.warning.main, + bgColor: theme.palette.warning.bg, + borderColor: theme.palette.warning.light, + }, pending: { dotColor: theme.palette.warning.main, bgColor: theme.palette.warning.bg, @@ -175,7 +180,13 @@ const StatusLabel = ({ status, text, customStyles }) => { }; StatusLabel.propTypes = { - status: PropTypes.oneOf(["up", "down", "pending", "cannot resolve"]), + status: PropTypes.oneOf([ + "up", + "down", + "paused", + "pending", + "cannot resolve", + ]), text: PropTypes.string, customStyles: PropTypes.object, }; diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx index ea356a610..41e529eb9 100644 --- a/Client/src/Pages/Monitors/Details/index.jsx +++ b/Client/src/Pages/Monitors/Details/index.jsx @@ -34,13 +34,14 @@ import { StatBox, ChartBox, IconBox } from "./styled"; import { DownBarChart, ResponseGaugeChart, UpBarChart } from "./Charts"; import SkeletonLayout from "./skeleton"; import "./index.css"; - +import useUtils from "../utils"; /** * Details page component displaying monitor details and related information. * @component */ const DetailsPage = ({ isAdmin }) => { const theme = useTheme(); + const { statusColor, statusStyles, statusMsg, determineState } = useUtils(); const [monitor, setMonitor] = useState({}); const { monitorId } = useParams(); const { authToken } = useSelector((state) => state.auth); @@ -89,15 +90,17 @@ const DetailsPage = ({ isAdmin }) => { monitorId ); - let [month, day, year] = res?.data?.data?.certificateDate.split("/"); - const date = new Date(year, month - 1, day); + if (res?.data?.data?.certificateDate) { + let [month, day, year] = res.data.data.certificateDate.split("/"); + const date = new Date(year, month - 1, day); - setCertificateExpiry( - formatDate(date, { - hour: undefined, - minute: undefined, - }) ?? "N/A" - ); + setCertificateExpiry( + formatDate(date, { + hour: undefined, + minute: undefined, + }) ?? "N/A" + ); + } } catch (error) { console.error(error); } @@ -120,18 +123,6 @@ const DetailsPage = ({ isAdmin }) => { const [hoveredUptimeData, setHoveredUptimeData] = useState(null); const [hoveredIncidentsData, setHoveredIncidentsData] = useState(null); - const statusColor = { - true: theme.palette.success.main, - false: theme.palette.error.main, - undefined: theme.palette.warning.main, - }; - - const statusMsg = { - true: "Your site is up.", - false: "Your site is down.", - undefined: "Pending...", - }; - return ( {loading ? ( @@ -162,7 +153,7 @@ const DetailsPage = ({ isAdmin }) => { gap={theme.spacing(2)} > { }} > - + { - + active for {splitDuration(monitor?.uptimeDuration)} diff --git a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx b/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx index f3c02f920..f055a57a1 100644 --- a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx +++ b/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx @@ -32,6 +32,7 @@ import LeftArrow from "../../../../assets/icons/left-arrow.svg?react"; import RightArrow from "../../../../assets/icons/right-arrow.svg?react"; import SelectorVertical from "../../../../assets/icons/selector-vertical.svg?react"; import ActionsMenu from "../actionsMenu"; +import useUtils from "../../utils"; /** * Component for pagination actions (first, previous, next, last). @@ -47,7 +48,6 @@ import ActionsMenu from "../actionsMenu"; */ const TablePaginationActions = (props) => { const { count, page, rowsPerPage, onPageChange } = props; - const handleFirstPageButtonClick = (event) => { onPageChange(event, 0); }; @@ -110,6 +110,7 @@ const MonitorTable = ({ isAdmin }) => { const theme = useTheme(); const navigate = useNavigate(); const dispatch = useDispatch(); + const { determineState } = useUtils(); const { rowsPerPage } = useSelector((state) => state.ui.monitors); const [page, setPage] = useState(0); @@ -219,14 +220,11 @@ const MonitorTable = ({ isAdmin }) => { title: monitor.name, percentage: uptimePercentage, percentageColor, - status: - monitor.status === undefined - ? "pending" - : monitor.status === true - ? "up" - : "down", + status: determineState(monitor), }; + console.log(params); + return ( - Status - - - - - ), - }, - { id: 3, name: "Response Time" }, - { id: 4, name: "Type" }, - { id: 5, name: "Actions" }, - ], - rows: [], -}; - -/** - * Builds table data for a list of monitors. - * - * @param {Array} monitors - An array of monitor objects containing information about each monitor. - * @param {boolean} isAdmin - Flag indicating if the current user is an admin. - * @param {Function} navigate - A function to navigate to the monitor detail page. - * @returns {Object} The data structure containing columns and rows for the table. - */ -export const buildData = (monitors, isAdmin, navigate) => { - const theme = useTheme(); - - data.rows = monitors.map((monitor, idx) => { - let uptimePercentage = ""; - let percentageColor = theme.palette.percentage.uptimeExcellent; - - // Determine uptime percentage and color based on the monitor's uptimePercentage value - if (monitor.uptimePercentage !== undefined) { - uptimePercentage = - monitor.uptimePercentage === 0 - ? "0" - : (monitor.uptimePercentage * 100).toFixed(2); - - percentageColor = - monitor.uptimePercentage < 0.25 - ? theme.palette.percentage.uptimePoor - : monitor.uptimePercentage < 0.5 - ? theme.palette.percentage.uptimeFair - : monitor.uptimePercentage < 0.75 - ? theme.palette.percentage.uptimeGood - : theme.palette.percentage.uptimeExcellent; - } - - const params = { - url: monitor.url, - title: monitor.name, - percentage: uptimePercentage, - percentageColor, - status: - monitor.status === undefined - ? "pending" - : monitor.status === true - ? "up" - : "down", - }; - - // Reverse checks so the latest check is on the right - const reversedChecks = monitor.checks.slice().reverse(); - - return { - id: monitor._id, - handleClick: () => { - navigate(`/monitors/${monitor._id}`); - }, - data: [ - { id: idx, data: }, - { - id: idx + 1, - data: ( - - ), - }, - { id: idx + 2, data: }, - { - id: idx + 3, - data: ( - {monitor.type} - ), - }, - { - id: idx + 4, - data: , - }, - ], - }; - }); - return data; -}; diff --git a/Client/src/Pages/Monitors/utils.jsx b/Client/src/Pages/Monitors/utils.jsx new file mode 100644 index 000000000..0551a65aa --- /dev/null +++ b/Client/src/Pages/Monitors/utils.jsx @@ -0,0 +1,54 @@ +import { useTheme } from "@mui/material"; + +const useUtils = () => { + const theme = useTheme(); + const determineState = (monitor) => { + if (monitor.isActive === false) return "paused"; + if (monitor?.status === undefined) return "pending"; + return monitor?.status == true ? "up" : "down"; + }; + + const statusColor = { + up: theme.palette.success.main, + down: theme.palette.error.main, + paused: theme.palette.warning.main, + pending: theme.palette.warning.main, + }; + + const statusMsg = { + up: "Your site is up.", + down: "Your site is down.", + paused: "Pending...", + }; + const statusStyles = { + up: { + backgroundColor: theme.palette.success.bg, + borderColor: theme.palette.success.light, + "& h2": { color: theme.palette.success.main }, + }, + down: { + backgroundColor: theme.palette.error.bg, + borderColor: theme.palette.error.light, + "& h2": { color: theme.palette.error.main }, + }, + paused: { + backgroundColor: theme.palette.warning.light, + borderColor: theme.palette.warning.border, + "& h2": { color: theme.palette.warning.main }, + }, + pending: { + backgroundColor: theme.palette.warning.light, + borderColor: theme.palette.warning.border, + "& h2": { color: theme.palette.warning.main }, + }, + }; + + return { + determineState, + statusColor, + statusMsg, + statusStyles, + }; +}; + +export default useUtils;