Merge pull request #608 from bluewave-labs/feat/fe/refactor-pagespeed

Refactor pagespeed details to use stats endpoint

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

@@ -5,7 +5,6 @@ import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import axiosInstance from "../../../Utils/axiosConfig";
 import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
-import { StatusLabel } from "../../../Components/Label";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import Button from "../../../Components/Button";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
@@ -267,7 +266,7 @@ const DetailsPage = () => {
                 </ButtonGroup>
               </Stack>
               <Box sx={{ height: "200px" }}>
-                <MonitorDetailsAreaChart checks={monitor.checks} />
+                <MonitorDetailsAreaChart checks={monitor.checks.reverse()} />
               </Box>
             </Box>
             <Stack gap={theme.gap.ml}>

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

@@ -5,7 +5,11 @@ import { useEffect, useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
-import { formatDate, formatDurationRounded } from "../../../Utils/timeUtils";
+import {
+  formatDate,
+  formatDuration,
+  formatDurationRounded,
+} from "../../../Utils/timeUtils";
 import { getLastChecked } from "../../../Utils/monitorUtils";
 import axiosInstance from "../../../Utils/axiosConfig";
 import Button from "../../../Components/Button";
@@ -185,7 +189,7 @@ const PageSpeedDetails = () => {
     const fetchMonitor = async () => {
       try {
         const res = await axiosInstance.get(
-          `/monitors/${monitorId}?sortOrder=desc`,
+          `/monitors/stats/${monitorId}?sortOrder=desc&limit=50`,
           {
             headers: {
               Authorization: `Bearer ${authToken}`,
@@ -369,14 +373,13 @@ const PageSpeedDetails = () => {
               title="Last checked"
               value={
                 <>
-                  {formatDate(getLastChecked(monitor?.checks, false))}{" "}
+                  {formatDuration(monitor?.lastChecked)}{" "}
                   <Typography
                     component="span"
                     fontStyle="italic"
                     sx={{ opacity: 0.8 }}
                   >
-                    ({formatDurationRounded(getLastChecked(monitor?.checks))}{" "}
-                    ago)
+                    ago
                   </Typography>
                 </>
               }
@@ -386,17 +389,13 @@ const PageSpeedDetails = () => {
               title="Checks since"
               value={
                 <>
-                  {formatDate(new Date(monitor?.createdAt))}{" "}
+                  {formatDuration(monitor?.uptimeDuration)}{" "}
                   <Typography
                     component="span"
                     fontStyle="italic"
                     sx={{ opacity: 0.8 }}
                   >
-                    (
-                    {formatDurationRounded(
-                      new Date() - new Date(monitor?.createdAt)
-                    )}{" "}
-                    ago)
+                    ago
                   </Typography>
                 </>
               }
@@ -409,9 +408,7 @@ const PageSpeedDetails = () => {
           </Stack>
           <Typography component="h2">Score history</Typography>
           <Box height="300px">
-            <PageSpeedLineChart
-              pageSpeedChecks={monitor?.checks?.slice(0, 25)}
-            />
+            <PageSpeedLineChart pageSpeedChecks={monitor?.checks?.reverse()} />
           </Box>
           <Typography component="h2">Performance report</Typography>
           <Stack direction="row" alignItems="center" overflow="hidden">

Server/db/mongo/modules/monitorModule.js

@@ -140,6 +140,13 @@ const getStatusBarValues = (checks) => {
  * @throws {Error}
  */
 const getMonitorStatsById = async (req) => {
+  const filterLookup = {
+    hour: new Date(new Date().getTime() - 60 * 60 * 1000),
+    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 { status, limit, sortOrder, filter, numToDisplay, normalize } =
@@ -154,39 +161,45 @@ const getMonitorStatsById = async (req) => {
     // Get monitor
     const monitor = await Monitor.findById(monitorId);
 
-    // Get all checks to calculate stats
-    const checksQuery = { monitorId: monitor._id };
     let model =
       monitor.type === "http" || monitor.type === "ping"
         ? Check
         : PageSpeedCheck;
 
-    const filterLookup = {
-      hour: new Date(new Date().getTime() - 60 * 60 * 1000),
-      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)),
+    const monitorStats = {
+      ...monitor.toObject(),
     };
-
+    // Get all checks to calculate stats
+    const checksQuery = { monitorId: monitor._id };
     // Get all checks
     const checksAll = await model.find(checksQuery).sort({
       createdAt: sortOrder,
     });
-    // Get checks in 24 hours
-    checksQuery.createdAt = { $gte: filterLookup.day };
-    const checks24Hours = await model.find(checksQuery).sort({
-      createdAt: sortOrder,
-    });
-    // Get checks in 30 days
-    checksQuery.createdAt = { $gte: filterLookup.month };
-    const checks30Days = await model.find(checksQuery).sort({
-      createdAt: sortOrder,
-    });
-    // Get checks in 60 mins
-    checksQuery.createdAt = { $gte: filterLookup.hour };
-    const checks60Mins = await model
-      .find(checksQuery)
-      .sort({ createdAt: sortOrder });
+
+    if (monitor.type === "http" || monitor.type === "ping") {
+      // Get checks in 24 hours
+      checksQuery.createdAt = { $gte: filterLookup.day };
+      const checks24Hours = await model.find(checksQuery).sort({
+        createdAt: sortOrder,
+      });
+      // Get checks in 30 days
+      checksQuery.createdAt = { $gte: filterLookup.month };
+      const checks30Days = await model.find(checksQuery).sort({
+        createdAt: sortOrder,
+      });
+      // Get checks in 60 mins
+      checksQuery.createdAt = { $gte: filterLookup.hour };
+      const checks60Mins = await model
+        .find(checksQuery)
+        .sort({ createdAt: sortOrder });
+
+      // HTTP/PING Specific stats
+      monitorStats.avgResponseTime24hours =
+        getAverageResponseTime24Hours(checks24Hours);
+      monitorStats.uptime24Hours = getUptimePercentage(checks24Hours);
+      monitorStats.uptime30Days = getUptimePercentage(checks30Days);
+      monitorStats.statusBar = getStatusBarValues(checks60Mins);
+    }
 
     //Get checks for dateRange
 
@@ -205,7 +218,6 @@ const getMonitorStatsById = async (req) => {
         createdAt: sortOrder,
       })
       .limit(limit);
-    const incidents = getIncidents(dateRangeChecks);
 
     // If more than numToDisplay checks, pick every nth check
     if (
@@ -222,25 +234,13 @@ const getMonitorStatsById = async (req) => {
       dateRangeChecks = NormalizeData(dateRangeChecks, 1, 100);
     }
 
-    const uptimeDuration = caluclteUptimeDuration(checksAll);
-    const lastChecked = getLastChecked(checksAll);
-    const latestResponseTime = getLatestResponseTime(checksAll);
-    const avgResponseTime24hours = getAverageResponseTime24Hours(checks24Hours);
-    const uptime24Hours = getUptimePercentage(checks24Hours);
-    const uptime30Days = getUptimePercentage(checks30Days);
-    const statusBar = getStatusBarValues(checks60Mins);
-    const monitorStats = {
-      ...monitor.toObject(),
-      uptimeDuration,
-      lastChecked,
-      latestResponseTime,
-      avgResponseTime24hours,
-      uptime24Hours,
-      uptime30Days,
-      statusBar,
-      incidents,
-      dateRangeChecks,
-    };
+    // Add common stats
+    const incidents = getIncidents(dateRangeChecks);
+    monitorStats.uptimeDuration = caluclteUptimeDuration(checksAll);
+    monitorStats.lastChecked = getLastChecked(checksAll);
+    monitorStats.latestResponseTime = getLatestResponseTime(checksAll);
+    monitorStats.incidents = incidents;
+    monitorStats.checks = dateRangeChecks;
 
     return monitorStats;
   } catch (error) {