mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-04-27 03:59:43 -05:00
Code Issues Packages Projects Releases Wiki Activity

Give the table the arbitrary prop data functionality.

Browse Source
This commit is contained in:
M M
2024-07-11 11:37:55 -07:00
parent be8651076a
commit a617b5f273
2 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Client/src/Components/StatusTable/index.jsx
+14 -21
View File
@@ -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(<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={{
@@ -89,7 +74,7 @@ export default function StatusTable() {
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, index) => (
{data.map((row, index) => (
<StyledTableRow key={index}>
<StyledTableCell component="th" scope="row">
{row.name}
@@ -104,3 +89,11 @@ export default function StatusTable() {
</Box>
);
}
StatusTable.propTypes = {
data: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.node.isRequired,
date: PropTypes.string.isRequired,
message: PropTypes.string.isRequired,
})).isRequired,
};
Client/src/Pages/Incidents/index.jsx
+11 -2
View File
@@ -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: <StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, date: '2024-03-14 21:41:09', message: 'HTTP 350 - NOK' },
{ name: <StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, date: '2024-03-14 21:41:09', message: 'timeout of 48000ms exceeded' },
{ name: <StatusLabel status="Cannot resolve" customStyles={{ backgroundColor: '#f2f4f7', borderColor: '#d2d6de', color: '#344054' }} />, date: '2024-03-14 21:41:09', message: 'timeout of 48000ms exceeded' },
{ name: <StatusLabel status="Cannot resolve" customStyles={{ backgroundColor: '#f2f4f7', borderColor: '#d2d6de', color: '#344054' }} />, date: '2024-03-14 21:41:09', message: 'timeout of 48000ms exceeded' },
{ name: <StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, 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() {
</Typography>
<Filter />
</Box>
<StatusTable />
<StatusTable data={sampleData} />
</Box>
);
}