diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx
index bdc34982a..0c5cd8503 100644
--- a/Client/src/Components/Label/index.jsx
+++ b/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
*
*/
-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 (
{
...customStyles,
}}
>
-
+ {hasDot && (
+
+ )}
);
};
@@ -185,9 +195,12 @@ StatusLabel.propTypes = {
"down",
"paused",
"pending",
+ "400",
+ "500",
"cannot resolve",
]),
text: PropTypes.string,
+ hasDot: PropTypes.bool,
customStyles: PropTypes.object,
};
diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index ef8356031..8e0464376 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -133,19 +133,31 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
<>
{checks?.length === 0 && selectedMonitor === "0" ? (
-
+
{mode === "light" ? : }
-
+
No incidents recorded yet.
) : checks?.length === 0 ? (
-
+
{mode === "light" ? : }
-
+
The monitor you have selected has no recorded incidents yet.
@@ -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 (
@@ -183,7 +201,12 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
{formattedDate}
- {check.statusCode ? check.statusCode : "N/A"}
+
{check.message}