Merge branch 'develop' into feat/indeterminate-state

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/Components/Charts/ResponseTimeChart/index.jsx

@@ -1,43 +0,0 @@
-import PropTypes from "prop-types";
-import { Stack } from "@mui/material";
-import { BarChart, Bar, ResponsiveContainer, Cell } from "recharts";
-import "./index.css";
-
-const ResponseTimeChart = ({ checks = [] }) => {
-  return (
-    <Stack
-      flexDirection="row"
-      justifyContent="space-around"
-      alignItems="flex-end"
-      height="50px"
-      width="300px"
-    >
-      <ResponsiveContainer width="100%" height="100%">
-        <BarChart
-          width={150}
-          height={40}
-          data={checks}
-          style={{ cursor: "pointer" }}
-        >
-          <Bar maxBarSize={10} dataKey="responseTime">
-            {checks.map((check, index) => (
-              <Cell
-                key={`cell-${index}`}
-                fill={
-                  check.status === true
-                    ? "var(--success-color)"
-                    : "var(--error-color)"
-                }
-              />
-            ))}
-          </Bar>
-        </BarChart>
-      </ResponsiveContainer>
-    </Stack>
-  );
-};
-
-ResponseTimeChart.propTypes = {
-  checks: PropTypes.array,
-};
-export default ResponseTimeChart;

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

@@ -27,11 +27,22 @@ 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
@@ -43,19 +54,11 @@ export const buildData = (monitors, isAdmin, navigate) => {
       url: monitor.url,
       title: monitor.name,
       percentage: uptimePercentage,
-      percentageColor:
-        monitor.status === true
-          ? theme.palette.success.main
-          : theme.palette.error.text,
-      status:
-        monitor.status === undefined
-          ? "unknown"
-          : monitor.status === true
-          ? "up"
-          : "down",
+      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 {

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: {