mirror of
https://github.com/bluewave-labs/Checkmate.git
synced 2026-02-16 22:39:17 -06:00
109 lines
4.0 KiB
JavaScript
109 lines
4.0 KiB
JavaScript
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(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
|
|
createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
|
|
createData(<StatusLabel status="Cannot resolve" customStyles={{ backgroundColor: '#f2f4f7', borderColor: '#d2d6de', color: '#344054' }} />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
|
|
createData(<StatusLabel status="Cannot resolve" customStyles={{ backgroundColor: '#f2f4f7', borderColor: '#d2d6de', color: '#344054' }} />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
|
|
createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
|
|
];
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
marginTop: theme.spacing(4),
|
|
marginX: 'auto',
|
|
width: '80%',
|
|
paddingX: theme.spacing(6),
|
|
[theme.breakpoints.down('md')]: {
|
|
width: '100%',
|
|
},
|
|
}}
|
|
>
|
|
<TableContainer component={Paper}>
|
|
<Table sx={{ minWidth: 700 }} aria-label="customized table">
|
|
<TableHead>
|
|
<TableRow>
|
|
<StyledTableCell>Status</StyledTableCell>
|
|
<StyledTableCell align="right">Date & Time</StyledTableCell>
|
|
<StyledTableCell align="right">Message</StyledTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{rows.map((row, index) => (
|
|
<StyledTableRow key={index}>
|
|
<StyledTableCell component="th" scope="row">
|
|
{row.name}
|
|
</StyledTableCell>
|
|
<StyledTableCell align="right">{row.date}</StyledTableCell>
|
|
<StyledTableCell align="right">{row.message}</StyledTableCell>
|
|
</StyledTableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</Box>
|
|
);
|
|
}
|