From c13abb5cde2cb6dfd755f76c1a497f537b9800d7 Mon Sep 17 00:00:00 2001 From: M M Date: Thu, 11 Jul 2024 10:49:13 -0700 Subject: [PATCH 01/10] Made files for status table component. --- Client/src/Components/StatusTable/index.css | 0 Client/src/Components/StatusTable/index.jsx | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 Client/src/Components/StatusTable/index.css create mode 100644 Client/src/Components/StatusTable/index.jsx diff --git a/Client/src/Components/StatusTable/index.css b/Client/src/Components/StatusTable/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/Client/src/Components/StatusTable/index.jsx b/Client/src/Components/StatusTable/index.jsx new file mode 100644 index 000000000..e69de29bb From 322ad651b098ffb1bcd1f581e23ec4c0b290f17f Mon Sep 17 00:00:00 2001 From: M M Date: Thu, 11 Jul 2024 11:16:43 -0700 Subject: [PATCH 02/10] Make the incident history table into a component. --- Client/src/Components/StatusTable/index.jsx | 111 +++++++++++++++ Client/src/Pages/Incidents/index.jsx | 144 +++++--------------- 2 files changed, 143 insertions(+), 112 deletions(-) diff --git a/Client/src/Components/StatusTable/index.jsx b/Client/src/Components/StatusTable/index.jsx index e69de29bb..9b8f752e8 100644 --- a/Client/src/Components/StatusTable/index.jsx +++ b/Client/src/Components/StatusTable/index.jsx @@ -0,0 +1,111 @@ +import * as React from 'react'; +import { styled, useTheme } from '@mui/material/styles'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell, { tableCellClasses } from '@mui/material/TableCell'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import Paper from '@mui/material/Paper'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import { StatusLabel } from "../../Components/Label/"; + +/** + * Creates a styled TableCell component. + * @param {object} theme - The theme object. + * @returns {JSX.Element} The styled TableCell component. + */ +const StyledTableCell = styled(TableCell)(({ theme }) => ({ + [`&.${tableCellClasses.head}`]: { + backgroundColor: theme.palette.action.hover, + color: theme.palette.common.black, + }, + [`&.${tableCellClasses.body}`]: { + fontSize: 14, + }, +})); + +/** + * Creates a styled TableRow component. + * @param {object} theme - The theme object. + * @returns {JSX.Element} The styled TableRow component. + */ +const StyledTableRow = styled(TableRow)(({ theme }) => ({ + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.action.hover, + }, + '&:nth-of-type(even)': { + backgroundColor: theme.palette.common.white, + }, + '&:last-child td, &:last-child th': { + border: 0, + }, +})); + +/** + * Creates a data object for the table row. + * @param {JSX.Element} name - The status label JSX element. + * @param {string} date - The date and time string. + * @param {string} message - The message string. + * @returns {object} The data object containing name, date, and message. + */ +function createData(name, date, message) { + return { name, date, message }; +} + +/** + * Customized table component displaying incident history. + * @returns {JSX.Element} The JSX element representing the customized table. + */ +export default function IncidentHistoryTable() { + const theme = useTheme(); + + const rows = [ + createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), + createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), + createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), + createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), + createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), + ]; + + return ( + + + Incident History + + + + + + Status + Date & Time + Message + + + + {rows.map((row, index) => ( + + + {row.name} + + {row.date} + {row.message} + + ))} + +
+ + + ); +} diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index b9778cbe9..30c56f661 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -1,133 +1,23 @@ import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'; -import { styled, useTheme } from '@mui/material/styles'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell, { tableCellClasses } from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; -import Paper from '@mui/material/Paper'; +import { useTheme } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import { StatusLabel } from "../../Components/Label/"; import TuneIcon from '@mui/icons-material/Tune'; - -/** - * Creates a styled TableCell component. - * @param {object} theme - The theme object. - * @returns {JSX.Element} The styled TableCell component. - */ -const StyledTableCell = styled(TableCell)(({ theme }) => ({ - [`&.${tableCellClasses.head}`]: { - backgroundColor: theme.palette.action.hover, - color: theme.palette.common.black, - }, - [`&.${tableCellClasses.body}`]: { - fontSize: 14, - }, -})); - -/** - * Creates a styled TableRow component. - * @param {object} theme - The theme object. - * @returns {JSX.Element} The styled TableRow component. - */ -const StyledTableRow = styled(TableRow)(({ theme }) => ({ - '&:nth-of-type(odd)': { - backgroundColor: theme.palette.action.hover, - }, - '&:nth-of-type(even)': { - backgroundColor: theme.palette.common.white, - }, - '&:last-child td, &:last-child th': { - border: 0, - }, -})); +import IncidentHistoryTable from '../../Components/StatusTable'; // Make sure to import the correct path to your IncidentHistoryTable component const filterOptions = createFilterOptions({ matchFrom: 'start', stringify: (option) => option.title, }); - const titles = [ { title: 'Down' }, { title: 'Cannot resolve' }, { title: 'Clear / show all' }, ]; -/** - * Creates a data object for the table row. - * @param {JSX.Element} name - The status label JSX element. - * @param {string} date - The date and time string. - * @param {string} message - The message string. - * @returns {object} The data object containing name, date, and message. - */ -function createData(name, date, message) { - return { name, date, message }; -} - -/** - * Customized table component displaying incident history. - * @returns {JSX.Element} The JSX element representing the customized table. - */ -export default function CustomizedTables() { - const theme = useTheme(); - - const rows = [ - createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), - createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), - createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), - createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), - createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), - ]; - - return ( - - - - Incident History - - - - - - - - Status - Date & Time - Message - - - - {rows.map((row, index) => ( - - - {row.name} - - {row.date} - {row.message} - - ))} - -
- - - ); -} - /** * Filter component with autocomplete for status filtering. * @returns {JSX.Element} The JSX element representing the filter component. @@ -165,3 +55,33 @@ function Filter() { /> ); } + +/** + * Customized table component displaying incident history with a filter. + * @returns {JSX.Element} The JSX element representing the customized table with a filter. + */ +export default function CustomizedTables() { + const theme = useTheme(); + + return ( + + + + Incident History + + + + + + ); +} From cb510ef56f9300faca0f0ba2a7c648aec276bdfb Mon Sep 17 00:00:00 2001 From: M M Date: Thu, 11 Jul 2024 11:18:19 -0700 Subject: [PATCH 03/10] Got rid of extra text at the top. --- Client/src/Components/StatusTable/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/Client/src/Components/StatusTable/index.jsx b/Client/src/Components/StatusTable/index.jsx index 9b8f752e8..af2081f04 100644 --- a/Client/src/Components/StatusTable/index.jsx +++ b/Client/src/Components/StatusTable/index.jsx @@ -82,7 +82,6 @@ export default function IncidentHistoryTable() { }} > - Incident History From 9e0719a8f9f57bbb3fec4b61e115dea531fab88a Mon Sep 17 00:00:00 2001 From: M M Date: Thu, 11 Jul 2024 11:19:45 -0700 Subject: [PATCH 04/10] Got rid of extra typography code. --- Client/src/Components/StatusTable/index.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/Client/src/Components/StatusTable/index.jsx b/Client/src/Components/StatusTable/index.jsx index af2081f04..108a9f1dd 100644 --- a/Client/src/Components/StatusTable/index.jsx +++ b/Client/src/Components/StatusTable/index.jsx @@ -81,8 +81,6 @@ export default function IncidentHistoryTable() { }, }} > - -
From 01ac1f0bb9c940d12185967e53c9f42aa9cbfc81 Mon Sep 17 00:00:00 2001 From: M M Date: Thu, 11 Jul 2024 11:21:43 -0700 Subject: [PATCH 05/10] Changed the name of the component to be more meaningful. --- Client/src/Components/StatusTable/index.jsx | 2 +- Client/src/Pages/Incidents/index.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Client/src/Components/StatusTable/index.jsx b/Client/src/Components/StatusTable/index.jsx index 108a9f1dd..11632b588 100644 --- a/Client/src/Components/StatusTable/index.jsx +++ b/Client/src/Components/StatusTable/index.jsx @@ -58,7 +58,7 @@ function createData(name, date, message) { * Customized table component displaying incident history. * @returns {JSX.Element} The JSX element representing the customized table. */ -export default function IncidentHistoryTable() { +export default function StatusTable() { const theme = useTheme(); const rows = [ diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 30c56f661..45ee052f1 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -5,7 +5,7 @@ import { useTheme } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import TuneIcon from '@mui/icons-material/Tune'; -import IncidentHistoryTable from '../../Components/StatusTable'; // Make sure to import the correct path to your IncidentHistoryTable component +import StatusTable from '../../Components/StatusTable'; // Make sure to import the correct path to your IncidentHistoryTable component const filterOptions = createFilterOptions({ matchFrom: 'start', @@ -81,7 +81,7 @@ export default function CustomizedTables() { - + ); } From be8651076a18482ab49493e4cc10515b53d7474d Mon Sep 17 00:00:00 2001 From: M M Date: Thu, 11 Jul 2024 11:31:23 -0700 Subject: [PATCH 06/10] Got rid of extra imports. --- Client/src/Components/StatusTable/index.jsx | 2 -- Client/src/Pages/Incidents/index.jsx | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/Client/src/Components/StatusTable/index.jsx b/Client/src/Components/StatusTable/index.jsx index 11632b588..c45cb8012 100644 --- a/Client/src/Components/StatusTable/index.jsx +++ b/Client/src/Components/StatusTable/index.jsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { styled, useTheme } from '@mui/material/styles'; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; @@ -8,7 +7,6 @@ import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; import { StatusLabel } from "../../Components/Label/"; /** diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 45ee052f1..ba17cadfa 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -5,7 +5,7 @@ import { useTheme } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import TuneIcon from '@mui/icons-material/Tune'; -import StatusTable from '../../Components/StatusTable'; // Make sure to import the correct path to your IncidentHistoryTable component +import StatusTable from '../../Components/StatusTable'; const filterOptions = createFilterOptions({ matchFrom: 'start', From a617b5f27317e463e9b31995b3846c132263f7e9 Mon Sep 17 00:00:00 2001 From: M M Date: Thu, 11 Jul 2024 11:37:55 -0700 Subject: [PATCH 07/10] Give the table the arbitrary prop data functionality. --- Client/src/Components/StatusTable/index.jsx | 35 +++++++++------------ Client/src/Pages/Incidents/index.jsx | 13 ++++++-- 2 files changed, 25 insertions(+), 23 deletions(-) diff --git a/Client/src/Components/StatusTable/index.jsx b/Client/src/Components/StatusTable/index.jsx index c45cb8012..cebaa7a35 100644 --- a/Client/src/Components/StatusTable/index.jsx +++ b/Client/src/Components/StatusTable/index.jsx @@ -1,3 +1,5 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; import { styled, useTheme } from '@mui/material/styles'; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; @@ -41,32 +43,15 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ }, })); -/** - * Creates a data object for the table row. - * @param {JSX.Element} name - The status label JSX element. - * @param {string} date - The date and time string. - * @param {string} message - The message string. - * @returns {object} The data object containing name, date, and message. - */ -function createData(name, date, message) { - return { name, date, message }; -} - /** * Customized table component displaying incident history. + * @param {object} props - The props object. + * @param {array} props.data - The array of data objects containing name, date, and message. * @returns {JSX.Element} The JSX element representing the customized table. */ -export default function StatusTable() { +export default function StatusTable({ data }) { const theme = useTheme(); - const rows = [ - createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), - createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), - createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), - createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), - createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), - ]; - return ( - {rows.map((row, index) => ( + {data.map((row, index) => ( {row.name} @@ -104,3 +89,11 @@ export default function StatusTable() { ); } + +StatusTable.propTypes = { + data: PropTypes.arrayOf(PropTypes.shape({ + name: PropTypes.node.isRequired, + date: PropTypes.string.isRequired, + message: PropTypes.string.isRequired, + })).isRequired, +}; diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index ba17cadfa..599950eea 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -5,7 +5,8 @@ import { useTheme } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import TuneIcon from '@mui/icons-material/Tune'; -import StatusTable from '../../Components/StatusTable'; +import StatusTable from '../../Components/StatusTable'; +import { StatusLabel } from "../../Components/Label/"; const filterOptions = createFilterOptions({ matchFrom: 'start', @@ -56,6 +57,14 @@ function Filter() { ); } +const sampleData = [ + { name: , date: '2024-03-14 21:41:09', message: 'HTTP 350 - NOK' }, + { name: , date: '2024-03-14 21:41:09', message: 'timeout of 48000ms exceeded' }, + { name: , date: '2024-03-14 21:41:09', message: 'timeout of 48000ms exceeded' }, + { name: , date: '2024-03-14 21:41:09', message: 'timeout of 48000ms exceeded' }, + { name: , date: '2024-03-14 21:41:09', message: 'HTTP 350 - NOK' }, +]; + /** * Customized table component displaying incident history with a filter. * @returns {JSX.Element} The JSX element representing the customized table with a filter. @@ -81,7 +90,7 @@ export default function CustomizedTables() { - + ); } From 14bd0da891fa1f19606d85fff697f1a639153898 Mon Sep 17 00:00:00 2001 From: M M Date: Thu, 11 Jul 2024 11:38:53 -0700 Subject: [PATCH 08/10] Get rid of unnecessary imports. --- Client/src/Components/StatusTable/index.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/Client/src/Components/StatusTable/index.jsx b/Client/src/Components/StatusTable/index.jsx index cebaa7a35..71d2b7641 100644 --- a/Client/src/Components/StatusTable/index.jsx +++ b/Client/src/Components/StatusTable/index.jsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import PropTypes from 'prop-types'; import { styled, useTheme } from '@mui/material/styles'; import Table from '@mui/material/Table'; @@ -9,7 +8,6 @@ import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; -import { StatusLabel } from "../../Components/Label/"; /** * Creates a styled TableCell component. From c9a3f54a658c8be749dcb92619434052c8f2d73b Mon Sep 17 00:00:00 2001 From: M M Date: Thu, 11 Jul 2024 13:20:15 -0700 Subject: [PATCH 09/10] Table now renders an arbitrary number of columns. --- Client/src/Components/StatusTable/index.jsx | 46 +++++++++++++-------- Client/src/Pages/Incidents/index.jsx | 8 +++- 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/Client/src/Components/StatusTable/index.jsx b/Client/src/Components/StatusTable/index.jsx index 71d2b7641..ffe0b6e8a 100644 --- a/Client/src/Components/StatusTable/index.jsx +++ b/Client/src/Components/StatusTable/index.jsx @@ -44,10 +44,11 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ /** * Customized table component displaying incident history. * @param {object} props - The props object. - * @param {array} props.data - The array of data objects containing name, date, and message. + * @param {array} props.data - The array of data objects containing JSX elements for name, and strings for date and message. + * @param {array} props.columns - The array of column headers and alignments. * @returns {JSX.Element} The JSX element representing the customized table. */ -export default function StatusTable({ data }) { +export default function StatusTable({ data, columns }) { const theme = useTheme(); return ( @@ -66,19 +67,27 @@ export default function StatusTable({ data }) {
- Status - Date & Time - Message + {columns.map((column, index) => ( + + {column.header} + + ))} - {data.map((row, index) => ( - - - {row.name} - - {row.date} - {row.message} + {data.map((row, rowIndex) => ( + + {columns.map((column, colIndex) => ( + + {column.id === 'name' ? ( +
+ {row.name} +
+ ) : ( + row[column.id] + )} + + ))} ))} @@ -89,9 +98,12 @@ export default function StatusTable({ data }) { } StatusTable.propTypes = { - data: PropTypes.arrayOf(PropTypes.shape({ - name: PropTypes.node.isRequired, - date: PropTypes.string.isRequired, - message: PropTypes.string.isRequired, - })).isRequired, + data: PropTypes.arrayOf(PropTypes.object).isRequired, + columns: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string.isRequired, + header: PropTypes.node.isRequired, + align: PropTypes.oneOf(['left', 'right', 'center']), + }) + ).isRequired, }; diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 599950eea..4bb75a53d 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -65,6 +65,12 @@ const sampleData = [ { name: , date: '2024-03-14 21:41:09', message: 'HTTP 350 - NOK' }, ]; +const columns = [ + { id: 'name', header: 'Status' }, + { id: 'date', header: 'Date & Time' }, + { id: 'message', header: 'Message' }, +]; + /** * Customized table component displaying incident history with a filter. * @returns {JSX.Element} The JSX element representing the customized table with a filter. @@ -90,7 +96,7 @@ export default function CustomizedTables() { - + ); } From 9a99f89b89cf7d1d58406ec692a5fa4f7bdc859e Mon Sep 17 00:00:00 2001 From: M M Date: Thu, 11 Jul 2024 13:35:47 -0700 Subject: [PATCH 10/10] Provided optional pagination for the table. --- Client/src/Components/StatusTable/index.jsx | 41 ++++++++++++--------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/Client/src/Components/StatusTable/index.jsx b/Client/src/Components/StatusTable/index.jsx index ffe0b6e8a..9546d5742 100644 --- a/Client/src/Components/StatusTable/index.jsx +++ b/Client/src/Components/StatusTable/index.jsx @@ -1,3 +1,4 @@ +import React from 'react'; import PropTypes from 'prop-types'; import { styled, useTheme } from '@mui/material/styles'; import Table from '@mui/material/Table'; @@ -8,12 +9,8 @@ import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; +import Pagination from '../../Components/Pagination'; -/** - * Creates a styled TableCell component. - * @param {object} theme - The theme object. - * @returns {JSX.Element} The styled TableCell component. - */ const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { backgroundColor: theme.palette.action.hover, @@ -24,11 +21,6 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({ }, })); -/** - * Creates a styled TableRow component. - * @param {object} theme - The theme object. - * @returns {JSX.Element} The styled TableRow component. - */ const StyledTableRow = styled(TableRow)(({ theme }) => ({ '&:nth-of-type(odd)': { backgroundColor: theme.palette.action.hover, @@ -41,15 +33,21 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ }, })); -/** - * Customized table component displaying incident history. - * @param {object} props - The props object. - * @param {array} props.data - The array of data objects containing JSX elements for name, and strings for date and message. - * @param {array} props.columns - The array of column headers and alignments. - * @returns {JSX.Element} The JSX element representing the customized table. - */ +const itemsPerPage = 5; // Number of items per page + export default function StatusTable({ data, columns }) { const theme = useTheme(); + const [currentPage, setCurrentPage] = React.useState(1); + + const onPageChange = (page) => { + setCurrentPage(page); + }; + + // Calculate total pages based on data length and items per page + const totalPages = Math.ceil(data.length / itemsPerPage); + + // Slice data based on current page and items per page + const paginatedData = data.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage); return ( - {data.map((row, rowIndex) => ( + {paginatedData.map((row, rowIndex) => ( {columns.map((column, colIndex) => ( @@ -93,6 +91,13 @@ export default function StatusTable({ data, columns }) {
+ {totalPages > 1 && ( + + )} ); }