From c468beac76add57dacaa3c44e5b661ac1b2e505d Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 18 Jul 2024 19:50:08 -0400 Subject: [PATCH 1/2] Initial design --- Client/src/Components/BasicTable/index.css | 3 + .../Charts/MonitorDetailsAreaChart/index.css | 19 +++ .../Charts/MonitorDetailsAreaChart/index.jsx | 6 +- Client/src/Pages/Monitors/Details/index.css | 51 +++++++ Client/src/Pages/Monitors/Details/index.jsx | 141 ++++++++++++------ Client/src/assets/icons/checkbox-green.svg | 5 + Client/src/assets/icons/checkbox-red.svg | 5 + Client/src/assets/icons/settings.svg | 4 + Client/src/index.css | 1 + 9 files changed, 189 insertions(+), 46 deletions(-) create mode 100644 Client/src/assets/icons/checkbox-green.svg create mode 100644 Client/src/assets/icons/checkbox-red.svg create mode 100644 Client/src/assets/icons/settings.svg diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css index 637e5e6dd..221c66494 100644 --- a/Client/src/Components/BasicTable/index.css +++ b/Client/src/Components/BasicTable/index.css @@ -124,3 +124,6 @@ .MuiPaper-root + .MuiPagination-root .MuiPaginationItem-root.Mui-selected { background-color: var(--env-var-color-15); } +.MuiPaper-root + .MuiPagination-root div.MuiPaginationItem-root{ + user-select: none; +} diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css index e69de29bb..f85a0bb04 100644 --- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css +++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css @@ -0,0 +1,19 @@ +.area-tooltip { + background-color: white; + border: solid 1px var(--env-var-color-4); + border-radius: var(--env-var-radius-1); + padding: var(--env-var-spacing-1) var(--env-var-spacing-2); +} +.area-tooltip p { + margin: 0; + padding: 0; +} +.area-tooltip p:first-of-type { + color: var(--env-var-color-3); + font-size: var(--env-var-font-size-medium); +} +.area-tooltip p:last-of-type { + margin-top: 5px; + color: var(--env-var-color-5); + font-size: var(--env-var-font-size-small); +} diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx index 1d1ea3758..02729a709 100644 --- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx +++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx @@ -1,11 +1,12 @@ 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 }) => { if (active && payload && payload.length) { return ( -
+

{new Date(label).toLocaleDateString("en-US", { weekday: "short", // Mon @@ -80,7 +81,7 @@ const MonitorDetailsAreaChart = ({ checks, filter }) => { data={normalizedChecks} margin={{ top: 10, - right: 30, + right: 0, left: 0, bottom: 0, }} @@ -89,6 +90,7 @@ const MonitorDetailsAreaChart = ({ checks, filter }) => { dataKey="createdAt" tickFormatter={formatDate} tick={{ fontSize: "13px" }} + tickLine={false} /> } /> { const seconds = Math.floor(ms / 1000); @@ -30,7 +35,7 @@ const formatDuration = (ms) => { const StatBox = ({ title, value }) => { return ( - + {title} {value} @@ -103,6 +108,7 @@ const DetailsPage = () => { }, [monitorId, authToken]); const theme = useTheme(); + const navigate = useNavigate(); /** * Function to calculate uptime duration based on the most recent check. @@ -163,52 +169,99 @@ const DetailsPage = () => { padding: `${theme.content.pY} ${theme.content.pX}`, }} > -

- - - -
-
} + onClick={() => navigate("/monitors")} + sx={{ + backgroundColor: "#f4f4f4", + mb: theme.gap.medium, + px: theme.gap.ml, + "& svg.MuiSvgIcon-root": { + pr: theme.gap.small, + }, }} - > - - Response Times - - + /> + + + + + + {monitor.url?.replace(/^https?:\/\//, "") || "..."} + + + Your site is up.{" "} + Checking every 5 minutes. Last time checked 2 minutes ago. + +
-
- -
- - History - - + + + + + + Response Times + + +
); }; diff --git a/Client/src/assets/icons/checkbox-green.svg b/Client/src/assets/icons/checkbox-green.svg new file mode 100644 index 000000000..dd5676298 --- /dev/null +++ b/Client/src/assets/icons/checkbox-green.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/Client/src/assets/icons/checkbox-red.svg b/Client/src/assets/icons/checkbox-red.svg new file mode 100644 index 000000000..3c43a2042 --- /dev/null +++ b/Client/src/assets/icons/checkbox-red.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/Client/src/assets/icons/settings.svg b/Client/src/assets/icons/settings.svg new file mode 100644 index 000000000..d8057286c --- /dev/null +++ b/Client/src/assets/icons/settings.svg @@ -0,0 +1,4 @@ + + + + diff --git a/Client/src/index.css b/Client/src/index.css index 61c961dad..337e490f5 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -56,6 +56,7 @@ --env-var-width-2: 360px; --env-var-height-1: 100vh; + --env-var-height-2: 34px; --env-var-spacing-1: 12px; --env-var-spacing-1-plus: 16px; From e0539a6ae32ab4edc49148e4837d5f2cd94a9a3a Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 18 Jul 2024 20:05:28 -0400 Subject: [PATCH 2/2] Changed style to reflect data from monitor --- Client/src/Pages/Monitors/Details/index.css | 4 +- Client/src/Pages/Monitors/Details/index.jsx | 44 +++++++++++++++++++-- 2 files changed, 42 insertions(+), 6 deletions(-) diff --git a/Client/src/Pages/Monitors/Details/index.css b/Client/src/Pages/Monitors/Details/index.css index 370f213fb..1abd12ef9 100644 --- a/Client/src/Pages/Monitors/Details/index.css +++ b/Client/src/Pages/Monitors/Details/index.css @@ -33,9 +33,7 @@ .monitor-details p.MuiTypography-root { color: var(--env-var-color-2); } -.monitor-details p.MuiTypography-root span.MuiTypography-root { - color: var(--env-var-color-17); -} + .monitor-details .stat-box { flex: 1; min-width: 100px; diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx index 8f4d24422..8ccf15d01 100644 --- a/Client/src/Pages/Monitors/Details/index.jsx +++ b/Client/src/Pages/Monitors/Details/index.jsx @@ -33,6 +33,33 @@ const formatDuration = (ms) => { return dateStr; }; +const formatDurationRounded = (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); + + let time = ""; + if (days > 0) { + time += `${days} day${days !== 1 ? "s" : ""}`; + return time; + } + if (hours > 0) { + time += `${hours} hour${hours !== 1 ? "s" : ""}`; + return time; + } + if (minutes > 0) { + time += `${minutes} minute${minutes !== 1 ? "s" : ""}`; + return time; + } + if (seconds > 0) { + time += `${seconds} second${seconds !== 1 ? "s" : ""}`; + return time; + } + + return time; +}; + const StatBox = ({ title, value }) => { return ( @@ -185,14 +212,25 @@ const DetailsPage = () => { /> - + {monitor?.status ? : } {monitor.url?.replace(/^https?:\/\//, "") || "..."} - Your site is up.{" "} - Checking every 5 minutes. Last time checked 2 minutes ago. + + Your site is {monitor?.status ? "up" : "down"}. + {" "} + Checking every {formatDurationRounded(monitor?.interval)}. Last + time checked{" "} + {formatDurationRounded(getLastChecked(monitor?.checks))} ago.