From 322ad651b098ffb1bcd1f581e23ec4c0b290f17f Mon Sep 17 00:00:00 2001 From: M M Date: Thu, 11 Jul 2024 11:16:43 -0700 Subject: [PATCH] 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 + + + + + + ); +}