Refact: create a new HttpStatusLabel component

Client/src/Components/HttpStatusLabel/index.jsx

@@ -0,0 +1,65 @@
+import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
+import { BaseLabel } from "../Label";
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {number | 'N/A'} props.status - The http status for the label
+ * @param {Styles} props.customStyles - CSS Styles passed from parent component
+ * @returns {JSX.Element}
+ * @example
+ * // Render a http status label
+ * <HttpStatusLabel status="404" />
+ */
+
+const getRoundedStatusCode = (status) => {
+	if (typeof status === "number" && status >= 100 && status < 600) {
+		return Math.floor(status / 100) * 100;
+	}
+	return status;
+};
+
+const HttpStatusLabel = ({ status, customStyles }) => {
+	const theme = useTheme();
+	const colors = {
+		400: {
+			dotColor: theme.palette.warning.main,
+			bgColor: theme.palette.warning.bg,
+			borderColor: theme.palette.warning.light,
+		},
+		500: {
+			dotColor: theme.palette.error.main,
+			bgColor: theme.palette.error.bg,
+			borderColor: theme.palette.error.light,
+		},
+		"N/A": {
+			dotColor: theme.palette.unresolved.main,
+			bgColor: theme.palette.unresolved.bg,
+			borderColor: theme.palette.unresolved.light,
+		},
+	};
+
+	const { borderColor, bgColor, dotColor } =
+		colors[getRoundedStatusCode(status)] || colors["N/A"];
+
+	return (
+		<BaseLabel
+			label={String(status)}
+			styles={{
+				color: dotColor,
+				backgroundColor: bgColor,
+				borderColor: borderColor,
+				...customStyles,
+			}}
+		/>
+	);
+};
+
+// TODO: Restrict status type to accept only numeric values after "N/A" status in IncidentTable is resolved
+HttpStatusLabel.propTypes = {
+	status: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["N/A"])]).isRequired,
+	customStyles: PropTypes.object,
+};
+
+export { HttpStatusLabel };

Client/src/Components/Label/index.jsx

@@ -116,14 +116,13 @@ 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, hasDot = true, customStyles }) => {
+const StatusLabel = ({ status, text, customStyles }) => {
 	const theme = useTheme();
 	const colors = {
 		up: {
@@ -176,32 +175,21 @@ const StatusLabel = ({ status, text, hasDot = true, customStyles }) => {
 				...customStyles,
 			}}
 		>
-			{hasDot && (
-				<Box
-					width={7}
-					height={7}
-					bgcolor={dotColor}
-					borderRadius="50%"
-					marginRight="5px"
-				/>
-			)}
+			<Box
+				width={7}
+				height={7}
+				bgcolor={dotColor}
+				borderRadius="50%"
+				marginRight="5px"
+			/>
 		</BaseLabel>
 	);
 };
 
 StatusLabel.propTypes = {
-	status: PropTypes.oneOf([
-		"up",
-		"down",
-		"paused",
-		"pending",
-		"400",
-		"500",
-		"cannot resolve",
-	]),
+	status: PropTypes.oneOf(["up", "down", "paused", "pending", "cannot resolve"]),
 	text: PropTypes.string,
-	hasDot: PropTypes.bool,
 	customStyles: PropTypes.object,
 };
 
-export { ColoredLabel, StatusLabel };
+export { BaseLabel, ColoredLabel, StatusLabel };

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

@@ -24,6 +24,7 @@ import { useTheme } from "@emotion/react";
 import { formatDateWithTz } from "../../../Utils/timeUtils";
 import PlaceholderLight from "../../../assets/Images/data_placeholder.svg?react";
 import PlaceholderDark from "../../../assets/Images/data_placeholder_dark.svg?react";
+import { HttpStatusLabel } from "../../../Components/HttpStatusLabel";
 
 const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 	const uiTimezone = useSelector((state) => state.ui.timezone);
@@ -182,13 +183,7 @@ 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}>
 											<TableCell>{monitors[check.monitorId]?.name}</TableCell>
@@ -201,12 +196,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 											</TableCell>
 											<TableCell>{formattedDate}</TableCell>
 											<TableCell>
-												<StatusLabel
-													status={getGenericStatus(check.statusCode)}
-													text={String(check.statusCode || "N/A")}
-													hasDot={false}
-													customStyles={{ textTransform: "capitalize" }}
-												/>
+												<HttpStatusLabel status={check.statusCode || "N/A"} />
 											</TableCell>
 											<TableCell>{check.message}</TableCell>
 										</TableRow>