Update loading list log
This commit is contained in:
parent
0650e012d8
commit
9bc0f96afc
|
|
@ -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[]
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue