From 5ac424031251598a91a90cf3b70362fd3c28059d Mon Sep 17 00:00:00 2001 From: Thomas Thomas Date: Sat, 27 Apr 2024 08:30:48 +0100 Subject: [PATCH] Added Minimum Log Filter Used useReducer React Hook to modify the payload as this component will be changed differently each time --- src/App.tsx | 118 +++++++++++++++++------------------- src/components/Log_Menu.tsx | 43 +++++++++++++ src/schema/Log_Levels.ts | 9 +++ src/schema/interfaces.ts | 50 +++++++++++++++ src/schema/payload.ts | 34 +++++++++++ 5 files changed, 192 insertions(+), 62 deletions(-) create mode 100644 src/components/Log_Menu.tsx create mode 100644 src/schema/Log_Levels.ts create mode 100644 src/schema/interfaces.ts create mode 100644 src/schema/payload.ts diff --git a/src/App.tsx b/src/App.tsx index 0202149..4a47a7a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,10 @@ import { ThemeProvider } from "@emotion/react"; -import { useEffect, useState } from "react"; +import { useEffect, useState, useReducer } from "react"; +import Log_Menu from "./components/Log_Menu.tsx"; import { theme } from "./theme"; import BoxBasic from "./components/Box"; +import {Payload_interface,action_type,Query_String} from "./schema/interfaces.ts"; +import { payload } from "./schema/payload.ts"; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; @@ -10,18 +13,57 @@ 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"; + +const apiURL = "/api/views/search/sync"; +const password = "token"; +let username: string +const query: Query_String = {}; + +const ACTIONS = { + LOGFILTER: "level", + BEAMLINE: "beamline", + APP: "application", +}; + type getMessageReturn = [string[],string[],string[],string[],number[],string[]] function App() { + // API responses to be shown const [time, setTime] = useState([]); const [host, setHost] = useState([]); const [debug, setDebug] = useState([]); const [logs, setLogs] = useState([]); const [log_lvl, setLog_lvl] = useState([]); const [app_name,setApp_name] = useState([]); + const [logfilter, setLogfilter] = useState(7) + // Log_Menu Props + const handleLogFilterChange = (newLogFilterValue: number) => { + setLogfilter(newLogFilterValue); + handlePayload({type: ACTIONS.LOGFILTER, log_level: newLogFilterValue}); + } - useEffect(() => { + function reducer(payload:Payload_interface,action:action_type) { + switch (action.type){ + case ACTIONS.LOGFILTER: + query.filter = `level: <=${action.log_level}`; + break; + case ACTIONS.BEAMLINE: + query.beamline = `beamline: ${action.query_condition}`; + break; + case ACTIONS.APP: + query.app_name = `application_name: ${action.query_condition}`; + break; + } + const query_arr:string[] = Object.values(query) + payload.queries[0].query.query_string = query_arr.join(" AND "); + const newPayload = {...payload} + return newPayload + } + const [logPayload, handlePayload] = useReducer(reducer, payload) + useEffect(() => { + console.log(logPayload.queries[0].query.query_string); async function fetchData( url: string, username: string, @@ -64,46 +106,6 @@ function App() { } } - const apiURL = "/api/views/search/sync"; - const password = "token"; - let username:string; - - // Add payload for the request - const payload = { - // id: "661626cbe7b8a27f59bd1175", - parameters: [], - queries: [ - { - query: { - type: "elasticsearch", - query_string: "beamline:i15 AND 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: [], - }, - ], - }, - ], - }; - // reads file from folder - add custom API key to this file (async () => { try { @@ -123,11 +125,14 @@ function App() { console.error("Error collecting password:", error); } })(); - }, []); + }, [logPayload]); + + return (

Athena Logpanel

+ @@ -141,16 +146,18 @@ function App() { - {logs.map((log,index) => ( - + {logs.map((log,index) => { + return ( + 
{time[index]}
 
{debug[index]}
 
{host[index]}
 
{app_name[index]}
 
{log}
 {/* sx={{ '&:last-child td, &:last-child th': { border: 0 } }} */} - - ))} + + ); + })},
@@ -183,9 +190,9 @@ function getMessage(logging: JSON): undefined | getMessageReturn { app_name.push(logs[msg]["message"]["application_name"]); const level = logs[msg]["message"]["level"]; const log_message = logs[msg]["message"]["full_message"]; - const log_level_str = getLogLevel(level); + const log_level_str = log_levels[level] || "UNKNOWN"; debug.push(log_level_str); - message.push(log_message); + message.push(log_message) log_level.push(level); } @@ -196,19 +203,6 @@ function getMessage(logging: JSON): undefined | getMessageReturn { } } -function getLogLevel(level_val:number): string { - const log_levels: {[key: number]: string} = { - 0:"EMERG", - 1:"ALERT", - 2:"CRIT", - 3:"ERROR", - 4:"WARN", - 5:"NOTICE", - 6:"INFO", - 7:"DEBUG",}; - const level = log_levels[level_val] || "UNKNOWN"; - return level; -} async function readFile(): Promise { const filePath = "src/token.txt"; const response = await fetch(filePath) ; diff --git a/src/components/Log_Menu.tsx b/src/components/Log_Menu.tsx new file mode 100644 index 0000000..4caa66c --- /dev/null +++ b/src/components/Log_Menu.tsx @@ -0,0 +1,43 @@ +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'; +import { log_levels } from '../schema/Log_Levels'; + +interface Props { + logFilterValue: number; + onLogFilterChange: (newLogFilterValue: number) => void; +} + +const BasicSelect: React.FC = ({ logFilterValue, onLogFilterChange }) => { + const handleChange = (event: SelectChangeEvent) => { + const newLogFilterValue = event.target.value as unknown as number; + onLogFilterChange(newLogFilterValue); + }; + + return ( + + + Minimum Log Filter + + + + ); +} + +export default BasicSelect; \ No newline at end of file diff --git a/src/schema/Log_Levels.ts b/src/schema/Log_Levels.ts new file mode 100644 index 0000000..128c93a --- /dev/null +++ b/src/schema/Log_Levels.ts @@ -0,0 +1,9 @@ +export const log_levels: {[key: number]: string} = { + 0:"EMERG", + 1:"ALERT", + 2:"CRIT", + 3:"ERROR", + 4:"WARN", + 5:"NOTICE", + 6:"INFO", + 7:"DEBUG",}; \ No newline at end of file diff --git a/src/schema/interfaces.ts b/src/schema/interfaces.ts new file mode 100644 index 0000000..aa80432 --- /dev/null +++ b/src/schema/interfaces.ts @@ -0,0 +1,50 @@ +// Payload Type Interfaces +export interface Payload_interface { + parameters: string[]; + queries: Query[]; + } + + export interface Query { + query: QueryDetails; + timerange: Timerange; + filters: string[]; + search_types: Search_Type[]; + } + +export interface QueryDetails { + type: string; + query_string: string; + } + +export interface Timerange { + from: number; + type: string; + } + +export interface Search_Type { + limit: number; + offset: number; + sort: Sort[]; + fields: string[]; + decorators: string[]; + type: string; + filter: string | null; + filters: string[]; + } + +export interface Sort { + field: string; + order: string; + } + +export interface action_type { + type: string; + log_level?: number | 7; + query_condition?: string | ""; +} + +export interface Query_String { + app_name?: string | "*"; + beamline?: string | "*"; + filter?: string | "*"; +} \ No newline at end of file diff --git a/src/schema/payload.ts b/src/schema/payload.ts new file mode 100644 index 0000000..8f524ce --- /dev/null +++ b/src/schema/payload.ts @@ -0,0 +1,34 @@ +import { Payload_interface } from "./interfaces"; +export const payload: Payload_interface = { + parameters: [], + queries: [ + { + query: { + type: "elasticsearch", + query_string: "", + }, + timerange: { + from: 300, + type: "relative", + }, + filters: [], + search_types: [ + { + limit: 100, + offset: 0, + sort: [ + { + field: "timestamp", + order: "DESC", + }, + ], + fields: [], + decorators: [], + type: "messages", + filter: null, + filters: [], + }, + ], + }, + ], + };