feat: log page supports filter

This commit is contained in:
GyDi 2022-04-11 01:46:33 +08:00
parent 0445f9dfc2
commit 847d5f1b3b
No known key found for this signature in database
GPG Key ID: 1C95E0D3467B3084

View File

@ -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>
);