Update input search list logs
This commit is contained in:
Truong Vo
parent
cbbfd4b1df
commit
17e5aad8d9
|
|
@ -1,14 +1,6 @@
|
|||
import { useDisclosure } from "@mantine/hooks";
|
||||
import {
|
||||
Button,
|
||||
Box,
|
||||
Drawer,
|
||||
Grid,
|
||||
Table,
|
||||
Text,
|
||||
ScrollArea,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { Button, Box, Drawer, Grid, Table, Text, ScrollArea, Tooltip, TextInput } from "@mantine/core";
|
||||
import { DateInput } from "@mantine/dates";
|
||||
import { useEffect, useState } from "react";
|
||||
import type { ISystemLog } from "../untils/types";
|
||||
import { IconDownload, IconEye, IconInfoCircle } from "@tabler/icons-react";
|
||||
|
|
@ -36,6 +28,11 @@ function DrawerLogs({
|
|||
// const [testLogContent, setTestLogContent] = useState("");
|
||||
// const [isLogModalOpen, setIsLogModalOpen] = useState(false);
|
||||
const [downloadName, setDownloadName] = useState("");
|
||||
const [searchFileName, setSearchFileName] = useState("");
|
||||
const [fromDate, setFromDate] = useState<string | null>(null);
|
||||
const [toDate, setToDate] = useState<string | null>(null);
|
||||
|
||||
const [filteredLogs, setFilteredLogs] = useState<ISystemLog[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (opened) {
|
||||
|
|
@ -49,18 +46,12 @@ function DrawerLogs({
|
|||
const filename = file.replace(/^.*[\\/]/, "");
|
||||
const createAt = filename.match(/\d{8}/);
|
||||
return {
|
||||
fileName:
|
||||
file.split("/")[3] || file.split("/")[2] || file.split("/")[1],
|
||||
fileName: file.split("/")[3] || file.split("/")[2] || file.split("/")[1],
|
||||
createdAt: createAt ? createAt[0] : "N/A",
|
||||
path: file,
|
||||
};
|
||||
});
|
||||
setSystemLogs(
|
||||
list.sort(
|
||||
(a: ISystemLog, b: ISystemLog) =>
|
||||
parseInt(b.createdAt) - parseInt(a.createdAt)
|
||||
)
|
||||
);
|
||||
setSystemLogs(list.sort((a: ISystemLog, b: ISystemLog) => parseInt(b.createdAt) - parseInt(a.createdAt)));
|
||||
});
|
||||
}, [socket]);
|
||||
|
||||
|
|
@ -81,6 +72,42 @@ function DrawerLogs({
|
|||
}
|
||||
}, [testLogContent]);
|
||||
|
||||
useEffect(() => {
|
||||
// Chuẩn bị trước các giá trị search/date để tránh tính lại trong filter cho từng phần tử
|
||||
const trimmedSearch = searchFileName.trim().toLowerCase();
|
||||
const hasSearch = trimmedSearch.length > 0;
|
||||
const fromMoment = fromDate ? moment(fromDate, "DD/MM/YYYY").startOf("day") : null;
|
||||
const toMoment = toDate ? moment(toDate, "DD/MM/YYYY").endOf("day") : null;
|
||||
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
// Nếu không có filter nào, tránh filter tốn công, gán thẳng
|
||||
if (!hasSearch && !fromMoment && !toMoment) {
|
||||
setFilteredLogs(systemLogs);
|
||||
return;
|
||||
}
|
||||
|
||||
const next = systemLogs.filter((log) => {
|
||||
if (hasSearch && !log.fileName.toLowerCase().includes(trimmedSearch)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const logDate = moment(log.createdAt, "YYYYMMDD");
|
||||
if (fromMoment && !logDate.isSameOrAfter(fromMoment)) {
|
||||
return false;
|
||||
}
|
||||
if (toMoment && !logDate.isSameOrBefore(toMoment)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
setFilteredLogs(next);
|
||||
}, 500);
|
||||
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [searchFileName, fromDate, toDate, systemLogs]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Drawer
|
||||
|
|
@ -98,26 +125,38 @@ function DrawerLogs({
|
|||
<div>
|
||||
Format:
|
||||
<i style={{ marginLeft: "4px" }}>
|
||||
YYYYMMDD-AUTO-Session.{`{Station name}`}-{`{Station ID}`}-
|
||||
{`{Station IP}`}-{`{Line number}`}
|
||||
YYYYMMDD-AUTO-Session.{`{Station name}`}-{`{Station ID}`}-{`{Station IP}`}-{`{Line number}`}
|
||||
.log
|
||||
</i>
|
||||
</div>
|
||||
}
|
||||
position="right"
|
||||
>
|
||||
<Text
|
||||
fw={700}
|
||||
style={{ display: "flex", alignItems: "center", gap: "6px" }}
|
||||
>
|
||||
position="right">
|
||||
<Text fw={700} style={{ display: "flex", alignItems: "center", gap: "6px" }}>
|
||||
List Logs <IconInfoCircle color="#3bb7e9" fontSize={"12px"} />
|
||||
</Text>
|
||||
</Tooltip>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
}>
|
||||
<Grid>
|
||||
<Grid.Col span={12}>
|
||||
<Box mb="xs">
|
||||
<Grid gutter="xs">
|
||||
<Grid.Col span={6}>
|
||||
<TextInput
|
||||
placeholder="Search file name"
|
||||
value={searchFileName}
|
||||
onChange={(event) => setSearchFileName(event.currentTarget.value)}
|
||||
size="xs"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={3}>
|
||||
<DateInput value={fromDate} onChange={setFromDate} placeholder="From date" valueFormat="DD/MM/YYYY" size="xs" clearable />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={3}>
|
||||
<DateInput value={toDate} onChange={setToDate} placeholder="To date" valueFormat="DD/MM/YYYY" size="xs" clearable />
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
<ScrollArea h={"85vh"} style={{ marginBottom: "20px" }}>
|
||||
<Table
|
||||
stickyHeader
|
||||
|
|
@ -126,8 +165,7 @@ function DrawerLogs({
|
|||
highlightOnHover
|
||||
withRowBorders={true}
|
||||
withTableBorder={true}
|
||||
withColumnBorders={true}
|
||||
>
|
||||
withColumnBorders={true}>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th style={{ width: "50%" }}>File name</Table.Th>
|
||||
|
|
@ -136,19 +174,14 @@ function DrawerLogs({
|
|||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{systemLogs.map((element) => (
|
||||
{filteredLogs.map((element) => (
|
||||
<Table.Tr key={element.path}>
|
||||
<Table.Td>{element.fileName}</Table.Td>
|
||||
<Table.Td>
|
||||
<Text>
|
||||
{moment(element.createdAt).format("DD/MM/YYYY")}
|
||||
</Text>
|
||||
<Text>{moment(element.createdAt).format("DD/MM/YYYY")}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Box
|
||||
key={"action-" + element.fileName}
|
||||
className={classes.optionIcon}
|
||||
>
|
||||
<Box key={"action-" + element.fileName} className={classes.optionIcon}>
|
||||
<IconEye
|
||||
className={classes.viewIcon}
|
||||
onClick={() => {
|
||||
|
|
@ -161,21 +194,14 @@ function DrawerLogs({
|
|||
width={20}
|
||||
/>
|
||||
<IconDownload
|
||||
className={[
|
||||
classes.downloadIcon,
|
||||
isDownloadLog ? classes.isDisabled : "",
|
||||
].join(" ")}
|
||||
className={[classes.downloadIcon, isDownloadLog ? classes.isDisabled : ""].join(" ")}
|
||||
onClick={() => {
|
||||
socket?.emit("get_content_log", {
|
||||
line: { systemLogUrl: element.path },
|
||||
});
|
||||
setIsDownloadLog(true);
|
||||
setTestLogContent("");
|
||||
setDownloadName(
|
||||
element.path.split("/")[3] ||
|
||||
element.path.split("/")[2] ||
|
||||
element.path.split("/")[1]
|
||||
);
|
||||
setDownloadName(element.path.split("/")[3] || element.path.split("/")[2] || element.path.split("/")[1]);
|
||||
}}
|
||||
width={20}
|
||||
/>
|
||||
|
|
@ -208,8 +234,7 @@ function DrawerLogs({
|
|||
// color="green"
|
||||
onClick={() => {
|
||||
open();
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
List logs{" "}
|
||||
</Button>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in New Issue