From 9f6f3274564d5e0f6275d2d002113708febcc002 Mon Sep 17 00:00:00 2001 From: Callum Forrester Date: Mon, 3 Jun 2024 18:34:25 +0100 Subject: [PATCH 1/4] Fix log menu file names and make log level an enum Make contained log filtering menu Change minimum log filter to log level Temp --- src/App.tsx | 32 +++++++------------- src/components/Log_Menu.tsx | 59 +++++++++++++++++++++++-------------- src/schema/Log_Levels.ts | 10 ------- src/schema/level.ts | 17 +++++++++++ 4 files changed, 65 insertions(+), 53 deletions(-) delete mode 100644 src/schema/Log_Levels.ts create mode 100644 src/schema/level.ts diff --git a/src/App.tsx b/src/App.tsx index c70669e..bb5d08a 100644 --- a/src/App.tsx +++ b/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 Log_Menu from "./components/LogMenu.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 @@ -137,23 +136,14 @@ function App() {

Athena Logpanel

- handleAppName(e.target.value)} - /> - handleBeamline(e.target.value)} + level={logFilter} + onLevelChange={handleLogFilterChange} + beamline="" + onBeamlineChange={handleBeamline} + application="" + onApplicationChange={handleAppName} /> + @@ -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); diff --git a/src/components/Log_Menu.tsx b/src/components/Log_Menu.tsx index e5f63cf..3015091 100644 --- a/src/components/Log_Menu.tsx +++ b/src/components/Log_Menu.tsx @@ -3,43 +3,58 @@ 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"; -import { log_levels } from "../schema/Log_Levels"; +import { allLogLevels } from "../schema/level"; +import { Select, TextField } from "@mui/material"; interface Props { - logFilterValue: number; - onLogFilterChange: (newLogFilterValue: number) => void; + level: number; + onLevelChange: (level: number) => void; + beamline: string; + onBeamlineChange: (beamline: string) => void; + application: string; + onApplicationChange: (application: string) => void; } -const BasicSelect: React.FC = ({ - logFilterValue, - onLogFilterChange, -}) => { - const handleChange = (event: SelectChangeEvent) => { - const newLogFilterValue = event.target.value as unknown as number; - onLogFilterChange(newLogFilterValue); - }; - +const LogMenu: React.FC = (props: Props) => { return ( - Minimum Log Filter + Minimum Log Level + props.onApplicationChange(e.target.value)} + > + {props.application} + + props.onBeamlineChange(e.target.value)} + > + {props.beamline} + ); }; -export default BasicSelect; +export default LogMenu; diff --git a/src/schema/Log_Levels.ts b/src/schema/Log_Levels.ts deleted file mode 100644 index 80ae625..0000000 --- a/src/schema/Log_Levels.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const log_levels: { [key: number]: string } = { - 0: "EMERG", - 1: "ALERT", - 2: "CRIT", - 3: "ERROR", - 4: "WARN", - 5: "NOTICE", - 6: "INFO", - 7: "DEBUG", -}; diff --git a/src/schema/level.ts b/src/schema/level.ts new file mode 100644 index 0000000..1d92252 --- /dev/null +++ b/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][]; +} From 0ea221a7a8023b8d584e7cd43861fa3311bb3c6a Mon Sep 17 00:00:00 2001 From: Callum Forrester Date: Thu, 6 Jun 2024 07:36:56 +0100 Subject: [PATCH 2/4] Align log menu with grid Pad filter menu box --- src/components/Log_Menu.tsx | 84 +++++++++++++++++++++---------------- 1 file changed, 47 insertions(+), 37 deletions(-) diff --git a/src/components/Log_Menu.tsx b/src/components/Log_Menu.tsx index 3015091..9bea48a 100644 --- a/src/components/Log_Menu.tsx +++ b/src/components/Log_Menu.tsx @@ -4,7 +4,7 @@ import InputLabel from "@mui/material/InputLabel"; import MenuItem from "@mui/material/MenuItem"; import FormControl from "@mui/material/FormControl"; import { allLogLevels } from "../schema/level"; -import { Select, TextField } from "@mui/material"; +import { Grid, Select, TextField } from "@mui/material"; interface Props { level: number; @@ -17,42 +17,52 @@ interface Props { const LogMenu: React.FC = (props: Props) => { return ( - - - Minimum Log Level - - props.onApplicationChange(e.target.value)} - > - {props.application} - - props.onBeamlineChange(e.target.value)} - > - {props.beamline} - - + + + + + Level + + + + + props.onApplicationChange(e.target.value)} + fullWidth + > + {props.application} + + + + props.onBeamlineChange(e.target.value)} + fullWidth + > + {props.beamline} + + + ); }; From 4ded09ac215fb838f399cd1e11da48996dd684dc Mon Sep 17 00:00:00 2001 From: Callum Forrester Date: Thu, 6 Jun 2024 07:38:03 +0100 Subject: [PATCH 3/4] Rename LogMenu to FilterMenu --- src/App.tsx | 4 ++-- src/components/{Log_Menu.tsx => FilterMenu.tsx} | 0 2 files changed, 2 insertions(+), 2 deletions(-) rename src/components/{Log_Menu.tsx => FilterMenu.tsx} (100%) diff --git a/src/App.tsx b/src/App.tsx index bb5d08a..e9039e8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,6 @@ import { ThemeProvider } from "@emotion/react"; import { useEffect, useState, useReducer, useMemo } from "react"; -import Log_Menu from "./components/LogMenu.tsx"; +import FilterMenu from "./components/FilterMenu.tsx"; import { theme } from "./theme"; import BoxBasic from "./components/Box"; import { @@ -135,7 +135,7 @@ function App() { return (

Athena Logpanel

- Date: Thu, 6 Jun 2024 07:50:09 +0100 Subject: [PATCH 4/4] Rename filter menu internally --- src/components/FilterMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/FilterMenu.tsx b/src/components/FilterMenu.tsx index 9bea48a..7473ebe 100644 --- a/src/components/FilterMenu.tsx +++ b/src/components/FilterMenu.tsx @@ -15,7 +15,7 @@ interface Props { onApplicationChange: (application: string) => void; } -const LogMenu: React.FC = (props: Props) => { +const FilterMenu: React.FC = (props: Props) => { return ( @@ -67,4 +67,4 @@ const LogMenu: React.FC = (props: Props) => { ); }; -export default LogMenu; +export default FilterMenu;