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}