84 lines
1.8 KiB
TypeScript
84 lines
1.8 KiB
TypeScript
import { FC } from "react";
|
|
import { Box, Grid } from "@mui/material";
|
|
import { DataGridPro } from "@mui/x-data-grid-pro";
|
|
import { useTranslate } from "react-polyglot";
|
|
|
|
interface RawDataViewerProps {
|
|
rows: any[];
|
|
height: number;
|
|
}
|
|
|
|
export const RawDataViewer: FC<RawDataViewerProps> = ({ rows, height }) => {
|
|
const t = useTranslate();
|
|
const columns = [
|
|
{
|
|
field: "date",
|
|
headerName: t("date"),
|
|
editable: false,
|
|
flex: 0.7,
|
|
valueFormatter: ({ value }: any) => new Date(value).toLocaleDateString(),
|
|
},
|
|
{
|
|
field: "incident",
|
|
headerName: t("incident"),
|
|
editable: false,
|
|
flex: 1,
|
|
},
|
|
{
|
|
field: "technology",
|
|
headerName: t("technology"),
|
|
editable: false,
|
|
flex: 0.8,
|
|
},
|
|
{
|
|
field: "targeted_group",
|
|
headerName: t("targetedGroup"),
|
|
editable: false,
|
|
flex: 1.3,
|
|
},
|
|
{
|
|
field: "country",
|
|
headerName: t("country"),
|
|
editable: false,
|
|
flex: 1,
|
|
},
|
|
{
|
|
field: "region",
|
|
headerName: t("subregion"),
|
|
editable: false,
|
|
flex: 1,
|
|
},
|
|
{
|
|
field: "continent",
|
|
headerName: t("continent"),
|
|
editable: false,
|
|
flex: 1,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Grid item xs={12}>
|
|
<Box
|
|
sx={{ width: "100%", height }}
|
|
onClick={(e: any) => e.stopPropagation()}
|
|
>
|
|
<Grid container direction="column" spacing={2}>
|
|
<Grid item>
|
|
<DataGridPro
|
|
sx={{ width: "100%", height }}
|
|
rows={rows}
|
|
columns={columns}
|
|
density="compact"
|
|
pageSizeOptions={[100]}
|
|
disableRowSelectionOnClick
|
|
hideFooter
|
|
disableColumnMenu
|
|
scrollbarSize={10}
|
|
disableVirtualization
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
</Grid>
|
|
);
|
|
};
|