Added Filtering Menus

src/App.tsx

@@ -1,5 +1,6 @@
 import { ThemeProvider } from "@emotion/react";
 import { useEffect, useState } from "react";
+import Log_Menu from "./components/Log_Menu.tsx";
 import { theme } from "./theme";
 import BoxBasic from "./components/Box";
 
@@ -14,12 +15,18 @@ import { TableHead } from "@mui/material";
 type getMessageReturn = [string[],string[],string[],string[],number[]]
 
 function App() {
+  // API responses to be shown
   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[]>([]);
 
+  // Log_Menu Props
+  const [logFilter, setLogFilter] = useState<number>(7);
+  const handleLogFilterChange = (newLogFilterValue: number) => {
+    setLogFilter(newLogFilterValue);
+  }
   useEffect(() => {
     async function fetchData(
       url: string,
@@ -126,6 +133,7 @@ function App() {
   return (
     <ThemeProvider theme={theme}>
       <h1>Athena Logpanel </h1>
+      <Log_Menu logFilterValue={logFilter} onLogFilterChange={handleLogFilterChange}/>
       <BoxBasic>
         <TableContainer component={Paper}>
           <Table sx={{ minWidth: 650 }} aria-label="simple table">
@@ -138,15 +146,21 @@ function App() {
               </TableRow>
             </TableHead>
             <TableBody>
-              {logs.map((log,index) => (
-                <TableRow sx={{backgroundColor:getColor(log_lvl[index])}}>                  
+              {logs.map((log,index) => {
+                if (log_lvl[index] <= logFilter) {
+                  return (
+                  <TableRow sx={{backgroundColor:getColor(log_lvl[index])}}>                 
                   <TableCell>{time[index]}</TableCell>
                   <TableCell>{debug[index]}</TableCell>
                   <TableCell>{source[index]}</TableCell>
                   <TableCell>{log}</TableCell>
                   {/* sx={{ '&:last-child td, &:last-child th': { border: 0 } }} */}
-                </TableRow>
-              ))}
+                </TableRow>                    
+                  );
+              } else {
+                  return null
+                }
+              })}
             </TableBody>            
           </Table>
         </TableContainer>
@@ -207,7 +221,7 @@ function logLevel(text: string): [string, string, number] {
   const restOfText = words.slice(2).join(' ');
   let debug = "";
   let message = "";
-  let level_val:number = 0;
+  let level_val:number; 
   if (firstWord in debug_levels) {
     debug = firstWord;
     message = restOfText;

src/components/Log_Menu.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+
+interface Props {
+  logFilterValue: number; 
+  onLogFilterChange: (newLogFilterValue: number) => void; 
+}
+
+const BasicSelect: React.FC<Props> = ({ logFilterValue, onLogFilterChange }) => {
+  const handleChange = (event: SelectChangeEvent) => {
+    const newLogFilterValue = event.target.value as unknown as number;
+    onLogFilterChange(newLogFilterValue); 
+  };
+
+  return (
+    <Box sx={{ minWidth: 120 }}>
+      <FormControl fullWidth>
+        <InputLabel id="log-filter-id">Minimum Log Filter</InputLabel>
+        <Select
+          labelId="log-filter-id"
+          id="log-filter-label"
+          value={logFilterValue.toString()}
+          label="Minimum Log Filter"
+          onChange={handleChange}
+        >
+          <MenuItem value={7}>DEBUG</MenuItem>
+          <MenuItem value={6}>INFO</MenuItem>
+          <MenuItem value={5}>NOTICE</MenuItem>
+          <MenuItem value={4}>WARNING</MenuItem>
+          <MenuItem value={3}>ERROR</MenuItem>
+          <MenuItem value={2}>CRITICAL</MenuItem>
+          <MenuItem value={1}>ALERT</MenuItem>
+          <MenuItem value={0}>EMERGENCY</MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}
+
+export default BasicSelect;