added log card for system and grouptasks

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 (
+      <>
+        <span style={{ color: "#95a5a6" }}>[</span>
+        <span style={{ color: contentColor }}>{content}</span>
+        <span style={{ color: "#95a5a6" }}>] </span>
+      </>
+    );
+  };
+
+  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 (
+    <Card
+      title={selectedDate}
+      extra={
+        <Space>
+          <Checkbox
+            checked={checkboxInfoChecked}
+            onChange={(e) => setCheckboxInfoChecked(e.target.checked)}
+          >
+            INFO
+          </Checkbox>
+          <Checkbox
+            checked={checkboxErrorChecked}
+            onChange={(e) => setCheckboxErrorChecked(e.target.checked)}
+          >
+            ERROR
+          </Checkbox>
+
+          {logData.Dates.findIndex((date) => date === selectedDate) > 0 ? (
+            <Tooltip title="Previous">
+              <ArrowLeftOutlined
+                onClick={() =>
+                  setSelectedDate(
+                    logData.Dates[
+                      logData.Dates.findIndex((date) => date === selectedDate) -
+                        1
+                    ]
+                  )
+                }
+              />
+            </Tooltip>
+          ) : (
+            <ArrowLeftOutlined
+              style={{
+                color: "rgba(0, 0, 0, 0.25)",
+                cursor: "not-allowed",
+              }}
+            />
+          )}
+
+          {logData.Dates.findIndex((date) => date === selectedDate) + 1 <
+          logData.Dates.length ? (
+            <Tooltip title="Next">
+              <ArrowRightOutlined
+                onClick={() =>
+                  setSelectedDate(
+                    logData.Dates[
+                      logData.Dates.findIndex((date) => date === selectedDate) +
+                        1
+                    ]
+                  )
+                }
+              />
+            </Tooltip>
+          ) : (
+            <ArrowRightOutlined
+              style={{
+                color: "rgba(0, 0, 0, 0.25)",
+                cursor: "not-allowed",
+              }}
+            />
+          )}
+
+          <Tooltip title="Reload">
+            <ReloadOutlined onClick={() => loadLogs(selectedDate)} />
+          </Tooltip>
+        </Space>
+      }
+      style={{
+        height: "97vh",
+        overflow: "hidden",
+        width: "100%",
+      }}
+    >
+      {!loadingSpinner ? (
+        <div style={{ height: "86vh", overflowY: "scroll" }}>
+          {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 (
+              <div key={i}>
+                {inBrackets(FormatDatetime(log.Time), "#7f8c8d")}{" "}
+                {getMessageType(log.Type)}
+                {log.Message}
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "80vh",
+          }}
+        >
+          <Spin size="large"></Spin>
+        </div>
+      )}
+    </Card>
+  );
+}

src/Pages/AdminArea/Logs/index.js

@@ -1,3 +1,5 @@
+import LogCard from "../../../Components/LogCard";
+
 export default function AdminAreaLogs() {
-  return <p>Logs</p>;
+  return <LogCard type="system" />;
 }

src/Pages/AdminArea/Roles/index.js

@@ -366,7 +366,7 @@ function Role({ treeData, role, webSocketContext, notificationApi }) {
         {
           key: "2",
           extra: editMode ? (
-            <Space key="spaceedit" style={{ paddingLeft: 10 }} size="small">
+            <Space key="spaceedit" style={{ paddingLeft: 10 }}>
               {hasPermission(
                 webSocketContext.User.Permissions,
                 Constants.PERMISSIONS.ADMIN_AREA.ROLES.DELETE_ROLE
@@ -440,7 +440,7 @@ function Role({ treeData, role, webSocketContext, notificationApi }) {
               </Tooltip>
             </Space>
           ) : (
-            <Space style={{ paddingLeft: 10 }} size="small" align="start">
+            <Space style={{ paddingLeft: 10 }} align="start">
               <UserAvatarsInRole />
 
               <Tooltip title="Edit">

src/Pages/GroupTasks/History/index.js

@@ -1,3 +1,5 @@
+import LogCard from "../../../Components/LogCard";
+
 export default function GroupTasksHistory() {
-  return <p>GroupTasksHistory</p>;
+  return <LogCard type="grouptasks" />;
 }

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";

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;