From ecb6f6204c64cd340b5dd22f7a84e7d892f7b238 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 7 Aug 2024 16:45:49 -0400
Subject: [PATCH 01/12] Added skeletons to monitor pages

---
 Client/src/Pages/Monitors/Configure/index.jsx | 433 ++++++++++--------
 Client/src/Pages/Monitors/Details/index.css   |   3 -
 Client/src/Pages/Monitors/Details/index.jsx   | 310 ++++++++-----
 Client/src/Pages/Monitors/index.jsx           |  82 +++-
 Client/src/index.css                          |   4 +
 5 files changed, 507 insertions(+), 325 deletions(-)

diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 12f97ab1e..238021f1d 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState } from "react";
 import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
-import { Box, Modal, Stack, Typography } from "@mui/material";
+import { Box, Modal, Skeleton, Stack, Typography } from "@mui/material";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
@@ -47,7 +47,7 @@ const Configure = () => {
   const dispatch = useDispatch();
   const { user, authToken } = useSelector((state) => state.auth);
   const { monitors } = useSelector((state) => state.uptimeMonitors);
-  const [monitor, setMonitor] = useState();
+  const [monitor, setMonitor] = useState({});
   const [duration, setDuration] = useState(0);
   const [errors, setErrors] = useState({});
   const { monitorId } = useParams();
@@ -164,53 +164,88 @@ const Configure = () => {
 
   var lastChecked = formatDurationRounded(getLastChecked(monitor?.checks));
 
+  let loading = Object.keys(monitor).length === 0;
+
   return (
     <Box className="configure-monitor">
-      <Button
-        level="tertiary"
-        label="Back"
-        animate="slideLeft"
-        img={<WestRoundedIcon />}
-        onClick={() => navigate(-1)}
-        sx={{
-          backgroundColor: "#f4f4f4",
-          mb: theme.gap.medium,
-          px: theme.gap.ml,
-          "& svg.MuiSvgIcon-root": {
-            mr: theme.gap.small,
-            fill: theme.palette.otherColors.slateGray,
-          },
+      {loading ? (
+        <Skeleton variant="rounded" width="15%" height={34} />
+      ) : (
+        <Button
+          level="tertiary"
+          label="Back"
+          animate="slideLeft"
+          img={<WestRoundedIcon />}
+          onClick={() => navigate(-1)}
+          sx={{
+            backgroundColor: "#f4f4f4",
+            px: theme.gap.ml,
+            "& svg.MuiSvgIcon-root": {
+              mr: theme.gap.small,
+              fill: theme.palette.otherColors.slateGray,
+            },
+          }}
+        />
+      )}
+      <form
+        className="configure-monitor-form"
+        noValidate
+        spellCheck="false"
+        style={{
+          marginTop: theme.gap.medium,
         }}
-      />
-      <form className="configure-monitor-form" noValidate spellCheck="false">
+      >
         <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
-          {monitor?.status ? <GreenCheck /> : <RedCheck />}
-          <Box>
-            {parsedUrl?.host ? (
-              <Typography
-                component="h1"
-                mb={theme.gap.small}
-                sx={{ lineHeight: 1 }}
-              >
-                {parsedUrl.host || "..."}
-              </Typography>
+          {loading ? (
+            <Skeleton
+              variant="circular"
+              style={{ minWidth: 24, minHeight: 24 }}
+            />
+          ) : monitor?.status ? (
+            <GreenCheck />
+          ) : (
+            <RedCheck />
+          )}
+          <Box width="80%">
+            {loading ? (
+              <>
+                <Skeleton
+                  variant="rounded"
+                  width="50%"
+                  height={24}
+                  sx={{ mb: theme.gap.small }}
+                />
+                <Skeleton variant="rounded" width="50%" height={18} />
+              </>
             ) : (
-              ""
+              <>
+                {parsedUrl?.host ? (
+                  <Typography
+                    component="h1"
+                    mb={theme.gap.small}
+                    sx={{ lineHeight: 1 }}
+                  >
+                    {parsedUrl.host || "..."}
+                  </Typography>
+                ) : (
+                  ""
+                )}
+                <Typography lineHeight={parsedUrl?.host ? 1 : theme.gap.large}>
+                  <Typography
+                    component="span"
+                    sx={{
+                      color: monitor?.status
+                        ? "var(--env-var-color-17)"
+                        : "var(--env-var-color-24)",
+                    }}
+                  >
+                    Your site is {monitor?.status ? "up" : "down"}.
+                  </Typography>{" "}
+                  Checking every {duration}.{" "}
+                  {lastChecked ? `Last time checked ${lastChecked} ago.` : ""}
+                </Typography>
+              </>
             )}
-            <Typography lineHeight={parsedUrl?.host ? 1 : theme.gap.large}>
-              <Typography
-                component="span"
-                sx={{
-                  color: monitor?.status
-                    ? "var(--env-var-color-17)"
-                    : "var(--env-var-color-24)",
-                }}
-              >
-                Your site is {monitor?.status ? "up" : "down"}.
-              </Typography>{" "}
-              Checking every {duration}.{" "}
-              {lastChecked ? `Last time checked ${lastChecked} ago.` : ""}
-            </Typography>
           </Box>
           <Stack
             direction="row"
@@ -220,156 +255,178 @@ const Configure = () => {
               alignSelf: "flex-end",
             }}
           >
-            <Button
-              level="tertiary"
-              label="Pause"
-              animate="rotate180"
-              img={<PauseCircleOutlineIcon />}
-              sx={{
-                backgroundColor: "#f4f4f4",
-                pl: theme.gap.small,
-                pr: theme.gap.medium,
-                "& svg": {
-                  mr: theme.gap.xs,
-                },
-              }}
-            />
-            <Button
-              level="error"
-              label="Remove"
-              sx={{
-                boxShadow: "none",
-                px: theme.gap.ml,
-              }}
-              onClick={() => setIsOpen(true)}
-            />
-          </Stack>
-        </Stack>
-        <Stack
-          className="config-box"
-          direction="row"
-          justifyContent="space-between"
-          gap={theme.gap.xxl}
-        >
-          <Box>
-            <Typography component="h2">General settings</Typography>
-            <Typography component="p" sx={{ mt: theme.gap.small }}>
-              Here you can select the URL of the host, together with the type of
-              monitor.
-            </Typography>
-          </Box>
-          <Stack gap={theme.gap.xl}>
-            <Field
-              type={monitor?.type === "http" ? "url" : "text"}
-              https={protocol === "https"}
-              id="monitor-url"
-              label="URL to monitor"
-              placeholder="google.com"
-              value={parsedUrl?.host || monitor?.url || ""}
-              disabled={true}
-              error={errors["url"]}
-            />
-            <Field
-              type="text"
-              id="monitor-name"
-              label="Friendly name"
-              isOptional={true}
-              placeholder="Google"
-              value={monitor?.name || ""}
-              onChange={handleChange}
-              error={errors["name"]}
-            />
-          </Stack>
-        </Stack>
-        <Stack
-          className="config-box"
-          direction="row"
-          justifyContent="space-between"
-          gap={theme.gap.xxl}
-        >
-          <Box>
-            <Typography component="h2">Incident notifications</Typography>
-            <Typography component="p" mt={theme.gap.small}>
-              When there is an incident, notify users.
-            </Typography>
-          </Box>
-          <Stack gap={theme.gap.medium}>
-            <Typography component="p" mt={theme.gap.small}>
-              When there is a new incident,
-            </Typography>
-            <Checkbox
-              id="notify-sms"
-              label="Notify via SMS (coming soon)"
-              isChecked={false}
-              value=""
-              onChange={() => console.log("disabled")}
-              isDisabled={true}
-            />
-            <Checkbox
-              id="notify-email-default"
-              label={`Notify via email (to ${user.email})`}
-              isChecked={
-                monitor?.notifications?.some(
-                  (notification) => notification.type === "email"
-                ) || false
-              }
-              value={user?.email}
-              onChange={(event) => handleChange(event)}
-            />
-            <Checkbox
-              id="notify-email"
-              label="Also notify via email to multiple addresses (coming soon)"
-              isChecked={false}
-              value=""
-              onChange={() => console.log("disabled")}
-              isDisabled={true}
-            />
-            {monitor?.notifications?.some(
-              (notification) => notification.type === "emails"
-            ) ? (
-              <Box mx={`calc(${theme.gap.ml} * 2)`}>
-                <Field
-                  id="notify-email-list"
-                  type="text"
-                  placeholder="name@gmail.com"
-                  value=""
-                  onChange={() => console.log("disabled")}
-                />
-                <Typography mt={theme.gap.small}>
-                  You can separate multiple emails with a comma
-                </Typography>
-              </Box>
+            {loading ? (
+              <>
+                <Skeleton variant="rounded" width={150} height={34} />
+              </>
             ) : (
-              ""
+              <>
+                <Button
+                  level="tertiary"
+                  label="Pause"
+                  animate="rotate180"
+                  img={<PauseCircleOutlineIcon />}
+                  sx={{
+                    backgroundColor: "#f4f4f4",
+                    pl: theme.gap.small,
+                    pr: theme.gap.medium,
+                    "& svg": {
+                      mr: theme.gap.xs,
+                    },
+                  }}
+                />
+                <Button
+                  level="error"
+                  label="Remove"
+                  sx={{
+                    boxShadow: "none",
+                    px: theme.gap.ml,
+                  }}
+                  onClick={() => setIsOpen(true)}
+                />
+              </>
             )}
           </Stack>
         </Stack>
-        <Stack
-          className="config-box"
-          direction="row"
-          justifyContent="space-between"
-          gap={theme.gap.xxl}
-        >
-          <Box>
-            <Typography component="h2">Advanced settings</Typography>
-          </Box>
-          <Stack gap={theme.gap.xl}>
-            <Select
-              id="monitor-interval-configure"
-              label="Check frequency"
-              value={monitor?.interval / MS_PER_MINUTE || 1}
-              onChange={(event) => handleChange(event, "interval")}
-              items={frequencies}
-            />
-          </Stack>
-        </Stack>
+        {loading ? (
+          <>
+            <Skeleton variant="rounded" width="100%" height={200} />
+            <Skeleton variant="rounded" width="100%" height={200} />
+            <Skeleton variant="rounded" width="100%" height={200} />
+          </>
+        ) : (
+          <>
+            <Stack
+              className="config-box"
+              direction="row"
+              justifyContent="space-between"
+              gap={theme.gap.xxl}
+            >
+              <Box>
+                <Typography component="h2">General settings</Typography>
+                <Typography component="p" sx={{ mt: theme.gap.small }}>
+                  Here you can select the URL of the host, together with the
+                  type of monitor.
+                </Typography>
+              </Box>
+              <Stack gap={theme.gap.xl}>
+                <Field
+                  type={monitor?.type === "http" ? "url" : "text"}
+                  https={protocol === "https"}
+                  id="monitor-url"
+                  label="URL to monitor"
+                  placeholder="google.com"
+                  value={parsedUrl?.host || monitor?.url || ""}
+                  disabled={true}
+                  error={errors["url"]}
+                />
+                <Field
+                  type="text"
+                  id="monitor-name"
+                  label="Friendly name"
+                  isOptional={true}
+                  placeholder="Google"
+                  value={monitor?.name || ""}
+                  onChange={handleChange}
+                  error={errors["name"]}
+                />
+              </Stack>
+            </Stack>
+            <Stack
+              className="config-box"
+              direction="row"
+              justifyContent="space-between"
+              gap={theme.gap.xxl}
+            >
+              <Box>
+                <Typography component="h2">Incident notifications</Typography>
+                <Typography component="p" mt={theme.gap.small}>
+                  When there is an incident, notify users.
+                </Typography>
+              </Box>
+              <Stack gap={theme.gap.medium}>
+                <Typography component="p" mt={theme.gap.small}>
+                  When there is a new incident,
+                </Typography>
+                <Checkbox
+                  id="notify-sms"
+                  label="Notify via SMS (coming soon)"
+                  isChecked={false}
+                  value=""
+                  onChange={() => console.log("disabled")}
+                  isDisabled={true}
+                />
+                <Checkbox
+                  id="notify-email-default"
+                  label={`Notify via email (to ${user.email})`}
+                  isChecked={
+                    monitor?.notifications?.some(
+                      (notification) => notification.type === "email"
+                    ) || false
+                  }
+                  value={user?.email}
+                  onChange={(event) => handleChange(event)}
+                />
+                <Checkbox
+                  id="notify-email"
+                  label="Also notify via email to multiple addresses (coming soon)"
+                  isChecked={false}
+                  value=""
+                  onChange={() => console.log("disabled")}
+                  isDisabled={true}
+                />
+                {monitor?.notifications?.some(
+                  (notification) => notification.type === "emails"
+                ) ? (
+                  <Box mx={`calc(${theme.gap.ml} * 2)`}>
+                    <Field
+                      id="notify-email-list"
+                      type="text"
+                      placeholder="name@gmail.com"
+                      value=""
+                      onChange={() => console.log("disabled")}
+                    />
+                    <Typography mt={theme.gap.small}>
+                      You can separate multiple emails with a comma
+                    </Typography>
+                  </Box>
+                ) : (
+                  ""
+                )}
+              </Stack>
+            </Stack>
+            <Stack
+              className="config-box"
+              direction="row"
+              justifyContent="space-between"
+              gap={theme.gap.xxl}
+            >
+              <Box>
+                <Typography component="h2">Advanced settings</Typography>
+              </Box>
+              <Stack gap={theme.gap.xl}>
+                <Select
+                  id="monitor-interval-configure"
+                  label="Check frequency"
+                  value={monitor?.interval / MS_PER_MINUTE || 1}
+                  onChange={(event) => handleChange(event, "interval")}
+                  items={frequencies}
+                />
+              </Stack>
+            </Stack>
+          </>
+        )}
         <Stack direction="row" justifyContent="flex-end">
-          <Button
-            level="primary"
-            label="Save"
-            sx={{ px: theme.gap.large }}
-            onClick={handleSubmit}
-          />
+          {loading ? (
+            <Skeleton variant="rounded" width="15%" height={34} />
+          ) : (
+            <Button
+              level="primary"
+              label="Save"
+              sx={{ px: theme.gap.large }}
+              onClick={handleSubmit}
+            />
+          )}
         </Stack>
       </form>
       <Modal
diff --git a/Client/src/Pages/Monitors/Details/index.css b/Client/src/Pages/Monitors/Details/index.css
index 4a7ff305b..359a002bc 100644
--- a/Client/src/Pages/Monitors/Details/index.css
+++ b/Client/src/Pages/Monitors/Details/index.css
@@ -42,9 +42,6 @@
   padding: var(--env-var-spacing-1) 18px;
   background-color: var(--env-var-color-8);
 }
-.monitor-details .stat-box:not(:first-of-type) {
-  margin-left: var(--env-var-spacing-2);
-}
 .monitor-details .stat-box h6.MuiTypography-root {
   margin-bottom: var(--env-var-spacing-1);
 }
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index bbfba0b43..bbfee57ec 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { Box, Stack, Typography, useTheme } from "@mui/material";
+import { Box, Skeleton, Stack, Typography, useTheme } from "@mui/material";
 import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import axiosInstance from "../../../Utils/axiosConfig";
@@ -30,6 +30,11 @@ const StatBox = ({ title, value }) => {
   );
 };
 
+StatBox.propTypes = {
+  title: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
 /**
  * Details page component displaying monitor details and related information.
  * @component
@@ -158,78 +163,135 @@ const DetailsPage = () => {
     }, 0);
   };
 
+  let loading = Object.keys(monitor).length === 0;
+
   return (
     <Box className="monitor-details">
-      <Button
-        level="tertiary"
-        label="Back to Monitors"
-        animate="slideLeft"
-        img={<WestRoundedIcon />}
-        onClick={() => navigate("/monitors")}
-        sx={{
-          backgroundColor: "#f4f4f4",
-          mb: theme.gap.medium,
-          px: theme.gap.ml,
-          "& svg.MuiSvgIcon-root": {
-            mr: theme.gap.small,
-            fill: theme.palette.otherColors.slateGray,
-          },
-        }}
-      />
-      <Stack gap={theme.gap.xl}>
+      {loading ? (
+        <Skeleton variant="rounded" width="20%" height={34} />
+      ) : (
+        <Button
+          level="tertiary"
+          label="Back to Monitors"
+          animate="slideLeft"
+          img={<WestRoundedIcon />}
+          onClick={() => navigate("/monitors")}
+          sx={{
+            backgroundColor: "#f4f4f4",
+            px: theme.gap.ml,
+            "& svg.MuiSvgIcon-root": {
+              mr: theme.gap.small,
+              fill: theme.palette.otherColors.slateGray,
+            },
+          }}
+        />
+      )}
+      <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
         <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
-          {monitor?.status ? <GreenCheck /> : <RedCheck />}
-          <Box>
-            <Typography component="h1" sx={{ lineHeight: 1 }}>
-              {monitor.url?.replace(/^https?:\/\//, "") || "..."}
-            </Typography>
-            <Typography mt={theme.gap.small}>
-              <Typography
-                component="span"
-                sx={{
-                  color: monitor?.status
-                    ? "var(--env-var-color-17)"
-                    : "var(--env-var-color-24)",
-                }}
-              >
-                Your site is {monitor?.status ? "up" : "down"}.
-              </Typography>{" "}
-              Checking every {formatDurationRounded(monitor?.interval)}. Last
-              time checked{" "}
-              {formatDurationRounded(getLastChecked(monitor?.checks))} ago.
-            </Typography>
+          {loading ? (
+            <Skeleton
+              variant="circular"
+              style={{ minWidth: 24, minHeight: 24 }}
+            />
+          ) : monitor?.status ? (
+            <GreenCheck />
+          ) : (
+            <RedCheck />
+          )}
+          <Box width="80%">
+            {loading ? (
+              <>
+                <Skeleton variant="rounded" width="50%" height={24} />
+                <Skeleton
+                  variant="rounded"
+                  width="50%"
+                  height={18}
+                  sx={{ mt: theme.gap.small }}
+                />
+              </>
+            ) : (
+              <>
+                <Typography component="h1" sx={{ lineHeight: 1 }}>
+                  {monitor.url?.replace(/^https?:\/\//, "") || "..."}
+                </Typography>
+                <Typography mt={theme.gap.small}>
+                  <Typography
+                    component="span"
+                    sx={{
+                      color: monitor?.status
+                        ? "var(--env-var-color-17)"
+                        : "var(--env-var-color-24)",
+                    }}
+                  >
+                    Your site is {monitor?.status ? "up" : "down"}.
+                  </Typography>{" "}
+                  Checking every {formatDurationRounded(monitor?.interval)}.
+                  Last time checked{" "}
+                  {formatDurationRounded(getLastChecked(monitor?.checks))} ago.
+                </Typography>
+              </>
+            )}
           </Box>
-          <Button
-            level="tertiary"
-            label="Configure"
-            animate="rotate90"
-            img={
-              <SettingsIcon
-                style={{ width: theme.gap.mlplus, height: theme.gap.mlplus }}
-              />
-            }
-            onClick={() => navigate(`/monitors/configure/${monitorId}`)}
-            sx={{
-              ml: "auto",
-              alignSelf: "flex-end",
-              backgroundColor: "#f4f4f4",
-              px: theme.gap.medium,
-              "& svg": {
-                mr: "6px",
-              },
-            }}
-          />
+          {loading ? (
+            <Skeleton
+              variant="rounded"
+              width="20%"
+              height={34}
+              sx={{ alignSelf: "flex-end" }}
+            />
+          ) : (
+            <Button
+              level="tertiary"
+              label="Configure"
+              animate="rotate90"
+              img={
+                <SettingsIcon
+                  style={{
+                    minWidth: theme.gap.mlplus,
+                    minHeight: theme.gap.mlplus,
+                  }}
+                />
+              }
+              onClick={() => navigate(`/monitors/configure/${monitorId}`)}
+              sx={{
+                ml: "auto",
+                alignSelf: "flex-end",
+                backgroundColor: "#f4f4f4",
+                px: theme.gap.medium,
+                "& svg": {
+                  mr: "6px",
+                },
+              }}
+            />
+          )}
         </Stack>
-        <Stack direction="row" justifyContent="space-between">
-          <StatBox
-            title="Currently up for"
-            value={formatDuration(calculateUptimeDuration(monitor.checks))}
-          />
-          <StatBox
-            title="Last checked"
-            value={`${formatDuration(getLastChecked(monitor.checks))} ago`}
-          />
-          <StatBox title="Incidents" value={countIncidents(monitor.checks)} />
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          gap={theme.gap.large}
+        >
+          {loading ? (
+            <>
+              <Skeleton variant="rounded" width="100%" height={80} />
+              <Skeleton variant="rounded" width="100%" height={80} />
+              <Skeleton variant="rounded" width="100%" height={80} />
+            </>
+          ) : (
+            <>
+              <StatBox
+                title="Currently up for"
+                value={formatDuration(calculateUptimeDuration(monitor.checks))}
+              />
+              <StatBox
+                title="Last checked"
+                value={`${formatDuration(getLastChecked(monitor.checks))} ago`}
+              />
+              <StatBox
+                title="Incidents"
+                value={countIncidents(monitor.checks)}
+              />
+            </>
+          )}
         </Stack>
         <Box>
           <Stack
@@ -237,56 +299,82 @@ const DetailsPage = () => {
             justifyContent="space-between"
             mb={theme.gap.ml}
           >
-            <Typography component="h2" mb={theme.gap.small}>
-              Response Times
-            </Typography>
-            <ButtonGroup>
-              <Button
-                level="secondary"
-                label="Day"
-                onClick={() => setFilter("day")}
-                sx={{
-                  backgroundColor:
-                    filter === "day" && theme.palette.otherColors.fillGray,
-                }}
-              />
-              <Button
-                level="secondary"
-                label="Week"
-                onClick={() => setFilter("week")}
-                sx={{
-                  backgroundColor:
-                    filter === "week" && theme.palette.otherColors.fillGray,
-                }}
-              />
-              <Button
-                level="secondary"
-                label="Month"
-                onClick={() => setFilter("month")}
-                sx={{
-                  backgroundColor:
-                    filter === "month" && theme.palette.otherColors.fillGray,
-                }}
-              />
-            </ButtonGroup>
+            {loading ? (
+              <>
+                <Skeleton
+                  variant="rounded"
+                  width="20%"
+                  height={24}
+                  sx={{ alignSelf: "flex-end" }}
+                />
+                <Skeleton variant="rounded" width="20%" height={34} />
+              </>
+            ) : (
+              <>
+                <Typography component="h2" mb={theme.gap.small}>
+                  Response Times
+                </Typography>
+                <ButtonGroup>
+                  <Button
+                    level="secondary"
+                    label="Day"
+                    onClick={() => setFilter("day")}
+                    sx={{
+                      backgroundColor:
+                        filter === "day" && theme.palette.otherColors.fillGray,
+                    }}
+                  />
+                  <Button
+                    level="secondary"
+                    label="Week"
+                    onClick={() => setFilter("week")}
+                    sx={{
+                      backgroundColor:
+                        filter === "week" && theme.palette.otherColors.fillGray,
+                    }}
+                  />
+                  <Button
+                    level="secondary"
+                    label="Month"
+                    onClick={() => setFilter("month")}
+                    sx={{
+                      backgroundColor:
+                        filter === "month" &&
+                        theme.palette.otherColors.fillGray,
+                    }}
+                  />
+                </ButtonGroup>
+              </>
+            )}
           </Stack>
           <Box sx={{ height: "200px" }}>
-            <MonitorDetailsAreaChart checks={monitor.checks} filter={filter} />
+            {loading ? (
+              <Skeleton variant="rounded" width="100%" height="100%" />
+            ) : (
+              <MonitorDetailsAreaChart
+                checks={monitor.checks}
+                filter={filter}
+              />
+            )}
           </Box>
         </Box>
-        <Box>
-          <Typography component="h2" mb={theme.gap.ml}>
-            History
-          </Typography>
-          <BasicTable data={data} paginated={true} reversed={true} />
-        </Box>
+        <Stack gap={theme.gap.ml}>
+          {loading ? (
+            <>
+              <Skeleton variant="rounded" width="20%" height={24} />
+              <Skeleton variant="rounded" width="100%" height={200} />
+              <Skeleton variant="rounded" width="100%" height={50} />
+            </>
+          ) : (
+            <>
+              <Typography component="h2">History</Typography>
+              <BasicTable data={data} paginated={true} reversed={true} />
+            </>
+          )}
+        </Stack>
       </Stack>
     </Box>
   );
 };
 
-StatBox.propTypes = {
-  title: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
 export default DetailsPage;
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 3c1d7bc64..82e53ba6b 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -22,6 +22,7 @@ import {
   Menu,
   MenuItem,
   Modal,
+  Skeleton,
   Stack,
   Typography,
 } from "@mui/material";
@@ -204,46 +205,81 @@ const Monitors = () => {
     };
   });
 
+  let loading =  monitorState.isLoading && monitorState.monitors.length === 0;
+
   return (
     <Stack className="monitors" gap={theme.gap.large}>
       <Stack direction="row" justifyContent="space-between" alignItems="center">
-        <Typography component="h1">
-          Hello, {authState.user.firstName}
-        </Typography>
-        <Button
-          level="primary"
-          label="Create new monitor"
-          onClick={() => {
-            navigate("/monitors/create");
-          }}
-        />
+        {loading ? (
+          <>
+            <Skeleton variant="rounded" width="50%" height={36} />
+            <Skeleton variant="rounded" width="15%" height={36} />
+          </>
+        ) : (
+          <>
+            <Typography component="h1">
+              Hello, {authState.user.firstName}
+            </Typography>
+            <Button
+              level="primary"
+              label="Create new monitor"
+              onClick={() => {
+                navigate("/monitors/create");
+              }}
+            />
+          </>
+        )}
       </Stack>
       <Stack
         gap={theme.gap.large}
         direction="row"
         justifyContent="space-between"
       >
-        <ServerStatus title="Up" value={up} state="up" />
-        <ServerStatus title="Down" value={down} state="down" />
-        <ServerStatus title="Paused" value={0} state="pause" />
+        {loading ? (
+          <>
+            <Skeleton variant="rounded" width="100%" height={100} />
+            <Skeleton variant="rounded" width="100%" height={100} />
+            <Skeleton variant="rounded" width="100%" height={100} />
+          </>
+        ) : (
+          <>
+            <ServerStatus title="Up" value={up} state="up" />
+            <ServerStatus title="Down" value={down} state="down" />
+            <ServerStatus title="Paused" value={0} state="pause" />
+          </>
+        )}
       </Stack>
       <Stack
         gap={theme.gap.large}
         p={theme.gap.xl}
+        border={1}
+        borderColor={
+          loading ? "#f9fafb" : theme.palette.otherColors.graishWhite
+        }
+        backgroundColor={loading ? "#f9fafb" : "white"}
         sx={{
-          border: `solid 1px ${theme.palette.otherColors.graishWhite}`,
           borderRadius: `${theme.shape.borderRadius}px`,
-          backgroundColor: theme.palette.otherColors.white,
         }}
       >
-        <Stack direction="row" alignItems="center">
-          <Typography component="h2">Current monitors</Typography>
-          <Box className="current-monitors-counter">
-            {monitorState.monitors.length}
-          </Box>
-          {/* TODO - add search bar */}
-        </Stack>
-        <BasicTable data={data} paginated={true} />
+        {loading ? (
+          <Skeleton variant="rounded" width="50%" height={25} />
+        ) : (
+          <Stack direction="row" alignItems="center">
+            <Typography component="h2">Current monitors</Typography>
+            <Box className="current-monitors-counter">
+              {monitorState.monitors.length}
+            </Box>
+            {/* TODO - add search bar */}
+          </Stack>
+        )}
+        {loading ? (
+          <>
+            <Skeleton variant="rounded" width="100%" height={400} />
+            <Skeleton variant="rounded" width="100%" height={100} />
+          </>
+        ) : (
+          <BasicTable data={data} paginated={true} />
+        )}
       </Stack>
       <Menu
         className="actions-menu"
diff --git a/Client/src/index.css b/Client/src/index.css
index 7f66b6ebd..8dc4222f5 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -161,6 +161,10 @@ button:focus-visible {
   display: none;
 }
 
+body .MuiSkeleton-root {
+  background-color: var(--env-var-color-15);
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

From 51bfc83903aa3f427a441e2ed686fef23fc4467d Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 7 Aug 2024 17:13:50 -0400
Subject: [PATCH 02/12] Added skeletons to incidents page

---
 Client/src/Pages/Incidents/index.jsx | 43 ++++++++++++++++++++++------
 1 file changed, 35 insertions(+), 8 deletions(-)

diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index e245e0b6c..399a0a3bc 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import { Typography, ButtonGroup, Stack, Box } from "@mui/material";
+import { Typography, ButtonGroup, Stack, Box, Skeleton } from "@mui/material";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import Button from "../../Components/Button";
 import axiosInstance from "../../Utils/axiosConfig";
@@ -18,6 +18,7 @@ const Incidents = () => {
   const authState = useSelector((state) => state.auth);
   const [monitors, setMonitors] = useState({});
   const [selectedMonitor, setSelectedMonitor] = useState("0");
+  const [loading, setLoading] = useState(false);
 
   // TODO do something with these filters
   const [filter, setFilter] = useState("all");
@@ -34,6 +35,7 @@ const Incidents = () => {
 
   useEffect(() => {
     const fetchIncidents = async () => {
+      setLoading(true);
       const res = await axiosInstance.get(
         `/monitors/user/${authState.user._id}?status=false`,
         {
@@ -51,6 +53,7 @@ const Incidents = () => {
         }, {});
         setMonitors(monitorLookup);
       }
+      setLoading(false);
     };
 
     fetchIncidents();
@@ -92,8 +95,8 @@ const Incidents = () => {
             data: <StatusLabel status="down" text="Down" />,
           },
           { id: idx + 1, data: new Date(incident.createdAt).toLocaleString() },
-          { id: idx + 2, data: incident.statusCode },
-          { id: idx + 3, data: monitors[incident.monitorId].name },
+          { id: idx + 2, data: monitors[incident.monitorId].name },
+          { id: idx + 3, data: incident.statusCode },
         ],
       };
     });
@@ -102,7 +105,22 @@ const Incidents = () => {
   return (
     <>
       <Stack className="incidents" gap={theme.gap.large}>
-        {hasAnyIncidents ? (
+        {loading ? (
+          <>
+            <Stack direction="row" alignItems="center" gap={theme.gap.medium}>
+              <Skeleton variant="rounded" width={150} height={34} />
+              <Skeleton variant="rounded" width="15%" height={34} />
+              <Skeleton
+                variant="rounded"
+                width="20%"
+                height={34}
+                sx={{ ml: "auto" }}
+              />
+            </Stack>
+            <Skeleton variant="rounded" width="100%" height={300} />
+            <Skeleton variant="rounded" width="100%" height={100} />
+          </>
+        ) : hasAnyIncidents ? (
           <>
             <Stack direction="row" alignItems="center" gap={theme.gap.medium}>
               <Typography component="h1">Incident history for: </Typography>
@@ -155,8 +173,7 @@ const Incidents = () => {
             )}
           </>
         ) : (
-          <Stack alignItems="center" mt={theme.gap.xxl} gap={theme.gap.small}>
-            <Typography>No incidents, yet.</Typography>
+          <Box>
             <Button
               level="tertiary"
               label="Back"
@@ -165,15 +182,25 @@ const Incidents = () => {
               onClick={() => navigate(-1)}
               sx={{
                 backgroundColor: theme.palette.otherColors.fillGray,
-                mb: theme.gap.medium,
                 px: theme.gap.ml,
+                mb: theme.gap.ml,
                 "& svg.MuiSvgIcon-root": {
                   mr: theme.gap.small,
                   fill: theme.palette.otherColors.slateGray,
                 },
               }}
             />
-          </Stack>
+            <Box
+              padding={theme.gap.xxl}
+              gap={theme.gap.small}
+              border={1}
+              borderRadius={`${theme.shape.borderRadius}px`}
+              borderColor={theme.palette.otherColors.graishWhite}
+              backgroundColor={theme.palette.otherColors.white}
+            >
+              <Typography textAlign="center">No incidents, yet.</Typography>
+            </Box>
+          </Box>
         )}
       </Stack>
     </>

From ea4cf6efd31edb66d1a5500d41cda22985a65ff6 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 7 Aug 2024 17:52:46 -0400
Subject: [PATCH 03/12] Added skeletons to pagespeed pages

---
 Client/src/Pages/PageSpeed/Details/index.jsx | 779 ++++++++++---------
 Client/src/Pages/PageSpeed/index.jsx         |  58 +-
 2 files changed, 487 insertions(+), 350 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index ad3b66abc..7e24372f3 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -1,4 +1,4 @@
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Skeleton, Stack, Typography } from "@mui/material";
 import { PieChart } from "@mui/x-charts/PieChart";
 import { useDrawingArea } from "@mui/x-charts";
 import { useEffect, useState } from "react";
@@ -136,17 +136,22 @@ const PageSpeedDetails = () => {
 
   useEffect(() => {
     const fetchMonitor = async () => {
-      const res = await axiosInstance.get(
-        `/monitors/${monitorId}?sortOrder=desc`,
-        {
-          headers: {
-            Authorization: `Bearer ${authToken}`,
-          },
-        }
-      );
+      try {
+        const res = await axiosInstance.get(
+          `/monitors/${monitorId}?sortOrder=desc`,
+          {
+            headers: {
+              Authorization: `Bearer ${authToken}`,
+            },
+          }
+        );
 
-      setMonitor(res.data.data);
-      setAudits(res.data.data.checks[0].audits);
+        setMonitor(res.data.data);
+        setAudits(res.data.data.checks[0].audits);
+      } catch (error) {
+        console.error("Error fetching pagespeed monitor of id: " + monitorId);
+        navigate("/not-found");
+      }
     };
 
     fetchMonitor();
@@ -244,61 +249,93 @@ const PageSpeedDetails = () => {
   const [highlightedItem, setHighLightedItem] = useState(null);
   const [expand, setExpand] = useState(false);
 
+  let loading = Object.keys(monitor).length === 0;
+
   return (
     <Stack className="page-speed-details" gap={theme.gap.large}>
-      <Button
-        level="tertiary"
-        label="Back"
-        animate="slideLeft"
-        img={<WestRoundedIcon />}
-        onClick={() => navigate("/pagespeed")}
-        sx={{
-          width: "fit-content",
-          backgroundColor: theme.palette.otherColors.fillGray,
-          px: theme.gap.ml,
-          "& svg.MuiSvgIcon-root": {
-            mr: theme.gap.small,
-            fill: theme.palette.otherColors.slateGray,
-          },
-        }}
-      />
-      <Stack
-        direction="row"
-        gap={theme.gap.small}
-        justifyContent="space-between"
-      >
-        <GreenCheck />
-        <Box>
-          <Typography component="h1" mb={theme.gap.xs} sx={{ lineHeight: 1 }}>
-            {monitor?.url}
-          </Typography>
-          <Typography
-            component="span"
-            sx={{ color: "var(--env-var-color-17)" }}
-          >
-            Your pagespeed monitor is live.
-          </Typography>
-        </Box>
+      {loading ? (
+        <Skeleton variant="rounded" width="15%" height={34} />
+      ) : (
         <Button
           level="tertiary"
-          label="Configure"
-          animate="rotate90"
-          img={
-            <SettingsIcon
-              style={{ width: theme.gap.mlplus, height: theme.gap.mlplus }}
-            />
-          }
-          onClick={() => navigate(`/pagespeed/configure/${monitorId}`)}
+          label="Back"
+          animate="slideLeft"
+          img={<WestRoundedIcon />}
+          onClick={() => navigate("/pagespeed")}
           sx={{
-            ml: "auto",
-            alignSelf: "flex-end",
+            width: "fit-content",
             backgroundColor: theme.palette.otherColors.fillGray,
-            px: theme.gap.medium,
-            "& svg": {
-              mr: "6px",
+            px: theme.gap.ml,
+            "& svg.MuiSvgIcon-root": {
+              mr: theme.gap.small,
+              fill: theme.palette.otherColors.slateGray,
             },
           }}
         />
+      )}
+      <Stack direction="row" gap={theme.gap.small}>
+        {loading ? (
+          <>
+            <Skeleton
+              variant="circular"
+              style={{ minWidth: 24, minHeight: 24 }}
+            />
+            <Box width="80%">
+              <Skeleton variant="rounded" width="50%" height={24} />
+              <Skeleton
+                variant="rounded"
+                width="50%"
+                height={18}
+                sx={{ mt: theme.gap.small }}
+              />
+            </Box>
+            <Skeleton
+              variant="rounded"
+              width="15%"
+              height={34}
+              sx={{ alignSelf: "flex-end" }}
+            />
+          </>
+        ) : (
+          <>
+            <GreenCheck />
+            <Box>
+              <Typography
+                component="h1"
+                mb={theme.gap.xs}
+                sx={{ lineHeight: 1 }}
+              >
+                {monitor?.url}
+              </Typography>
+              <Typography
+                component="span"
+                sx={{ color: "var(--env-var-color-17)" }}
+              >
+                Your pagespeed monitor is live.
+              </Typography>
+            </Box>
+            <Button
+              level="tertiary"
+              label="Configure"
+              animate="rotate90"
+              img={
+                <SettingsIcon
+                  style={{ width: theme.gap.mlplus, height: theme.gap.mlplus }}
+                />
+              }
+              onClick={() => navigate(`/pagespeed/configure/${monitorId}`)}
+              sx={{
+                ml: "auto",
+                alignSelf: "flex-end",
+                backgroundColor: theme.palette.otherColors.fillGray,
+                px: theme.gap.medium,
+                "& svg": {
+                  mr: "6px",
+                },
+              }}
+            />
+          </>
+        )}
       </Stack>
       <Stack
         direction="row"
@@ -306,298 +343,346 @@ const PageSpeedDetails = () => {
         gap={theme.gap.xl}
         flexWrap="wrap"
       >
-        <StatBox
-          icon={<LastCheckedIcon />}
-          title="Last checked"
-          value={
-            <>
-              {formatDate(getLastChecked(monitor?.checks, false))}{" "}
-              <Typography
-                component="span"
-                fontStyle="italic"
-                sx={{ opacity: 0.8 }}
-              >
-                ({formatDurationRounded(getLastChecked(monitor?.checks))} ago)
-              </Typography>
-            </>
-          }
-        />
-        <StatBox
-          icon={<ClockIcon />}
-          title="Checks since"
-          value={
-            <>
-              {formatDate(new Date(monitor?.createdAt))}{" "}
-              <Typography
-                component="span"
-                fontStyle="italic"
-                sx={{ opacity: 0.8 }}
-              >
-                (
-                {formatDurationRounded(
-                  new Date() - new Date(monitor?.createdAt)
-                )}{" "}
-                ago)
-              </Typography>
-            </>
-          }
-        ></StatBox>
-        <StatBox
-          icon={<IntervalCheckIcon />}
-          title="Checks every"
-          value={formatDurationRounded(monitor?.interval)}
-        ></StatBox>
-      </Stack>
-      <Typography component="h2">Score history</Typography>
-      <Box height="300px">
-        <PageSpeedLineChart pageSpeedChecks={monitor?.checks?.slice(0, 25)} />
-      </Box>
-      <Typography component="h2">Performance report</Typography>
-      <Stack direction="row" alignItems="center" overflow="hidden">
-        <Stack
-          alignItems="center"
-          textAlign="center"
-          minWidth="300px"
-          flex={1}
-          px={theme.gap.xl}
-          py={theme.gap.ml}
-        >
-          <Box onMouseLeave={() => setExpand(false)}>
-            {expand ? (
-              <PieChart
-                series={[
-                  {
-                    data: [
-                      {
-                        value: 100,
-                        color: colorMap.bg,
-                      },
-                    ],
-                    outerRadius: 67,
-                    cx: pieSize.width / 2,
-                  },
-                  ...pieData,
-                ]}
-                width={pieSize.width}
-                height={pieSize.height}
-                margin={{ left: 0, top: 0, right: 0, bottom: 0 }}
-                onHighlightChange={setHighLightedItem}
-                slotProps={{
-                  legend: { hidden: true },
-                }}
-                tooltip={{ trigger: "none" }}
-                sx={{
-                  "&:has(.MuiPieArcLabel-faded) .pie-label": {
-                    fill: "rgba(0,0,0,0) !important",
-                  },
-                }}
-              >
-                <PieCenterLabel
-                  value={performance}
-                  color={colorMap.text}
-                  setExpand={setExpand}
-                />
-                {pieData?.map((pie) => (
-                  <PieValueLabel
-                    key={pie.id}
-                    value={Math.round(pie.data[0].value * 10) / 10}
-                    startAngle={pie.startAngle}
-                    endAngle={pie.endAngle}
-                    color={pie.data[0].color}
-                    highlighted={highlightedItem?.seriesId === pie.id}
-                  />
-                ))}
-              </PieChart>
-            ) : (
-              <PieChart
-                series={[
-                  {
-                    data: [
-                      {
-                        value: 100,
-                        color: colorMap.bg,
-                      },
-                    ],
-                    outerRadius: 67,
-                    cx: pieSize.width / 2,
-                  },
-                  {
-                    data: [
-                      {
-                        value: performance,
-                        color: colorMap.stroke,
-                      },
-                    ],
-                    innerRadius: 63,
-                    outerRadius: 70,
-                    paddingAngle: 5,
-                    cornerRadius: 2,
-                    startAngle: 0,
-                    endAngle: (performance / 100) * 360,
-                    cx: pieSize.width / 2,
-                  },
-                ]}
-                width={pieSize.width}
-                height={pieSize.height}
-                margin={{ left: 0, top: 0, right: 0, bottom: 0 }}
-                tooltip={{ trigger: "none" }}
-              >
-                <PieCenterLabel
-                  value={performance}
-                  color={colorMap.text}
-                  setExpand={setExpand}
-                />
-              </PieChart>
-            )}
-          </Box>
-          <Typography mt={theme.gap.medium}>
-            Values are estimated and may vary.{" "}
-            <Typography
-              component="span"
-              sx={{
-                color: theme.palette.primary.main,
-                fontWeight: 500,
-                textDecoration: "underline",
-                cursor: "pointer",
-              }}
-            >
-              See calculator
-            </Typography>
-          </Typography>
-        </Stack>
-        <Box
-          px={theme.gap.xl}
-          py={theme.gap.ml}
-          height="100%"
-          flex={1}
-          sx={{
-            borderLeft: `solid 1px ${theme.palette.otherColors.graishWhite}`,
-          }}
-        >
-          <Typography
-            mb={theme.gap.medium}
-            pb={theme.gap.ml}
-            color={theme.palette.secondary.main}
-            textAlign="center"
-            sx={{
-              borderBottom: `solid 1px ${theme.palette.otherColors.graishWhite}`,
-              borderBottomStyle: "dashed",
-            }}
-          >
-            The{" "}
-            <Typography
-              component="span"
-              sx={{
-                color: theme.palette.primary.main,
-                fontWeight: 500,
-                textDecoration: "underline",
-                cursor: "pointer",
-              }}
-            >
-              performance score is calculated
-            </Typography>{" "}
-            directly from these{" "}
-            <Typography component="span" fontWeight={600}>
-              metrics
-            </Typography>
-            .
-          </Typography>
-          <Stack
-            direction="row"
-            flexWrap="wrap"
-            pt={theme.gap.ml}
-            gap={theme.gap.ml}
-          >
-            {Object.keys(audits).map((key) => {
-              if (key === "_id") return;
-
-              let audit = audits[key];
-              let metricParams = getColors(audit.score * 100);
-
-              let shape = (
-                <Box
-                  sx={{
-                    width: theme.gap.medium,
-                    height: theme.gap.medium,
-                    borderRadius: "50%",
-                    backgroundColor: metricParams.stroke,
-                  }}
-                ></Box>
-              );
-              if (metricParams.shape === "square")
-                shape = (
-                  <Box
-                    sx={{
-                      width: theme.gap.medium,
-                      height: theme.gap.medium,
-                      backgroundColor: metricParams.stroke,
-                    }}
-                  ></Box>
-                );
-              else if (metricParams.shape === "triangle")
-                shape = (
-                  <Box
-                    sx={{
-                      width: 0,
-                      height: 0,
-                      ml: `calc((${theme.gap.medium} - ${theme.gap.small}) / -2)`,
-                      borderLeft: `${theme.gap.small} solid transparent`,
-                      borderRight: `${theme.gap.small} solid transparent`,
-                      borderBottom: `${theme.gap.medium} solid ${metricParams.stroke}`,
-                    }}
-                  ></Box>
-                );
-
-              // Find the position where the number ends and the unit begins
-              const match = audit.displayValue.match(/(\d+\.?\d*)\s*([a-zA-Z]+)/);
-              let value;
-              let unit;
-              if (match) {
-                value = match[1];
-                unit = match[2];
-              } else {
-                value = audit.displayValue;
+        {loading ? (
+          <>
+            <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 }}
+            />
+          </>
+        ) : (
+          <>
+            <StatBox
+              icon={<LastCheckedIcon />}
+              title="Last checked"
+              value={
+                <>
+                  {formatDate(getLastChecked(monitor?.checks, false))}{" "}
+                  <Typography
+                    component="span"
+                    fontStyle="italic"
+                    sx={{ opacity: 0.8 }}
+                  >
+                    ({formatDurationRounded(getLastChecked(monitor?.checks))}{" "}
+                    ago)
+                  </Typography>
+                </>
               }
-
-              return (
-                <Stack
-                  className="metric"
-                  key={`${key}-box`}
-                  direction="row"
-                  gap={theme.gap.small}
-                >
-                  {shape}
-                  <Box>
-                    <Typography sx={{ lineHeight: 1 }}>
-                      {audit.title}
-                    </Typography>
-                    <Typography
-                      component="span"
-                      sx={{
-                        color: metricParams.text,
-                        fontSize: "16px",
-                        fontWeight: 600,
-                      }}
-                    >
-                      {value}
-                      <Typography
-                        component="span"
-                        ml="2px"
-                        sx={{
-                          color: theme.palette.secondary.main,
-                          fontSize: "13px",
-                        }}
-                      >
-                        {unit}
-                      </Typography>
-                    </Typography>
-                  </Box>
-                </Stack>
-              );
-            })}
-          </Stack>
-        </Box>
+            />
+            <StatBox
+              icon={<ClockIcon />}
+              title="Checks since"
+              value={
+                <>
+                  {formatDate(new Date(monitor?.createdAt))}{" "}
+                  <Typography
+                    component="span"
+                    fontStyle="italic"
+                    sx={{ opacity: 0.8 }}
+                  >
+                    (
+                    {formatDurationRounded(
+                      new Date() - new Date(monitor?.createdAt)
+                    )}{" "}
+                    ago)
+                  </Typography>
+                </>
+              }
+            ></StatBox>
+            <StatBox
+              icon={<IntervalCheckIcon />}
+              title="Checks every"
+              value={formatDurationRounded(monitor?.interval)}
+            ></StatBox>
+          </>
+        )}
       </Stack>
+      {loading ? (
+        <>
+          <Skeleton variant="rounded" width="25%" height={24} />
+          <Skeleton variant="rounded" width="100%" height={300} />
+        </>
+      ) : (
+        <>
+          <Typography component="h2">Score history</Typography>
+          <Box height="300px">
+            <PageSpeedLineChart
+              pageSpeedChecks={monitor?.checks?.slice(0, 25)}
+            />
+          </Box>
+        </>
+      )}
+      {loading ? (
+        <>
+          <Skeleton variant="rounded" width="25%" height={24} />
+          <Skeleton variant="rounded" width="100%" height={300} />
+        </>
+      ) : (
+        <>
+          <Typography component="h2">Performance report</Typography>
+          <Stack direction="row" alignItems="center" overflow="hidden">
+            <Stack
+              alignItems="center"
+              textAlign="center"
+              minWidth="300px"
+              flex={1}
+              px={theme.gap.xl}
+              py={theme.gap.ml}
+            >
+              <Box onMouseLeave={() => setExpand(false)}>
+                {expand ? (
+                  <PieChart
+                    series={[
+                      {
+                        data: [
+                          {
+                            value: 100,
+                            color: colorMap.bg,
+                          },
+                        ],
+                        outerRadius: 67,
+                        cx: pieSize.width / 2,
+                      },
+                      ...pieData,
+                    ]}
+                    width={pieSize.width}
+                    height={pieSize.height}
+                    margin={{ left: 0, top: 0, right: 0, bottom: 0 }}
+                    onHighlightChange={setHighLightedItem}
+                    slotProps={{
+                      legend: { hidden: true },
+                    }}
+                    tooltip={{ trigger: "none" }}
+                    sx={{
+                      "&:has(.MuiPieArcLabel-faded) .pie-label": {
+                        fill: "rgba(0,0,0,0) !important",
+                      },
+                    }}
+                  >
+                    <PieCenterLabel
+                      value={performance}
+                      color={colorMap.text}
+                      setExpand={setExpand}
+                    />
+                    {pieData?.map((pie) => (
+                      <PieValueLabel
+                        key={pie.id}
+                        value={Math.round(pie.data[0].value * 10) / 10}
+                        startAngle={pie.startAngle}
+                        endAngle={pie.endAngle}
+                        color={pie.data[0].color}
+                        highlighted={highlightedItem?.seriesId === pie.id}
+                      />
+                    ))}
+                  </PieChart>
+                ) : (
+                  <PieChart
+                    series={[
+                      {
+                        data: [
+                          {
+                            value: 100,
+                            color: colorMap.bg,
+                          },
+                        ],
+                        outerRadius: 67,
+                        cx: pieSize.width / 2,
+                      },
+                      {
+                        data: [
+                          {
+                            value: performance,
+                            color: colorMap.stroke,
+                          },
+                        ],
+                        innerRadius: 63,
+                        outerRadius: 70,
+                        paddingAngle: 5,
+                        cornerRadius: 2,
+                        startAngle: 0,
+                        endAngle: (performance / 100) * 360,
+                        cx: pieSize.width / 2,
+                      },
+                    ]}
+                    width={pieSize.width}
+                    height={pieSize.height}
+                    margin={{ left: 0, top: 0, right: 0, bottom: 0 }}
+                    tooltip={{ trigger: "none" }}
+                  >
+                    <PieCenterLabel
+                      value={performance}
+                      color={colorMap.text}
+                      setExpand={setExpand}
+                    />
+                  </PieChart>
+                )}
+              </Box>
+              <Typography mt={theme.gap.medium}>
+                Values are estimated and may vary.{" "}
+                <Typography
+                  component="span"
+                  sx={{
+                    color: theme.palette.primary.main,
+                    fontWeight: 500,
+                    textDecoration: "underline",
+                    cursor: "pointer",
+                  }}
+                >
+                  See calculator
+                </Typography>
+              </Typography>
+            </Stack>
+            <Box
+              px={theme.gap.xl}
+              py={theme.gap.ml}
+              height="100%"
+              flex={1}
+              sx={{
+                borderLeft: `solid 1px ${theme.palette.otherColors.graishWhite}`,
+              }}
+            >
+              <Typography
+                mb={theme.gap.medium}
+                pb={theme.gap.ml}
+                color={theme.palette.secondary.main}
+                textAlign="center"
+                sx={{
+                  borderBottom: `solid 1px ${theme.palette.otherColors.graishWhite}`,
+                  borderBottomStyle: "dashed",
+                }}
+              >
+                The{" "}
+                <Typography
+                  component="span"
+                  sx={{
+                    color: theme.palette.primary.main,
+                    fontWeight: 500,
+                    textDecoration: "underline",
+                    cursor: "pointer",
+                  }}
+                >
+                  performance score is calculated
+                </Typography>{" "}
+                directly from these{" "}
+                <Typography component="span" fontWeight={600}>
+                  metrics
+                </Typography>
+                .
+              </Typography>
+              <Stack
+                direction="row"
+                flexWrap="wrap"
+                pt={theme.gap.ml}
+                gap={theme.gap.ml}
+              >
+                {Object.keys(audits).map((key) => {
+                  if (key === "_id") return;
+
+                  let audit = audits[key];
+                  let metricParams = getColors(audit.score * 100);
+
+                  let shape = (
+                    <Box
+                      sx={{
+                        width: theme.gap.medium,
+                        height: theme.gap.medium,
+                        borderRadius: "50%",
+                        backgroundColor: metricParams.stroke,
+                      }}
+                    ></Box>
+                  );
+                  if (metricParams.shape === "square")
+                    shape = (
+                      <Box
+                        sx={{
+                          width: theme.gap.medium,
+                          height: theme.gap.medium,
+                          backgroundColor: metricParams.stroke,
+                        }}
+                      ></Box>
+                    );
+                  else if (metricParams.shape === "triangle")
+                    shape = (
+                      <Box
+                        sx={{
+                          width: 0,
+                          height: 0,
+                          ml: `calc((${theme.gap.medium} - ${theme.gap.small}) / -2)`,
+                          borderLeft: `${theme.gap.small} solid transparent`,
+                          borderRight: `${theme.gap.small} solid transparent`,
+                          borderBottom: `${theme.gap.medium} solid ${metricParams.stroke}`,
+                        }}
+                      ></Box>
+                    );
+
+                  // Find the position where the number ends and the unit begins
+                  const match = audit.displayValue.match(
+                    /(\d+\.?\d*)\s*([a-zA-Z]+)/
+                  );
+                  let value;
+                  let unit;
+                  if (match) {
+                    value = match[1];
+                    unit = match[2];
+                  } else {
+                    value = audit.displayValue;
+                  }
+
+                  return (
+                    <Stack
+                      className="metric"
+                      key={`${key}-box`}
+                      direction="row"
+                      gap={theme.gap.small}
+                    >
+                      {shape}
+                      <Box>
+                        <Typography sx={{ lineHeight: 1 }}>
+                          {audit.title}
+                        </Typography>
+                        <Typography
+                          component="span"
+                          sx={{
+                            color: metricParams.text,
+                            fontSize: "16px",
+                            fontWeight: 600,
+                          }}
+                        >
+                          {value}
+                          <Typography
+                            component="span"
+                            ml="2px"
+                            sx={{
+                              color: theme.palette.secondary.main,
+                              fontSize: "13px",
+                            }}
+                          >
+                            {unit}
+                          </Typography>
+                        </Typography>
+                      </Box>
+                    </Stack>
+                  );
+                })}
+              </Stack>
+            </Box>
+          </Stack>
+        </>
+      )}
     </Stack>
   );
 };
diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index 14e976dc4..d366e8ad2 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -1,4 +1,4 @@
-import { Box, Grid, Stack, Typography } from "@mui/material";
+import { Box, Grid, Skeleton, Stack, Typography } from "@mui/material";
 import { useEffect } from "react";
 import { useTheme } from "@emotion/react";
 import { formatDate, formatDurationRounded } from "../../Utils/timeUtils";
@@ -63,14 +63,66 @@ const PageSpeed = () => {
   const navigate = useNavigate();
 
   const { authToken } = useSelector((state) => state.auth);
-  const { monitors } = useSelector((state) => state.pageSpeedMonitors);
+  const { monitors, isLoading } = useSelector(
+    (state) => state.pageSpeedMonitors
+  );
   useEffect(() => {
     dispatch(getPageSpeedByUserId(authToken));
   }, []);
 
   return (
     <Box className="page-speed">
-      {monitors?.length !== 0 ? (
+      {isLoading ? (
+        <Stack gap={theme.gap.xs}>
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            mb={theme.gap.large}
+          >
+            <Box width="80%">
+              <Skeleton variant="rounded" width="25%" height={24} />
+              <Skeleton
+                variant="rounded"
+                width="50%"
+                height={19.5}
+                sx={{ mt: theme.gap.xs }}
+              />
+            </Box>
+            <Skeleton
+              variant="rounded"
+              width="20%"
+              height={34}
+              sx={{ alignSelf: "flex-end" }}
+            />
+          </Stack>
+          <Stack direction="row" flexWrap="wrap" gap={theme.gap.large}>
+            <Skeleton
+              variant="rounded"
+              width="100%"
+              height={120}
+              sx={{ flex: "35%" }}
+            />
+            <Skeleton
+              variant="rounded"
+              width="100%"
+              height={120}
+              sx={{ flex: "35%" }}
+            />
+            <Skeleton
+              variant="rounded"
+              width="100%"
+              height={120}
+              sx={{ flex: "35%" }}
+            />
+            <Skeleton
+              variant="rounded"
+              width="100%"
+              height={120}
+              sx={{ flex: "35%" }}
+            />
+          </Stack>
+        </Stack>
+      ) : monitors?.length !== 0 ? (
         <Stack gap={theme.gap.xs}>
           <Stack
             direction="row"

From 70f88058a01132747c7f8f64c7de318dd10578dc Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 7 Aug 2024 18:01:26 -0400
Subject: [PATCH 04/12] Fixed UI flash happening on every render in pagespeed
 page

---
 Client/src/Pages/PageSpeed/index.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index d366e8ad2..13b5d937c 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -70,9 +70,13 @@ const PageSpeed = () => {
     dispatch(getPageSpeedByUserId(authToken));
   }, []);
 
+  // will show skeletons only on initial load
+  // since monitor state is being added to redux persist, there's no reason to display skeletons on every render
+  let isActuallyLoading = isLoading && monitors.length === 0;
+
   return (
     <Box className="page-speed">
-      {isLoading ? (
+      {isActuallyLoading ? (
         <Stack gap={theme.gap.xs}>
           <Stack
             direction="row"

From 2485198b6a0a3c081eb276b075dc775ce4c403b6 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 7 Aug 2024 19:49:08 -0400
Subject: [PATCH 05/12] Refactored skeletons

---
 Client/src/Pages/Incidents/index.jsx          |  41 ++-
 Client/src/Pages/Monitors/Configure/index.jsx | 191 ++++++------
 Client/src/Pages/Monitors/Details/index.jsx   | 280 +++++++++---------
 Client/src/Pages/Monitors/index.jsx           | 128 ++++----
 Client/src/Pages/PageSpeed/Details/index.jsx  | 168 +++++------
 Client/src/Pages/PageSpeed/index.jsx          | 111 ++++---
 6 files changed, 471 insertions(+), 448 deletions(-)

diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 399a0a3bc..4c328a364 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -12,6 +12,32 @@ import Select from "../../Components/Inputs/Select";
 
 import "./index.css";
 
+/**
+ * Renders a skeleton layout.
+ *
+ * @returns {JSX.Element}
+ */
+const SkeletonLayout = () => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <Stack direction="row" alignItems="center" gap={theme.gap.medium}>
+        <Skeleton variant="rounded" width={150} height={34} />
+        <Skeleton variant="rounded" width="15%" height={34} />
+        <Skeleton
+          variant="rounded"
+          width="20%"
+          height={34}
+          sx={{ ml: "auto" }}
+        />
+      </Stack>
+      <Skeleton variant="rounded" width="100%" height={300} />
+      <Skeleton variant="rounded" width="100%" height={100} />
+    </>
+  );
+};
+
 const Incidents = () => {
   const theme = useTheme();
   const navigate = useNavigate();
@@ -106,20 +132,7 @@ const Incidents = () => {
     <>
       <Stack className="incidents" gap={theme.gap.large}>
         {loading ? (
-          <>
-            <Stack direction="row" alignItems="center" gap={theme.gap.medium}>
-              <Skeleton variant="rounded" width={150} height={34} />
-              <Skeleton variant="rounded" width="15%" height={34} />
-              <Skeleton
-                variant="rounded"
-                width="20%"
-                height={34}
-                sx={{ ml: "auto" }}
-              />
-            </Stack>
-            <Skeleton variant="rounded" width="100%" height={300} />
-            <Skeleton variant="rounded" width="100%" height={100} />
-          </>
+          <SkeletonLayout />
         ) : hasAnyIncidents ? (
           <>
             <Stack direction="row" alignItems="center" gap={theme.gap.medium}>
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 238021f1d..0df88078f 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -36,6 +36,54 @@ const parseUrl = (url) => {
   }
 };
 
+/**
+ * Renders a skeleton layout.
+ *
+ * @returns {JSX.Element}
+ */
+const SkeletonLayout = () => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <Skeleton variant="rounded" width="15%" height={34} />
+      <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
+        <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
+          <Skeleton
+            variant="circular"
+            style={{ minWidth: 24, minHeight: 24 }}
+          />
+          <Box width="80%">
+            <Skeleton
+              variant="rounded"
+              width="50%"
+              height={24}
+              sx={{ mb: theme.gap.small }}
+            />
+            <Skeleton variant="rounded" width="50%" height={18} />
+          </Box>
+          <Stack
+            direction="row"
+            gap={theme.gap.medium}
+            sx={{
+              ml: "auto",
+              alignSelf: "flex-end",
+            }}
+          >
+            <Skeleton variant="rounded" width={150} height={34} />
+          </Stack>
+        </Stack>
+        <Skeleton variant="rounded" width="100%" height={200} />
+        <Skeleton variant="rounded" width="100%" height={200} />
+        <Skeleton variant="rounded" width="100%" height={200} />
+        <Stack direction="row" justifyContent="flex-end">
+          <Skeleton variant="rounded" width="15%" height={34} />
+        </Stack>
+      </Stack>
+    </>
+  );
+};
+
 /**
  * Configure page displays monitor configurations and allows for editing actions.
  * @component
@@ -169,56 +217,35 @@ const Configure = () => {
   return (
     <Box className="configure-monitor">
       {loading ? (
-        <Skeleton variant="rounded" width="15%" height={34} />
+        <SkeletonLayout />
       ) : (
-        <Button
-          level="tertiary"
-          label="Back"
-          animate="slideLeft"
-          img={<WestRoundedIcon />}
-          onClick={() => navigate(-1)}
-          sx={{
-            backgroundColor: "#f4f4f4",
-            px: theme.gap.ml,
-            "& svg.MuiSvgIcon-root": {
-              mr: theme.gap.small,
-              fill: theme.palette.otherColors.slateGray,
-            },
-          }}
-        />
-      )}
-      <form
-        className="configure-monitor-form"
-        noValidate
-        spellCheck="false"
-        style={{
-          marginTop: theme.gap.medium,
-        }}
-      >
-        <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
-          {loading ? (
-            <Skeleton
-              variant="circular"
-              style={{ minWidth: 24, minHeight: 24 }}
-            />
-          ) : monitor?.status ? (
-            <GreenCheck />
-          ) : (
-            <RedCheck />
-          )}
-          <Box width="80%">
-            {loading ? (
-              <>
-                <Skeleton
-                  variant="rounded"
-                  width="50%"
-                  height={24}
-                  sx={{ mb: theme.gap.small }}
-                />
-                <Skeleton variant="rounded" width="50%" height={18} />
-              </>
-            ) : (
-              <>
+        <>
+          <Button
+            level="tertiary"
+            label="Back"
+            animate="slideLeft"
+            img={<WestRoundedIcon />}
+            onClick={() => navigate(-1)}
+            sx={{
+              backgroundColor: "#f4f4f4",
+              px: theme.gap.ml,
+              "& svg.MuiSvgIcon-root": {
+                mr: theme.gap.small,
+                fill: theme.palette.otherColors.slateGray,
+              },
+            }}
+          />
+          <form
+            className="configure-monitor-form"
+            noValidate
+            spellCheck="false"
+            style={{
+              marginTop: theme.gap.medium,
+            }}
+          >
+            <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
+              {monitor?.status ? <GreenCheck /> : <RedCheck />}
+              <Box>
                 {parsedUrl?.host ? (
                   <Typography
                     component="h1"
@@ -244,23 +271,15 @@ const Configure = () => {
                   Checking every {duration}.{" "}
                   {lastChecked ? `Last time checked ${lastChecked} ago.` : ""}
                 </Typography>
-              </>
-            )}
-          </Box>
-          <Stack
-            direction="row"
-            gap={theme.gap.medium}
-            sx={{
-              ml: "auto",
-              alignSelf: "flex-end",
-            }}
-          >
-            {loading ? (
-              <>
-                <Skeleton variant="rounded" width={150} height={34} />
-              </>
-            ) : (
-              <>
+              </Box>
+              <Stack
+                direction="row"
+                gap={theme.gap.medium}
+                sx={{
+                  ml: "auto",
+                  alignSelf: "flex-end",
+                }}
+              >
                 <Button
                   level="tertiary"
                   label="Pause"
@@ -284,18 +303,8 @@ const Configure = () => {
                   }}
                   onClick={() => setIsOpen(true)}
                 />
-              </>
-            )}
-          </Stack>
-        </Stack>
-        {loading ? (
-          <>
-            <Skeleton variant="rounded" width="100%" height={200} />
-            <Skeleton variant="rounded" width="100%" height={200} />
-            <Skeleton variant="rounded" width="100%" height={200} />
-          </>
-        ) : (
-          <>
+              </Stack>
+            </Stack>
             <Stack
               className="config-box"
               direction="row"
@@ -414,21 +423,17 @@ const Configure = () => {
                 />
               </Stack>
             </Stack>
-          </>
-        )}
-        <Stack direction="row" justifyContent="flex-end">
-          {loading ? (
-            <Skeleton variant="rounded" width="15%" height={34} />
-          ) : (
-            <Button
-              level="primary"
-              label="Save"
-              sx={{ px: theme.gap.large }}
-              onClick={handleSubmit}
-            />
-          )}
-        </Stack>
-      </form>
+            <Stack direction="row" justifyContent="flex-end">
+              <Button
+                level="primary"
+                label="Save"
+                sx={{ px: theme.gap.large }}
+                onClick={handleSubmit}
+              />
+            </Stack>
+          </form>
+        </>
+      )}
       <Modal
         aria-labelledby="modal-delete-monitor"
         aria-describedby="delete-monitor-confirmation"
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index bbfee57ec..b17eb831b 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -35,6 +35,76 @@ StatBox.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
+/**
+ * Renders a skeleton layout.
+ *
+ * @returns {JSX.Element}
+ */
+const SkeletonLayout = () => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <Skeleton variant="rounded" width="20%" height={34} />
+      <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
+        <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
+          <Skeleton
+            variant="circular"
+            style={{ minWidth: 24, minHeight: 24 }}
+          />
+          <Box width="80%">
+            <Skeleton variant="rounded" width="50%" height={24} />
+            <Skeleton
+              variant="rounded"
+              width="50%"
+              height={18}
+              sx={{ mt: theme.gap.small }}
+            />
+          </Box>
+          <Skeleton
+            variant="rounded"
+            width="20%"
+            height={34}
+            sx={{ alignSelf: "flex-end" }}
+          />
+        </Stack>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          gap={theme.gap.large}
+        >
+          <Skeleton variant="rounded" width="100%" height={80} />
+          <Skeleton variant="rounded" width="100%" height={80} />
+          <Skeleton variant="rounded" width="100%" height={80} />
+        </Stack>
+        <Box>
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            mb={theme.gap.ml}
+          >
+            <Skeleton
+              variant="rounded"
+              width="20%"
+              height={24}
+              sx={{ alignSelf: "flex-end" }}
+            />
+            <Skeleton variant="rounded" width="20%" height={34} />
+          </Stack>
+          <Box sx={{ height: "200px" }}>
+            <Skeleton variant="rounded" width="100%" height="100%" />
+          </Box>
+        </Box>
+        <Stack gap={theme.gap.ml}>
+          <Skeleton variant="rounded" width="20%" height={24} />
+          <Skeleton variant="rounded" width="100%" height={200} />
+          <Skeleton variant="rounded" width="100%" height={50} />
+        </Stack>
+      </Stack>
+    </>
+  );
+};
+
 /**
  * Details page component displaying monitor details and related information.
  * @component
@@ -168,49 +238,28 @@ const DetailsPage = () => {
   return (
     <Box className="monitor-details">
       {loading ? (
-        <Skeleton variant="rounded" width="20%" height={34} />
+        <SkeletonLayout />
       ) : (
-        <Button
-          level="tertiary"
-          label="Back to Monitors"
-          animate="slideLeft"
-          img={<WestRoundedIcon />}
-          onClick={() => navigate("/monitors")}
-          sx={{
-            backgroundColor: "#f4f4f4",
-            px: theme.gap.ml,
-            "& svg.MuiSvgIcon-root": {
-              mr: theme.gap.small,
-              fill: theme.palette.otherColors.slateGray,
-            },
-          }}
-        />
-      )}
-      <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
-        <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
-          {loading ? (
-            <Skeleton
-              variant="circular"
-              style={{ minWidth: 24, minHeight: 24 }}
-            />
-          ) : monitor?.status ? (
-            <GreenCheck />
-          ) : (
-            <RedCheck />
-          )}
-          <Box width="80%">
-            {loading ? (
-              <>
-                <Skeleton variant="rounded" width="50%" height={24} />
-                <Skeleton
-                  variant="rounded"
-                  width="50%"
-                  height={18}
-                  sx={{ mt: theme.gap.small }}
-                />
-              </>
-            ) : (
-              <>
+        <>
+          <Button
+            level="tertiary"
+            label="Back to Monitors"
+            animate="slideLeft"
+            img={<WestRoundedIcon />}
+            onClick={() => navigate("/monitors")}
+            sx={{
+              backgroundColor: "#f4f4f4",
+              px: theme.gap.ml,
+              "& svg.MuiSvgIcon-root": {
+                mr: theme.gap.small,
+                fill: theme.palette.otherColors.slateGray,
+              },
+            }}
+          />
+          <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
+            <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
+              {monitor?.status ? <GreenCheck /> : <RedCheck />}
+              <Box>
                 <Typography component="h1" sx={{ lineHeight: 1 }}>
                   {monitor.url?.replace(/^https?:\/\//, "") || "..."}
                 </Typography>
@@ -229,55 +278,36 @@ const DetailsPage = () => {
                   Last time checked{" "}
                   {formatDurationRounded(getLastChecked(monitor?.checks))} ago.
                 </Typography>
-              </>
-            )}
-          </Box>
-          {loading ? (
-            <Skeleton
-              variant="rounded"
-              width="20%"
-              height={34}
-              sx={{ alignSelf: "flex-end" }}
-            />
-          ) : (
-            <Button
-              level="tertiary"
-              label="Configure"
-              animate="rotate90"
-              img={
-                <SettingsIcon
-                  style={{
-                    minWidth: theme.gap.mlplus,
-                    minHeight: theme.gap.mlplus,
-                  }}
-                />
-              }
-              onClick={() => navigate(`/monitors/configure/${monitorId}`)}
-              sx={{
-                ml: "auto",
-                alignSelf: "flex-end",
-                backgroundColor: "#f4f4f4",
-                px: theme.gap.medium,
-                "& svg": {
-                  mr: "6px",
-                },
-              }}
-            />
-          )}
-        </Stack>
-        <Stack
-          direction="row"
-          justifyContent="space-between"
-          gap={theme.gap.large}
-        >
-          {loading ? (
-            <>
-              <Skeleton variant="rounded" width="100%" height={80} />
-              <Skeleton variant="rounded" width="100%" height={80} />
-              <Skeleton variant="rounded" width="100%" height={80} />
-            </>
-          ) : (
-            <>
+              </Box>
+              <Button
+                level="tertiary"
+                label="Configure"
+                animate="rotate90"
+                img={
+                  <SettingsIcon
+                    style={{
+                      minWidth: theme.gap.mlplus,
+                      minHeight: theme.gap.mlplus,
+                    }}
+                  />
+                }
+                onClick={() => navigate(`/monitors/configure/${monitorId}`)}
+                sx={{
+                  ml: "auto",
+                  alignSelf: "flex-end",
+                  backgroundColor: "#f4f4f4",
+                  px: theme.gap.medium,
+                  "& svg": {
+                    mr: "6px",
+                  },
+                }}
+              />
+            </Stack>
+            <Stack
+              direction="row"
+              justifyContent="space-between"
+              gap={theme.gap.large}
+            >
               <StatBox
                 title="Currently up for"
                 value={formatDuration(calculateUptimeDuration(monitor.checks))}
@@ -290,27 +320,13 @@ const DetailsPage = () => {
                 title="Incidents"
                 value={countIncidents(monitor.checks)}
               />
-            </>
-          )}
-        </Stack>
-        <Box>
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            mb={theme.gap.ml}
-          >
-            {loading ? (
-              <>
-                <Skeleton
-                  variant="rounded"
-                  width="20%"
-                  height={24}
-                  sx={{ alignSelf: "flex-end" }}
-                />
-                <Skeleton variant="rounded" width="20%" height={34} />
-              </>
-            ) : (
-              <>
+            </Stack>
+            <Box>
+              <Stack
+                direction="row"
+                justifyContent="space-between"
+                mb={theme.gap.ml}
+              >
                 <Typography component="h2" mb={theme.gap.small}>
                   Response Times
                 </Typography>
@@ -344,35 +360,21 @@ const DetailsPage = () => {
                     }}
                   />
                 </ButtonGroup>
-              </>
-            )}
-          </Stack>
-          <Box sx={{ height: "200px" }}>
-            {loading ? (
-              <Skeleton variant="rounded" width="100%" height="100%" />
-            ) : (
-              <MonitorDetailsAreaChart
-                checks={monitor.checks}
-                filter={filter}
-              />
-            )}
-          </Box>
-        </Box>
-        <Stack gap={theme.gap.ml}>
-          {loading ? (
-            <>
-              <Skeleton variant="rounded" width="20%" height={24} />
-              <Skeleton variant="rounded" width="100%" height={200} />
-              <Skeleton variant="rounded" width="100%" height={50} />
-            </>
-          ) : (
-            <>
+              </Stack>
+              <Box sx={{ height: "200px" }}>
+                <MonitorDetailsAreaChart
+                  checks={monitor.checks}
+                  filter={filter}
+                />
+              </Box>
+            </Box>
+            <Stack gap={theme.gap.ml}>
               <Typography component="h2">History</Typography>
               <BasicTable data={data} paginated={true} reversed={true} />
-            </>
-          )}
-        </Stack>
-      </Stack>
+            </Stack>
+          </Stack>
+        </>
+      )}
     </Box>
   );
 };
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 82e53ba6b..33828c908 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -72,6 +72,38 @@ const Host = ({ params }) => {
   );
 };
 
+/**
+ * Renders a skeleton layout.
+ *
+ * @returns {JSX.Element}
+ */
+const SkeletonLayout = () => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Skeleton variant="rounded" width="50%" height={36} />
+        <Skeleton variant="rounded" width="15%" height={36} />
+      </Stack>
+      <Stack
+        gap={theme.gap.large}
+        direction="row"
+        justifyContent="space-between"
+      >
+        <Skeleton variant="rounded" width="100%" height={100} />
+        <Skeleton variant="rounded" width="100%" height={100} />
+        <Skeleton variant="rounded" width="100%" height={100} />
+      </Stack>
+      <Stack gap={theme.gap.large} p={theme.gap.xl} backgroundColor="#f9fafb">
+        <Skeleton variant="rounded" width="50%" height={25} />
+        <Skeleton variant="rounded" width="100%" height={300} />
+        <Skeleton variant="rounded" width="100%" height={100} />
+      </Stack>
+    </>
+  );
+};
+
 const Monitors = () => {
   const theme = useTheme();
   const navigate = useNavigate();
@@ -205,18 +237,19 @@ const Monitors = () => {
     };
   });
 
-  let loading =  monitorState.isLoading && monitorState.monitors.length === 0;
+  let loading = monitorState.isLoading && monitorState.monitors.length === 0;
 
   return (
     <Stack className="monitors" gap={theme.gap.large}>
-      <Stack direction="row" justifyContent="space-between" alignItems="center">
-        {loading ? (
-          <>
-            <Skeleton variant="rounded" width="50%" height={36} />
-            <Skeleton variant="rounded" width="15%" height={36} />
-          </>
-        ) : (
-          <>
+      {loading ? (
+        <SkeletonLayout />
+      ) : (
+        <>
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
             <Typography component="h1">
               Hello, {authState.user.firstName}
             </Typography>
@@ -227,60 +260,37 @@ const Monitors = () => {
                 navigate("/monitors/create");
               }}
             />
-          </>
-        )}
-      </Stack>
-      <Stack
-        gap={theme.gap.large}
-        direction="row"
-        justifyContent="space-between"
-      >
-        {loading ? (
-          <>
-            <Skeleton variant="rounded" width="100%" height={100} />
-            <Skeleton variant="rounded" width="100%" height={100} />
-            <Skeleton variant="rounded" width="100%" height={100} />
-          </>
-        ) : (
-          <>
+          </Stack>
+          <Stack
+            gap={theme.gap.large}
+            direction="row"
+            justifyContent="space-between"
+          >
             <ServerStatus title="Up" value={up} state="up" />
             <ServerStatus title="Down" value={down} state="down" />
             <ServerStatus title="Paused" value={0} state="pause" />
-          </>
-        )}
-      </Stack>
-      <Stack
-        gap={theme.gap.large}
-        p={theme.gap.xl}
-        border={1}
-        borderColor={
-          loading ? "#f9fafb" : theme.palette.otherColors.graishWhite
-        }
-        backgroundColor={loading ? "#f9fafb" : "white"}
-        sx={{
-          borderRadius: `${theme.shape.borderRadius}px`,
-        }}
-      >
-        {loading ? (
-          <Skeleton variant="rounded" width="50%" height={25} />
-        ) : (
-          <Stack direction="row" alignItems="center">
-            <Typography component="h2">Current monitors</Typography>
-            <Box className="current-monitors-counter">
-              {monitorState.monitors.length}
-            </Box>
-            {/* TODO - add search bar */}
           </Stack>
-        )}
-        {loading ? (
-          <>
-            <Skeleton variant="rounded" width="100%" height={400} />
-            <Skeleton variant="rounded" width="100%" height={100} />
-          </>
-        ) : (
-          <BasicTable data={data} paginated={true} />
-        )}
-      </Stack>
+          <Stack
+            gap={theme.gap.large}
+            p={theme.gap.xl}
+            border={1}
+            borderColor={theme.palette.otherColors.graishWhite}
+            backgroundColor={theme.palette.otherColors.white}
+            sx={{
+              borderRadius: `${theme.shape.borderRadius}px`,
+            }}
+          >
+            <Stack direction="row" alignItems="center">
+              <Typography component="h2">Current monitors</Typography>
+              <Box className="current-monitors-counter">
+                {monitorState.monitors.length}
+              </Box>
+              {/* TODO - add search bar */}
+            </Stack>
+            <BasicTable data={data} paginated={true} />
+          </Stack>
+        </>
+      )}
       <Menu
         className="actions-menu"
         anchorEl={anchorEl}
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 7e24372f3..52581f3b9 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -126,6 +126,53 @@ const PieValueLabel = ({ value, startAngle, endAngle, color, highlighted }) => {
   );
 };
 
+/**
+ * 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.gap.small}>
+        <Skeleton variant="circular" style={{ minWidth: 24, minHeight: 24 }} />
+        <Box width="80%">
+          <Skeleton variant="rounded" width="50%" height={24} />
+          <Skeleton
+            variant="rounded"
+            width="50%"
+            height={18}
+            sx={{ mt: theme.gap.small }}
+          />
+        </Box>
+        <Skeleton
+          variant="rounded"
+          width="15%"
+          height={34}
+          sx={{ alignSelf: "flex-end" }}
+        />
+      </Stack>
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        gap={theme.gap.xl}
+        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();
@@ -254,50 +301,26 @@ const PageSpeedDetails = () => {
   return (
     <Stack className="page-speed-details" gap={theme.gap.large}>
       {loading ? (
-        <Skeleton variant="rounded" width="15%" height={34} />
+        <SkeletonLayout />
       ) : (
-        <Button
-          level="tertiary"
-          label="Back"
-          animate="slideLeft"
-          img={<WestRoundedIcon />}
-          onClick={() => navigate("/pagespeed")}
-          sx={{
-            width: "fit-content",
-            backgroundColor: theme.palette.otherColors.fillGray,
-            px: theme.gap.ml,
-            "& svg.MuiSvgIcon-root": {
-              mr: theme.gap.small,
-              fill: theme.palette.otherColors.slateGray,
-            },
-          }}
-        />
-      )}
-      <Stack direction="row" gap={theme.gap.small}>
-        {loading ? (
-          <>
-            <Skeleton
-              variant="circular"
-              style={{ minWidth: 24, minHeight: 24 }}
-            />
-            <Box width="80%">
-              <Skeleton variant="rounded" width="50%" height={24} />
-              <Skeleton
-                variant="rounded"
-                width="50%"
-                height={18}
-                sx={{ mt: theme.gap.small }}
-              />
-            </Box>
-            <Skeleton
-              variant="rounded"
-              width="15%"
-              height={34}
-              sx={{ alignSelf: "flex-end" }}
-            />
-          </>
-        ) : (
-          <>
+        <>
+          <Button
+            level="tertiary"
+            label="Back"
+            animate="slideLeft"
+            img={<WestRoundedIcon />}
+            onClick={() => navigate("/pagespeed")}
+            sx={{
+              width: "fit-content",
+              backgroundColor: theme.palette.otherColors.fillGray,
+              px: theme.gap.ml,
+              "& svg.MuiSvgIcon-root": {
+                mr: theme.gap.small,
+                fill: theme.palette.otherColors.slateGray,
+              },
+            }}
+          />
+          <Stack direction="row" gap={theme.gap.small}>
             <GreenCheck />
             <Box>
               <Typography
@@ -334,38 +357,13 @@ const PageSpeedDetails = () => {
                 },
               }}
             />
-          </>
-        )}
-      </Stack>
-      <Stack
-        direction="row"
-        justifyContent="space-between"
-        gap={theme.gap.xl}
-        flexWrap="wrap"
-      >
-        {loading ? (
-          <>
-            <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>
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            gap={theme.gap.xl}
+            flexWrap="wrap"
+          >
             <StatBox
               icon={<LastCheckedIcon />}
               title="Last checked"
@@ -408,31 +406,13 @@ const PageSpeedDetails = () => {
               title="Checks every"
               value={formatDurationRounded(monitor?.interval)}
             ></StatBox>
-          </>
-        )}
-      </Stack>
-      {loading ? (
-        <>
-          <Skeleton variant="rounded" width="25%" height={24} />
-          <Skeleton variant="rounded" width="100%" height={300} />
-        </>
-      ) : (
-        <>
+          </Stack>
           <Typography component="h2">Score history</Typography>
           <Box height="300px">
             <PageSpeedLineChart
               pageSpeedChecks={monitor?.checks?.slice(0, 25)}
             />
           </Box>
-        </>
-      )}
-      {loading ? (
-        <>
-          <Skeleton variant="rounded" width="25%" height={24} />
-          <Skeleton variant="rounded" width="100%" height={300} />
-        </>
-      ) : (
-        <>
           <Typography component="h2">Performance report</Typography>
           <Stack direction="row" alignItems="center" overflow="hidden">
             <Stack
diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index 13b5d937c..ab734b0a6 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -57,6 +57,67 @@ const Card = ({ data }) => {
   );
 };
 
+/**
+ * Renders a skeleton layout.
+ *
+ * @returns {JSX.Element}
+ */
+const SkeletonLayout = () => {
+  const theme = useTheme();
+
+  return (
+    <Stack gap={theme.gap.xs}>
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        mb={theme.gap.large}
+      >
+        <Box width="80%">
+          <Skeleton variant="rounded" width="25%" height={24} />
+          <Skeleton
+            variant="rounded"
+            width="50%"
+            height={19.5}
+            sx={{ mt: theme.gap.xs }}
+          />
+        </Box>
+        <Skeleton
+          variant="rounded"
+          width="20%"
+          height={34}
+          sx={{ alignSelf: "flex-end" }}
+        />
+      </Stack>
+      <Stack direction="row" flexWrap="wrap" gap={theme.gap.large}>
+        <Skeleton
+          variant="rounded"
+          width="100%"
+          height={120}
+          sx={{ flex: "35%" }}
+        />
+        <Skeleton
+          variant="rounded"
+          width="100%"
+          height={120}
+          sx={{ flex: "35%" }}
+        />
+        <Skeleton
+          variant="rounded"
+          width="100%"
+          height={120}
+          sx={{ flex: "35%" }}
+        />
+        <Skeleton
+          variant="rounded"
+          width="100%"
+          height={120}
+          sx={{ flex: "35%" }}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
 const PageSpeed = () => {
   const theme = useTheme();
   const dispatch = useDispatch();
@@ -77,55 +138,7 @@ const PageSpeed = () => {
   return (
     <Box className="page-speed">
       {isActuallyLoading ? (
-        <Stack gap={theme.gap.xs}>
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            mb={theme.gap.large}
-          >
-            <Box width="80%">
-              <Skeleton variant="rounded" width="25%" height={24} />
-              <Skeleton
-                variant="rounded"
-                width="50%"
-                height={19.5}
-                sx={{ mt: theme.gap.xs }}
-              />
-            </Box>
-            <Skeleton
-              variant="rounded"
-              width="20%"
-              height={34}
-              sx={{ alignSelf: "flex-end" }}
-            />
-          </Stack>
-          <Stack direction="row" flexWrap="wrap" gap={theme.gap.large}>
-            <Skeleton
-              variant="rounded"
-              width="100%"
-              height={120}
-              sx={{ flex: "35%" }}
-            />
-            <Skeleton
-              variant="rounded"
-              width="100%"
-              height={120}
-              sx={{ flex: "35%" }}
-            />
-            <Skeleton
-              variant="rounded"
-              width="100%"
-              height={120}
-              sx={{ flex: "35%" }}
-            />
-            <Skeleton
-              variant="rounded"
-              width="100%"
-              height={120}
-              sx={{ flex: "35%" }}
-            />
-          </Stack>
-        </Stack>
+        <SkeletonLayout />
       ) : monitors?.length !== 0 ? (
         <Stack gap={theme.gap.xs}>
           <Stack

From 901ec29281b673fce333d7ff8177db8b5e7f12f8 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 7 Aug 2024 22:46:21 -0700
Subject: [PATCH 06/12] Prep monitor details page for better data handling,
 minor fix to basic table component

---
 Client/src/Components/BasicTable/index.jsx  |   6 +-
 Client/src/Pages/Monitors/Details/index.jsx | 120 ++++++++++++--------
 2 files changed, 76 insertions(+), 50 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 3f89de700..76f1c61c7 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -9,7 +9,7 @@ import {
   Pagination,
   PaginationItem,
 } from "@mui/material";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import "./index.css";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
@@ -73,6 +73,10 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
 
   const [page, setPage] = useState(0);
 
+  useEffect(() => {
+    setPage(0);
+  }, [data]);
+
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
   };
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index b17eb831b..c952f32eb 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -116,59 +116,81 @@ const DetailsPage = () => {
   const { authToken } = useSelector((state) => state.auth);
   const [filter, setFilter] = useState("day");
 
+  const fetchDataForChart = async () => {
+    try {
+      const limit = 0;
+
+      const res = await axiosInstance.get(
+        `/monitors/${monitorId}?sortOrder=asc&limit=${limit}`,
+        {
+          headers: {
+            Authorization: `Bearer ${authToken}`,
+          },
+        }
+      );
+      const data = {
+        cols: [
+          { id: 1, name: "Status" },
+          { id: 2, name: "Date & Time" },
+          { id: 3, name: "Message" },
+        ],
+        rows: res.data.data.checks.map((check, idx) => {
+          const status = check.status === true ? "up" : "down";
+
+          return {
+            id: check._id,
+            data: [
+              {
+                id: idx,
+                data: (
+                  <StatusLabel
+                    status={status}
+                    text={status}
+                    customStyles={{ textTransform: "capitalize" }}
+                  />
+                ),
+              },
+              {
+                id: idx + 1,
+                data: new Date(check.createdAt).toLocaleString(),
+              },
+              { id: idx + 2, data: check.statusCode },
+            ],
+          };
+        }),
+      };
+
+      setData(data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const fetchMonitor = async () => {
+    try {
+      const res = await axiosInstance.get(
+        `/monitors/${monitorId}?sortOrder=asc`,
+        {
+          headers: {
+            Authorization: `Bearer ${authToken}`,
+          },
+        }
+      );
+      setMonitor(res.data.data);
+    } catch (error) {
+      console.error("Error fetching monitor of id: " + monitorId);
+      navigate("/not-found");
+    }
+  };
+
   useEffect(() => {
-    const fetchMonitor = async () => {
-      try {
-        const res = await axiosInstance.get(
-          `/monitors/${monitorId}?sortOrder=asc`,
-          {
-            headers: {
-              Authorization: `Bearer ${authToken}`,
-            },
-          }
-        );
-        setMonitor(res.data.data);
-        const data = {
-          cols: [
-            { id: 1, name: "Status" },
-            { id: 2, name: "Date & Time" },
-            { id: 3, name: "Message" },
-          ],
-          rows: res.data.data.checks.map((check, idx) => {
-            const status = check.status === true ? "up" : "down";
-
-            return {
-              id: check._id,
-              data: [
-                {
-                  id: idx,
-                  data: (
-                    <StatusLabel
-                      status={status}
-                      text={status}
-                      customStyles={{ textTransform: "capitalize" }}
-                    />
-                  ),
-                },
-                {
-                  id: idx + 1,
-                  data: new Date(check.createdAt).toLocaleString(),
-                },
-                { id: idx + 2, data: check.statusCode },
-              ],
-            };
-          }),
-        };
-
-        setData(data);
-      } catch (error) {
-        console.error("Error fetching monitor of id: " + monitorId);
-        navigate("/not-found");
-      }
-    };
     fetchMonitor();
   }, [monitorId, authToken]);
 
+  useEffect(() => {
+    fetchDataForChart();
+  }, [filter]);
+
   const theme = useTheme();
   const navigate = useNavigate();
 

From ca797118f8b4736d5c9021d6a1fd5a5df934a212 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 8 Aug 2024 11:48:13 -0400
Subject: [PATCH 07/12] Added fallback UI in case the user has no monitors
 created

---
 Client/src/Pages/Monitors/index.css |  7 +++
 Client/src/Pages/Monitors/index.jsx | 97 +++++++++++++++++++----------
 2 files changed, 70 insertions(+), 34 deletions(-)

diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index 180bac0b8..67da49c1f 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/Client/src/Pages/Monitors/index.css
@@ -9,6 +9,13 @@
 .monitors h2.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
 }
+.monitors p.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium);
+}
+.monitors h2:has(+ p),
+.monitors p.MuiTypography-root {
+  color: var(--env-var-color-5);
+}
 .monitors .MuiStack-root > button:not(.MuiIconButton-root) {
   font-size: var(--env-var-font-size-medium);
   height: var(--env-var-height-2);
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 99fd141e9..d7f70e300 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -253,42 +253,71 @@ const Monitors = () => {
             <Typography component="h1">
               Hello, {authState.user.firstName}
             </Typography>
-            <Button
-              level="primary"
-              label="Create new monitor"
-              onClick={() => {
-                navigate("/monitors/create");
-              }}
-            />
+            {monitorState.monitors?.length !== 0 && (
+              <Button
+                level="primary"
+                label="Create new monitor"
+                onClick={() => {
+                  navigate("/monitors/create");
+                }}
+              />
+            )}
           </Stack>
-          <Stack
-            gap={theme.gap.large}
-            direction="row"
-            justifyContent="space-between"
-          >
-            <ServerStatus title="Up" value={up} state="up" />
-            <ServerStatus title="Down" value={down} state="down" />
-            <ServerStatus title="Paused" value={0} state="pause" />
-          </Stack>
-          <Stack
-            gap={theme.gap.large}
-            p={theme.gap.xl}
-            border={1}
-            borderColor={theme.palette.otherColors.graishWhite}
-            backgroundColor={theme.palette.otherColors.white}
-            sx={{
-              borderRadius: `${theme.shape.borderRadius}px`,
-            }}
-          >
-            <Stack direction="row" alignItems="center">
-              <Typography component="h2">Current monitors</Typography>
-              <Box className="current-monitors-counter">
-                {monitorState.monitors.length}
-              </Box>
-              {/* TODO - add search bar */}
+          {monitorState.monitors?.length === 0 ? (
+            <Stack
+              alignItems="center"
+              backgroundColor={theme.palette.otherColors.white}
+              p={theme.gap.xxl}
+              gap={theme.gap.xs}
+              border={1}
+              borderRadius={`${theme.shape.borderRadius}px`}
+              borderColor={theme.palette.otherColors.graishWhite}
+            >
+              <Typography component="h2">No monitors found</Typography>
+              <Typography>
+                It looks like you don’t have any monitors set up yet.
+              </Typography>
+              <Button
+                level="primary"
+                label="Create your first monitor"
+                onClick={() => {
+                  navigate("/monitors/create");
+                }}
+                sx={{ mt: theme.gap.large }}
+              />
             </Stack>
-            <BasicTable data={data} paginated={true} />
-          </Stack>
+          ) : (
+            <>
+              <Stack
+                gap={theme.gap.large}
+                direction="row"
+                justifyContent="space-between"
+              >
+                <ServerStatus title="Up" value={up} state="up" />
+                <ServerStatus title="Down" value={down} state="down" />
+                <ServerStatus title="Paused" value={0} state="pause" />
+              </Stack>
+              <Stack
+                gap={theme.gap.large}
+                p={theme.gap.xl}
+                border={1}
+                borderColor={theme.palette.otherColors.graishWhite}
+                backgroundColor={theme.palette.otherColors.white}
+                sx={{
+                  borderRadius: `${theme.shape.borderRadius}px`,
+                }}
+              >
+                <Stack direction="row" alignItems="center">
+                  <Typography component="h2">Current monitors</Typography>
+                  <Box className="current-monitors-counter">
+                    {monitorState.monitors.length}
+                  </Box>
+                  {/* TODO - add search bar */}
+                </Stack>
+                <BasicTable data={data} paginated={true} />
+              </Stack>{" "}
+            </>
+          )}
         </>
       )}
       <Menu

From 51058b6d2b19614248599aab4b7450801dded672 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 8 Aug 2024 11:20:54 -0700
Subject: [PATCH 08/12] Moved normalization to BE

---
 .../Charts/MonitorDetailsAreaChart/index.jsx   |  8 +-------
 .../Charts/ResponseTimeChart/index.jsx         |  6 ++----
 .../UptimeMonitors/uptimeMonitorsSlice.js      |  2 +-
 Client/src/Pages/Monitors/Details/index.jsx    |  2 +-
 Client/src/Pages/Monitors/index.jsx            |  2 +-
 Server/db/mongo/modules/monitorModule.js       | 18 +++++++++++++++---
 .../ChartUtils.js => Server/utils/dataUtils.js |  6 +++++-
 Server/validation/joi.js                       |  2 ++
 8 files changed, 28 insertions(+), 18 deletions(-)
 rename Client/src/Components/Charts/ChartUtils.js => Server/utils/dataUtils.js (93%)

diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
index b25c3b57b..863ba398f 100644
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
@@ -1,6 +1,5 @@
 import PropTypes from "prop-types";
 import { AreaChart, Area, XAxis, Tooltip, ResponsiveContainer } from "recharts";
-import { NormalizeData } from "../ChartUtils";
 import "./index.css";
 
 const CustomToolTip = ({ active, payload, label }) => {
@@ -47,17 +46,12 @@ const MonitorDetailsAreaChart = ({ checks, filter }) => {
     });
   };
 
-  let normalizedChecks = [];
-  if (checks && checks.length > 0) {
-    normalizedChecks = NormalizeData(checks, 10, 100);
-  }
-
   return (
     <ResponsiveContainer width="100%" height="100%">
       <AreaChart
         width={500}
         height={400}
-        data={normalizedChecks}
+        data={checks}
         margin={{
           top: 10,
           right: 0,
diff --git a/Client/src/Components/Charts/ResponseTimeChart/index.jsx b/Client/src/Components/Charts/ResponseTimeChart/index.jsx
index 063ce3b16..66ef6b3eb 100644
--- a/Client/src/Components/Charts/ResponseTimeChart/index.jsx
+++ b/Client/src/Components/Charts/ResponseTimeChart/index.jsx
@@ -1,21 +1,19 @@
 import "./index.css";
 import PropTypes from "prop-types";
 import { BarChart, Bar, ResponsiveContainer, Cell } from "recharts";
-import { NormalizeData } from "../ChartUtils";
 
 const ResponseTimeChart = ({ checks = [] }) => {
-  const normalizedChecks = NormalizeData(checks, 1, 100);
   return (
     <div className="chart-container">
       <ResponsiveContainer width="100%" height="100%">
         <BarChart
           width={150}
           height={40}
-          data={normalizedChecks}
+          data={checks}
           style={{ cursor: "pointer" }}
         >
           <Bar maxBarSize={10} dataKey="responseTime">
-            {normalizedChecks.map((check, index) => (
+            {checks.map((check, index) => (
               <Cell
                 key={`cell-${index}`}
                 fill={
diff --git a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
index 52a02cd55..4c2acd3ec 100644
--- a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
+++ b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
@@ -51,7 +51,7 @@ export const getUptimeMonitorsByUserId = createAsyncThunk(
     const user = jwtDecode(token);
     try {
       const res = await axiosInstance.get(
-        `/monitors/user/${user._id}?limit=25&type=http&type=ping&sortOrder=desc`,
+        `/monitors/user/${user._id}?limit=25&type=http&type=ping&sortOrder=desc&normalize=true`,
         {
           headers: {
             Authorization: `Bearer ${token}`,
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 6033ab740..6f7d36d3d 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -170,7 +170,7 @@ const DetailsPage = () => {
   const fetchMonitor = useCallback(async () => {
     try {
       const res = await axiosInstance.get(
-        `/monitors/${monitorId}?sortOrder=asc&filter=${filter}&numToDisplay=50`,
+        `/monitors/${monitorId}?sortOrder=asc&filter=${filter}&numToDisplay=50&normalize=true`,
         {
           headers: {
             Authorization: `Bearer ${authToken}`,
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index d7f70e300..e56be39b2 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -145,7 +145,7 @@ const Monitors = () => {
 
   useEffect(() => {
     dispatch(getUptimeMonitorsByUserId(authState.authToken));
-  }, []);
+  }, [authState.authToken, dispatch]);
 
   const up = monitorState.monitors.reduce((acc, cur) => {
     return cur.status === true ? acc + 1 : acc;
diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index df9790003..15f431673 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -3,6 +3,7 @@ const Check = require("../../../models/Check");
 const PageSpeedCheck = require("../../../models/PageSpeedCheck");
 const { errorMessages } = require("../../../utils/messages");
 const Notification = require("../../../models/Notification");
+const { NormalizeData } = require("../../../utils/dataUtils");
 
 /**
  * Get all monitors
@@ -32,7 +33,8 @@ const getAllMonitors = async (req, res) => {
 const getMonitorById = async (req, res) => {
   try {
     const { monitorId } = req.params;
-    let { status, limit, sortOrder, filter, numToDisplay } = req.query;
+    let { status, limit, sortOrder, filter, numToDisplay, normalize } =
+      req.query;
 
     const filterLookup = {
       day: new Date(new Date().setDate(new Date().getDate() - 1)),
@@ -82,6 +84,11 @@ const getMonitorById = async (req, res) => {
       checks = checks.filter((_, index) => index % n === 0);
     }
 
+    // Normalize checks if requested
+    if (normalize) {
+      checks = NormalizeData(checks, 10, 100);
+    }
+
     const notifications = await Notification.find({ monitorId: monitor._id });
     const monitorWithChecks = { ...monitor.toObject(), checks, notifications };
     return monitorWithChecks;
@@ -100,7 +107,7 @@ const getMonitorById = async (req, res) => {
  */
 const getMonitorsByUserId = async (req, res) => {
   try {
-    let { limit, type, status, sortOrder } = req.query;
+    let { limit, type, status, sortOrder, normalize } = req.query;
     const monitorQuery = { userId: req.params.userId };
 
     if (type !== undefined) {
@@ -133,13 +140,18 @@ const getMonitorsByUserId = async (req, res) => {
             : PageSpeedCheck;
 
         // Checks are order newest -> oldest
-        const checks = await model
+        let checks = await model
           .find(checksQuery)
           .sort({
             createdAt: sortOrder,
           })
           .limit(limit);
 
+        //Normalize checks if requested
+        if (normalize === true) {
+          checks = NormalizeData(checks, 10, 100);
+        }
+
         // Get notifications
         const notifications = await Notification.find({
           monitorId: monitor._id,
diff --git a/Client/src/Components/Charts/ChartUtils.js b/Server/utils/dataUtils.js
similarity index 93%
rename from Client/src/Components/Charts/ChartUtils.js
rename to Server/utils/dataUtils.js
index 77d9d4c2d..88112013d 100644
--- a/Client/src/Components/Charts/ChartUtils.js
+++ b/Server/utils/dataUtils.js
@@ -11,7 +11,7 @@ const calculatePercentile = (arr, percentile) => {
   );
 };
 
-export const NormalizeData = (checks, rangeMin, rangeMax) => {
+const NormalizeData = (checks, rangeMin, rangeMax) => {
   if (checks.length > 1) {
     // Get the 5th and 95th percentile
     const min = calculatePercentile(checks, 0);
@@ -44,3 +44,7 @@ export const NormalizeData = (checks, rangeMin, rangeMax) => {
     });
   }
 };
+
+module.exports = {
+  NormalizeData,
+};
diff --git a/Server/validation/joi.js b/Server/validation/joi.js
index e1032cb6d..8e3dbcfec 100644
--- a/Server/validation/joi.js
+++ b/Server/validation/joi.js
@@ -128,6 +128,7 @@ const getMonitorByIdQueryValidation = joi.object({
   limit: joi.number(),
   filter: joi.string().valid("day", "week", "month"),
   numToDisplay: joi.number(),
+  normalize: joi.boolean(),
 });
 
 const getMonitorsByUserIdValidation = joi.object({
@@ -138,6 +139,7 @@ const getMonitorsByUserIdQueryValidation = joi.object({
   status: joi.boolean(),
   sortOrder: joi.string().valid("asc", "desc"),
   limit: joi.number(),
+  normalize: joi.boolean(),
   type: joi
     .alternatives()
     .try(

From 284253638b6a6bf50eca8a63ef52cc7a1096d7f9 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 8 Aug 2024 11:32:48 -0700
Subject: [PATCH 09/12] Properly extract doc from mongoose model in
 Normalization

---
 Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx | 2 +-
 Server/utils/dataUtils.js                                      | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
index 863ba398f..567de0b68 100644
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
@@ -27,7 +27,7 @@ const CustomToolTip = ({ active, payload, label }) => {
   return null;
 };
 
-const MonitorDetailsAreaChart = ({ checks, filter }) => {
+const MonitorDetailsAreaChart = ({ checks }) => {
   //   SQUASH ERROR, NOT PERMANENT SOLUTION
   const error = console.error;
   console.error = (...args) => {
diff --git a/Server/utils/dataUtils.js b/Server/utils/dataUtils.js
index 88112013d..3495cc3d6 100644
--- a/Server/utils/dataUtils.js
+++ b/Server/utils/dataUtils.js
@@ -19,6 +19,7 @@ const NormalizeData = (checks, rangeMin, rangeMax) => {
 
     const normalizedChecks = checks.map((check) => {
       const originalResponseTime = check.responseTime;
+      console.log(originalResponseTime);
       // Normalize the response time between 1 and 100
       let normalizedResponseTime =
         rangeMin +
@@ -31,7 +32,7 @@ const NormalizeData = (checks, rangeMin, rangeMax) => {
         Math.min(rangeMax, normalizedResponseTime)
       );
       return {
-        ...check,
+        ...check._doc,
         responseTime: normalizedResponseTime,
         originalResponseTime: originalResponseTime,
       };

From b3fab31a612646cb5b2c629ac2b6cd75933f7092 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 8 Aug 2024 12:37:02 -0700
Subject: [PATCH 10/12] node

---
 Client/src/Pages/Monitors/Details/index.jsx |  8 ++----
 Server/controllers/checkController.js       |  4 ++-
 Server/db/mongo/modules/checkModule.js      | 32 +++++++++++++++++++--
 Server/utils/dataUtils.js                   |  1 -
 Server/validation/joi.js                    |  7 +++++
 5 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 6f7d36d3d..aebde997b 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -119,10 +119,8 @@ const DetailsPage = () => {
 
   const fetchDataForTable = useCallback(async () => {
     try {
-      const limit = 0;
-
       const res = await axiosInstance.get(
-        `/monitors/${monitorId}?sortOrder=asc&limit=${limit}`,
+        `/checks/${monitorId}?sortOrder=desc&filter=${filter}`,
         {
           headers: {
             Authorization: `Bearer ${authToken}`,
@@ -135,7 +133,7 @@ const DetailsPage = () => {
           { id: 2, name: "Date & Time" },
           { id: 3, name: "Message" },
         ],
-        rows: res.data.data.checks.map((check, idx) => {
+        rows: res.data.data.map((check, idx) => {
           const status = check.status === true ? "up" : "down";
 
           return {
@@ -165,7 +163,7 @@ const DetailsPage = () => {
     } catch (error) {
       console.log(error);
     }
-  }, [authToken, monitorId]);
+  }, [authToken, monitorId, filter]);
 
   const fetchMonitor = useCallback(async () => {
     try {
diff --git a/Server/controllers/checkController.js b/Server/controllers/checkController.js
index f3c85352f..5d939cbad 100644
--- a/Server/controllers/checkController.js
+++ b/Server/controllers/checkController.js
@@ -2,6 +2,7 @@ const {
   createCheckParamValidation,
   createCheckBodyValidation,
   getChecksParamValidation,
+  getChecksQueryValidation,
   deleteChecksParamValidation,
 } = require("../validation/joi");
 const { successMessages } = require("../utils/messages");
@@ -35,6 +36,7 @@ const createCheck = async (req, res, next) => {
 const getChecks = async (req, res, next) => {
   try {
     await getChecksParamValidation.validateAsync(req.params);
+    await getChecksQueryValidation.validateAsync(req.query);
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
@@ -45,7 +47,7 @@ const getChecks = async (req, res, next) => {
   }
 
   try {
-    const checks = await req.db.getChecks(req.params.monitorId);
+    const checks = await req.db.getChecks(req);
     return res
       .status(200)
       .json({ success: true, msg: successMessages.CHECK_GET, data: checks });
diff --git a/Server/db/mongo/modules/checkModule.js b/Server/db/mongo/modules/checkModule.js
index 35c313fd9..3cf5de3e5 100644
--- a/Server/db/mongo/modules/checkModule.js
+++ b/Server/db/mongo/modules/checkModule.js
@@ -30,9 +30,37 @@ const createCheck = async (checkData) => {
  * @throws {Error}
  */
 
-const getChecks = async (monitorId) => {
+const getChecks = async (req) => {
+  const filterLookup = {
+    day: new Date(new Date().setDate(new Date().getDate() - 1)),
+    week: new Date(new Date().setDate(new Date().getDate() - 7)),
+    month: new Date(new Date().setMonth(new Date().getMonth() - 1)),
+  };
+
   try {
-    const checks = await Check.find({ monitorId });
+    const { monitorId } = req.params;
+    let { sortOrder, limit, filter } = req.query;
+
+    // Default limit to 0 if not provided
+    if (limit === undefined) limit = 0;
+
+    // Default sort order is newest -> oldest
+    if (sortOrder === "asc") {
+      sortOrder = 1;
+    } else if (sortOrder === "desc") {
+      sortOrder = -1;
+    } else sortOrder = -1;
+
+    // Build query
+    const checksQuery = { monitorId: monitorId };
+    // Filter checks by "day", "week", or "month"
+    if (filter !== undefined) {
+      checksQuery.createdAt = { $gte: filterLookup[filter] };
+    }
+
+    const checks = await Check.find(checksQuery)
+      .limit(limit)
+      .sort({ createdAt: sortOrder });
     return checks;
   } catch (error) {
     throw error;
diff --git a/Server/utils/dataUtils.js b/Server/utils/dataUtils.js
index 3495cc3d6..f1c4b39b2 100644
--- a/Server/utils/dataUtils.js
+++ b/Server/utils/dataUtils.js
@@ -19,7 +19,6 @@ const NormalizeData = (checks, rangeMin, rangeMax) => {
 
     const normalizedChecks = checks.map((check) => {
       const originalResponseTime = check.responseTime;
-      console.log(originalResponseTime);
       // Normalize the response time between 1 and 100
       let normalizedResponseTime =
         rangeMin +
diff --git a/Server/validation/joi.js b/Server/validation/joi.js
index 8e3dbcfec..d6c198e4a 100644
--- a/Server/validation/joi.js
+++ b/Server/validation/joi.js
@@ -232,6 +232,12 @@ const getChecksParamValidation = joi.object({
   monitorId: joi.string().required(),
 });
 
+const getChecksQueryValidation = joi.object({
+  sortOrder: joi.string().valid("asc", "desc"),
+  limit: joi.number(),
+  filter: joi.string().valid("day", "week", "month"),
+});
+
 const deleteChecksParamValidation = joi.object({
   monitorId: joi.string().required(),
 });
@@ -311,6 +317,7 @@ module.exports = {
   createCheckParamValidation,
   createCheckBodyValidation,
   getChecksParamValidation,
+  getChecksQueryValidation,
   deleteChecksParamValidation,
   deleteUserParamValidation,
   getPageSpeedCheckParamValidation,

From d43b4806e67a54023f31fd31594a1a8a9173c168 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 8 Aug 2024 13:19:37 -0700
Subject: [PATCH 11/12] Implement pagination on FE and BE

---
 .../Details/PaginationTable/index.jsx         | 121 ++++++++++++++++++
 Client/src/Pages/Monitors/Details/index.jsx   |  59 +--------
 Server/controllers/checkController.js         |   9 +-
 Server/db/mongo/MongoDB.js                    |   2 +
 Server/db/mongo/modules/checkModule.js        |  37 ++++--
 Server/validation/joi.js                      |   2 +
 6 files changed, 162 insertions(+), 68 deletions(-)
 create mode 100644 Client/src/Pages/Monitors/Details/PaginationTable/index.jsx

diff --git a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
new file mode 100644
index 000000000..5f0f8a690
--- /dev/null
+++ b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
@@ -0,0 +1,121 @@
+import PropTypes from "prop-types";
+import {
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+  TableFooter,
+  TablePagination,
+} from "@mui/material";
+
+import { useState, useEffect } from "react";
+import { useSelector } from "react-redux";
+import axiosInstance from "../../../../Utils/axiosConfig";
+import { StatusLabel } from "../../../../Components/Label";
+
+const PaginationTable = ({ monitorId, filter }) => {
+  const { authToken } = useSelector((state) => state.auth);
+  const [checks, setChecks] = useState([]);
+  const [checksCount, setChecksCount] = useState(0);
+  const [paginationController, setPaginationController] = useState({
+    page: 0,
+    rowsPerPage: 5,
+  });
+
+  useEffect(() => {
+    const fetchPage = async () => {
+      try {
+        const res = await axiosInstance.get(
+          `/checks/${monitorId}?sortOrder=desc&filter=${filter}&page=${paginationController.page}&rowsPerPage=${paginationController.rowsPerPage}`,
+          {
+            headers: {
+              Authorization: `Bearer ${authToken}`,
+            },
+          }
+        );
+        setChecks(res.data.data.checks);
+        setChecksCount(res.data.data.checksCount);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    fetchPage();
+  }, [
+    authToken,
+    monitorId,
+    filter,
+    paginationController.page,
+    paginationController.rowsPerPage,
+  ]);
+
+  const handlePageChange = (_, newPage) => {
+    setPaginationController({
+      ...paginationController,
+      page: newPage,
+    });
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setPaginationController({
+      ...paginationController,
+      rowsPerPage: parseInt(event.target.value, 10),
+      page: 0,
+    });
+  };
+
+  return (
+    <TableContainer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Status</TableCell>
+            <TableCell>Date & Time</TableCell>
+            <TableCell>Message</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {checks.map((check) => {
+            const status = check.status === true ? "up" : "down";
+
+            return (
+              <TableRow key={check._id}>
+                <TableCell>
+                  <StatusLabel
+                    status={status}
+                    text={status}
+                    customStyles={{ textTransform: "capitalize" }}
+                  />
+                </TableCell>
+                <TableCell>
+                  {new Date(check.createdAt).toLocaleString()}
+                </TableCell>
+                <TableCell>{check.statusCode}</TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 25]}
+              onPageChange={handlePageChange}
+              page={paginationController.page}
+              count={checksCount}
+              rowsPerPage={paginationController.rowsPerPage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
+  );
+};
+
+PaginationTable.propTypes = {
+  monitorId: PropTypes.string.isRequired,
+  filter: PropTypes.string.isRequired,
+};
+
+export default PaginationTable;
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index aebde997b..55dfd9335 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -4,7 +4,6 @@ import { Box, Skeleton, Stack, Typography, useTheme } from "@mui/material";
 import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import axiosInstance from "../../../Utils/axiosConfig";
-import BasicTable from "../../../Components/BasicTable";
 import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
 import { StatusLabel } from "../../../Components/Label";
 import ButtonGroup from "@mui/material/ButtonGroup";
@@ -13,6 +12,7 @@ import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
+import PaginationTable from "./PaginationTable";
 import {
   formatDuration,
   formatDurationRounded,
@@ -111,60 +111,11 @@ const SkeletonLayout = () => {
  */
 const DetailsPage = () => {
   const [monitor, setMonitor] = useState({});
-  const [data, setData] = useState({});
   const { monitorId } = useParams();
   const { authToken } = useSelector((state) => state.auth);
   const [filter, setFilter] = useState("day");
   const navigate = useNavigate();
 
-  const fetchDataForTable = useCallback(async () => {
-    try {
-      const res = await axiosInstance.get(
-        `/checks/${monitorId}?sortOrder=desc&filter=${filter}`,
-        {
-          headers: {
-            Authorization: `Bearer ${authToken}`,
-          },
-        }
-      );
-      const data = {
-        cols: [
-          { id: 1, name: "Status" },
-          { id: 2, name: "Date & Time" },
-          { id: 3, name: "Message" },
-        ],
-        rows: res.data.data.map((check, idx) => {
-          const status = check.status === true ? "up" : "down";
-
-          return {
-            id: check._id,
-            data: [
-              {
-                id: idx,
-                data: (
-                  <StatusLabel
-                    status={status}
-                    text={status}
-                    customStyles={{ textTransform: "capitalize" }}
-                  />
-                ),
-              },
-              {
-                id: idx + 1,
-                data: new Date(check.createdAt).toLocaleString(),
-              },
-              { id: idx + 2, data: check.statusCode },
-            ],
-          };
-        }),
-      };
-
-      setData(data);
-    } catch (error) {
-      console.log(error);
-    }
-  }, [authToken, monitorId, filter]);
-
   const fetchMonitor = useCallback(async () => {
     try {
       const res = await axiosInstance.get(
@@ -186,10 +137,6 @@ const DetailsPage = () => {
     fetchMonitor();
   }, [fetchMonitor]);
 
-  useEffect(() => {
-    fetchDataForTable();
-  }, [fetchDataForTable]);
-
   const theme = useTheme();
 
   /**
@@ -390,7 +337,9 @@ const DetailsPage = () => {
             </Box>
             <Stack gap={theme.gap.ml}>
               <Typography component="h2">History</Typography>
-              <BasicTable data={data} paginated={true} reversed={true} />
+              {/* TODO New Table */}
+              <PaginationTable monitorId={monitorId} filter={filter} />
+              {/* <BasicTable data={data} paginated={true} /> */}
             </Stack>
           </Stack>
         </>
diff --git a/Server/controllers/checkController.js b/Server/controllers/checkController.js
index 5d939cbad..20c2e0b8c 100644
--- a/Server/controllers/checkController.js
+++ b/Server/controllers/checkController.js
@@ -48,9 +48,12 @@ const getChecks = async (req, res, next) => {
 
   try {
     const checks = await req.db.getChecks(req);
-    return res
-      .status(200)
-      .json({ success: true, msg: successMessages.CHECK_GET, data: checks });
+    const checksCount = await req.db.getChecksCount(req);
+    return res.status(200).json({
+      success: true,
+      msg: successMessages.CHECK_GET,
+      data: { checksCount, checks },
+    });
   } catch (error) {
     error.service = SERVICE_NAME;
     next(error);
diff --git a/Server/db/mongo/MongoDB.js b/Server/db/mongo/MongoDB.js
index 68597a794..1dbc4e3b8 100644
--- a/Server/db/mongo/MongoDB.js
+++ b/Server/db/mongo/MongoDB.js
@@ -88,6 +88,7 @@ const {
 
 const {
   createCheck,
+  getChecksCount,
   getChecks,
   deleteChecks,
 } = require("./modules/checkModule");
@@ -145,6 +146,7 @@ module.exports = {
   deleteAllMonitors,
   editMonitor,
   createCheck,
+  getChecksCount,
   getChecks,
   deleteChecks,
   createAlert,
diff --git a/Server/db/mongo/modules/checkModule.js b/Server/db/mongo/modules/checkModule.js
index 3cf5de3e5..4d315dc9a 100644
--- a/Server/db/mongo/modules/checkModule.js
+++ b/Server/db/mongo/modules/checkModule.js
@@ -1,5 +1,9 @@
 const Check = require("../../../models/Check");
-
+const filterLookup = {
+  day: new Date(new Date().setDate(new Date().getDate() - 1)),
+  week: new Date(new Date().setDate(new Date().getDate() - 7)),
+  month: new Date(new Date().setMonth(new Date().getMonth() - 1)),
+};
 /**
  * Create a check for a monitor
  * @async
@@ -22,6 +26,19 @@ const createCheck = async (checkData) => {
   }
 };
 
+const getChecksCount = async (req) => {
+  const monitorId = req.params.monitorId;
+  const filter = req.query.filter;
+  // Build query
+  const checksQuery = { monitorId: monitorId };
+  // Filter checks by "day", "week", or "month"
+  if (filter !== undefined) {
+    checksQuery.createdAt = { $gte: filterLookup[filter] };
+  }
+  const count = await Check.countDocuments(checksQuery);
+  return count;
+};
+
 /**
  * Get all checks for a monitor
  * @async
@@ -31,15 +48,9 @@ const createCheck = async (checkData) => {
  */
 
 const getChecks = async (req) => {
-  const filterLookup = {
-    day: new Date(new Date().setDate(new Date().getDate() - 1)),
-    week: new Date(new Date().setDate(new Date().getDate() - 7)),
-    month: new Date(new Date().setMonth(new Date().getMonth() - 1)),
-  };
-
   try {
     const { monitorId } = req.params;
-    let { sortOrder, limit, filter } = req.query;
+    let { sortOrder, limit, filter, page, rowsPerPage } = req.query;
 
     // Default limit to 0 if not provided
     if (limit === undefined) limit = 0;
@@ -58,8 +69,14 @@ const getChecks = async (req) => {
       checksQuery.createdAt = { $gte: filterLookup[filter] };
     }
 
+    // Need to skip and limit here
+    let skip = 0;
+    if (page && rowsPerPage) {
+      skip = page * rowsPerPage;
+    }
     const checks = await Check.find(checksQuery)
-      .limit(limit)
+      .skip(skip)
+      .limit(rowsPerPage)
       .sort({ createdAt: sortOrder });
     return checks;
   } catch (error) {
@@ -83,4 +100,4 @@ const deleteChecks = async (monitorId) => {
     throw error;
   }
 };
-module.exports = { createCheck, getChecks, deleteChecks };
+module.exports = { createCheck, getChecksCount, getChecks, deleteChecks };
diff --git a/Server/validation/joi.js b/Server/validation/joi.js
index d6c198e4a..f938fabd9 100644
--- a/Server/validation/joi.js
+++ b/Server/validation/joi.js
@@ -236,6 +236,8 @@ const getChecksQueryValidation = joi.object({
   sortOrder: joi.string().valid("asc", "desc"),
   limit: joi.number(),
   filter: joi.string().valid("day", "week", "month"),
+  page: joi.number(),
+  rowsPerPage: joi.number(),
 });
 
 const deleteChecksParamValidation = joi.object({

From f5ac47691d19d6da5a5aba03835a6915f9f7ca49 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 8 Aug 2024 14:29:25 -0700
Subject: [PATCH 12/12] fixed bad merge

---
 Client/src/Pages/Monitors/Details/index.jsx | 72 ---------------------
 1 file changed, 72 deletions(-)

diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 4095fdf88..55dfd9335 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -133,82 +133,10 @@ const DetailsPage = () => {
     }
   }, [authToken, monitorId, navigate, filter]);
 
-  const fetchDataForChart = async () => {
-    try {
-      const limit = 0;
-
-      const res = await axiosInstance.get(
-        `/monitors/${monitorId}?sortOrder=asc&limit=${limit}`,
-        {
-          headers: {
-            Authorization: `Bearer ${authToken}`,
-          },
-        }
-      );
-      const data = {
-        cols: [
-          { id: 1, name: "Status" },
-          { id: 2, name: "Date & Time" },
-          { id: 3, name: "Message" },
-        ],
-        rows: res.data.data.checks.map((check, idx) => {
-          const status = check.status === true ? "up" : "down";
-
-          return {
-            id: check._id,
-            data: [
-              {
-                id: idx,
-                data: (
-                  <StatusLabel
-                    status={status}
-                    text={status}
-                    customStyles={{ textTransform: "capitalize" }}
-                  />
-                ),
-              },
-              {
-                id: idx + 1,
-                data: new Date(check.createdAt).toLocaleString(),
-              },
-              { id: idx + 2, data: check.statusCode },
-            ],
-          };
-        }),
-      };
-
-      setData(data);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  const fetchMonitor = async () => {
-    try {
-      const res = await axiosInstance.get(
-        `/monitors/${monitorId}?sortOrder=asc`,
-        {
-          headers: {
-            Authorization: `Bearer ${authToken}`,
-          },
-        }
-      );
-      setMonitor(res.data.data);
-    } catch (error) {
-      console.error("Error fetching monitor of id: " + monitorId);
-      navigate("/not-found");
-    }
-  };
-
   useEffect(() => {
     fetchMonitor();
   }, [fetchMonitor]);
 
-  useEffect(() => {
-    fetchDataForTable();
-  }, [fetchDataForTable]);
-
-
   const theme = useTheme();
 
   /**