From 267ef14bb80d78966deab4d70c34611ad8f60cde Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 16 Sep 2024 12:53:59 -0400
Subject: [PATCH 1/5] Basic grid structure

---
 Client/src/Pages/Monitors/Home/index.jsx |  7 ++-
 Client/src/Pages/PageSpeed/card.jsx      | 77 ++++++++++--------------
 Client/src/Pages/PageSpeed/index.css     |  5 +-
 Client/src/Pages/PageSpeed/index.jsx     | 10 +--
 Server/db/mongo/modules/checkModule.js   | 14 -----
 5 files changed, 42 insertions(+), 71 deletions(-)

diff --git a/Client/src/Pages/Monitors/Home/index.jsx b/Client/src/Pages/Monitors/Home/index.jsx
index 31f4800a7..b66076387 100644
--- a/Client/src/Pages/Monitors/Home/index.jsx
+++ b/Client/src/Pages/Monitors/Home/index.jsx
@@ -96,7 +96,12 @@ const Monitors = ({ isAdmin }) => {
                   alignItems="center"
                   mb={theme.spacing(8)}
                 >
-                  <Typography component="h2" variant="h2" letterSpacing={-0.5}>
+                  <Typography
+                    component="h2"
+                    variant="h2"
+                    fontWeight={500}
+                    letterSpacing={-0.2}
+                  >
                     Actively monitoring
                   </Typography>
                   <Box
diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx
index 2ed4c7b91..eeb1c77a7 100644
--- a/Client/src/Pages/PageSpeed/card.jsx
+++ b/Client/src/Pages/PageSpeed/card.jsx
@@ -7,6 +7,7 @@ import { formatDate, formatDurationRounded } from "../../Utils/timeUtils";
 import { getLastChecked } from "../../Utils/monitorUtils";
 import useUtils from "../Monitors/utils";
 import PropTypes from "prop-types";
+import { IconBox } from "./Details/styled";
 
 const Card = ({ monitor }) => {
   const { determineState, pagespeedStatusMsg } = useUtils();
@@ -14,19 +15,8 @@ const Card = ({ monitor }) => {
   const navigate = useNavigate();
   const monitorState = determineState(monitor);
   return (
-    <Grid
-      item
-      lg={6}
-      flexGrow={1}
-      sx={{
-        "&:hover > .MuiStack-root": {
-          backgroundColor: theme.palette.background.accent,
-        },
-      }}
-    >
-      <Stack
-        direction="row"
-        gap={theme.spacing(6)}
+    <Grid item lg={6} flexGrow={1}>
+      <Box
         p={theme.spacing(8)}
         onClick={() => navigate(`/pagespeed/${monitor._id}`)}
         border={1}
@@ -34,41 +24,40 @@ const Card = ({ monitor }) => {
         borderRadius={theme.shape.borderRadius}
         backgroundColor={theme.palette.background.main}
         sx={{
+          display: "grid",
+          gridTemplateColumns: "34px 2fr 1fr",
+          columnGap: theme.spacing(5),
+          gridTemplateRows: "34px 1fr 3fr",
           cursor: "pointer",
-          "& svg path": { stroke: theme.palette.other.icon, strokeWidth: 0.8 },
+          "&:hover": {
+            backgroundColor: theme.palette.background.accent,
+          },
         }}
       >
-        <PageSpeedIcon
-          style={{ width: theme.spacing(8), height: theme.spacing(8) }}
+        <IconBox>
+          <PageSpeedIcon />
+        </IconBox>
+        <Typography component="h2" variant="h2" alignSelf="center">
+          {monitor.name}
+        </Typography>
+        <StatusLabel
+          status={monitorState}
+          text={pagespeedStatusMsg[monitorState] || "Pending..."}
+          customStyles={{
+            width: "max-content",
+            textTransform: "capitalize",
+            alignSelf: "flex-start",
+            justifySelf: "flex-end",
+          }}
         />
-        <Box flex={1}>
-          <Stack direction="row" justifyContent="space-between">
-            <Typography
-              component="h2"
-              mb={theme.spacing(2)}
-              fontSize={16}
-              color={theme.palette.primary.main}
-            >
-              {monitor.name}
-            </Typography>
-            <StatusLabel
-              status={monitorState}
-              text={pagespeedStatusMsg[monitorState] || "Pending..."}
-              customStyles={{ textTransform: "capitalize" }}
-            />
-          </Stack>
-          <Typography>{monitor.url.replace(/^https?:\/\//, "")}</Typography>
-          <Typography mt={theme.spacing(12)}>
-            <Typography component="span" variant="body2" fontWeight={600}>
-              Last checked:{" "}
-            </Typography>
-            {formatDate(getLastChecked(monitor.checks, false))}{" "}
-            <Typography component="span" variant="body2" fontStyle="italic">
-              ({formatDurationRounded(getLastChecked(monitor.checks))} ago)
-            </Typography>
-          </Typography>
-        </Box>
-      </Stack>
+        <Typography
+          variant="body2"
+          mt={theme.spacing(-1)}
+          sx={{ gridColumnStart: 2 }}
+        >
+          {monitor.url}
+        </Typography>
+      </Box>
     </Grid>
   );
 };
diff --git a/Client/src/Pages/PageSpeed/index.css b/Client/src/Pages/PageSpeed/index.css
index bbf75c96c..c39a20fe0 100644
--- a/Client/src/Pages/PageSpeed/index.css
+++ b/Client/src/Pages/PageSpeed/index.css
@@ -1,9 +1,6 @@
-.page-speed h2.MuiTypography-root {
-  line-height: 1.1;
-}
 .page-speed .label {
   padding: 7px;
-  height: 22px;
+  height: 24px;
   font-size: var(--env-var-font-size-small);
 }
 .page-speed:not(:has([class*="fallback__"])) button {
diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index 6dd03c0b7..68da033e4 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -56,7 +56,7 @@ const PageSpeed = ({ isAdmin }) => {
   // 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;
-  console.log(monitors);
+
   return (
     <Box
       className="page-speed"
@@ -75,13 +75,7 @@ const PageSpeed = ({ isAdmin }) => {
       {isActuallyLoading ? (
         <SkeletonLayout />
       ) : monitors?.length !== 0 ? (
-        <Box
-          sx={{
-            "& p": {
-              color: theme.palette.text.secondary,
-            },
-          }}
-        >
+        <Box>
           <Box mb={theme.spacing(12)}>
             <Breadcrumbs list={[{ name: `pagespeed`, path: "/pagespeed" }]} />
             <Stack
diff --git a/Server/db/mongo/modules/checkModule.js b/Server/db/mongo/modules/checkModule.js
index c0f4b2d2e..845a431ee 100644
--- a/Server/db/mongo/modules/checkModule.js
+++ b/Server/db/mongo/modules/checkModule.js
@@ -259,20 +259,6 @@ const updateChecksTTL = async (teamId, ttl) => {
   }
 };
 
-const updateChecksTTL = async (teamId, ttl) => {
-  try {
-    await Check.collection.dropIndex("expiry_1");
-    await Check.collection.createIndex(
-      { expiry: 1 },
-      { expireAfterSeconds: ttl } // TTL in seconds, adjust as necessary
-    );
-  } catch (error) {
-    error.service = SERVICE_NAME;
-    error.method = "updateChecksTTL";
-    throw error;
-  }
-};
-
 module.exports = {
   createCheck,
   getChecksCount,

From 78680d036c3847112e3740eaafba9f3689b1a0f4 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 16 Sep 2024 15:01:29 -0400
Subject: [PATCH 2/5] Added area chart

---
 Client/src/Pages/Monitors/utils.jsx  |  23 ++++++
 Client/src/Pages/PageSpeed/card.jsx  | 100 +++++++++++++++++++++++++--
 Client/src/Pages/PageSpeed/index.jsx |   2 +-
 3 files changed, 120 insertions(+), 5 deletions(-)

diff --git a/Client/src/Pages/Monitors/utils.jsx b/Client/src/Pages/Monitors/utils.jsx
index c6f0a8476..cc079fedc 100644
--- a/Client/src/Pages/Monitors/utils.jsx
+++ b/Client/src/Pages/Monitors/utils.jsx
@@ -52,12 +52,35 @@ const useUtils = () => {
       "& h2": { color: theme.palette.warning.main },
     },
   };
+  const pagespeedStyles = {
+    up: {
+      bg: theme.palette.success.bg,
+      light: theme.palette.success.light,
+      stroke: theme.palette.success.main,
+    },
+    down: {
+      bg: theme.palette.error.bg,
+      light: theme.palette.error.light,
+      stroke: theme.palette.error.main,
+    },
+    paused: {
+      bg: theme.palette.warning.bg,
+      light: theme.palette.warning.light,
+      stroke: theme.palette.warning.main,
+    },
+    pending: {
+      bg: theme.palette.warning.bg,
+      light: theme.palette.warning.light,
+      stroke: theme.palette.warning.main,
+    },
+  };
 
   return {
     determineState,
     statusColor,
     statusMsg,
     pagespeedStatusMsg,
+    pagespeedStyles,
     statusStyles,
   };
 };
diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx
index eeb1c77a7..00b717ce4 100644
--- a/Client/src/Pages/PageSpeed/card.jsx
+++ b/Client/src/Pages/PageSpeed/card.jsx
@@ -1,19 +1,103 @@
 import PageSpeedIcon from "../../assets/icons/page-speed.svg?react";
 import { StatusLabel } from "../../Components/Label";
-import { Box, Grid, Stack, Typography } from "@mui/material";
+import { Box, Grid, Typography } from "@mui/material";
 import { useNavigate } from "react-router";
 import { useTheme } from "@emotion/react";
-import { formatDate, formatDurationRounded } from "../../Utils/timeUtils";
-import { getLastChecked } from "../../Utils/monitorUtils";
+import { IconBox } from "./Details/styled";
 import useUtils from "../Monitors/utils";
 import PropTypes from "prop-types";
-import { IconBox } from "./Details/styled";
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
+
+const processData = (data) => {
+  if (data.length === 0) return [];
+  let formattedData = [];
+
+  const calculateScore = (entry) => {
+    return (
+      (entry.accessibility +
+        entry.bestPractices +
+        entry.performance +
+        entry.seo) /
+      4
+    );
+  };
+
+  data.forEach((entry) => {
+    entry = { ...entry, score: calculateScore(entry) };
+    formattedData.push(entry);
+  });
+
+  return formattedData;
+};
+
+const PagespeedAreaChart = ({ data, status }) => {
+  const theme = useTheme();
+  const { pagespeedStyles } = useUtils();
+
+  const formattedData = processData(data);
+
+  return (
+    <ResponsiveContainer width="100%" minWidth={25} height={100}>
+      <AreaChart
+        width="100%"
+        height="100%"
+        data={formattedData}
+        margin={{ top: 10, bottom: -5 }}
+        style={{ cursor: "pointer" }}
+      >
+        <CartesianGrid
+          stroke={theme.palette.border.light}
+          strokeWidth={1}
+          strokeOpacity={1}
+          fill="transparent"
+          vertical={false}
+        />
+        {/* <Tooltip
+          cursor={{ stroke: theme.palette.border.light }}
+          content={<CustomToolTip config={filteredConfig} />}
+        /> */}
+        <defs>
+          <linearGradient
+            id={`pagespeed-chart-${status}`}
+            x1="0"
+            y1="0"
+            x2="0"
+            y2="1"
+          >
+            <stop
+              offset="0%"
+              stopColor={pagespeedStyles[status].stroke}
+              stopOpacity={0.8}
+            />
+            <stop
+              offset="100%"
+              stopColor={pagespeedStyles[status].light}
+              stopOpacity={0}
+            />
+          </linearGradient>
+        </defs>
+        <Area
+          dataKey="score"
+          stroke={pagespeedStyles[status].stroke}
+          strokeWidth={1.5}
+          fill={`url(#pagespeed-chart-${status})`}
+          activeDot={{
+            stroke: pagespeedStyles[status].stroke,
+            fill: pagespeedStyles[status].stroke,
+            r: 4.5,
+          }}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+};
 
 const Card = ({ monitor }) => {
   const { determineState, pagespeedStatusMsg } = useUtils();
   const theme = useTheme();
   const navigate = useNavigate();
   const monitorState = determineState(monitor);
+
   return (
     <Grid item lg={6} flexGrow={1}>
       <Box
@@ -57,6 +141,14 @@ const Card = ({ monitor }) => {
         >
           {monitor.url}
         </Typography>
+        <Box
+          mx={theme.spacing(-8)}
+          mt={theme.spacing(4)}
+          mb={theme.spacing(-8)}
+          sx={{ gridColumnStart: 1, gridColumnEnd: 4 }}
+        >
+          <PagespeedAreaChart data={monitor.checks} status={monitorState} />
+        </Box>
       </Box>
     </Grid>
   );
diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index 68da033e4..a76e4cca1 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -56,7 +56,6 @@ const PageSpeed = ({ isAdmin }) => {
   // 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"
@@ -89,6 +88,7 @@ const PageSpeed = ({ isAdmin }) => {
                 variant="contained"
                 color="primary"
                 onClick={() => navigate("/pagespeed/create")}
+                sx={{ whiteSpace: "nowrap" }}
               >
                 Create new
               </Button>

From 205e82f1b33db89cb51da7854270c6968a33e2be Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 16 Sep 2024 15:03:36 -0400
Subject: [PATCH 3/5] Added docs

---
 Client/src/Pages/PageSpeed/card.jsx | 34 +++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx
index 00b717ce4..6b87703f5 100644
--- a/Client/src/Pages/PageSpeed/card.jsx
+++ b/Client/src/Pages/PageSpeed/card.jsx
@@ -1,13 +1,18 @@
+import PropTypes from "prop-types";
 import PageSpeedIcon from "../../assets/icons/page-speed.svg?react";
 import { StatusLabel } from "../../Components/Label";
 import { Box, Grid, Typography } from "@mui/material";
 import { useNavigate } from "react-router";
 import { useTheme } from "@emotion/react";
 import { IconBox } from "./Details/styled";
-import useUtils from "../Monitors/utils";
-import PropTypes from "prop-types";
 import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
+import useUtils from "../Monitors/utils";
 
+/**
+ * Processes the raw data to include a score for each entry.
+ * @param {Array<Object>} data - The raw data array.
+ * @returns {Array<Object>} - The formatted data array with scores.
+ */
 const processData = (data) => {
   if (data.length === 0) return [];
   let formattedData = [];
@@ -30,6 +35,13 @@ const processData = (data) => {
   return formattedData;
 };
 
+/**
+ * Renders an area chart displaying page speed scores.
+ * @param {Object} props
+ * @param {Array<Object>} props.data - The raw data to be displayed in the chart.
+ * @param {string} props.status - The status of the page speed which determines the chart's color scheme.
+ * @returns {JSX.Element} - The rendered area chart.
+ */
 const PagespeedAreaChart = ({ data, status }) => {
   const theme = useTheme();
   const { pagespeedStyles } = useUtils();
@@ -92,6 +104,24 @@ const PagespeedAreaChart = ({ data, status }) => {
   );
 };
 
+PagespeedAreaChart.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      accessibility: PropTypes.number.isRequired,
+      bestPractices: PropTypes.number.isRequired,
+      performance: PropTypes.number.isRequired,
+      seo: PropTypes.number.isRequired,
+    })
+  ).isRequired,
+  status: PropTypes.string.isRequired,
+};
+
+/**
+ * Renders a card displaying monitor details and an area chart.
+ * @param {Object} props 
+ * @param {Object} props.monitor - The monitor data to be displayed in the card.
+ * @returns {JSX.Element} - The rendered card.
+ */
 const Card = ({ monitor }) => {
   const { determineState, pagespeedStatusMsg } = useUtils();
   const theme = useTheme();

From 78914c9566da660733ed0744221db45019bfea67 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 16 Sep 2024 15:18:41 -0400
Subject: [PATCH 4/5] Added tooltip

---
 Client/src/Pages/PageSpeed/card.jsx | 93 ++++++++++++++++++++++++++---
 1 file changed, 86 insertions(+), 7 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx
index 6b87703f5..e45cc3b45 100644
--- a/Client/src/Pages/PageSpeed/card.jsx
+++ b/Client/src/Pages/PageSpeed/card.jsx
@@ -1,13 +1,92 @@
 import PropTypes from "prop-types";
 import PageSpeedIcon from "../../assets/icons/page-speed.svg?react";
 import { StatusLabel } from "../../Components/Label";
-import { Box, Grid, Typography } from "@mui/material";
+import { Box, Grid, Stack, Typography } from "@mui/material";
 import { useNavigate } from "react-router";
 import { useTheme } from "@emotion/react";
 import { IconBox } from "./Details/styled";
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+} from "recharts";
+import { useSelector } from "react-redux";
+import { formatDateWithTz } from "../../Utils/timeUtils";
 import useUtils from "../Monitors/utils";
 
+/**
+ * CustomToolTip displays a tooltip with formatted date and score information.
+ * @param {Object} props
+ * @param {Array} props.payload - Data to display in the tooltip
+ * @returns {JSX.Element} The rendered tooltip component
+ */
+const CustomToolTip = ({ payload }) => {
+  const theme = useTheme();
+  const uiTimezone = useSelector((state) => state.ui.timezone);
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: theme.palette.background.main,
+        border: 1,
+        borderColor: theme.palette.border.dark,
+        borderRadius: theme.shape.borderRadius,
+        py: theme.spacing(2),
+        px: theme.spacing(4),
+      }}
+    >
+      <Typography
+        sx={{
+          color: theme.palette.text.tertiary,
+          fontSize: 12,
+          fontWeight: 500,
+        }}
+      >
+        {formatDateWithTz(
+          payload[0]?.payload.createdAt,
+          "ddd, MMMM D, YYYY, h:mm A",
+          uiTimezone
+        )}
+      </Typography>
+
+      <Stack
+        direction="row"
+        alignItems="center"
+        gap={theme.spacing(3)}
+        mt={theme.spacing(1)}
+        sx={{
+          "& span": {
+            color: theme.palette.text.tertiary,
+            fontSize: 11,
+            fontWeight: 500,
+          },
+        }}
+      >
+        <Box
+          width={theme.spacing(4)}
+          height={theme.spacing(4)}
+          backgroundColor={payload[0]?.color}
+          sx={{ borderRadius: "50%" }}
+        />
+        <Typography
+          component="span"
+          textTransform="capitalize"
+          sx={{ opacity: 0.8 }}
+        >
+          {payload[0]?.name}
+        </Typography>{" "}
+        <Typography component="span">{payload[0]?.payload.score}</Typography>
+      </Stack>
+    </Box>
+  );
+};
+
+CustomToolTip.propTypes = {
+  payload: PropTypes.array,
+};
+
 /**
  * Processes the raw data to include a score for each entry.
  * @param {Array<Object>} data - The raw data array.
@@ -64,10 +143,10 @@ const PagespeedAreaChart = ({ data, status }) => {
           fill="transparent"
           vertical={false}
         />
-        {/* <Tooltip
+        <Tooltip
           cursor={{ stroke: theme.palette.border.light }}
-          content={<CustomToolTip config={filteredConfig} />}
-        /> */}
+          content={<CustomToolTip />}
+        />
         <defs>
           <linearGradient
             id={`pagespeed-chart-${status}`}
@@ -94,7 +173,7 @@ const PagespeedAreaChart = ({ data, status }) => {
           strokeWidth={1.5}
           fill={`url(#pagespeed-chart-${status})`}
           activeDot={{
-            stroke: pagespeedStyles[status].stroke,
+            stroke: pagespeedStyles[status].light,
             fill: pagespeedStyles[status].stroke,
             r: 4.5,
           }}
@@ -118,7 +197,7 @@ PagespeedAreaChart.propTypes = {
 
 /**
  * Renders a card displaying monitor details and an area chart.
- * @param {Object} props 
+ * @param {Object} props
  * @param {Object} props.monitor - The monitor data to be displayed in the card.
  * @returns {JSX.Element} - The rendered card.
  */

From 5bab1514fcc5431f2bd1bd7bf10e50959849ae78 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 16 Sep 2024 17:06:45 -0400
Subject: [PATCH 5/5] Added monitor interval check

---
 Client/src/Pages/PageSpeed/card.jsx | 53 ++++++++++++++++++++++++++---
 1 file changed, 49 insertions(+), 4 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx
index e45cc3b45..5c688a041 100644
--- a/Client/src/Pages/PageSpeed/card.jsx
+++ b/Client/src/Pages/PageSpeed/card.jsx
@@ -13,7 +13,11 @@ import {
   Tooltip,
 } from "recharts";
 import { useSelector } from "react-redux";
-import { formatDateWithTz } from "../../Utils/timeUtils";
+import {
+  formatDateWithTz,
+  formatDurationRounded,
+  formatDurationSplit,
+} from "../../Utils/timeUtils";
 import useUtils from "../Monitors/utils";
 
 /**
@@ -128,7 +132,7 @@ const PagespeedAreaChart = ({ data, status }) => {
   const formattedData = processData(data);
 
   return (
-    <ResponsiveContainer width="100%" minWidth={25} height={100}>
+    <ResponsiveContainer width="100%" minWidth={25} height={85}>
       <AreaChart
         width="100%"
         height="100%"
@@ -210,6 +214,7 @@ const Card = ({ monitor }) => {
   return (
     <Grid item lg={6} flexGrow={1}>
       <Box
+        position="relative"
         p={theme.spacing(8)}
         onClick={() => navigate(`/pagespeed/${monitor._id}`)}
         border={1}
@@ -230,7 +235,12 @@ const Card = ({ monitor }) => {
         <IconBox>
           <PageSpeedIcon />
         </IconBox>
-        <Typography component="h2" variant="h2" alignSelf="center">
+        <Typography
+          component="h2"
+          variant="h2"
+          fontWeight={500}
+          alignSelf="center"
+        >
           {monitor.name}
         </Typography>
         <StatusLabel
@@ -245,7 +255,7 @@ const Card = ({ monitor }) => {
         />
         <Typography
           variant="body2"
-          mt={theme.spacing(-1)}
+          mt={theme.spacing(-2)}
           sx={{ gridColumnStart: 2 }}
         >
           {monitor.url}
@@ -258,6 +268,41 @@ const Card = ({ monitor }) => {
         >
           <PagespeedAreaChart data={monitor.checks} status={monitorState} />
         </Box>
+        <Box
+          position="absolute"
+          bottom={0}
+          py={theme.spacing(1)}
+          px={theme.spacing(4)}
+          borderTop={1}
+          borderRight={1}
+          borderColor={theme.palette.border.light}
+          backgroundColor={theme.palette.background.accent}
+          sx={{
+            pointerEvents: "none",
+            userSelect: "none",
+            borderTopRightRadius: 8,
+            borderBottomLeftRadius: 4,
+          }}
+        >
+          <Typography fontSize={11} color={theme.palette.text.accent}>
+            Checking every{" "}
+            {(() => {
+              const { time, format } = formatDurationSplit(monitor?.interval);
+              return (
+                <>
+                  <Typography
+                    component="span"
+                    fontSize={12}
+                    color={theme.palette.text.primary}
+                  >
+                    {time}{" "}
+                  </Typography>
+                  {format}
+                </>
+              );
+            })()}
+          </Typography>
+        </Box>
       </Box>
     </Grid>
   );