Implement monitor states for Pagespeed pages

Client/src/Pages/Monitors/Home/MonitorTable/index.jsx

@@ -223,8 +223,6 @@ const MonitorTable = ({ isAdmin }) => {
                 status: determineState(monitor),
               };
 
-              console.log(params);
-
               return (
                 <TableRow
                   key={monitor._id}

Client/src/Pages/Monitors/utils.jsx

@@ -20,6 +20,12 @@ const useUtils = () => {
     down: "Your site is down.",
     paused: "Pending...",
   };
+
+  const pagespeedStatusMsg = {
+    up: "Live (collecting data)",
+    down: "Inactive",
+    paused: "Paused",
+  };
   const statusStyles = {
     up: {
       backgroundColor: theme.palette.success.bg,
@@ -47,6 +53,7 @@ const useUtils = () => {
     determineState,
     statusColor,
     statusMsg,
+    pagespeedStatusMsg,
     statusStyles,
   };
 };

Client/src/Pages/PageSpeed/Configure/index.jsx

@@ -23,6 +23,7 @@ import LoadingButton from "@mui/lab/LoadingButton";
 import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
 import SkeletonLayout from "./skeleton";
 import "./index.css";
+import useUtils from "../../Monitors/utils";
 
 const PageSpeedConfigure = () => {
   const theme = useTheme();
@@ -34,6 +35,7 @@ const PageSpeedConfigure = () => {
   const { monitorId } = useParams();
   const [monitor, setMonitor] = useState({});
   const [errors, setErrors] = useState({});
+  const { determineState, statusColor } = useUtils();
 
   const frequencies = [
     { _id: 3, name: "3 minutes" },
@@ -147,13 +149,7 @@ const PageSpeedConfigure = () => {
             gap={theme.spacing(12)}
           >
             <Stack direction="row" gap={theme.spacing(2)}>
-              <PulseDot
-                color={
-                  monitor?.status
-                    ? theme.palette.success.main
-                    : theme.palette.error.main
-                }
-              />
+              <PulseDot color={statusColor[determineState(monitor)]} />
               <Box>
                 <Typography
                   component="h1"
@@ -166,12 +162,10 @@ const PageSpeedConfigure = () => {
                 <Typography
                   component="span"
                   sx={{
-                    color: monitor?.status
-                      ? theme.palette.success.main
-                      : theme.palette.error.text,
+                    color: statusColor[determineState(monitor)],
                   }}
                 >
-                  Your pagespeed monitor is {monitor?.status ? "live" : "down"}.
+                  Your pagespeed monitor is {determineState(monitor)}.
                 </Typography>
               </Box>
               <Box alignSelf="flex-end" ml="auto">

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -20,6 +20,8 @@ import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import "./index.css";
+import useUtils from "../../Monitors/utils";
+import SkeletonLayout from "./skeleton";
 
 const StatBox = ({ icon, title, value }) => {
   const theme = useTheme();
@@ -150,53 +152,6 @@ PieValueLabel.propTypes = {
   highlighted: PropTypes.bool,
 };
 
-/**
- * Renders a skeleton layout.
- *
- * @returns {JSX.Element}
- */
-const SkeletonLayout = () => {
-  const theme = useTheme();
-
-  return (
-    <>
-      <Skeleton variant="rounded" width="15%" height={34} />
-      <Stack direction="row" gap={theme.spacing(4)}>
-        <Skeleton variant="circular" style={{ minWidth: 24, minHeight: 24 }} />
-        <Box width="85%">
-          <Skeleton variant="rounded" width="50%" height={24} />
-          <Skeleton
-            variant="rounded"
-            width="50%"
-            height={18}
-            sx={{ mt: theme.spacing(4) }}
-          />
-        </Box>
-        <Skeleton
-          variant="rounded"
-          width="15%"
-          height={34}
-          sx={{ alignSelf: "flex-end" }}
-        />
-      </Stack>
-      <Stack
-        direction="row"
-        justifyContent="space-between"
-        gap={theme.spacing(20)}
-        flexWrap="wrap"
-      >
-        <Skeleton variant="rounded" width="30%" height={90} sx={{ flex: 1 }} />
-        <Skeleton variant="rounded" width="30%" height={90} sx={{ flex: 1 }} />
-        <Skeleton variant="rounded" width="30%" height={90} sx={{ flex: 1 }} />
-      </Stack>
-      <Skeleton variant="rounded" width="25%" height={24} />
-      <Skeleton variant="rounded" width="100%" height={300} />
-      <Skeleton variant="rounded" width="25%" height={24} />
-      <Skeleton variant="rounded" width="100%" height={300} />
-    </>
-  );
-};
-
 const PageSpeedDetails = () => {
   const theme = useTheme();
   const navigate = useNavigate();
@@ -204,6 +159,7 @@ const PageSpeedDetails = () => {
   const [audits, setAudits] = useState({});
   const { monitorId } = useParams();
   const { authToken } = useSelector((state) => state.auth);
+  const { determineState, statusColor, pagespeedStatusMsg } = useUtils();
 
   useEffect(() => {
     const fetchMonitor = async () => {
@@ -356,6 +312,8 @@ const PageSpeedDetails = () => {
     borderRadius: theme.shape.borderRadius,
     backgroundColor: theme.palette.background.main,
   };
+
+  const monitorState = determineState(monitor);
   return (
     <Stack className="page-speed-details" gap={theme.spacing(12)}>
       {loading ? (
@@ -369,13 +327,7 @@ const PageSpeedDetails = () => {
             ]}
           />
           <Stack direction="row" gap={theme.spacing(2)}>
-            <PulseDot
-              color={
-                monitor?.status
-                  ? theme.palette.success.main
-                  : theme.palette.error.main
-              }
-            />
+            <PulseDot color={statusColor[monitorState]} />
             <Box>
               <Typography
                 component="h1"
@@ -385,15 +337,8 @@ const PageSpeedDetails = () => {
               >
                 {monitor?.url}
               </Typography>
-              <Typography
-                component="span"
-                color={
-                  monitor?.status
-                    ? theme.palette.success.main
-                    : theme.palette.error.text
-                }
-              >
-                Your pagespeed monitor is live.
+              <Typography component="span" color={statusColor[monitorState]}>
+                {pagespeedStatusMsg[monitorState] || "Pending..."}
               </Typography>
             </Box>
             <Button

Client/src/Pages/PageSpeed/Details/skeleton.jsx

@@ -0,0 +1,51 @@
+import { Box, Skeleton, Stack } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+/**
+ * Renders a skeleton layout.
+ *
+ * @returns {JSX.Element}
+ */
+const SkeletonLayout = () => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <Skeleton variant="rounded" width="15%" height={34} />
+      <Stack direction="row" gap={theme.spacing(4)}>
+        <Skeleton variant="circular" style={{ minWidth: 24, minHeight: 24 }} />
+        <Box width="85%">
+          <Skeleton variant="rounded" width="50%" height={24} />
+          <Skeleton
+            variant="rounded"
+            width="50%"
+            height={18}
+            sx={{ mt: theme.spacing(4) }}
+          />
+        </Box>
+        <Skeleton
+          variant="rounded"
+          width="15%"
+          height={34}
+          sx={{ alignSelf: "flex-end" }}
+        />
+      </Stack>
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        gap={theme.spacing(20)}
+        flexWrap="wrap"
+      >
+        <Skeleton variant="rounded" width="30%" height={90} sx={{ flex: 1 }} />
+        <Skeleton variant="rounded" width="30%" height={90} sx={{ flex: 1 }} />
+        <Skeleton variant="rounded" width="30%" height={90} sx={{ flex: 1 }} />
+      </Stack>
+      <Skeleton variant="rounded" width="25%" height={24} />
+      <Skeleton variant="rounded" width="100%" height={300} />
+      <Skeleton variant="rounded" width="25%" height={24} />
+      <Skeleton variant="rounded" width="100%" height={300} />
+    </>
+  );
+};
+
+export default SkeletonLayout;

Client/src/Pages/PageSpeed/card.jsx

@@ -5,12 +5,15 @@ import { StatusLabel } from "../../Components/Label";
 import { Box, Grid, Stack, Typography } from "@mui/material";
 import { useNavigate } from "react-router";
 import { useTheme } from "@emotion/react";
+import useUtils from "../Monitors/utils";
 import PropTypes from "prop-types";
 
-const Card = ({ data }) => {
+const Card = ({ monitor }) => {
+  const { determineState, pagespeedStatusMsg } = useUtils();
   const theme = useTheme();
   const navigate = useNavigate();
-
+  const monitorState = determineState(monitor);
+  console.log(monitorState);
   return (
     <Grid
       item
@@ -26,7 +29,7 @@ const Card = ({ data }) => {
         direction="row"
         gap={theme.spacing(6)}
         p={theme.spacing(8)}
-        onClick={() => navigate(`/pagespeed/${data._id}`)}
+        onClick={() => navigate(`/pagespeed/${monitor._id}`)}
         border={1}
         borderColor={theme.palette.border.light}
         borderRadius={theme.shape.borderRadius}
@@ -46,23 +49,24 @@ const Card = ({ data }) => {
               mb={theme.spacing(2)}
               color={theme.palette.primary.main}
             >
-              {data.name}
+              {monitor.name}
             </Typography>
             <StatusLabel
-              status={data.status ? "up" : "cannot resolve"}
-              text={data.status ? "Live (collecting data)" : "Inactive"}
+              status={monitorState}
+              text={pagespeedStatusMsg[monitorState] || "Pending..."}
+              customStyles={{ textTransform: "capitalize" }}
             />
           </Stack>
           <Typography fontSize={13}>
-            {data.url.replace(/^https?:\/\//, "")}
+            {monitor.url.replace(/^https?:\/\//, "")}
           </Typography>
           <Typography mt={theme.spacing(12)}>
             <Typography component="span" fontWeight={600}>
               Last checked:{" "}
             </Typography>
-            {formatDate(getLastChecked(data.checks, false))}{" "}
+            {formatDate(getLastChecked(monitor.checks, false))}{" "}
             <Typography component="span" fontStyle="italic">
-              ({formatDurationRounded(getLastChecked(data.checks))} ago)
+              ({formatDurationRounded(getLastChecked(monitor.checks))} ago)
             </Typography>
           </Typography>
         </Box>
@@ -72,7 +76,7 @@ const Card = ({ data }) => {
 };
 
 Card.propTypes = {
-  data: PropTypes.object.isRequired,
+  monitor: PropTypes.object.isRequired,
 };
 
 export default Card;

Client/src/Pages/PageSpeed/index.jsx

@@ -74,7 +74,7 @@ const PageSpeed = ({ isAdmin }) => {
           </Box>
           <Grid container spacing={theme.spacing(12)}>
             {monitorsSummary?.monitors?.map((monitor) => (
-              <Card data={monitor} key={monitor._id} />
+              <Card monitor={monitor} key={monitor._id} />
             ))}
           </Grid>
         </Box>