andrew.ng
/
ATC_SIMPLE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
BACKEND/app/ultils/helper.ts
View File

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

4
BACKEND/providers/socket_io_provider.ts
View File

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

150
FRONTEND/src/components/Drawer/DrawerLogs.tsx
View File

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