From 9ae8c93cb0f8abc3feb3580f55c4117e9eb84d2d Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 2 Sep 2024 20:05:02 -0400
Subject: [PATCH] Added format function that returns a split duration

---
 Client/src/Pages/Monitors/Details/index.jsx  | 36 ++++++++++++++------
 Client/src/Pages/Monitors/Details/styled.jsx |  8 ++---
 Client/src/Utils/timeUtils.js                | 19 ++++++++++-
 3 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 4c8eced23..c6413e9fb 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -18,6 +18,7 @@ import {
   formatDate,
   formatDuration,
   formatDurationRounded,
+  formatDurationSplit,
 } from "../../../Utils/timeUtils";
 import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
 import ButtonGroup from "@mui/material/ButtonGroup";
@@ -31,8 +32,8 @@ import HistoryIcon from "../../../assets/icons/history-icon.svg?react";
 import PaginationTable from "./PaginationTable";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
+import { StatBox, ChartBox, IconBox } from "./styled";
 import "./index.css";
-import { AlertBox, ChartBox, IconBox } from "./styled";
 
 /**
  * Renders a skeleton layout.
@@ -174,6 +175,16 @@ const DetailsPage = ({ isAdmin }) => {
     fetchCertificate();
   }, [authToken, monitorId, monitor]);
 
+  const splitDuration = (duration) => {
+    const { time, format } = formatDurationSplit(duration);
+    return (
+      <>
+        {time}
+        <Typography component="span">{format}</Typography>
+      </>
+    );
+  };
+
   let loading = Object.keys(monitor).length === 0;
   return (
     <Box className="monitor-details">
@@ -187,7 +198,7 @@ const DetailsPage = ({ isAdmin }) => {
               { name: "details", path: `/monitors/${monitorId}` },
             ]}
           />
-          <Stack gap={theme.spacing(12)} mt={theme.spacing(10)}>
+          <Stack gap={theme.spacing(10)} mt={theme.spacing(10)}>
             <Stack direction="row" gap={theme.spacing(2)}>
               <Box>
                 <Typography
@@ -281,6 +292,9 @@ const DetailsPage = ({ isAdmin }) => {
                   anchorEl={anchorEl}
                   open={Boolean(anchorEl)}
                   onClose={closeCertificate}
+                  disableScrollLock
+                  marginThreshold={null}
+                  anchorReference={anchorEl}
                   anchorOrigin={{
                     vertical: "bottom",
                     horizontal: "center",
@@ -332,27 +346,27 @@ const DetailsPage = ({ isAdmin }) => {
                 )}
               </Stack>
             </Stack>
-            <Stack direction="row" gap={theme.spacing(8)}>
-              <AlertBox>
+            <Stack direction="row" gap={theme.spacing(8)} maxWidth={712}>
+              <StatBox>
                 <Typography component="h2">up for</Typography>
                 <Typography>
-                  {formatDurationRounded(monitor?.uptimeDuration)}
+                  {splitDuration(monitor?.uptimeDuration)}
                 </Typography>
-              </AlertBox>
-              <AlertBox>
+              </StatBox>
+              <StatBox>
                 <Typography component="h2">last check</Typography>
                 <Typography>
-                  {formatDurationRounded(monitor?.lastChecked)}
+                  {splitDuration(monitor?.lastChecked)}
                   <Typography component="span">ago</Typography>
                 </Typography>
-              </AlertBox>
-              <AlertBox>
+              </StatBox>
+              <StatBox>
                 <Typography component="h2">last response time</Typography>
                 <Typography>
                   {monitor?.latestResponseTime}
                   <Typography component="span">ms</Typography>
                 </Typography>
-              </AlertBox>
+              </StatBox>
             </Stack>
             <Box>
               <Stack
diff --git a/Client/src/Pages/Monitors/Details/styled.jsx b/Client/src/Pages/Monitors/Details/styled.jsx
index 479c82d0e..1862c1c4e 100644
--- a/Client/src/Pages/Monitors/Details/styled.jsx
+++ b/Client/src/Pages/Monitors/Details/styled.jsx
@@ -61,10 +61,10 @@ export const IconBox = styled(Box)(({ theme }) => ({
   },
 }));
 
-export const AlertBox = styled(Box)(({ theme }) => ({
+export const StatBox = styled(Box)(({ theme }) => ({
   padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
   minWidth: 200,
-  width: 225,
+  flex: 1,
   border: 1,
   borderStyle: "solid",
   borderColor: theme.palette.border.light,
@@ -81,8 +81,8 @@ export const AlertBox = styled(Box)(({ theme }) => ({
     color: theme.palette.text.primary,
     marginTop: theme.spacing(2),
     "& span": {
-      opacity: 0.8,
-      marginLeft: theme.spacing(3),
+      color: theme.palette.text.tertiary,
+      marginLeft: theme.spacing(2),
       fontSize: 15,
     },
   },
diff --git a/Client/src/Utils/timeUtils.js b/Client/src/Utils/timeUtils.js
index 2d1a2f180..fa4a27d95 100644
--- a/Client/src/Utils/timeUtils.js
+++ b/Client/src/Utils/timeUtils.js
@@ -43,6 +43,23 @@ export const formatDurationRounded = (ms) => {
   return time;
 };
 
+export const formatDurationSplit = (ms) => {
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  return days > 0
+    ? { time: days, format: days === 1 ? "day" : "days" }
+    : hours > 0
+    ? { time: hours, format: hours === 1 ? "hour" : "hours" }
+    : minutes > 0
+    ? { time: minutes, format: minutes === 1 ? "minute" : "minutes" }
+    : seconds > 0
+    ? { time: seconds, format: seconds === 1 ? "second" : "seconds" }
+    : { time: 0, format: "seconds" };
+};
+
 export const formatDate = (date, customOptions) => {
   const options = {
     year: "numeric",
@@ -51,7 +68,7 @@ export const formatDate = (date, customOptions) => {
     hour: "numeric",
     minute: "numeric",
     hour12: true,
-    ...customOptions
+    ...customOptions,
   };
 
   // Return the date using the specified options