Add Http Status Label to Incident Table

Client/src/Components/Label/index.jsx

@@ -58,7 +58,7 @@ const lightenColor = (color, percent) => {
   let r = parseInt(color.substring(1, 3), 16);
   let g = parseInt(color.substring(3, 5), 16);
   let b = parseInt(color.substring(5, 7), 16);
-
+  
   const amt = Math.round((255 * percent) / 100);
 
   r = r + amt <= 255 ? r + amt : 255;
@@ -86,10 +86,7 @@ const lightenColor = (color, percent) => {
 const ColoredLabel = ({ label, color }) => {
   const theme = useTheme();
   // If an invalid color is passed, default to the labelGray color
-  if (
-    typeof color !== "string" ||
-    !/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)
-  ) {
+  if (typeof color !== "string" || !/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)) {
     color = theme.palette.border.light;
   }
 
@@ -119,13 +116,14 @@ ColoredLabel.propTypes = {
  * @param {Object} props
  * @param { 'up' | 'down' | 'cannot resolve'} props.status - The status for the label
  * @param {string} props.text - The text of the label
+ * @param {boolean} props.hasDot - Whether to show a dot or not
  * @returns {JSX.Element}
  * @example
  * // Render an active label
  * <StatusLabel status="up" text="Active" />
  */
 
-const StatusLabel = ({ status, text, customStyles }) => {
+const StatusLabel = ({ status, text, hasDot = true, customStyles }) => {
   const theme = useTheme();
   const colors = {
     up: {
@@ -148,6 +146,16 @@ const StatusLabel = ({ status, text, customStyles }) => {
       bgColor: theme.palette.warning.bg,
       borderColor: theme.palette.warning.light,
     },
+    400: {
+      dotColor: theme.palette.warning.main,
+      bgColor: theme.palette.warning.bg,
+      borderColor: theme.palette.warning.light,
+    },
+    500: {
+      dotColor: theme.palette.warning.main,
+      bgColor: theme.palette.warning.bg,
+      borderColor: theme.palette.warning.light,
+    },
     "cannot resolve": {
       dotColor: theme.palette.unresolved.main,
       bgColor: theme.palette.unresolved.bg,
@@ -156,7 +164,7 @@ const StatusLabel = ({ status, text, customStyles }) => {
   };
 
   // Look up the color for the status
-  const { borderColor, bgColor, dotColor } = colors[status];
+  const { borderColor, bgColor, dotColor } = colors[status] || colors["cannot resolve"];
 
   return (
     <BaseLabel
@@ -168,13 +176,15 @@ const StatusLabel = ({ status, text, customStyles }) => {
         ...customStyles,
       }}
     >
-      <Box
-        width={7}
-        height={7}
-        bgcolor={dotColor}
-        borderRadius="50%"
-        marginRight="5px"
-      />
+      {hasDot && (
+        <Box
+          width={7}
+          height={7}
+          bgcolor={dotColor}
+          borderRadius="50%"
+          marginRight="5px"
+        />
+      )}
     </BaseLabel>
   );
 };
@@ -185,9 +195,12 @@ StatusLabel.propTypes = {
     "down",
     "paused",
     "pending",
+    "400",
+    "500",
     "cannot resolve",
   ]),
   text: PropTypes.string,
+  hasDot: PropTypes.bool,
   customStyles: PropTypes.object,
 };
 

Client/src/Pages/Incidents/IncidentTable/index.jsx

@@ -133,19 +133,31 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
     <>
       {checks?.length === 0 && selectedMonitor === "0" ? (
         <Box sx={{ ...sharedStyles }}>
-          <Box textAlign="center" pb={theme.spacing(20)}>
+          <Box
+            textAlign="center"
+            pb={theme.spacing(20)}
+          >
             {mode === "light" ? <PlaceholderLight /> : <PlaceholderDark />}
           </Box>
-          <Typography textAlign="center" color={theme.palette.text.secondary}>
+          <Typography
+            textAlign="center"
+            color={theme.palette.text.secondary}
+          >
             No incidents recorded yet.
           </Typography>
         </Box>
       ) : checks?.length === 0 ? (
         <Box sx={{ ...sharedStyles }}>
-          <Box textAlign="center" pb={theme.spacing(20)}>
+          <Box
+            textAlign="center"
+            pb={theme.spacing(20)}
+          >
             {mode === "light" ? <PlaceholderLight /> : <PlaceholderDark />}
           </Box>
-          <Typography textAlign="center" color={theme.palette.text.secondary}>
+          <Typography
+            textAlign="center"
+            color={theme.palette.text.secondary}
+          >
             The monitor you have selected has no recorded incidents yet.
           </Typography>
         </Box>
@@ -170,6 +182,12 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
                     "YYYY-MM-DD HH:mm:ss A",
                     uiTimezone
                   );
+                  const getGenericStatus = (status) => {
+                    if (typeof status === "number" && status >= 100 && status < 600) {
+                      return Math.floor(status / 100) * 100;
+                    }
+                    return "cannot resolve";
+                  };
 
                   return (
                     <TableRow key={check._id}>
@@ -183,7 +201,12 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
                       </TableCell>
                       <TableCell>{formattedDate}</TableCell>
                       <TableCell>
-                        {check.statusCode ? check.statusCode : "N/A"}
+                        <StatusLabel
+                          status={getGenericStatus(check.statusCode)}
+                          text={String(check.statusCode || "N/A")}
+                          hasDot={false}
+                          customStyles={{ textTransform: "capitalize" }}
+                        />
                       </TableCell>
                       <TableCell>{check.message}</TableCell>
                     </TableRow>