mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-05-02 06:30:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Initial refactor

Browse Source
This commit is contained in:
Alex Holliday
2024-07-22 11:28:39 -07:00
parent ad76da14c9
commit aa939bfb52
1 changed files with 8 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Client/src/Pages/Incidents/index.jsx
+8 -178
View File
@@ -1,180 +1,10 @@
import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete";
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 { StatusLabel } from "../../Components/Label/";
import { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
const filterOptions = createFilterOptions({
matchFrom: "start",
stringify: (option) => option.title,
});
const Incidents = () => {
const monitorState = useSelector((state) => state.monitors);
console.log(monitorState);
return <div>Incidents</div>;
};
const titles = [
{ title: "Down" },
{ title: "Cannot resolve" },
{ title: "Clear / show all" },
];
/**
* Filter component with autocomplete for status filtering.
* @returns {JSX.Element} The JSX element representing the filter component.
*/
function Filter() {
return (
<Autocomplete
id="filter-demo"
options={titles}
getOptionLabel={(option) => option.title}
filterOptions={filterOptions}
sx={{
width: 170,
"& .MuiAutocomplete-inputRoot": {
height: "50px",
},
"& .MuiAutocomplete-listbox": {
maxHeight: "200px",
},
}}
disableClearable
renderInput={(params) => (
<TextField
{...params}
size="small"
label={
<React.Fragment>
<TuneIcon
sx={{ marginRight: "0.5rem", position: "relative", top: "6px" }}
/>
Filter by status
</React.Fragment>
}
InputProps={{ ...params.InputProps, endAdornment: null }}
/>
)}
/>
);
}
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",
},
];
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.
*/
export default function CustomizedTables() {
const theme = useTheme();
return (
<Box
sx={{
marginTop: theme.spacing(4),
marginX: "auto",
width: "80%",
paddingX: theme.spacing(6),
[theme.breakpoints.down("md")]: {
width: "100%",
},
}}
>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: theme.spacing(2),
}}
>
<Typography
variant="h6"
component="div"
sx={{ fontWeight: 600, fontSize: 16 }}
>
Incident History
</Typography>
<Filter />
</Box>
{/* TODO Replace with BasicTable */}
{/* <StatusTable data={sampleData} columns={columns} /> */}
</Box>
);
}
export default Incidents;