Merge pull request #821 from bluewave-labs/fix/status-display

Add paused for  state, refactored out logic for determining monitor state

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,
 };

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 (
     <Box className="monitor-details">
       {loading ? (
@@ -162,7 +153,7 @@ const DetailsPage = ({ isAdmin }) => {
                   gap={theme.spacing(2)}
                 >
                   <Tooltip
-                    title={statusMsg[monitor?.status ?? undefined]}
+                    title={statusMsg[determineState(monitor)]}
                     disableInteractive
                     slotProps={{
                       popper: {
@@ -178,9 +169,7 @@ const DetailsPage = ({ isAdmin }) => {
                     }}
                   >
                     <Box>
-                      <PulseDot
-                        color={statusColor[monitor?.status ?? undefined]}
-                      />
+                      <PulseDot color={statusColor[determineState(monitor)]} />
                     </Box>
                   </Tooltip>
                   <Typography
@@ -291,27 +280,7 @@ const DetailsPage = ({ isAdmin }) => {
               </Stack>
             </Stack>
             <Stack direction="row" gap={theme.spacing(8)}>
-              <StatBox
-                sx={
-                  monitor?.status === undefined
-                    ? {
-                        backgroundColor: theme.palette.warning.light,
-                        borderColor: theme.palette.warning.border,
-                        "& h2": { color: theme.palette.warning.main },
-                      }
-                    : monitor?.status
-                    ? {
-                        backgroundColor: theme.palette.success.bg,
-                        borderColor: theme.palette.success.light,
-                        "& h2": { color: theme.palette.success.main },
-                      }
-                    : {
-                        backgroundColor: theme.palette.error.bg,
-                        borderColor: theme.palette.error.light,
-                        "& h2": { color: theme.palette.error.main },
-                      }
-                }
-              >
+              <StatBox sx={statusStyles[determineState(monitor)]}>
                 <Typography component="h2">active for</Typography>
                 <Typography>
                   {splitDuration(monitor?.uptimeDuration)}

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 (
                 <TableRow
                   key={monitor._id}

Client/src/Pages/Monitors/Home/monitorData.jsx

@@ -1,110 +0,0 @@
-import Host from "./host";
-import ActionsMenu from "./actionsMenu";
-import BarChart from "../../../Components/Charts/BarChart";
-import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
-import { StatusLabel } from "../../../Components/Label";
-import { Box } from "@mui/material";
-import { useTheme } from "@emotion/react";
-
-const data = {
-  cols: [
-    { id: 1, name: "Host" },
-    {
-      id: 2,
-      name: (
-        <Box width="max-content">
-          Status
-          <span>
-            <ArrowDownwardRoundedIcon />
-          </span>
-        </Box>
-      ),
-    },
-    { 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: <Host params={params} /> },
-        {
-          id: idx + 1,
-          data: (
-            <StatusLabel
-              status={params.status}
-              text={params.status}
-              customStyles={{ textTransform: "capitalize" }}
-            />
-          ),
-        },
-        { id: idx + 2, data: <BarChart checks={reversedChecks} /> },
-        {
-          id: idx + 3,
-          data: (
-            <span style={{ textTransform: "uppercase" }}>{monitor.type}</span>
-          ),
-        },
-        {
-          id: idx + 4,
-          data: <ActionsMenu monitor={monitor} isAdmin={isAdmin} />,
-        },
-      ],
-    };
-  });
-  return data;
-};

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;