Tidy log menu

src/App.tsx

@@ -1,6 +1,6 @@
 import { ThemeProvider } from "@emotion/react";
 import { useEffect, useState, useReducer, useMemo } from "react";
-import Log_Menu from "./components/Log_Menu.tsx";
+import FilterMenu from "./components/FilterMenu.tsx";
 import { theme } from "./theme";
 import BoxBasic from "./components/Box";
 import {
@@ -16,14 +16,13 @@ import {
 import { payload } from "./schema/payload.ts";
 
 import Table from "@mui/material/Table";
-import TextField from "@mui/material/TextField";
 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 { log_levels } from "./schema/Log_Levels.ts";
+import { LogLevel } from "./schema/level.ts";
 
 function App() {
   // Initialize information for Queries and Auth
@@ -136,24 +135,15 @@ function App() {
   return (
     <ThemeProvider theme={theme}>
       <h1>Athena Logpanel </h1>
-      <Log_Menu
-        logFilterValue={logFilter}
-        onLogFilterChange={handleLogFilterChange}
-      />
-      <TextField
-        id="app-name"
-        label="Application Name"
-        variant="outlined"
-        margin="normal"
-        onChange={e => handleAppName(e.target.value)}
-      />
-      <TextField
-        id="beamline"
-        label="Beamline"
-        variant="outlined"
-        margin="normal"
-        onChange={e => handleBeamline(e.target.value)}
+      <FilterMenu
+        level={logFilter}
+        onLevelChange={handleLogFilterChange}
+        beamline=""
+        onBeamlineChange={handleBeamline}
+        application=""
+        onApplicationChange={handleAppName}
       />
+
       <BoxBasic>
         <TableContainer component={Paper}>
           <Table sx={{ minWidth: 650 }} aria-label="simple table">
@@ -230,14 +220,14 @@ function getMessage(logging: JSON): LogRecord | undefined {
     // Type Checking of API Response
     if (MessageType(message)) {
       app_name.push(message.application_name);
-      const level_str = log_levels[message.level] || "UNKNOWN";
+      const level_str = LogLevel[message.level] || "UNKNOWN";
       log_level_str.push(level_str);
       log_message.push(message.full_message);
       log_level.push(message.level);
     }
     if (isLogMessageCluster(message)) {
       app_name.push(message.cluster_name);
-      const level_str = log_levels[message.level] || "UNKNOWN";
+      const level_str = LogLevel[message.level] || "UNKNOWN";
       log_level_str.push(level_str);
       log_message.push(message.message);
       log_level.push(message.level);

src/components/FilterMenu.tsx

@@ -0,0 +1,70 @@
+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 { allLogLevels } from "../schema/level";
+import { Grid, Select, TextField } from "@mui/material";
+
+interface Props {
+  level: number;
+  onLevelChange: (level: number) => void;
+  beamline: string;
+  onBeamlineChange: (beamline: string) => void;
+  application: string;
+  onApplicationChange: (application: string) => void;
+}
+
+const FilterMenu: React.FC<Props> = (props: Props) => {
+  return (
+    <Box sx={{ padding: "1vw" }}>
+      <Grid container spacing={2}>
+        <Grid item xs={1}>
+          <FormControl fullWidth margin="normal">
+            <InputLabel id="log-filter-id">Level</InputLabel>
+            <Select
+              id="log-filter-label"
+              value={props.level}
+              label="Level"
+              onChange={e =>
+                props.onLevelChange(e.target.value as unknown as number)
+              }
+            >
+              {allLogLevels().map(([level, num]) => (
+                <MenuItem key={level} value={num}>
+                  {level}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Grid>
+        <Grid item xs>
+          <TextField
+            id="app-name"
+            label="Application"
+            variant="outlined"
+            margin="normal"
+            onChange={e => props.onApplicationChange(e.target.value)}
+            fullWidth
+          >
+            {props.application}
+          </TextField>
+        </Grid>
+        <Grid item xs>
+          <TextField
+            id="beamline"
+            label="Beamline"
+            variant="outlined"
+            margin="normal"
+            onChange={e => props.onBeamlineChange(e.target.value)}
+            fullWidth
+          >
+            {props.beamline}
+          </TextField>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default FilterMenu;

src/schema/level.ts

@@ -0,0 +1,17 @@
+export enum LogLevel {
+  EMERG = 0,
+  ALERT = 1,
+  CRITICAL = 2,
+  ERROR = 3,
+  WARN = 4,
+  NOTICE = 5,
+  INFO = 6,
+  DEBUG = 7,
+}
+
+export function allLogLevels(): [string, number][] {
+  // Typescript annoyance, there doesn't seem to be a nice solution
+  // https://stackoverflow.com/questions/56044872/typescript-enum-object-values-return-value
+  const entries = Object.entries(LogLevel);
+  return entries.slice(entries.length / 2) as [string, number][];
+}