Update loading list log

This commit is contained in:
nguyentrungthat 2026-01-08 13:37:26 +07:00
parent 0650e012d8
commit 9bc0f96afc
3 changed files with 88 additions and 70 deletions

View File

@ -8,8 +8,8 @@ import axios from 'axios'
import moment from 'moment'
const mailTo = 'andrew.ng@apactech.io'
// const mailCC = ['ips@ipsupply.com.au', 'kay@ipsupply.com.au', 'joseph@apactech.io']
const mailCC = ''
const mailCC = ['ips@ipsupply.com.au', 'kay@ipsupply.com.au', 'joseph@apactech.io']
// const mailCC = ''
type DetectAI = {
status: string[]

View File

@ -294,8 +294,8 @@ export class WebSocketIo {
.map((f) => 'storage/system_logs/' + f)
io.to(socket.id).emit('list_logs', getListSystemLogs)
const listHistory = await this.getHistory(data?.stationId, data?.lineId)
io.to(socket.id).emit('list_histories', listHistory)
// const listHistory = await this.getHistory(data?.stationId, data?.lineId)
// io.to(socket.id).emit('list_histories', listHistory)
})
socket.on('get_content_log', async (data) => {

View File

@ -9,6 +9,7 @@ import {
ScrollArea,
Tooltip,
TextInput,
Loader,
} from "@mantine/core";
import { DateInput } from "@mantine/dates";
import { useEffect, useState } from "react";
@ -41,7 +42,7 @@ function DrawerLogs({
const [systemLogs, setSystemLogs] = useState<ISystemLog[]>([]);
const [isDownloadLog, setIsDownloadLog] = useState(false);
// const [testLogContent, setTestLogContent] = useState("");
// const [isLogModalOpen, setIsLogModalOpen] = useState(false);
const [loading, setLoading] = useState(true);
const [downloadName, setDownloadName] = useState("");
const [searchFileName, setSearchFileName] = useState("");
const [fromDate, setFromDate] = useState<Date | null>(null);
@ -67,6 +68,9 @@ function DrawerLogs({
path: file,
};
});
setTimeout(() => {
setLoading(false);
}, 1000);
setSystemLogs(
list.sort(
(a: ISystemLog, b: ISystemLog) =>
@ -211,75 +215,89 @@ function DrawerLogs({
</Grid>
</Box>
<ScrollArea h={"85vh"} style={{ marginTop: "15px" }}>
<Table
stickyHeader
striped
highlightOnHover
withRowBorders={true}
withTableBorder={true}
withColumnBorders={true}
>
<Table.Thead
{loading ? (
<Box
style={{
top: 1,
height: "10vh",
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<Table.Tr>
<Table.Th style={{ width: "50%" }}>File name</Table.Th>
<Table.Th style={{ width: "30%" }}>Created at</Table.Th>
<Table.Th style={{ width: "10%" }}></Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{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>
</Table.Td>
<Table.Td>
<Box
key={"action-" + element.fileName}
className={classes.optionIcon}
>
<IconEye
className={classes.viewIcon}
onClick={() => {
setTestLogContent("");
socket?.emit("get_content_log", {
line: { systemLogUrl: element.path },
});
setIsLogModalOpen(true);
}}
width={20}
/>
<IconDownload
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]
);
}}
width={20}
/>
</Box>
</Table.Td>
<Loader color="blue" />
</Box>
) : (
<Table
stickyHeader
striped
highlightOnHover
withRowBorders={true}
withTableBorder={true}
withColumnBorders={true}
>
<Table.Thead
style={{
top: 1,
}}
>
<Table.Tr>
<Table.Th style={{ width: "50%" }}>File name</Table.Th>
<Table.Th style={{ width: "30%" }}>Created at</Table.Th>
<Table.Th style={{ width: "10%" }}></Table.Th>
</Table.Tr>
))}
</Table.Tbody>
</Table>
</Table.Thead>
<Table.Tbody>
{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>
</Table.Td>
<Table.Td>
<Box
key={"action-" + element.fileName}
className={classes.optionIcon}
>
<IconEye
className={classes.viewIcon}
onClick={() => {
setTestLogContent("");
socket?.emit("get_content_log", {
line: { systemLogUrl: element.path },
});
setIsLogModalOpen(true);
}}
width={20}
/>
<IconDownload
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]
);
}}
width={20}
/>
</Box>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
)}
</ScrollArea>
</Grid.Col>
</Grid>