From 560b7c4a4d0bb5d38e22dea53555bb8e82a92253 Mon Sep 17 00:00:00 2001 From: Rogerio Bordignon Date: Mon, 21 Oct 2024 14:40:22 -0300 Subject: [PATCH 1/5] Add Http Status Label to Incident Table --- Client/src/Components/Label/index.jsx | 41 ++++++++++++------- .../Pages/Incidents/IncidentTable/index.jsx | 33 ++++++++++++--- 2 files changed, 55 insertions(+), 19 deletions(-) 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} From 1347ccda8924f334cac0542f62594f153f7c5b67 Mon Sep 17 00:00:00 2001 From: Rogerio Bordignon Date: Mon, 21 Oct 2024 14:48:40 -0300 Subject: [PATCH 2/5] Prettier Adjustment --- Client/src/Components/Label/index.jsx | 146 +++++++------- .../Pages/Incidents/IncidentTable/index.jsx | 180 +++++++++--------- 2 files changed, 163 insertions(+), 163 deletions(-) diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index 21b748b1d..f0872980c 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -124,84 +124,84 @@ ColoredLabel.propTypes = { */ const StatusLabel = ({ status, text, hasDot = true, customStyles }) => { - const theme = useTheme(); - const colors = { - up: { - dotColor: theme.palette.success.main, - bgColor: theme.palette.success.bg, - borderColor: theme.palette.success.light, - }, - down: { - dotColor: theme.palette.error.text, - bgColor: theme.palette.error.bg, - borderColor: theme.palette.error.light, - }, - paused: { - dotColor: theme.palette.warning.main, - bgColor: theme.palette.warning.bg, - borderColor: theme.palette.warning.light, - }, - pending: { - dotColor: theme.palette.warning.main, - 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, - borderColor: theme.palette.unresolved.light, - }, - }; + const theme = useTheme(); + const colors = { + up: { + dotColor: theme.palette.success.main, + bgColor: theme.palette.success.bg, + borderColor: theme.palette.success.light, + }, + down: { + dotColor: theme.palette.error.text, + bgColor: theme.palette.error.bg, + borderColor: theme.palette.error.light, + }, + paused: { + dotColor: theme.palette.warning.main, + bgColor: theme.palette.warning.bg, + borderColor: theme.palette.warning.light, + }, + pending: { + dotColor: theme.palette.warning.main, + 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, + borderColor: theme.palette.unresolved.light, + }, + }; - // Look up the color for the status - const { borderColor, bgColor, dotColor } = colors[status] || colors["cannot resolve"]; + // Look up the color for the status + const { borderColor, bgColor, dotColor } = colors[status] || colors["cannot resolve"]; - return ( - - {hasDot && ( - - )} - - ); + return ( + + {hasDot && ( + + )} + + ); }; StatusLabel.propTypes = { - status: PropTypes.oneOf([ - "up", - "down", - "paused", - "pending", - "400", - "500", - "cannot resolve", - ]), - text: PropTypes.string, - hasDot: PropTypes.bool, - customStyles: PropTypes.object, + status: PropTypes.oneOf([ + "up", + "down", + "paused", + "pending", + "400", + "500", + "cannot resolve", + ]), + text: PropTypes.string, + hasDot: PropTypes.bool, + customStyles: PropTypes.object, }; export { ColoredLabel, StatusLabel }; diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx index 06f9affdd..e26de1190 100644 --- a/Client/src/Pages/Incidents/IncidentTable/index.jsx +++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx @@ -129,97 +129,97 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => { p: theme.spacing(30), }; - return ( - <> - {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. - - - ) : ( - <> - - - - - Monitor Name - Status - Date & Time - Status Code - Message - - - - {checks.map((check) => { - const status = check.status === true ? "up" : "down"; - const formattedDate = formatDateWithTz( - check.createdAt, - "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 ( + <> + {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. + + + ) : ( + <> + +
+ + + Monitor Name + Status + Date & Time + Status Code + Message + + + + {checks.map((check) => { + const status = check.status === true ? "up" : "down"; + const formattedDate = formatDateWithTz( + check.createdAt, + "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 ( - - {monitors[check.monitorId]?.name} - - - - {formattedDate} - - - - {check.message} - - ); - })} - -
- - {paginationComponent} - - )} - - ); + return ( + + {monitors[check.monitorId]?.name} + + + + {formattedDate} + + + + {check.message} + + ); + })} + + + + {paginationComponent} + + )} + + ); }; IncidentTable.propTypes = { From 95a0ad0dbde7dcb8e750d1f7828ab06ad7066b2e Mon Sep 17 00:00:00 2001 From: Rogerio Bordignon Date: Fri, 25 Oct 2024 11:00:29 -0300 Subject: [PATCH 3/5] Refact: create a new HttpStatusLabel component --- .../src/Components/HttpStatusLabel/index.jsx | 65 +++++++++++++++++++ Client/src/Components/Label/index.jsx | 32 +++------ .../Pages/Incidents/IncidentTable/index.jsx | 16 +---- 3 files changed, 78 insertions(+), 35 deletions(-) create mode 100644 Client/src/Components/HttpStatusLabel/index.jsx diff --git a/Client/src/Components/HttpStatusLabel/index.jsx b/Client/src/Components/HttpStatusLabel/index.jsx new file mode 100644 index 000000000..96033807b --- /dev/null +++ b/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 + * + */ + +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 ( + + ); +}; + +// 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 }; diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index f0872980c..156210c47 100644 --- a/Client/src/Components/Label/index.jsx +++ b/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 * */ -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 && ( - - )} + ); }; 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 }; diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx index e26de1190..214960b3e 100644 --- a/Client/src/Pages/Incidents/IncidentTable/index.jsx +++ b/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 ( {monitors[check.monitorId]?.name} @@ -201,12 +196,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => { {formattedDate} - + {check.message} From d51ff3a586f0f1cb6464396c7107475a8344fd39 Mon Sep 17 00:00:00 2001 From: Rogerio Bordignon Date: Fri, 25 Oct 2024 11:21:39 -0300 Subject: [PATCH 4/5] Fix some files typo --- Client/src/Components/HttpStatusLabel/index.jsx | 2 +- Client/src/Components/Label/index.jsx | 12 +----------- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/Client/src/Components/HttpStatusLabel/index.jsx b/Client/src/Components/HttpStatusLabel/index.jsx index 96033807b..18db3590d 100644 --- a/Client/src/Components/HttpStatusLabel/index.jsx +++ b/Client/src/Components/HttpStatusLabel/index.jsx @@ -10,7 +10,7 @@ import { BaseLabel } from "../Label"; * @returns {JSX.Element} * @example * // Render a http status label - * + * */ const getRoundedStatusCode = (status) => { diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index 156210c47..f7686a8e0 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -145,16 +145,6 @@ 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, @@ -163,7 +153,7 @@ const StatusLabel = ({ status, text, customStyles }) => { }; // Look up the color for the status - const { borderColor, bgColor, dotColor } = colors[status] || colors["cannot resolve"]; + const { borderColor, bgColor, dotColor } = colors[status]; return ( Date: Mon, 18 Nov 2024 01:41:30 -0300 Subject: [PATCH 5/5] Refactor: manage statusCode handling within the child component --- .../src/Components/HttpStatusLabel/index.jsx | 27 ++++++++++++------- .../Pages/Incidents/IncidentTable/index.jsx | 2 +- 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/Client/src/Components/HttpStatusLabel/index.jsx b/Client/src/Components/HttpStatusLabel/index.jsx index 18db3590d..dddd4e472 100644 --- a/Client/src/Components/HttpStatusLabel/index.jsx +++ b/Client/src/Components/HttpStatusLabel/index.jsx @@ -5,7 +5,7 @@ import { BaseLabel } from "../Label"; /** * @component * @param {Object} props - * @param {number | 'N/A'} props.status - The http status for the label + * @param {number} props.status - The http status for the label * @param {Styles} props.customStyles - CSS Styles passed from parent component * @returns {JSX.Element} * @example @@ -13,11 +13,17 @@ import { BaseLabel } from "../Label"; * */ -const getRoundedStatusCode = (status) => { - if (typeof status === "number" && status >= 100 && status < 600) { - return Math.floor(status / 100) * 100; +const DEFAULT_CODE = 9999; // Default code for unknown status + +const handleStatusCode = (status) => { + if (status >= 100 && status < 600) { + return status; } - return status; + return DEFAULT_CODE; +}; + +const getRoundedStatusCode = (status) => { + return Math.floor(status / 100) * 100; }; const HttpStatusLabel = ({ status, customStyles }) => { @@ -33,19 +39,21 @@ const HttpStatusLabel = ({ status, customStyles }) => { bgColor: theme.palette.error.bg, borderColor: theme.palette.error.light, }, - "N/A": { + default: { dotColor: theme.palette.unresolved.main, bgColor: theme.palette.unresolved.bg, borderColor: theme.palette.unresolved.light, }, }; + const statusCode = handleStatusCode(status) + const { borderColor, bgColor, dotColor } = - colors[getRoundedStatusCode(status)] || colors["N/A"]; + colors[getRoundedStatusCode(statusCode)] || colors.default; return ( { ); }; -// 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, + status:PropTypes.number, customStyles: PropTypes.object, }; diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx index 0ab310b24..3c349d6e2 100644 --- a/Client/src/Pages/Incidents/IncidentTable/index.jsx +++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx @@ -198,7 +198,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => { {formattedDate} - + {check.message}