Skip to content

Commit

Permalink
Run prettier on source and config files
Browse files Browse the repository at this point in the history
  • Loading branch information
@callumforrester
callumforrester committed May 24, 2024
1 parent 40eca84 commit 9649f51
Show file tree
Hide file tree
Showing 12 changed files with 263 additions and 223 deletions.
18 changes: 9 additions & 9 deletions .eslintrc.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@ module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react-hooks/recommended",
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
ignorePatterns: ["dist", ".eslintrc.cjs"],
parser: "@typescript-eslint/parser",
plugins: ["react-refresh"],
rules: {
'react-refresh/only-export-components': [
'warn',
"react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true },
],
},
}
};
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# Logpanel

Graylog frontend that aggregates and streams logs
Graylog frontend that aggregates and streams logs
173 changes: 107 additions & 66 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,19 @@ import { useEffect, useState, useReducer } from "react";
import Log_Menu from "./components/Log_Menu.tsx";
import { theme } from "./theme";
import BoxBasic from "./components/Box";
import {PayloadInterface,ActionType,QueryString} from "./schema/interfaces.ts";
import {
PayloadInterface,
ActionType,
QueryString,
} from "./schema/interfaces.ts";
import { payload } from "./schema/payload.ts";

import Table from '@mui/material/Table';
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 Table from "@mui/material/Table";
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";

Expand All @@ -26,8 +30,14 @@ const ACTIONS = {
APP: "application",
};


type getMessageReturn = [string[],string[],string[],string[],number[],string[]];
type getMessageReturn = [
string[],
string[],
string[],
string[],
number[],
string[],
];

function App() {
// API responses to be shown
Expand All @@ -36,18 +46,18 @@ function App() {
const [debug, setDebug] = useState<string[]>([]);
const [logs, setLogs] = useState<string[]>([]);
const [log_lvl, setLog_lvl] = useState<number[]>([]);
const [app_name,setApp_name] = useState<string[]>([]);
const [app_name, setApp_name] = useState<string[]>([]);
const [logfilter, setLogfilter] = useState<number>(7);
const [logPayload, handlePayload] = useReducer(reducer, payload);

// Log_Menu Props
const handleLogFilterChange = (newLogFilterValue: number) => {
setLogfilter(newLogFilterValue);
handlePayload({type: ACTIONS.LOGFILTER, log_level: newLogFilterValue});
handlePayload({ type: ACTIONS.LOGFILTER, log_level: newLogFilterValue });
};

function reducer(payload:PayloadInterface,action:ActionType) {
switch (action.type){
function reducer(payload: PayloadInterface, action: ActionType) {
switch (action.type) {
case ACTIONS.LOGFILTER:
query.filter = `level: <=${action.log_level}`;
break;
Expand All @@ -57,27 +67,27 @@ function App() {
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 query_arr: string[] = Object.values(query);
payload.queries[0].query.query_string = query_arr.join(" AND ");
const newPayload = { ...payload };
return newPayload;
}

useEffect(() => {
console.log(logPayload.queries[0].query.query_string);
useEffect(() => {
console.log(logPayload.queries[0].query.query_string);
async function fetchData(
url: string,
username: string,
password: string,
payload: object
payload: object,
): Promise<undefined> {
try {
// Creating a basic authentication header
const headers = new Headers();
headers.append(
"Authorization",
"Basic " + btoa(`${username}:${password}`)
"Basic " + btoa(`${username}:${password}`),
);
headers.append("Content-Type", "application/json");
headers.append("X-Requested-By", "XMLHttpRequest");
Expand All @@ -95,7 +105,15 @@ function App() {

// Parsing the response as JSON
const logdata = await response.json();
const [timestamp,host,debug,message,log_level,app_name] = getMessage(logdata) || [["No logs found"],["No logs found"],["No logs found"],["No logs found"],[7],["No logs found"]];
const [timestamp, host, debug, message, log_level, app_name] =
getMessage(logdata) || [
["No logs found"],
["No logs found"],
["No logs found"],
["No logs found"],
[7],
["No logs found"],
];
setTime(timestamp);
setHost(host);
setDebug(debug);
Expand All @@ -111,8 +129,7 @@ function App() {
// reads file from folder - add custom API key to this file
(async () => {
try {
await readFile()
.then((content) => {
await readFile().then((content) => {
username = content;
// Run API call using parameters
(async () => {
Expand All @@ -129,38 +146,63 @@ function App() {
})();
}, [logPayload]);



return (
<ThemeProvider theme={theme}>
<h1>Athena Logpanel </h1>
<Log_Menu logFilterValue={logfilter} onLogFilterChange={handleLogFilterChange}/>
<Log_Menu
logFilterValue={logfilter}
onLogFilterChange={handleLogFilterChange}
/>
<BoxBasic>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell><b>Timestamp</b></TableCell>
<TableCell><b>Debugging Level</b></TableCell>
<TableCell><b>Host</b></TableCell>
<TableCell><b>App Name</b></TableCell>
<TableCell><b>Log Messages</b></TableCell>
<TableCell>
<b>Timestamp</b>
</TableCell>
<TableCell>
<b>Debugging Level</b>
</TableCell>
<TableCell>
<b>Host</b>
</TableCell>
<TableCell>
<b>App Name</b>
</TableCell>
<TableCell>
<b>Log Messages</b>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{logs.map((log,index) => {
return (
<TableRow sx={{backgroundColor:getColor(log_lvl[index])}} key={index}>
<TableCell><pre>{time[index]}</pre></TableCell>
<TableCell><pre>{debug[index]}</pre></TableCell>
<TableCell><pre>{host[index]}</pre></TableCell>
<TableCell><pre>{app_name[index]}</pre></TableCell>
<TableCell><pre>{log}</pre></TableCell>
{/* sx={{ '&:last-child td, &:last-child th': { border: 0 } }} */}
</TableRow>
);
})},
</TableBody>
{logs.map((log, index) => {
return (
<TableRow
sx={{ backgroundColor: getColor(log_lvl[index]) }}
key={index}
>
<TableCell>
<pre>{time[index]}</pre>
</TableCell>
<TableCell>
<pre>{debug[index]}</pre>
</TableCell>
<TableCell>
<pre>{host[index]}</pre>
</TableCell>
<TableCell>
<pre>{app_name[index]}</pre>
</TableCell>
<TableCell>
<pre>{log}</pre>
</TableCell>
{/* sx={{ '&:last-child td, &:last-child th': { border: 0 } }} */}
</TableRow>
);
})}
,
</TableBody>
</Table>
</TableContainer>
</BoxBasic>
Expand All @@ -174,31 +216,30 @@ function getMessage(logging: JSON): undefined | getMessageReturn {
if ("search_types" in data.results[key]) {
const id = data.results[key].search_types;
const message: string[] = [];
const timestamp: string[] =[];
const host:string[] = [];
const debug: string[] =[];
const log_level: number[] =[];
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;
// populate different components of logged data and identifying log level
for (const msg in logs) {
const formattedTimestamp = logs[msg]["message"]["timestamp"].replace(/[TZ]/g, ' ');
timestamp.push(
`${formattedTimestamp}`
);
const formattedTimestamp = logs[msg]["message"][
"timestamp"
].replace(/[TZ]/g, " ");
timestamp.push(`${formattedTimestamp}`);
host.push(logs[msg]["message"]["source"]);
app_name.push(logs[msg]["message"]["application_name"]);
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 = log_levels[level] || "UNKNOWN";
debug.push(log_level_str);
message.push(log_message);
log_level.push(level);

}
return [timestamp,host,debug,message,log_level,app_name];
return [timestamp, host, debug, message, log_level, app_name];
}
}
}
Expand All @@ -207,8 +248,8 @@ function getMessage(logging: JSON): undefined | getMessageReturn {

async function readFile(): Promise<string> {
const filePath = "src/token.txt";
const response = await fetch(filePath) ;
if (!response.ok){
const response = await fetch(filePath);
if (!response.ok) {
throw new Error(`Failed to read file: ${filePath}`);
}
return await response.text();
Expand All @@ -217,13 +258,13 @@ async function readFile(): Promise<string> {
const getColor = (level: number) => {
// yellow = #d1a317
// red = #990f0f
if (level === 4) {
return "#d1a317";
} else if (level < 4) {
return "#990f0f";
} else {
return "";
if (level === 4) {
return "#d1a317";
} else if (level < 4) {
return "#990f0f";
} else {
return "";
}
}
};

export default App;
29 changes: 16 additions & 13 deletions src/components/Box.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import * as React from "react";
import Box from "@mui/material/Box";

interface BoxProps {
children?: React.ReactNode;
}

const BoxBasic = (props: BoxProps) => {
return (
<Box component="section" sx={{
margin: "1vw",
padding: "1vw",
border: '6px solid grey',
width: "95vw",
height: "80vh",
overflowY: "scroll",
whiteSpace: "wrap"
}}>
{props.children}
<Box
component="section"
sx={{
margin: "1vw",
padding: "1vw",
border: "6px solid grey",
width: "95vw",
height: "80vh",
overflowY: "scroll",
whiteSpace: "wrap",
}}
>
{props.children}
</Box>
);
}
};

export default BoxBasic;
Loading

0 comments on commit 9649f51

Please sign in to comment.