From c2b47e5cc41eb58102e2baad1332db774579910b Mon Sep 17 00:00:00 2001 From: M M Date: Tue, 2 Jul 2024 20:24:51 -0700 Subject: [PATCH 1/6] Placed the TableContainer in a box to better match figma design. --- Client/src/Pages/Incidents/index.jsx | 73 ++++++++++++++++------------ 1 file changed, 43 insertions(+), 30 deletions(-) diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index a2cb59517..54e857b0d 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -1,4 +1,4 @@ -import { styled } from '@mui/material/styles'; +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'; @@ -6,12 +6,12 @@ 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 { StatusLabel } from "../../Components/Label/"; - const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { - backgroundColor: theme.palette.action.hover, + backgroundColor: theme.palette.action.hover, color: theme.palette.common.black, }, [`&.${tableCellClasses.body}`]: { @@ -21,18 +21,18 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({ const StyledTableRow = styled(TableRow)(({ theme }) => ({ '&:nth-of-type(1)': { - backgroundColor: theme.palette.action.hover, + backgroundColor: theme.palette.action.hover, }, '&:nth-of-type(n+1)': { - backgroundColor: theme.palette.common.white, + backgroundColor: theme.palette.common.white, }, '&:last-child td, &:last-child th': { border: 0, }, })); -function createData(name, calories, fat, carbs, protein) { - return { name, calories, fat, carbs, protein }; +function createData(name, date, message) { + return { name, date, message }; } const rows = [ @@ -43,30 +43,43 @@ const rows = [ createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), ]; - export default function CustomizedTables() { + const theme = useTheme(); + return ( - - - - - Status - Date & Time - Message - - - - {rows.map((row, index) => ( - - - {row.name} - - {row.calories} - {row.fat} - - ))} - -
- + + + + + + Status + Date & Time + Message + + + + {rows.map((row, index) => ( + + + {row.name} + + {row.date} + {row.message} + + ))} + +
+ + ); } From c9ca639f237644e7bc902d9b27ecdd6e67d4bb98 Mon Sep 17 00:00:00 2001 From: M M Date: Tue, 2 Jul 2024 20:43:39 -0700 Subject: [PATCH 2/6] Added the filter by status dropdown to the page. --- Client/src/Pages/Incidents/index.jsx | 33 ++++++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 54e857b0d..1246962cd 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -1,3 +1,5 @@ +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'; @@ -20,10 +22,10 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({ })); const StyledTableRow = styled(TableRow)(({ theme }) => ({ - '&:nth-of-type(1)': { + '&:nth-of-type(odd)': { backgroundColor: theme.palette.action.hover, }, - '&:nth-of-type(n+1)': { + '&:nth-of-type(even)': { backgroundColor: theme.palette.common.white, }, '&:last-child td, &:last-child th': { @@ -31,6 +33,17 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ }, })); +const filterOptions = createFilterOptions({ + matchFrom: 'start', + stringify: (option) => option.title, +}); + +const top100Films = [ + { title: 'The Shawshank Redemption', year: 1994 }, + { title: 'The Dark Knight', year: 2008 }, + { title: '12 Angry Men', year: 1957 }, +]; + function createData(name, date, message) { return { name, date, message }; } @@ -58,6 +71,9 @@ export default function CustomizedTables() { }, }} > + + + @@ -83,3 +99,16 @@ export default function CustomizedTables() { ); } + +function Filter() { + return ( + option.title} + filterOptions={filterOptions} + sx={{ width: 300 }} + renderInput={(params) => } + /> + ); +} From 8453542777003bdec76fc0de2e62132c26c3bbf7 Mon Sep 17 00:00:00 2001 From: M M Date: Tue, 2 Jul 2024 20:46:28 -0700 Subject: [PATCH 3/6] Got rid of the adornment at the end. --- Client/src/Pages/Incidents/index.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 1246962cd..0e11bc237 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -1,3 +1,4 @@ +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'; @@ -108,7 +109,14 @@ function Filter() { getOptionLabel={(option) => option.title} filterOptions={filterOptions} sx={{ width: 300 }} - renderInput={(params) => } + disableClearable // This disables the clearable (x) button + renderInput={(params) => ( + + )} /> ); } From f7e8e69168f11b9d326231674fde5a43f746597b Mon Sep 17 00:00:00 2001 From: M M Date: Tue, 2 Jul 2024 21:07:15 -0700 Subject: [PATCH 4/6] Added icon to filter by status dropdown. --- Client/src/Pages/Incidents/index.jsx | 35 ++++++++++++++++++++-------- 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 0e11bc237..adaad7849 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -11,6 +11,7 @@ import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; import { StatusLabel } from "../../Components/Label/"; +import TuneIcon from '@mui/icons-material/Tune'; // Import TuneIcon const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { @@ -39,10 +40,10 @@ const filterOptions = createFilterOptions({ stringify: (option) => option.title, }); -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, +const titles = [ + { title: 'Down' }, + { title: 'Cannot resolve'}, + { title: 'Clear / show all'}, ]; function createData(name, date, message) { @@ -72,7 +73,7 @@ export default function CustomizedTables() { }, }} > - + @@ -105,16 +106,30 @@ function Filter() { return ( option.title} filterOptions={filterOptions} - sx={{ width: 300 }} - disableClearable // This disables the clearable (x) button + sx={{ + width: 170, // Adjust width as needed + '& .MuiAutocomplete-inputRoot': { + height: '50px', // Adjust the height of the input field + }, + '& .MuiAutocomplete-listbox': { + maxHeight: '200px', // Adjust the max height of the dropdown list + }, + }} + disableClearable renderInput={(params) => ( + + Filter by status + + } + InputProps={{ ...params.InputProps, endAdornment: null }} /> )} /> From 99f460c80a75aa6ee6e2ca109ec6b9489bf29e26 Mon Sep 17 00:00:00 2001 From: M M Date: Tue, 2 Jul 2024 21:13:29 -0700 Subject: [PATCH 5/6] Added header. --- Client/src/Pages/Incidents/index.jsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index adaad7849..d645afc6d 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -10,8 +10,9 @@ 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/"; -import TuneIcon from '@mui/icons-material/Tune'; // Import TuneIcon +import TuneIcon from '@mui/icons-material/Tune'; const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { @@ -73,7 +74,10 @@ export default function CustomizedTables() { }, }} > - + + + Incident History + @@ -110,12 +114,12 @@ function Filter() { getOptionLabel={(option) => option.title} filterOptions={filterOptions} sx={{ - width: 170, // Adjust width as needed + width: 170, '& .MuiAutocomplete-inputRoot': { - height: '50px', // Adjust the height of the input field + height: '50px', }, '& .MuiAutocomplete-listbox': { - maxHeight: '200px', // Adjust the max height of the dropdown list + maxHeight: '200px', }, }} disableClearable From 971518d70e0d8a4124bdb38b93f3f86eae15cb46 Mon Sep 17 00:00:00 2001 From: M M Date: Tue, 2 Jul 2024 21:19:44 -0700 Subject: [PATCH 6/6] Added JSDocs. --- Client/src/Pages/Incidents/index.jsx | 58 ++++++++++++++++++++-------- 1 file changed, 42 insertions(+), 16 deletions(-) diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index d645afc6d..b9778cbe9 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -10,10 +10,15 @@ 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 Typography from '@mui/material/Typography'; import { StatusLabel } from "../../Components/Label/"; -import TuneIcon from '@mui/icons-material/Tune'; +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, @@ -24,6 +29,11 @@ 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,27 +51,39 @@ const filterOptions = createFilterOptions({ stringify: (option) => option.title, }); + const titles = [ { title: 'Down' }, - { title: 'Cannot resolve'}, - { title: 'Clear / show all'}, + { 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 }; } -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'), -]; - +/** + * 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 ( option.title} filterOptions={filterOptions} sx={{ - width: 170, + width: 170, '& .MuiAutocomplete-inputRoot': { height: '50px', }, '& .MuiAutocomplete-listbox': { - maxHeight: '200px', + maxHeight: '200px', }, }} disableClearable renderInput={(params) => ( - + Filter by status }