From 506bbc8ecc3d963c247b5c5a2c022b4d0c18a949 Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Tue, 27 Jun 2023 18:50:46 +0200
Subject: [PATCH] format log messages

---
 src/Components/LogCard/index.js | 170 +++++++++++++++++++++++++++++---
 src/Pages/AllUsers/index.js     |   2 +-
 2 files changed, 159 insertions(+), 13 deletions(-)

diff --git a/src/Components/LogCard/index.js b/src/Components/LogCard/index.js
index f8fdf9f..e63cd70 100644
--- a/src/Components/LogCard/index.js
+++ b/src/Components/LogCard/index.js
@@ -3,7 +3,7 @@ import {
   ArrowRightOutlined,
   ReloadOutlined,
 } from "@ant-design/icons";
-import { Card, Checkbox, Space, Spin, Tooltip } from "antd";
+import { Card, Checkbox, Popover, Space, Spin, Tooltip } from "antd";
 import { useContext, useEffect, useState } from "react";
 import {
   Constants,
@@ -12,6 +12,7 @@ import {
   getUserSessionFromLocalStorage,
   handleUnauthorizedStatus,
 } from "../../utils";
+import { Link } from "react-router-dom";
 
 export default function LogCard({ type }) {
   const webSocketContext = useContext(WebSocketContext);
@@ -38,6 +39,51 @@ export default function LogCard({ type }) {
     return colorCodes[colorIndex];
   };
 
+  const getLogDataValue = (logData, splittedMessage) => {
+    const logDataIndex = logData.findIndex(
+      (data) => data.Type === splittedMessage.replace(new RegExp("%", "g"), "")
+    );
+
+    return logData[logDataIndex].Value;
+  };
+
+  const ColoredSpanItem = ({ dataLogs, splittedMessage, children }) => {
+    const logDataIndex = dataLogs.LogData.findIndex(
+      (data) => data.Type === splittedMessage.replace(new RegExp("%", "g"), "")
+    );
+
+    if (logDataIndex !== -1) {
+      return (
+        <span style={{ color: getColorCode(logDataIndex) }}>
+          {children === undefined ? (
+            dataLogs.LogData[logDataIndex].Value
+          ) : (
+            <>{children}</>
+          )}{" "}
+        </span>
+      );
+    }
+    return <></>;
+  };
+
+  const getGroupTaskStepName = (groupTaskStep) => {
+    const foundName = webSocketContext.CategoryGroups.find(
+      (categoryGroup) =>
+        categoryGroup.category ===
+        webSocketContext.GroupTasks.find(
+          (groupTask) => groupTask.Id === groupTaskStep.GroupTasksId
+        ).Category
+    ).groups.find(
+      (groups) =>
+        groups.id ===
+        webSocketContext.GroupTasks.find(
+          (groupTask) => groupTask.Id === groupTaskStep.GroupTasksId
+        ).GroupId
+    ).tasks[groupTaskStep.Step - 1];
+
+    return foundName !== undefined ? foundName.name : groupTaskStep.Id;
+  };
+
   const loadLogs = (date) => {
     setLoadingSpinner(true);
 
@@ -94,23 +140,123 @@ export default function LogCard({ type }) {
                   } else {
                     items.push(<span key={s}>{splittedMessage[s]} </span>);
                   }
-                } else {
-                  const logDataIndex = data.Logs[i].LogData.findIndex(
-                    (data) =>
-                      data.Type ===
-                      splittedMessage[s].replace(new RegExp("%", "g"), "")
+                } else if (splittedMessage[s] === "%groupTaskId%") {
+                  const foundData = data.Logs[i].LogData.find(
+                    (data) => data.Type === "groupTaskId"
                   );
 
-                  if (logDataIndex !== -1) {
+                  if (foundData !== undefined) {
+                    const foundGroupTask = webSocketContext.GroupTasks.find(
+                      (groupTask) => groupTask.Id === foundData.Value
+                    );
+
                     items.push(
-                      <span
+                      <ColoredSpanItem
                         key={s}
-                        style={{ color: getColorCode(logDataIndex) }}
-                      >
-                        {data.Logs[i].LogData[logDataIndex].Value}{" "}
-                      </span>
+                        dataLogs={data.Logs[i]}
+                        splittedMessage={splittedMessage[s]}
+                        children={
+                          <Popover
+                            content={
+                              <div>
+                                <span style={{ fontWeight: "bold" }}>ID: </span>
+                                <Link
+                                  to={`${
+                                    Constants.ROUTE_PATHS.GROUP_TASKS_VIEW
+                                  }${getLogDataValue(
+                                    data.Logs[i].LogData,
+                                    splittedMessage[s]
+                                  )}`}
+                                >
+                                  {getLogDataValue(
+                                    data.Logs[i].LogData,
+                                    splittedMessage[s]
+                                  )}
+                                </Link>
+                              </div>
+                            }
+                            title="Group Task"
+                            trigger="click"
+                          >
+                            <span style={{ cursor: "pointer" }}>
+                              {foundGroupTask !== undefined
+                                ? foundGroupTask.GroupName
+                                : getLogDataValue(
+                                    data.Logs[i].LogData,
+                                    splittedMessage[s]
+                                  )}
+                            </span>
+                          </Popover>
+                        }
+                      />
+                    );
+                  } else {
+                    items.push(<span key={s}>{splittedMessage[s]} </span>);
+                  }
+                } else if (splittedMessage[s] === "%taskStepId%") {
+                  const foundData = data.Logs[i].LogData.find(
+                    (data) => data.Type === "taskStepId"
+                  );
+
+                  if (foundData !== undefined) {
+                    const foundGroupTaskStep =
+                      webSocketContext.GroupTasksSteps.find(
+                        (step) => step.Id === foundData.Value
+                      );
+
+                    if (foundGroupTaskStep !== undefined) {
+                      items.push(
+                        <ColoredSpanItem
+                          key={s}
+                          dataLogs={data.Logs[i]}
+                          splittedMessage={splittedMessage[s]}
+                          children={
+                            <Popover
+                              content={
+                                <div>
+                                  <span style={{ fontWeight: "bold" }}>
+                                    ID:{" "}
+                                  </span>
+                                  <span>{foundGroupTaskStep.Id}</span>
+                                </div>
+                              }
+                              title="Group Task Step"
+                              trigger="click"
+                            >
+                              {" "}
+                              <span style={{ cursor: "pointer" }}>
+                                {getGroupTaskStepName(foundGroupTaskStep)}
+                              </span>
+                            </Popover>
+                          }
+                        />
+                      );
+                    } else {
+                      items.push(
+                        <ColoredSpanItem
+                          key={s}
+                          dataLogs={data.Logs[i]}
+                          splittedMessage={splittedMessage[s]}
+                        />
+                      );
+                    }
+                  } else {
+                    items.push(
+                      <ColoredSpanItem
+                        key={s}
+                        dataLogs={data.Logs[i]}
+                        splittedMessage={splittedMessage[s]}
+                      />
                     );
                   }
+                } else {
+                  items.push(
+                    <ColoredSpanItem
+                      key={s}
+                      dataLogs={data.Logs[i]}
+                      splittedMessage={splittedMessage[s]}
+                    />
+                  );
                 }
               } else {
                 items.push(<span key={s}>{splittedMessage[s]} </span>);
diff --git a/src/Pages/AllUsers/index.js b/src/Pages/AllUsers/index.js
index 842f00c..4e8a704 100644
--- a/src/Pages/AllUsers/index.js
+++ b/src/Pages/AllUsers/index.js
@@ -246,7 +246,7 @@ export default function AllUsers() {
         avatar: (
           <Popover
             placement="right"
-            trigger={"hover"}
+            trigger="hover"
             content={<MyAvatar avatar={user.Avatar} avatarWidth={256} />}
           >
             <>