diff --git a/Client/src/Pages/PageSpeed/Details/index.css b/Client/src/Pages/PageSpeed/Details/index.css
index 7f322d505..2f263696c 100644
--- a/Client/src/Pages/PageSpeed/Details/index.css
+++ b/Client/src/Pages/PageSpeed/Details/index.css
@@ -9,7 +9,8 @@
.page-speed-details p {
font-size: var(--env-var-font-size-medium);
}
-.page-speed-details svg + .MuiBox-root > p {
+.page-speed-details svg + .MuiBox-root > p,
+.page-speed-details h4 > span {
font-size: var(--env-var-font-size-small-plus);
}
.page-speed-details h2,
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index f0183fe28..cb3535aaa 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -3,6 +3,7 @@ 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 axiosInstance from "../../../Utils/axiosConfig";
import Button from "../../../Components/Button";
import WestRoundedIcon from "@mui/icons-material/WestRounded";
@@ -37,6 +38,24 @@ const StatBox = ({ icon, title, value }) => {
);
};
+/**
+ * Helper function to get duration since last check or the last date checked
+ * @param {Array} checks Array of check objects.
+ * @param {boolean} duration Whether the function should return the duration since last checked or the date itself
+ * @returns {number} Timestamp of the most recent check.
+ */
+const getLastChecked = (checks, duration = true) => {
+ if (!checks || checks.length === 0) {
+ return 0; // Handle case when no checks are available
+ }
+
+ // Data is sorted newest -> oldest, so newest check is the most recent
+ if (!duration) {
+ return new Date(checks[0].createdAt);
+ }
+ return new Date() - new Date(checks[0].createdAt);
+};
+
const PageSpeedDetails = () => {
const theme = useTheme();
const navigate = useNavigate();
@@ -47,7 +66,7 @@ const PageSpeedDetails = () => {
useEffect(() => {
const fetchMonitor = async () => {
const res = await axiosInstance.get(
- `/monitors/${monitorId}?sortOrder=asc`,
+ `/monitors/${monitorId}?sortOrder=desc`,
{
headers: {
Authorization: `Bearer ${authToken}`,
@@ -194,17 +213,43 @@ const PageSpeedDetails = () => {
}
title="Last checked"
- value="27 July, 7:24 AM (3 minutes ago)"
+ value={
+ <>
+ {formatDate(getLastChecked(monitor?.checks, false))}{" "}
+
+ ({formatDurationRounded(getLastChecked(monitor?.checks))} ago)
+
+ >
+ }
/>
}
title="Checks since"
- value="27 July, 7:24 AM (3 minutes ago)"
+ value={
+ <>
+ {formatDate(new Date(monitor?.createdAt))}{" "}
+
+ (
+ {formatDurationRounded(
+ new Date() - new Date(monitor?.createdAt)
+ )}{" "}
+ ago)
+
+ >
+ }
>
}
title="Checks every"
- value="3 minutes"
+ value={formatDurationRounded(monitor?.interval)}
>
Score history
diff --git a/Client/src/Utils/timeUtils.js b/Client/src/Utils/timeUtils.js
index 37a821605..f7742dbaf 100644
--- a/Client/src/Utils/timeUtils.js
+++ b/Client/src/Utils/timeUtils.js
@@ -50,7 +50,6 @@ export const formatDate = (date) => {
day: "numeric",
hour: "numeric",
minute: "numeric",
- second: "numeric",
hour12: true,
};