From e98e23b638e08a923f2685f0e1f3e6ceb7769f05 Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 26 Jun 2023 22:06:44 +0200 Subject: [PATCH] added log card for system and grouptasks --- src/Components/LogCard/index.js | 199 ++++++++++++++++++++++++++ src/Pages/AdminArea/Logs/index.js | 4 +- src/Pages/AdminArea/Roles/index.js | 4 +- src/Pages/GroupTasks/History/index.js | 4 +- src/Pages/Scanners/index.js | 4 +- src/utils.js | 5 + 6 files changed, 213 insertions(+), 7 deletions(-) create mode 100644 src/Components/LogCard/index.js diff --git a/src/Components/LogCard/index.js b/src/Components/LogCard/index.js new file mode 100644 index 0000000..6d1868f --- /dev/null +++ b/src/Components/LogCard/index.js @@ -0,0 +1,199 @@ +import { + ArrowLeftOutlined, + ArrowRightOutlined, + ReloadOutlined, +} from "@ant-design/icons"; +import { Card, Checkbox, Space, Spin, Tooltip } from "antd"; +import { useEffect, useState } from "react"; +import { + Constants, + FormatDatetime, + getUserSessionFromLocalStorage, + handleUnauthorizedStatus, +} from "../../utils"; + +export default function LogCard({ type }) { + const [checkboxInfoChecked, setCheckboxInfoChecked] = useState(true); + const [checkboxErrorChecked, setCheckboxErrorChecked] = useState(true); + + const getDate = () => { + const today = new Date(); + + return `${today.getDate()}-${today.getMonth() + 1}-${today.getFullYear()}`; + }; + + const [logData, setLogData] = useState({ Logs: [], Dates: [] }); + const [selectedDate, setSelectedDate] = useState(getDate()); + const [loadingSpinner, setLoadingSpinner] = useState(true); + + useEffect(() => { + loadLogs(selectedDate); + }, [selectedDate]); + + const loadLogs = (date) => { + setLoadingSpinner(true); + + fetch( + `${Constants.API_ADDRESS}/log?type=${ + type === "grouptasks" ? "g" : "s" + }&date=${date}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + "X-Authorization": getUserSessionFromLocalStorage(), + }, + } + ) + .then((res) => { + handleUnauthorizedStatus(res.status); + return res.json(); + }) + .then((data) => { + setLoadingSpinner(false); + + if (data.Logs === null) { + data.Logs = []; + } + + setLogData(data); + }) + .catch((errStatus) => console.log("error", errStatus)); + }; + + const inBrackets = (content, contentColor) => { + return ( + <> + [ + {content} + ] + + ); + }; + + const getMessageType = (logType) => { + if (logType === Constants.SYSTEM_LOG_TYPE.INFO) { + return inBrackets("INFO", "#27ae60"); + } + if (logType === Constants.SYSTEM_LOG_TYPE.DEBUG) { + return inBrackets("DEB", "#e67e22"); + } + if (logType === Constants.SYSTEM_LOG_TYPE.ERROR) { + return inBrackets("ERR", "#e74c3c"); + } + return ""; + }; + + return ( + + setCheckboxInfoChecked(e.target.checked)} + > + INFO + + setCheckboxErrorChecked(e.target.checked)} + > + ERROR + + + {logData.Dates.findIndex((date) => date === selectedDate) > 0 ? ( + + + setSelectedDate( + logData.Dates[ + logData.Dates.findIndex((date) => date === selectedDate) - + 1 + ] + ) + } + /> + + ) : ( + + )} + + {logData.Dates.findIndex((date) => date === selectedDate) + 1 < + logData.Dates.length ? ( + + + setSelectedDate( + logData.Dates[ + logData.Dates.findIndex((date) => date === selectedDate) + + 1 + ] + ) + } + /> + + ) : ( + + )} + + + loadLogs(selectedDate)} /> + + + } + style={{ + height: "97vh", + overflow: "hidden", + width: "100%", + }} + > + {!loadingSpinner ? ( +
+ {logData.Logs.filter((log) => { + return ( + (log.Type === 0 && checkboxInfoChecked) || + (log.Type === 1 && checkboxErrorChecked) + ); + }).map((log, i) => { + if ( + (log.Type === 0 && !checkboxInfoChecked) || + (log.Type === 1 && !checkboxErrorChecked) + ) { + return ""; + } + + return ( +
+ {inBrackets(FormatDatetime(log.Time), "#7f8c8d")}{" "} + {getMessageType(log.Type)} + {log.Message} +
+ ); + })} +
+ ) : ( +
+ +
+ )} + + ); +} diff --git a/src/Pages/AdminArea/Logs/index.js b/src/Pages/AdminArea/Logs/index.js index b3095bc..8feec43 100644 --- a/src/Pages/AdminArea/Logs/index.js +++ b/src/Pages/AdminArea/Logs/index.js @@ -1,3 +1,5 @@ +import LogCard from "../../../Components/LogCard"; + export default function AdminAreaLogs() { - return

Logs

; + return ; } diff --git a/src/Pages/AdminArea/Roles/index.js b/src/Pages/AdminArea/Roles/index.js index 5701edf..c08698a 100644 --- a/src/Pages/AdminArea/Roles/index.js +++ b/src/Pages/AdminArea/Roles/index.js @@ -366,7 +366,7 @@ function Role({ treeData, role, webSocketContext, notificationApi }) { { key: "2", extra: editMode ? ( - + {hasPermission( webSocketContext.User.Permissions, Constants.PERMISSIONS.ADMIN_AREA.ROLES.DELETE_ROLE @@ -440,7 +440,7 @@ function Role({ treeData, role, webSocketContext, notificationApi }) { ) : ( - + diff --git a/src/Pages/GroupTasks/History/index.js b/src/Pages/GroupTasks/History/index.js index 7d703cb..1dbd0c5 100644 --- a/src/Pages/GroupTasks/History/index.js +++ b/src/Pages/GroupTasks/History/index.js @@ -1,3 +1,5 @@ +import LogCard from "../../../Components/LogCard"; + export default function GroupTasksHistory() { - return

GroupTasksHistory

; + return ; } diff --git a/src/Pages/Scanners/index.js b/src/Pages/Scanners/index.js index f10b895..4a53e0c 100644 --- a/src/Pages/Scanners/index.js +++ b/src/Pages/Scanners/index.js @@ -1,12 +1,10 @@ -import { Popconfirm, Space, Table, message } from "antd"; +import { Popconfirm, Space, Table } from "antd"; import { FormatDatetime, MyAvatar, SentMessagesCommands, WebSocketContext, getUserId, - getUserSessionFromLocalStorage, - handleUnauthorizedStatus, } from "../../utils"; import { useContext } from "react"; import { Link } from "react-router-dom"; diff --git a/src/utils.js b/src/utils.js index 55c7323..b57134a 100644 --- a/src/utils.js +++ b/src/utils.js @@ -70,6 +70,10 @@ export const Constants = { LOGS: "admin_area.logs", }, }, + SYSTEM_LOG_TYPE: { + INFO: 0, + ERROR: 1, + }, }; /* @@ -777,6 +781,7 @@ export function WebSocketProvider({ RoleId: body.RoleId, Username: body.Username, ConnectionStatus: body.ConnectionStatus, + Deactivated: body.Deactivated, }, ]); break;