Status label refactor (#478)

* Refactored status label

* Updated colors and replaced old components

* Updated docs

Client/src/Components/Label/index.jsx

@@ -117,34 +117,32 @@ ColoredLabel.propTypes = {
 /**
  * @component
  * @param {Object} props
- * @param {'Seen' | 'Waiting' | 'New' | 'Active'} props.status - The status for the label
- * @param {string} props.dot - The color of the dot
+ * @param { 'up' | 'down' | 'cannot resolve'} props.status - The status for the label
+ * @param {string} props.text - The text of the label
  * @returns {JSX.Element}
  * @example
  * // Render an active label
- * <StatusLabel status="Active" />
+ * <StatusLabel status="up" text="Active" />
  */
 
-const StatusLabel = ({ status, dot, customStyles }) => {
+const StatusLabel = ({ status, text, customStyles }) => {
   const theme = useTheme();
-
-  const colorLookup = {
-    Seen: theme.palette.labelGray.color,
-    Waiting: theme.palette.labelRed.color,
-    New: theme.palette.labelOrange.color,
-    Active: theme.palette.labelGreen.color,
-    Down: theme.palette.error.main, // Assuming theme.palette.error.main is red
-  };
-
-  // Look up the color for the status, default to labelGray if not found
-  const color = colorLookup[status] || theme.palette.labelGray.color;
+  // Look up the color for the status
+  const { borderColor, bgColor, dotColor } = theme.label[status];
 
   return (
-    <BaseLabel label={status} styles={customStyles}>
+    <BaseLabel
+      label={text}
+      styles={{
+        backgroundColor: bgColor,
+        borderColor: borderColor,
+        ...customStyles,
+      }}
+    >
       <Box
         width={7}
         height={7}
-        bgcolor={dot || color}
+        bgcolor={dotColor}
         borderRadius="50%"
         marginRight="5px"
       />
@@ -153,15 +151,8 @@ const StatusLabel = ({ status, dot, customStyles }) => {
 };
 
 StatusLabel.propTypes = {
-  status: PropTypes.oneOf([
-    "Seen",
-    "Waiting",
-    "New",
-    "Active",
-    "Up",
-    "Down",
-    "Cannot resolve",
-  ]),
+  status: PropTypes.oneOf(["up", "down", "cannot resolve"]),
+  text: PropTypes.string,
   customStyles: PropTypes.object,
 };
 

Client/src/Pages/Incidents/index.jsx

@@ -76,24 +76,12 @@ const Incidents = () => {
       else if (filter === "down") return incident.status === false;
     })
     .map((incident, idx) => {
-      const params = {
-        status: "Down",
-        backgroundColor: "var(--env-var-color-21)",
-        statusDotColor: "var(--env-var-color-19)",
-      };
-
       return {
         id: idx,
         data: [
           {
             id: idx + 0,
-            data: (
-              <StatusLabel
-                status={params.status}
-                dot={params.statusDotColor}
-                customStyles={{ backgroundColor: params.backgroundColor }}
-              />
-            ),
+            data: <StatusLabel status="down" text="Down" />,
           },
           { id: idx + 1, data: new Date(incident.createdAt).toLocaleString() },
           { id: idx + 2, data: incident.statusCode },

Client/src/Pages/Monitors/Details/index.jsx

@@ -13,7 +13,10 @@ import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import SettingsIcon from "../../../assets/icons/settings.svg?react";
-import { formatDuration, formatDurationRounded } from "../../../Utils/timeUtils";
+import {
+  formatDuration,
+  formatDurationRounded,
+} from "../../../Utils/timeUtils";
 import "./index.css";
 
 const StatBox = ({ title, value }) => {
@@ -54,32 +57,14 @@ const DetailsPage = () => {
           { id: 3, name: "Message" },
         ],
         rows: res.data.data.checks.map((check, idx) => {
-          const params = {
-            status: check.status === true ? "Up" : "Down",
-            backgroundColor:
-              check.status === true
-                ? "var(--env-var-color-20)"
-                : "var(--env-var-color-21)",
-            statusDotColor:
-              check.status === true
-                ? "var(--env-var-color-17)"
-                : "var(--env-var-color-19)",
-          };
+          const status = check.status === true ? "up" : "down";
 
           return {
             id: check._id,
             data: [
               {
                 id: idx,
-                data: (
-                  <StatusLabel
-                    status={params.status}
-                    dot={params.statusDotColor}
-                    customStyles={{
-                      backgroundColor: params.backgroundColor,
-                    }}
-                  />
-                ),
+                data: <StatusLabel status={status} text={status} />,
               },
               { id: idx + 1, data: new Date(check.createdAt).toLocaleString() },
               { id: idx + 2, data: check.statusCode },

Client/src/Pages/Monitors/index.jsx

@@ -89,15 +89,7 @@ const Monitors = () => {
         monitor.status === true
           ? "var(--env-var-color-17)"
           : "var(--env-var-color-19)",
-      status: monitor.status === true ? "Up" : "Down",
-      backgroundColor:
-        monitor.status === true
-          ? "var(--env-var-color-20)"
-          : "var(--env-var-color-21)",
-      statusDotColor:
-        monitor.status === true
-          ? "var(--env-var-color-17)"
-          : "var(--env-var-color-19)",
+      status: monitor.status === true ? "up" : "down",
     };
 
     // Reverse checks so latest check is on the right
@@ -113,10 +105,8 @@ const Monitors = () => {
           data: (
             <StatusLabel
               status={params.status}
-              dot={params.statusDotColor}
-              customStyles={{
-                backgroundColor: params.backgroundColor,
-              }}
+              text={params.status}
+              customStyles={{ textTransform: "capitalize" }}
             />
           ),
         },

Client/src/Pages/PageSpeed/index.jsx

@@ -39,17 +39,8 @@ const Card = ({ data }) => {
             </Typography>
             {/* TODO - fix prop-type error */}
             <StatusLabel
-              status={data.isActive ? "Live (collecting data)" : "Inactive"}
-              dot={
-                data.isActive
-                  ? "var(--env-var-color-17)"
-                  : "var(--env-var-color-19)"
-              }
-              customStyles={{
-                backgroundColor: data.isActive
-                  ? "var(--env-var-color-20)"
-                  : "var(--env-var-color-21)",
-              }}
+              status={data.isActive ? "up" : "cannot resolve"}
+              text={data.isActive ? "Live (collecting data)" : "Inactive"}
             />
           </Stack>
           <Typography>{data.url}</Typography>

Client/src/Utils/Theme.js

@@ -118,6 +118,24 @@ const theme = createTheme({
       border: "#fec84b",
     },
   },
+  //add more as needed
+  label: {
+    up: {
+      borderColor: sectionBorder,
+      bgColor: "#ecfdf3",
+      dotColor: "#17B26A",
+    },
+    down: {
+      borderColor: sectionBorder,
+      bgColor: "#f9eced",
+      dotColor: labelRed,
+    },
+    "cannot resolve": {
+      borderColor: sectionBorder,
+      bgColor: "#f2f4f7",
+      dotColor: labelGray,
+    },
+  },
 });
 
 export default theme;