From d75b494d58b1f8aa67d45312a2edacd22d32c6c3 Mon Sep 17 00:00:00 2001 From: M M Date: Sun, 1 Sep 2024 12:25:23 -0700 Subject: [PATCH 1/8] Change color of percentage according to uptime of monitor. --- Client/src/Components/Alert/index.jsx | 4 ++-- .../src/Pages/Monitors/Home/monitorData.jsx | 23 +++++++++++++------ Client/src/Utils/Theme/darkTheme.js | 2 +- 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/Client/src/Components/Alert/index.jsx b/Client/src/Components/Alert/index.jsx index eb5fbd13b..cafd58451 100644 --- a/Client/src/Components/Alert/index.jsx +++ b/Client/src/Components/Alert/index.jsx @@ -31,7 +31,7 @@ const icons = { const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => { const theme = useTheme(); - const { text, light, border } = theme.palette[variant]; + const { text, bg, border } = theme.palette[variant]; const icon = icons[variant]; return ( @@ -45,7 +45,7 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => { padding: hasIcon ? theme.spacing(8) : `${theme.spacing(4)} ${theme.spacing(8)}`, - backgroundColor: light, + backgroundColor: bg, border: `solid 1px ${border}`, borderRadius: theme.shape.borderRadius, }} diff --git a/Client/src/Pages/Monitors/Home/monitorData.jsx b/Client/src/Pages/Monitors/Home/monitorData.jsx index d3fd66958..9fd97408c 100644 --- a/Client/src/Pages/Monitors/Home/monitorData.jsx +++ b/Client/src/Pages/Monitors/Home/monitorData.jsx @@ -32,21 +32,30 @@ export const buildData = (monitors, isAdmin, navigate) => { data.rows = monitors.map((monitor, idx) => { let uptimePercentage = ""; + let percentageColor = theme.palette.success.main; + if (monitor.uptimePercentage !== undefined) { uptimePercentage = monitor.uptimePercentage === 0 - ? "0" - : (monitor.uptimePercentage * 100).toFixed(2); - } + ? "0" + : (monitor.uptimePercentage * 100).toFixed(2); + + if (monitor.uptimePercentage < 0.25) { + percentageColor = theme.palette.error.text; + } else if (monitor.uptimePercentage >= 0.25 && monitor.uptimePercentage < 0.5) { + percentageColor = theme.palette.warning.main; + } else if (monitor.uptimePercentage >= 0.5 && monitor.uptimePercentage < 0.75) { + percentageColor = theme.palette.warning.light; + } else if (monitor.uptimePercentage >= 0.75 && monitor.uptimePercentage <= 1) { + percentageColor = theme.palette.success.main; + } + } const params = { url: monitor.url, title: monitor.name, percentage: uptimePercentage, - percentageColor: - monitor.status === true - ? theme.palette.success.main - : theme.palette.error.text, + percentageColor, status: monitor.status === true ? "up" : "down", }; diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index 15df7c1b8..a39fb4c1c 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -53,7 +53,7 @@ const darkTheme = createTheme({ warning: { text: "#e88c30", main: "#FF9F00", - light: "#27272a", + light: "#ffd600", bg: "#1E1E1E", border: "#e88c30", }, From 3da323e44e24180095198b3285cbc9ad2851af6e Mon Sep 17 00:00:00 2001 From: M M Date: Sun, 1 Sep 2024 13:40:52 -0700 Subject: [PATCH 2/8] Adjust colors for the light theme. --- Client/src/Utils/Theme/lightTheme.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index bb83d09b2..51639fb0e 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -36,7 +36,7 @@ const lightTheme = createTheme({ }, success: { text: "#079455", - main: "#17b26a", + main: "#45bb7a", light: "#d4f4e1", bg: "#ecfdf3", }, @@ -49,8 +49,8 @@ const lightTheme = createTheme({ }, warning: { text: "#DC6803", - main: "#fdb022", - light: "#fffcf5", + main: "#ff7a00", + light: "#ffb400", bg: "#ffecbc", border: "#fec84b", }, From 3a27ce0a8aafbf8932e85c89ccc17f5097c8099a Mon Sep 17 00:00:00 2001 From: M M Date: Mon, 2 Sep 2024 14:00:26 -0700 Subject: [PATCH 3/8] Revert to old colors on the light and dark theme. --- Client/src/Utils/Theme/darkTheme.js | 2 +- Client/src/Utils/Theme/lightTheme.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index a39fb4c1c..15df7c1b8 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -53,7 +53,7 @@ const darkTheme = createTheme({ warning: { text: "#e88c30", main: "#FF9F00", - light: "#ffd600", + light: "#27272a", bg: "#1E1E1E", border: "#e88c30", }, diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index 51639fb0e..bb83d09b2 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -36,7 +36,7 @@ const lightTheme = createTheme({ }, success: { text: "#079455", - main: "#45bb7a", + main: "#17b26a", light: "#d4f4e1", bg: "#ecfdf3", }, @@ -49,8 +49,8 @@ const lightTheme = createTheme({ }, warning: { text: "#DC6803", - main: "#ff7a00", - light: "#ffb400", + main: "#fdb022", + light: "#fffcf5", bg: "#ffecbc", border: "#fec84b", }, From 081ad080a8bb3d9cc4ea91b63b147a8d8e0346a4 Mon Sep 17 00:00:00 2001 From: M M Date: Mon, 2 Sep 2024 15:03:40 -0700 Subject: [PATCH 4/8] Add new objects to the color palettes. --- Client/src/Pages/Monitors/Home/monitorData.jsx | 10 +++++----- Client/src/Utils/Theme/darkTheme.js | 6 ++++++ Client/src/Utils/Theme/lightTheme.js | 6 ++++++ 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/Client/src/Pages/Monitors/Home/monitorData.jsx b/Client/src/Pages/Monitors/Home/monitorData.jsx index 9fd97408c..ee167edb4 100644 --- a/Client/src/Pages/Monitors/Home/monitorData.jsx +++ b/Client/src/Pages/Monitors/Home/monitorData.jsx @@ -32,7 +32,7 @@ export const buildData = (monitors, isAdmin, navigate) => { data.rows = monitors.map((monitor, idx) => { let uptimePercentage = ""; - let percentageColor = theme.palette.success.main; + let percentageColor = theme.palette.percentage.green; if (monitor.uptimePercentage !== undefined) { uptimePercentage = @@ -41,13 +41,13 @@ export const buildData = (monitors, isAdmin, navigate) => { : (monitor.uptimePercentage * 100).toFixed(2); if (monitor.uptimePercentage < 0.25) { - percentageColor = theme.palette.error.text; + percentageColor = theme.palette.percentage.red; } else if (monitor.uptimePercentage >= 0.25 && monitor.uptimePercentage < 0.5) { - percentageColor = theme.palette.warning.main; + percentageColor = theme.palette.percentage.orange; } else if (monitor.uptimePercentage >= 0.5 && monitor.uptimePercentage < 0.75) { - percentageColor = theme.palette.warning.light; + percentageColor = theme.palette.percentage.yellow; } else if (monitor.uptimePercentage >= 0.75 && monitor.uptimePercentage <= 1) { - percentageColor = theme.palette.success.main; + percentageColor = theme.palette.percentage.green; } } diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index 15df7c1b8..3b77966cd 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -57,6 +57,12 @@ const darkTheme = createTheme({ bg: "#1E1E1E", border: "#e88c30", }, + percentage: { + red: "#d32f2f", + orange: "#e88c30", + yellow: "#ffd600", + green: "#079455", + }, unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" }, divider: border.light, other: { diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index bb83d09b2..67c2d72e5 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -54,6 +54,12 @@ const lightTheme = createTheme({ bg: "#ffecbc", border: "#fec84b", }, + percentage: { + red: "#d32f2f", + orange: "#ec8013", + yellow: "#ffb800", + green: "#079455", + }, unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" }, divider: border.light, other: { From 4ebaadbe24549cdb50e77688c260bcc4444aa5ba Mon Sep 17 00:00:00 2001 From: M M Date: Mon, 2 Sep 2024 15:34:01 -0700 Subject: [PATCH 5/8] Use ternary based logic rather than conditional statements for clarity. --- .../src/Pages/Monitors/Home/monitorData.jsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/Client/src/Pages/Monitors/Home/monitorData.jsx b/Client/src/Pages/Monitors/Home/monitorData.jsx index ee167edb4..2f176bd04 100644 --- a/Client/src/Pages/Monitors/Home/monitorData.jsx +++ b/Client/src/Pages/Monitors/Home/monitorData.jsx @@ -40,16 +40,15 @@ export const buildData = (monitors, isAdmin, navigate) => { ? "0" : (monitor.uptimePercentage * 100).toFixed(2); - if (monitor.uptimePercentage < 0.25) { - percentageColor = theme.palette.percentage.red; - } else if (monitor.uptimePercentage >= 0.25 && monitor.uptimePercentage < 0.5) { - percentageColor = theme.palette.percentage.orange; - } else if (monitor.uptimePercentage >= 0.5 && monitor.uptimePercentage < 0.75) { - percentageColor = theme.palette.percentage.yellow; - } else if (monitor.uptimePercentage >= 0.75 && monitor.uptimePercentage <= 1) { - percentageColor = theme.palette.percentage.green; - } - } + percentageColor = + monitor.uptimePercentage < 0.25 + ? theme.palette.percentage.red + : monitor.uptimePercentage < 0.5 + ? theme.palette.percentage.orange + : monitor.uptimePercentage < 0.75 + ? theme.palette.percentage.yellow + : theme.palette.percentage.green; + } const params = { url: monitor.url, From 6e8334026c6985df02b87f5e33535a56d2b8a02e Mon Sep 17 00:00:00 2001 From: M M Date: Mon, 2 Sep 2024 16:19:56 -0700 Subject: [PATCH 6/8] Add docs. --- Client/src/Pages/Monitors/Home/monitorData.jsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/Client/src/Pages/Monitors/Home/monitorData.jsx b/Client/src/Pages/Monitors/Home/monitorData.jsx index 2f176bd04..4220fc2c5 100644 --- a/Client/src/Pages/Monitors/Home/monitorData.jsx +++ b/Client/src/Pages/Monitors/Home/monitorData.jsx @@ -27,6 +27,14 @@ const data = { rows: [], }; +/** + * Builds table data for a list of monitors. + * + * @param {Array} monitors - An array of monitor objects containing information about each monitor. + * @param {boolean} isAdmin - Flag indicating if the current user is an admin. + * @param {Function} navigate - A function to navigate to the monitor detail page. + * @returns {Object} The data structure containing columns and rows for the table. + */ export const buildData = (monitors, isAdmin, navigate) => { const theme = useTheme(); @@ -34,13 +42,14 @@ export const buildData = (monitors, isAdmin, navigate) => { let uptimePercentage = ""; let percentageColor = theme.palette.percentage.green; + // Determine uptime percentage and color based on the monitor's uptimePercentage value if (monitor.uptimePercentage !== undefined) { uptimePercentage = monitor.uptimePercentage === 0 ? "0" : (monitor.uptimePercentage * 100).toFixed(2); - percentageColor = + percentageColor = monitor.uptimePercentage < 0.25 ? theme.palette.percentage.red : monitor.uptimePercentage < 0.5 @@ -58,7 +67,7 @@ export const buildData = (monitors, isAdmin, navigate) => { status: monitor.status === true ? "up" : "down", }; - // Reverse checks so latest check is on the right + // Reverse checks so the latest check is on the right const reversedChecks = monitor.checks.slice().reverse(); return { @@ -94,6 +103,3 @@ export const buildData = (monitors, isAdmin, navigate) => { }); return data; }; - - - From c4dafae21e5f626b42e694519bf8e0f922e5c80a Mon Sep 17 00:00:00 2001 From: M M Date: Mon, 2 Sep 2024 19:07:43 -0700 Subject: [PATCH 7/8] Give props more meaningful names. --- Client/src/Pages/Monitors/Home/monitorData.jsx | 10 +++++----- Client/src/Utils/Theme/darkTheme.js | 8 ++++---- Client/src/Utils/Theme/lightTheme.js | 8 ++++---- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/Client/src/Pages/Monitors/Home/monitorData.jsx b/Client/src/Pages/Monitors/Home/monitorData.jsx index 4220fc2c5..643327e7e 100644 --- a/Client/src/Pages/Monitors/Home/monitorData.jsx +++ b/Client/src/Pages/Monitors/Home/monitorData.jsx @@ -40,7 +40,7 @@ export const buildData = (monitors, isAdmin, navigate) => { data.rows = monitors.map((monitor, idx) => { let uptimePercentage = ""; - let percentageColor = theme.palette.percentage.green; + let percentageColor = theme.palette.percentage.q4; // Determine uptime percentage and color based on the monitor's uptimePercentage value if (monitor.uptimePercentage !== undefined) { @@ -51,12 +51,12 @@ export const buildData = (monitors, isAdmin, navigate) => { percentageColor = monitor.uptimePercentage < 0.25 - ? theme.palette.percentage.red + ? theme.palette.percentage.q1 : monitor.uptimePercentage < 0.5 - ? theme.palette.percentage.orange + ? theme.palette.percentage.q2 : monitor.uptimePercentage < 0.75 - ? theme.palette.percentage.yellow - : theme.palette.percentage.green; + ? theme.palette.percentage.q3 + : theme.palette.percentage.q4; } const params = { diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index 3b77966cd..f680533f8 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -58,10 +58,10 @@ const darkTheme = createTheme({ border: "#e88c30", }, percentage: { - red: "#d32f2f", - orange: "#e88c30", - yellow: "#ffd600", - green: "#079455", + q1: "#d32f2f", + q2: "#e88c30", + q3: "#ffd600", + q4: "#079455", }, unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" }, divider: border.light, diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index 67c2d72e5..cc8b2f226 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -55,10 +55,10 @@ const lightTheme = createTheme({ border: "#fec84b", }, percentage: { - red: "#d32f2f", - orange: "#ec8013", - yellow: "#ffb800", - green: "#079455", + q1: "#d32f2f", + q2: "#ec8013", + q3: "#ffb800", + q4: "#079455", }, unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" }, divider: border.light, From ed99748718545b457ed8d49f63ee87bda34ec4a0 Mon Sep 17 00:00:00 2001 From: M M Date: Mon, 2 Sep 2024 19:14:43 -0700 Subject: [PATCH 8/8] Name props according to purpose rather than value. --- Client/src/Pages/Monitors/Home/monitorData.jsx | 10 +++++----- Client/src/Utils/Theme/darkTheme.js | 8 ++++---- Client/src/Utils/Theme/lightTheme.js | 8 ++++---- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/Client/src/Pages/Monitors/Home/monitorData.jsx b/Client/src/Pages/Monitors/Home/monitorData.jsx index 643327e7e..1942e5a9c 100644 --- a/Client/src/Pages/Monitors/Home/monitorData.jsx +++ b/Client/src/Pages/Monitors/Home/monitorData.jsx @@ -40,7 +40,7 @@ export const buildData = (monitors, isAdmin, navigate) => { data.rows = monitors.map((monitor, idx) => { let uptimePercentage = ""; - let percentageColor = theme.palette.percentage.q4; + let percentageColor = theme.palette.percentage.uptimeExcellent; // Determine uptime percentage and color based on the monitor's uptimePercentage value if (monitor.uptimePercentage !== undefined) { @@ -51,12 +51,12 @@ export const buildData = (monitors, isAdmin, navigate) => { percentageColor = monitor.uptimePercentage < 0.25 - ? theme.palette.percentage.q1 + ? theme.palette.percentage.uptimePoor : monitor.uptimePercentage < 0.5 - ? theme.palette.percentage.q2 + ? theme.palette.percentage.uptimeFair : monitor.uptimePercentage < 0.75 - ? theme.palette.percentage.q3 - : theme.palette.percentage.q4; + ? theme.palette.percentage.uptimeGood + : theme.palette.percentage.uptimeExcellent; } const params = { diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index f680533f8..008de87db 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -58,10 +58,10 @@ const darkTheme = createTheme({ border: "#e88c30", }, percentage: { - q1: "#d32f2f", - q2: "#e88c30", - q3: "#ffd600", - q4: "#079455", + uptimePoor: "#d32f2f", + uptimeFair: "#e88c30", + uptimeGood: "#ffd600", + uptimeExcellent: "#079455", }, unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" }, divider: border.light, diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index cc8b2f226..6688a0ca4 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -55,10 +55,10 @@ const lightTheme = createTheme({ border: "#fec84b", }, percentage: { - q1: "#d32f2f", - q2: "#ec8013", - q3: "#ffb800", - q4: "#079455", + uptimePoor: "#d32f2f", + uptimeFair: "#ec8013", + uptimeGood: "#ffb800", + uptimeExcellent: "#079455", }, unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" }, divider: border.light,