Log Colours

src/App.tsx

@@ -11,12 +11,15 @@ import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import { TableHead } from "@mui/material";
 
+type getMessageReturn = [string[],string[],string[],string[],number[]]
 
 function App() {
   const [time, setTime] = useState<string[]>([]);
   const [source, setSource] = useState<string[]>([]);
   const [debug, setDebug] = useState<string[]>([]);
   const [logs, setLogs] = useState<string[]>([]);
+  const [log_lvl, setLog_lvl] = useState<number[]>([]);
+
   useEffect(() => {
     async function fetchData(
       url: string,
@@ -47,11 +50,12 @@ function App() {
 
         // Parsing the response as JSON
         const logdata = await response.json();
-        const [timestamp,source,debug,message] = getMessage(logdata) ||  [["No logs found"]];
+        const [timestamp,source,debug,message,log_level] = getMessage(logdata) ||  [["No logs found"],["No logs found"],["No logs found"],["No logs found"],[1]];
         setTime(timestamp);
         setSource(source);
         setDebug(debug);
         setLogs(message);
+        setLog_lvl(log_level);
       } catch (error) {
         console.error("Error fetching data:", error);
         throw error;
@@ -127,15 +131,15 @@ function App() {
           <Table sx={{ minWidth: 650 }} aria-label="simple table">
             <TableHead>
               <TableRow>
-                <TableCell>Timestamp</TableCell>
-                <TableCell>Debugging Level</TableCell>
-                <TableCell>Source</TableCell>
-                <TableCell>Log Messages</TableCell>
+                <TableCell><b>Timestamp</b></TableCell>
+                <TableCell><b>Debugging Level</b></TableCell>
+                <TableCell><b>Source</b></TableCell>
+                <TableCell><b>Log Messages</b></TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
               {logs.map((log,index) => (
-                <TableRow>                  
+                <TableRow sx={{backgroundColor:getColor(log_lvl[index])}}>                  
                   <TableCell>{time[index]}</TableCell>
                   <TableCell>{debug[index]}</TableCell>
                   <TableCell>{source[index]}</TableCell>
@@ -151,7 +155,7 @@ function App() {
   );
 }
 
-function getMessage(logging: JSON): undefined | string[][] {
+function getMessage(logging: JSON): undefined | getMessageReturn {
   const data = JSON.parse(JSON.stringify(logging));
   for (const key in data.results) {
     if ("search_types" in data.results[key]) {
@@ -160,6 +164,7 @@ function getMessage(logging: JSON): undefined | string[][] {
       const timestamp: string[] =[];
       const source: string[] =[];
       const debug: string[] =[];
+      const log_level: number[] =[];
       for (const keys in id) {
         if ("messages" in id[keys]) {
           const logs = id[keys].messages;
@@ -173,33 +178,46 @@ function getMessage(logging: JSON): undefined | string[][] {
               `${logs[msg]["message"]["source"]}`
             )
             const text = logs[msg]["message"]["message"];
-            const [debug_level, log_message] = logLevel(text);
+            const [debug_level, log_message,level] = debugLevel(text);
             debug.push(debug_level);
             message.push(log_message);
+            log_level.push(level);
 
           }
-          return [timestamp,source,debug,message];
+          return [timestamp,source,debug,message,log_level];
         }
       }
     }
   }
 }
 
-function logLevel(text: string): [string, string] {
-  const debug_levels = {"INFO":1,"DEBUG":2,"WARN":3,"ERROR":4};
+function debugLevel(text: string): [string, string, number] {
+  const debug_levels: {[key: string]: number} = {
+    "EMERG":0,
+    "PANIC":0,
+    "ALERT":1,
+    "CRIT":2,
+    "ERROR":3, 
+    "WARN":4, 
+    "NOTICE":5, 
+    "INFO":6,
+    "DEBUG":7,};
   const words = text.split(/\s+/);
   const firstWord = words[0] || '';  
   const restOfText = words.slice(2).join(' ');
   let debug = "";
   let message = "";
+  let level_val:number = 0;
   if (firstWord in debug_levels) {
     debug = firstWord;
     message = restOfText;
+    level_val = debug_levels[firstWord];
   } else {
     debug = "UNKNOWN";
     message = text;
+    level_val = 7;
   }
-  return [debug, message];
+  return [debug, message, level_val];
 }
 async function readFile(): Promise<string> {
   const filePath = "src/token.txt";
@@ -210,4 +228,17 @@ async function readFile(): Promise<string> {
   return await response.text();
 }
 
+const getColor = (level: number) => {
+  // yellow = #d1a317
+  // red = #990f0f
+  switch (level) {
+    case 3: 
+      return "#d1a317"; 
+    case 4: 
+      return "#990f0f";
+    default:
+      return "";
+  }
+}
+
 export default App;