Skip to content

Commit

Permalink
Refactor log table into own component
Browse files Browse the repository at this point in the history
  • Loading branch information
@callumforrester
callumforrester committed Jul 8, 2024
1 parent abf315d commit 310af54
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 118 deletions.
123 changes: 5 additions & 118 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,14 @@ import { ThemeProvider } from "@emotion/react";
import FilterMenu from "./components/FilterMenu.tsx";
import { useEffect, useState } from "react";
import { theme } from "./theme";
import BoxBasic from "./components/Box";
import {
LogData,
LogMessageApplication,
LogMessageCluster,
Messages,
LogTableRow,
isLogMessageApplication,
isLogMessageCluster,
} from "./schema/interfaces.ts";
import { LogData } from "./schema/interfaces.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 { TableHead } from "@mui/material";
import { LogLevel } from "./schema/level.ts";
import { buildSearchQuery, graylogSearch } from "./utils/api/search.ts";
import LogTable from "./components/LogTable.tsx";

function App() {
// Init states
const [logTable, setLogTable] = useState<LogTableRow[]>([]);
const [logData, setlogData] = useState<LogData | undefined>(undefined);
const [logDisplayError, setLogDisplayError] = useState<string | undefined>(
undefined,
);
Expand All @@ -43,8 +27,7 @@ function App() {
beamlineFilter,
);
const searchResults = await graylogSearch(payload);
const table = buildTable(searchResults);
setLogTable(table);
setlogData(searchResults);
} catch (error) {
console.error(error);
if (error instanceof Error) {
Expand All @@ -56,45 +39,6 @@ function App() {
})();
}, [logFilter, applicationFilter, beamlineFilter]);

const colors: { [id: string]: string } = {
WARN: "#d1a317",
ERROR: "#990f0f",
ALERT: "#990f0f",
CRIT: "#990f0f",
default: "",
};

function buildTable(data: LogData): LogTableRow[] {
const logs: Messages[] = Object.values(
Object.values(data.results)[0].search_types,
)[0].messages;
return logs.map(log => {
const message: LogMessageApplication | LogMessageCluster = log.message;
const timestamp = message.timestamp.replace(/[TZ]/g, " ");
let application = "";
let text = "";
if (isLogMessageApplication(message)) {
application = message.application_name;
text = message.full_message;
} else if (isLogMessageCluster(message)) {
application = message.cluster_name;
text = message.message;
} else {
throw new TypeError(
"Graylog response not supported: " + JSON.stringify(message),
);
}
return {
id: message._id,
timestamp: timestamp,
host: message.source,
level: LogLevel[message.level],
text: text,
application: application,
};
});
}

return (
<ThemeProvider theme={theme}>
<h1>Athena Logpanel </h1>
Expand All @@ -110,64 +54,7 @@ function App() {
setApplicationFilter(application == "" ? "*" : application)
}
/>

<BoxBasic>
{(() => {
if (logDisplayError === undefined) {
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>
<b>Timestamp</b>
</TableCell>
<TableCell>
<b>Level</b>
</TableCell>
<TableCell>
<b>Host</b>
</TableCell>
<TableCell>
<b>Application</b>
</TableCell>
<TableCell>
<b>Message</b>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{logTable.map(row => (
<TableRow
key={row.id}
sx={{
backgroundColor: colors[row.level] || colors.default,
}}
>
<TableCell>
<pre>{row.timestamp}</pre>
</TableCell>
<TableCell>
<pre>{row.level}</pre>
</TableCell>
<TableCell>
<pre>{row.host}</pre>
</TableCell>
<TableCell>
<pre>{row.application}</pre>
</TableCell>
<TableCell>{row.text}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
} else {
return <p>{logDisplayError}</p>;
}
})()}
</BoxBasic>
<LogTable data={logData} error={logDisplayError}></LogTable>
</ThemeProvider>
);
}
Expand Down
134 changes: 134 additions & 0 deletions src/components/LogTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import BoxBasic from "./Box";
import {
LogData,
LogMessageApplication,
LogMessageCluster,
Messages,
LogTableRow,
isLogMessageApplication,
isLogMessageCluster,
} from "../schema/interfaces.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 { TableHead } from "@mui/material";
import { LogLevel } from "../schema/level.ts";

interface Props {
data: LogData | undefined;
error: string | undefined;
}

function LogTable(props: Props) {
const colors: { [id: string]: string } = {
WARN: "#d1a317",
ERROR: "#990f0f",
ALERT: "#990f0f",
CRIT: "#990f0f",
default: "",
};

function buildTable(data: LogData): LogTableRow[] {
const logs: Messages[] = Object.values(
Object.values(data.results)[0].search_types,
)[0].messages;
return logs.map(log => {
const message: LogMessageApplication | LogMessageCluster = log.message;
const timestamp = message.timestamp.replace(/[TZ]/g, " ");
let application = "";
let text = "";
if (isLogMessageApplication(message)) {
application = message.application_name;
text = message.full_message;
} else if (isLogMessageCluster(message)) {
application = message.cluster_name;
text = message.message;
} else {
throw new TypeError(
"Graylog response not supported: " + JSON.stringify(message),
);
}
return {
id: message._id,
timestamp: timestamp,
host: message.source,
level: LogLevel[message.level],
text: text,
application: application,
};
});
}

let logTable = undefined;
if (props.data !== undefined) {
logTable = buildTable(props.data);
}

return (
<BoxBasic>
{(() => {
if (logTable !== undefined) {
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>
<b>Timestamp</b>
</TableCell>
<TableCell>
<b>Level</b>
</TableCell>
<TableCell>
<b>Host</b>
</TableCell>
<TableCell>
<b>Application</b>
</TableCell>
<TableCell>
<b>Message</b>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{logTable.map(row => (
<TableRow
key={row.id}
sx={{
backgroundColor: colors[row.level] || colors.default,
}}
>
<TableCell>
<pre>{row.timestamp}</pre>
</TableCell>
<TableCell>
<pre>{row.level}</pre>
</TableCell>
<TableCell>
<pre>{row.host}</pre>
</TableCell>
<TableCell>
<pre>{row.application}</pre>
</TableCell>
<TableCell>{row.text}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
} else if (props.error !== undefined) {
return <p>{props.error}</p>;
} else {
return <p>An unknown error has occurred</p>;
}
})()}
</BoxBasic>
);
}

export default LogTable;

0 comments on commit 310af54

Please sign in to comment.