Added API Response Type Interface

src/App.tsx

@@ -12,33 +12,37 @@ import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import { TableHead } from "@mui/material";
 import { log_levels } from "./components/Log_Levels.tsx";
-import _default from "@emotion/styled";
 
 class MessageReturn {
   timestamp: string[] = [];
   host: string[] = [];
-  debug: string[] = [];
+  log_level_str: string[] = [];
   log_message: string[] = [];
   log_level: number[] = [];
   app_name: string[] = [];
 }
 
-interface Action{
-  type: "log_level" | "beamline" | "update"; 
-  // log_level does the minimum log filtering 
-  // beamline selects the text from the text editor (keeps current method if nothing works)
-  // update adds more logs to the count until there are a 100 always (still thinking about this)
+interface LogMessage {
+  timestamp: string;
+  source: string;
+  application_name: string;
+  level: number;
+  full_message: string;
 }
 
-function reducer(state:MessageReturn, action:Action ){
-  // replace the log filtering to be done in the reducer function (https://www.youtube.com/watch?v=kK_Wqx3RnHk)
-  switch(action.type){
-    case "log_level":
-      return 1;
-    case "beamline":
-      return 2;
-    default:
-      return state;
+interface Message {
+  [key: string]: LogMessage;
+}
+
+interface LogData {
+  results: {
+      [key: string]: {
+        search_types: {
+          [key: string]: {
+            messages: Message[];
+          };
+      };
+  };
 }}
 
 function App() {
@@ -49,11 +53,14 @@ function App() {
   const [logFilter, setLogFilter] = useState<number>(7);
   const handleLogFilterChange = (newLogFilterValue: number) => {
     setLogFilter(newLogFilterValue);
+
+
   }
   useEffect(() => {
     async function fetchData(
       url: string,
       username: string,
+
       password: string,
       payload: object
     ): Promise<undefined> {
@@ -100,7 +107,7 @@ function App() {
         {
           query: {
             type: "elasticsearch",
-            query_string: "beamline:i15 AND application_name:gda",
+            query_string: "application_name:gda",
           },
           timerange: {
             from: 300,
@@ -133,6 +140,7 @@ function App() {
       try {
         await readFile()
         .then((content) => {
+
           username = content;
           // Run API call using parameters
           (async () => {
@@ -171,7 +179,7 @@ function App() {
                   return (
                   <TableRow sx={{backgroundColor:getColor(LogResponse.log_level[index])}}>                 
                   <TableCell><pre>{timestamp}</pre></TableCell>
-                  <TableCell><pre>{LogResponse.debug[index]}</pre></TableCell>
+                  <TableCell><pre>{LogResponse.log_level_str[index]}</pre></TableCell>
                   <TableCell><pre>{LogResponse.host[index]}</pre></TableCell>
                   <TableCell><pre>{LogResponse.app_name[index]}</pre></TableCell>
                   <TableCell>{LogResponse.log_message[index]}</TableCell>
@@ -191,36 +199,36 @@ function App() {
 }
 
 function getMessage(logging: JSON): MessageReturn | undefined {
-  const data = JSON.parse(JSON.stringify(logging));
+  const data:LogData = JSON.parse(JSON.stringify(logging));
+  const log_message: string[] = [];
+  const timestamp: string[] =[];
+  const host:string[] = []; 
+  const log_level_str: string[] =[];
+  const log_level: number[] =[];
+  const app_name: string[] = [];
+
   for (const key in data.results) {
     if ("search_types" in data.results[key]) {
       const id = data.results[key].search_types;
-      const log_message: string[] = [];
-      const timestamp: string[] =[];
-      const host:string[] = []; 
-      const debug: string[] =[];
-      const log_level: number[] =[];
-      const app_name: string[] = [];
       for (const keys in id) {
         if ("messages" in id[keys]) {
-          const logs = id[keys].messages;
+          const logs: Message[] = id[keys].messages;
           // populate different components of logged data and identifying log level
           for (const msg in logs) {
-            const formattedTimestamp = logs[msg]["message"]["timestamp"].replace(/[TZ]/g, ' ')
+            const message: LogMessage = logs[msg].message;
+            const formattedTimestamp = message.timestamp.replace(/[TZ]/g, ' ')
             timestamp.push(
               `${formattedTimestamp}`
             );
-            host.push(logs[msg]["message"]["source"])
-            app_name.push(logs[msg]["message"]["application_name"]); 
-            const level = logs[msg]["message"]["level"];
-            const message = logs[msg]["message"]["full_message"];
-            const log_level_str = log_levels[level] || "UNKNOWN";
-            debug.push(log_level_str);
-            log_message.push(message)
-            log_level.push(level);
+            host.push(message.source);
+            app_name.push(message.application_name); 
+            const level_str = log_levels[message.level] || "UNKNOWN";
+            log_level_str.push(level_str);
+            log_message.push(message.full_message);
+            log_level.push(message.level);
 
           }
-          return {timestamp,host,debug,log_message,log_level,app_name}  ;
+          return {timestamp,host,log_level_str,log_message,log_level,app_name}  ;
         }
       }
     }