Merge pull request #1607 from bluewave-labs/fix/be/incidents

fix: be/incidents, resolves #1567

Author: ajhollid

Client/src/Components/HttpStatusLabel/index.jsx

@@ -16,7 +16,7 @@ import { BaseLabel } from "../Label";
 const DEFAULT_CODE = 9999; // Default code for unknown status
 
 const handleStatusCode = (status) => {
-	if (status >= 100 && status < 600) {
+	if (status) {
 		return status;
 	}
 	return DEFAULT_CODE;

Client/src/Components/Table/TablePagination/index.jsx

@@ -5,11 +5,11 @@ import { TablePaginationActions } from "./Actions";
 import SelectorVertical from "../../../assets/icons/selector-vertical.svg?react";
 
 Pagination.propTypes = {
-	monitorCount: PropTypes.number.isRequired, // Total number of items for pagination.
+	itemCount: PropTypes.number.isRequired, // Total number of items for pagination.
 	page: PropTypes.number.isRequired, // Current page index.
 	rowsPerPage: PropTypes.number.isRequired, // Number of rows displayed per page.
 	handleChangePage: PropTypes.func.isRequired, // Function to handle page changes.
-	handleChangeRowsPerPage: PropTypes.func.isRequired, // Function to handle changes in rows per page.
+	handleChangeRowsPerPage: PropTypes.func, // Function to handle changes in rows per page.
 };
 
 const ROWS_PER_PAGE_OPTIONS = [5, 10, 15, 25];
@@ -18,6 +18,7 @@ const ROWS_PER_PAGE_OPTIONS = [5, 10, 15, 25];
  * Pagination component for table navigation with customized styling and behavior.
  *
  * @param {object} props - Component properties.
+ * @param {string} props.paginationLabel - Label for the pagination.
  * @param {number} props.monitorCount - Total number of monitors to paginate.
  * @param {number} props.page - Current page index (0-based).
  * @param {number} props.rowsPerPage - Number of rows to display per page.
@@ -26,7 +27,8 @@ const ROWS_PER_PAGE_OPTIONS = [5, 10, 15, 25];
  * @returns {JSX.Element} The Pagination component.
  */
 function Pagination({
-	monitorCount,
+	paginationLabel,
+	itemCount,
 	page,
 	rowsPerPage,
 	handleChangePage,
@@ -35,7 +37,7 @@ function Pagination({
 	const theme = useTheme();
 
 	const start = page * rowsPerPage + 1;
-	const end = Math.min(page * rowsPerPage + rowsPerPage, monitorCount);
+	const end = Math.min(page * rowsPerPage + rowsPerPage, itemCount);
 	const range = `${start} - ${end}`;
 
 	return (
@@ -51,11 +53,11 @@ function Pagination({
 				variant="body2"
 				sx={{ opacity: 0.7 }}
 			>
-				Showing {range} of {monitorCount} monitor(s)
+				Showing {range} of {itemCount} {paginationLabel}
 			</Typography>
 			<TablePagination
 				component="div"
-				count={monitorCount}
+				count={itemCount}
 				page={page}
 				onPageChange={handleChangePage}
 				rowsPerPage={rowsPerPage}
@@ -121,4 +123,4 @@ function Pagination({
 	);
 }
 
-export { Pagination };
+export default Pagination;

Client/src/Components/Table/index.jsx

@@ -82,9 +82,10 @@ const DataTable = ({ headers, data, config = { emptyView: "No data" } }) => {
 						</TableRow>
 					) : (
 						data.map((row) => {
+							const key = row.id || row._id || Math.random();
 							return (
 								<TableRow
-									key={row.id}
+									key={key}
 									sx={config?.rowSX ?? {}}
 									onClick={() => config?.onRowClick(row)}
 								>

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

@@ -1,8 +1,6 @@
 import PropTypes from "prop-types";
-import { Pagination, PaginationItem, Typography, Box } from "@mui/material";
+import { Typography, Box } from "@mui/material";
 
-import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
-import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { networkService } from "../../../main";
@@ -16,27 +14,20 @@ import { HttpStatusLabel } from "../../../Components/HttpStatusLabel";
 import { Empty } from "./Empty/Empty";
 import { IncidentSkeleton } from "./Skeleton/Skeleton";
 import DataTable from "../../../Components/Table";
-const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
+import Pagination from "../../../Components/Table/TablePagination";
+
+const IncidentTable = ({ monitors, selectedMonitor, filter, dateRange }) => {
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 
 	const theme = useTheme();
 	const { authToken, user } = useSelector((state) => state.auth);
 	const mode = useSelector((state) => state.ui.mode);
 	const [checks, setChecks] = useState([]);
 	const [checksCount, setChecksCount] = useState(0);
-	const [paginationController, setPaginationController] = useState({
-		page: 0,
-		rowsPerPage: 14,
-	});
+	const [page, setPage] = useState(0);
+	const [rowsPerPage, setRowsPerPage] = useState(10);
 	const [isLoading, setIsLoading] = useState(false);
 
-	useEffect(() => {
-		setPaginationController((prevPaginationController) => ({
-			...prevPaginationController,
-			page: 0,
-		}));
-	}, [filter, selectedMonitor]);
-
 	useEffect(() => {
 		const fetchPage = async () => {
 			if (!monitors || Object.keys(monitors).length === 0) {
@@ -51,23 +42,24 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 						teamId: user.teamId,
 						sortOrder: "desc",
 						limit: null,
-						dateRange: null,
+						dateRange,
 						filter: filter,
-						page: paginationController.page,
-						rowsPerPage: paginationController.rowsPerPage,
+						page: page,
+						rowsPerPage: rowsPerPage,
 					});
 				} else {
 					res = await networkService.getChecksByMonitor({
 						authToken: authToken,
 						monitorId: selectedMonitor,
 						sortOrder: "desc",
 						limit: null,
-						dateRange: null,
+						dateRange,
 						filter: filter,
-						page: paginationController.page,
-						rowsPerPage: paginationController.rowsPerPage,
+						page,
+						rowsPerPage,
 					});
 				}
+
 				setChecks(res.data.data.checks);
 				setChecksCount(res.data.data.checksCount);
 			} catch (error) {
@@ -77,21 +69,14 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 			}
 		};
 		fetchPage();
-	}, [
-		authToken,
-		user,
-		monitors,
-		selectedMonitor,
-		filter,
-		paginationController.page,
-		paginationController.rowsPerPage,
-	]);
+	}, [authToken, user, monitors, selectedMonitor, filter, page, rowsPerPage, dateRange]);
 
 	const handlePageChange = (_, newPage) => {
-		setPaginationController({
-			...paginationController,
-			page: newPage - 1, // 0-indexed
-		});
+		setPage(newPage);
+	};
+
+	const handleChangeRowsPerPage = (event) => {
+		setRowsPerPage(event.target.value);
 	};
 
 	const headers = [
@@ -134,28 +119,6 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 		{ id: "message", content: "Message", render: (row) => row.message },
 	];
 
-	let paginationComponent = <></>;
-	if (checksCount > paginationController.rowsPerPage) {
-		paginationComponent = (
-			<Pagination
-				count={Math.ceil(checksCount / paginationController.rowsPerPage)}
-				page={paginationController.page + 1} //0-indexed
-				onChange={handlePageChange}
-				shape="rounded"
-				renderItem={(item) => (
-					<PaginationItem
-						slots={{
-							previous: ArrowBackRoundedIcon,
-							next: ArrowForwardRoundedIcon,
-						}}
-						{...item}
-					/>
-				)}
-				sx={{ mt: "auto" }}
-			/>
-		);
-	}
-
 	let sharedStyles = {
 		border: 1,
 		borderColor: theme.palette.primary.lowContrast,
@@ -198,8 +161,14 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 						headers={headers}
 						data={checks}
 					/>
-
-					{paginationComponent}
+					<Pagination
+						paginationLabel="incidents"
+						itemCount={checksCount}
+						page={page}
+						rowsPerPage={rowsPerPage}
+						handleChangePage={handlePageChange}
+						handleChangeRowsPerPage={handleChangeRowsPerPage}
+					/>
 				</>
 			)}
 		</>
@@ -210,6 +179,7 @@ IncidentTable.propTypes = {
 	monitors: PropTypes.object.isRequired,
 	selectedMonitor: PropTypes.string.isRequired,
 	filter: PropTypes.string.isRequired,
+	dateRange: PropTypes.string.isRequired,
 };
 
 export default IncidentTable;