feat: log page supports filter
This commit is contained in:
parent
0445f9dfc2
commit
847d5f1b3b
@ -1,5 +1,6 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { useRecoilState } from "recoil";
|
||||
import { Button, Paper } from "@mui/material";
|
||||
import { Box, Button, MenuItem, Paper, Select, TextField } from "@mui/material";
|
||||
import { Virtuoso } from "react-virtuoso";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { atomLogData } from "../services/states";
|
||||
@ -10,6 +11,18 @@ const LogPage = () => {
|
||||
const { t } = useTranslation();
|
||||
const [logData, setLogData] = useRecoilState(atomLogData);
|
||||
|
||||
const [logState, setLogState] = useState("all");
|
||||
const [filterText, setFilterText] = useState("");
|
||||
|
||||
const filterLogs = useMemo(() => {
|
||||
return logData.filter((data) => {
|
||||
return (
|
||||
data.payload.includes(filterText) &&
|
||||
(logState === "all" ? true : data.type.includes(logState))
|
||||
);
|
||||
});
|
||||
}, [logData, logState, filterText]);
|
||||
|
||||
return (
|
||||
<BasePage
|
||||
title={t("Logs")}
|
||||
@ -25,13 +38,50 @@ const LogPage = () => {
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Paper sx={{ boxShadow: 2, height: "100%" }}>
|
||||
<Virtuoso
|
||||
initialTopMostItemIndex={999}
|
||||
data={logData}
|
||||
itemContent={(index, item) => <LogItem value={item} />}
|
||||
followOutput={"smooth"}
|
||||
/>
|
||||
<Paper sx={{ boxSizing: "border-box", boxShadow: 2, height: "100%" }}>
|
||||
<Box
|
||||
sx={{
|
||||
pt: 1,
|
||||
mb: 0.5,
|
||||
mx: "12px",
|
||||
height: "36px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
size="small"
|
||||
autoComplete="off"
|
||||
value={logState}
|
||||
onChange={(e) => setLogState(e.target.value)}
|
||||
sx={{ width: 120, mr: 1, '[role="button"]': { py: 0.65 } }}
|
||||
>
|
||||
<MenuItem value="all">ALL</MenuItem>
|
||||
<MenuItem value="info">INFO</MenuItem>
|
||||
<MenuItem value="warn">WARN</MenuItem>
|
||||
</Select>
|
||||
|
||||
<TextField
|
||||
hiddenLabel
|
||||
fullWidth
|
||||
size="small"
|
||||
autoComplete="off"
|
||||
variant="outlined"
|
||||
placeholder="Filter conditions"
|
||||
value={filterText}
|
||||
onChange={(e) => setFilterText(e.target.value)}
|
||||
sx={{ input: { py: 0.65, px: 1.25 } }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box height="calc(100% - 50px)">
|
||||
<Virtuoso
|
||||
initialTopMostItemIndex={999}
|
||||
data={filterLogs}
|
||||
itemContent={(index, item) => <LogItem value={item} />}
|
||||
followOutput={"smooth"}
|
||||
/>
|
||||
</Box>
|
||||
</Paper>
|
||||
</BasePage>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user