From 310af54e9506caa3ae1d964f10dc15638fc539fb Mon Sep 17 00:00:00 2001
From: Callum Forrester <callum.forrester@diamond.ac.uk>
Date: Mon, 8 Jul 2024 20:33:42 +0100
Subject: [PATCH] Refactor log table into own component

---
 src/App.tsx                 | 123 ++-------------------------------
 src/components/LogTable.tsx | 134 ++++++++++++++++++++++++++++++++++++
 2 files changed, 139 insertions(+), 118 deletions(-)
 create mode 100644 src/components/LogTable.tsx

diff --git a/src/App.tsx b/src/App.tsx
index fcb4bd6..7e75349 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,30 +2,14 @@ import { ThemeProvider } from "@emotion/react";
 import FilterMenu from "./components/FilterMenu.tsx";
 import { useEffect, useState } from "react";
 import { theme } from "./theme";
-import BoxBasic from "./components/Box";
-import {
-  LogData,
-  LogMessageApplication,
-  LogMessageCluster,
-  Messages,
-  LogTableRow,
-  isLogMessageApplication,
-  isLogMessageCluster,
-} from "./schema/interfaces.ts";
+import { LogData } from "./schema/interfaces.ts";
 
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import { TableHead } from "@mui/material";
-import { LogLevel } from "./schema/level.ts";
 import { buildSearchQuery, graylogSearch } from "./utils/api/search.ts";
+import LogTable from "./components/LogTable.tsx";
 
 function App() {
   // Init states
-  const [logTable, setLogTable] = useState<LogTableRow[]>([]);
+  const [logData, setlogData] = useState<LogData | undefined>(undefined);
   const [logDisplayError, setLogDisplayError] = useState<string | undefined>(
     undefined,
   );
@@ -43,8 +27,7 @@ function App() {
           beamlineFilter,
         );
         const searchResults = await graylogSearch(payload);
-        const table = buildTable(searchResults);
-        setLogTable(table);
+        setlogData(searchResults);
       } catch (error) {
         console.error(error);
         if (error instanceof Error) {
@@ -56,45 +39,6 @@ function App() {
     })();
   }, [logFilter, applicationFilter, beamlineFilter]);
 
-  const colors: { [id: string]: string } = {
-    WARN: "#d1a317",
-    ERROR: "#990f0f",
-    ALERT: "#990f0f",
-    CRIT: "#990f0f",
-    default: "",
-  };
-
-  function buildTable(data: LogData): LogTableRow[] {
-    const logs: Messages[] = Object.values(
-      Object.values(data.results)[0].search_types,
-    )[0].messages;
-    return logs.map(log => {
-      const message: LogMessageApplication | LogMessageCluster = log.message;
-      const timestamp = message.timestamp.replace(/[TZ]/g, " ");
-      let application = "";
-      let text = "";
-      if (isLogMessageApplication(message)) {
-        application = message.application_name;
-        text = message.full_message;
-      } else if (isLogMessageCluster(message)) {
-        application = message.cluster_name;
-        text = message.message;
-      } else {
-        throw new TypeError(
-          "Graylog response not supported: " + JSON.stringify(message),
-        );
-      }
-      return {
-        id: message._id,
-        timestamp: timestamp,
-        host: message.source,
-        level: LogLevel[message.level],
-        text: text,
-        application: application,
-      };
-    });
-  }
-
   return (
     <ThemeProvider theme={theme}>
       <h1>Athena Logpanel </h1>
@@ -110,64 +54,7 @@ function App() {
           setApplicationFilter(application == "" ? "*" : application)
         }
       />
-
-      <BoxBasic>
-        {(() => {
-          if (logDisplayError === undefined) {
-            return (
-              <TableContainer component={Paper}>
-                <Table sx={{ minWidth: 650 }} aria-label="simple table">
-                  <TableHead>
-                    <TableRow>
-                      <TableCell>
-                        <b>Timestamp</b>
-                      </TableCell>
-                      <TableCell>
-                        <b>Level</b>
-                      </TableCell>
-                      <TableCell>
-                        <b>Host</b>
-                      </TableCell>
-                      <TableCell>
-                        <b>Application</b>
-                      </TableCell>
-                      <TableCell>
-                        <b>Message</b>
-                      </TableCell>
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {logTable.map(row => (
-                      <TableRow
-                        key={row.id}
-                        sx={{
-                          backgroundColor: colors[row.level] || colors.default,
-                        }}
-                      >
-                        <TableCell>
-                          <pre>{row.timestamp}</pre>
-                        </TableCell>
-                        <TableCell>
-                          <pre>{row.level}</pre>
-                        </TableCell>
-                        <TableCell>
-                          <pre>{row.host}</pre>
-                        </TableCell>
-                        <TableCell>
-                          <pre>{row.application}</pre>
-                        </TableCell>
-                        <TableCell>{row.text}</TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            );
-          } else {
-            return <p>{logDisplayError}</p>;
-          }
-        })()}
-      </BoxBasic>
+      <LogTable data={logData} error={logDisplayError}></LogTable>
     </ThemeProvider>
   );
 }
diff --git a/src/components/LogTable.tsx b/src/components/LogTable.tsx
new file mode 100644
index 0000000..698b364
--- /dev/null
+++ b/src/components/LogTable.tsx
@@ -0,0 +1,134 @@
+import BoxBasic from "./Box";
+import {
+  LogData,
+  LogMessageApplication,
+  LogMessageCluster,
+  Messages,
+  LogTableRow,
+  isLogMessageApplication,
+  isLogMessageCluster,
+} from "../schema/interfaces.ts";
+
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import { TableHead } from "@mui/material";
+import { LogLevel } from "../schema/level.ts";
+
+interface Props {
+  data: LogData | undefined;
+  error: string | undefined;
+}
+
+function LogTable(props: Props) {
+  const colors: { [id: string]: string } = {
+    WARN: "#d1a317",
+    ERROR: "#990f0f",
+    ALERT: "#990f0f",
+    CRIT: "#990f0f",
+    default: "",
+  };
+
+  function buildTable(data: LogData): LogTableRow[] {
+    const logs: Messages[] = Object.values(
+      Object.values(data.results)[0].search_types,
+    )[0].messages;
+    return logs.map(log => {
+      const message: LogMessageApplication | LogMessageCluster = log.message;
+      const timestamp = message.timestamp.replace(/[TZ]/g, " ");
+      let application = "";
+      let text = "";
+      if (isLogMessageApplication(message)) {
+        application = message.application_name;
+        text = message.full_message;
+      } else if (isLogMessageCluster(message)) {
+        application = message.cluster_name;
+        text = message.message;
+      } else {
+        throw new TypeError(
+          "Graylog response not supported: " + JSON.stringify(message),
+        );
+      }
+      return {
+        id: message._id,
+        timestamp: timestamp,
+        host: message.source,
+        level: LogLevel[message.level],
+        text: text,
+        application: application,
+      };
+    });
+  }
+
+  let logTable = undefined;
+  if (props.data !== undefined) {
+    logTable = buildTable(props.data);
+  }
+
+  return (
+    <BoxBasic>
+      {(() => {
+        if (logTable !== undefined) {
+          return (
+            <TableContainer component={Paper}>
+              <Table sx={{ minWidth: 650 }} aria-label="simple table">
+                <TableHead>
+                  <TableRow>
+                    <TableCell>
+                      <b>Timestamp</b>
+                    </TableCell>
+                    <TableCell>
+                      <b>Level</b>
+                    </TableCell>
+                    <TableCell>
+                      <b>Host</b>
+                    </TableCell>
+                    <TableCell>
+                      <b>Application</b>
+                    </TableCell>
+                    <TableCell>
+                      <b>Message</b>
+                    </TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {logTable.map(row => (
+                    <TableRow
+                      key={row.id}
+                      sx={{
+                        backgroundColor: colors[row.level] || colors.default,
+                      }}
+                    >
+                      <TableCell>
+                        <pre>{row.timestamp}</pre>
+                      </TableCell>
+                      <TableCell>
+                        <pre>{row.level}</pre>
+                      </TableCell>
+                      <TableCell>
+                        <pre>{row.host}</pre>
+                      </TableCell>
+                      <TableCell>
+                        <pre>{row.application}</pre>
+                      </TableCell>
+                      <TableCell>{row.text}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          );
+        } else if (props.error !== undefined) {
+          return <p>{props.error}</p>;
+        } else {
+          return <p>An unknown error has occurred</p>;
+        }
+      })()}
+    </BoxBasic>
+  );
+}
+
+export default LogTable;