Merge pull request #778 from bluewave-labs/feat/Percentage-colors

Change color of percentages according to uptime of monitor.

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,
       }}

Client/src/Pages/Monitors/Home/monitorData.jsx

@@ -27,30 +27,47 @@ 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();
 
   data.rows = monitors.map((monitor, idx) => {
     let uptimePercentage = "";
+    let percentageColor = theme.palette.percentage.uptimeExcellent; 
+
+    // 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); 
+          ? "0"
+          : (monitor.uptimePercentage * 100).toFixed(2);
+
+      percentageColor =
+        monitor.uptimePercentage < 0.25
+          ? theme.palette.percentage.uptimePoor
+          : monitor.uptimePercentage < 0.5
+          ? theme.palette.percentage.uptimeFair
+          : monitor.uptimePercentage < 0.75
+          ? theme.palette.percentage.uptimeGood
+          : theme.palette.percentage.uptimeExcellent;
     }
 
     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",
     };
 
-    // 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 {
@@ -86,6 +103,3 @@ export const buildData = (monitors, isAdmin, navigate) => {
   });
   return data;
 };
-
-
-

Client/src/Utils/Theme/darkTheme.js

@@ -57,6 +57,12 @@ const darkTheme = createTheme({
       bg: "#1E1E1E",
       border: "#e88c30",
     },
+    percentage: {
+      uptimePoor: "#d32f2f",
+      uptimeFair: "#e88c30",
+      uptimeGood: "#ffd600",
+      uptimeExcellent: "#079455",
+    },
     unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
     divider: border.light,
     other: {

Client/src/Utils/Theme/lightTheme.js

@@ -54,6 +54,12 @@ const lightTheme = createTheme({
       bg: "#ffecbc",
       border: "#fec84b",
     },
+    percentage: {
+      uptimePoor: "#d32f2f",
+      uptimeFair: "#ec8013",
+      uptimeGood: "#ffb800",
+      uptimeExcellent: "#079455",
+    },
     unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
     divider: border.light,
     other: {