Unformatted Logs Created

Using the /search/sync API call to access required messages instead of searching for already-present search requests

src/App.css

@@ -1,8 +1,9 @@
 #root {
   max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  margin: 2 auto;
+  /* padding: 1rem; */
+  text-align: left;
+  line-height: normal;
 }
 
 .logo {

src/App.tsx

@@ -1,73 +1,126 @@
-import { ThemeProvider } from '@emotion/react';
-import { useEffect, useRef} from 'react'
-import { theme } from './theme';
-// import LogTable from './components/Table';
-// import './App.css'
-// import {theme} from "./theme";
-// import { ThemeProvider } from '@emotion/react';
+import { ThemeProvider } from "@emotion/react";
+import { useEffect, useState } from "react";
+import { theme } from "./theme";
+import BoxBasic from "./components/Box";
 
 function App() {
-
-  const data = useRef();
+
+  const [logMessage, setLog] = useState<string[]>([]);
+
   useEffect(() => {
-    async function fetchData(url: string, username: string, password: string): Promise<undefined> {
+    async function fetchData(
+      url: string,
+      username: string,
+      password: string,
+      payload: object
+    ): Promise<undefined> {
       try {
-          // Creating a basic authentication header
-          const headers = new Headers();
-          headers.append('Authorization',"Basic " + btoa(`${username}:${password}`));
-
-          // Making the fetch request
-          const response = await fetch(url, {
-              method: 'GET',
-              headers: headers
-          });
+        // Creating a basic authentication header
+        const headers = new Headers();
+        headers.append(
+          "Authorization",
+          "Basic " + btoa(`${username}:${password}`)
+        );
+        headers.append("Content-Type", "application/json");
+        headers.append("X-Requested-By", "XMLHttpRequest");
 
-          // Checking if the response is OK
-          if (!response.ok) {
-              throw new Error('Failed to fetch data');
-          }
+        // Making the fetch request
+        const response = await fetch(url, {
+          method: "POST",
+          headers: headers,
+          body: JSON.stringify(payload),
+        });
+        // Checking if the response is OK
+        if (!response.ok) {
+          throw new Error("Failed to fetch data");
+        }
 
-          // Parsing the response as JSON
-          const data1 = await response.json();
-          return data1;
+        // Parsing the response as JSON
+        const logdata = await response.json();
+        const message = getMessage(logdata) || ["No logs found"];
+        setLog(message);
       } catch (error) {
-          console.error('Error fetching data:', error);
-          throw error;
+        console.error("Error fetching data:", error);
+        throw error;
       }
-  }
+    }
 
-    const apiURL = "/api/system/journal";
+    const apiURL = "/api/views/search/sync";
     const username = "393v5o7c1ds7h68tl6iclb3ikfb0l82jhbi0s34mtq3huf12r2f";
     const password = "token";
 
+    // Add payload for the request
+    const payload = {
+      // id: "661626cbe7b8a27f59bd1175",
+      parameters: [],
+      queries: [
+        {
+          query: {
+            type: "elasticsearch",
+            query_string: "application_name:gda",
+          },
+          timerange: {
+            from: 300,
+            type: "relative",
+          },
+          filters: [],
+          search_types: [
+            {
+              limit: 100,
+              offset: 0,
+              sort: [
+                {
+                  field: "timestamp",
+                  order: "DESC",
+                },
+              ],
+              fields: [],
+              decorators: [],
+              type: "messages",
+              filter: null,
+              filters: [],
+            },
+          ],
+        },
+      ],
+    };
+
     (async () => {
-        try {
-            data.current = await fetchData(apiURL, username, password);
-            console.log(data.current)
-        } catch (error) {
-            console.error('Error:', error);
-        }
+      try {
+        await fetchData(apiURL, username, password, payload);
+      } catch (error) {
+        console.error("Error:", error);
+      }
     })();
-    },[])
+  }, []);
 
-    // return (
-    //   <h3> {data.current}</h3>
-    // )
+  return (
+    <ThemeProvider theme={theme}>
+      <h1>Athena Logpanel </h1>
+      <BoxBasic content={<p> {logMessage} </p>}></BoxBasic>
+    </ThemeProvider>
+  );
+}
 
-
-    return (
-      <ThemeProvider theme={theme}>
-      <h1>Athena Logpanel Single Call</h1>
-      <h2 className='Athena Logpanel'>
-        <button className='square'>1</button>
-        <label htmlFor='Log1'></label>
-      </h2>
-      <p> {JSON.stringify(data.current)} </p>
-      </ThemeProvider>
-      )
+function getMessage(logging: JSON): undefined | string[] {
+  const data = JSON.parse(JSON.stringify(logging));
+  for (const key in data.results) {
+    if ("search_types" in data.results[key]) {
+      const id = data.results[key].search_types;
+      const message: string[] = [];
+      for (const keys in id) {
+        if ("messages" in id[keys]) {
+          const logs = id[keys].messages;
+          for (const msg in logs) {
+            message.push(
+              `${logs[msg]["message"]["timestamp"]} ${logs[msg]["message"]["source"]} ${logs[msg]["message"]["message"]}`
+            );
+          }
+          return message;
+        }
+      }
+    }
   }
-
-
-
+}
 
-export default App
+export default App;

src/components/Box.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+// Define the potential types for the Box
+type Content = string| JSX.Element | number | (() => React.ReactNode);
+interface BoxProps<T> {
+    content:T;
+}
+// FC React functional component.
+const BoxBasic:React.FC<BoxProps<Content>> = ({content}) =>{
+    return (
+      <Box component="section" sx={{ 
+        margin: "1vw",
+        padding: "1vw", 
+        border: '6px solid grey', 
+        width: "95vw", 
+        height: "80vh",
+        overflowY: "scroll",
+        whiteSpace: "wrap"
+         }}>
+         {typeof content === 'function' ? content() : content}
+      </Box>
+    );
+  }
+
+export default BoxBasic;