Display log events

This commit is contained in:
Pierre HUBERT 2024-10-03 20:52:05 +02:00
parent 7dfb172aeb
commit caf05d9126
2 changed files with 57 additions and 3 deletions

View File

@ -1,7 +1,18 @@
import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
import RefreshIcon from "@mui/icons-material/Refresh";
import { IconButton, Tooltip } from "@mui/material";
import {
IconButton,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Tooltip,
Typography,
} from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
import dayjs from "dayjs";
import React from "react";
@ -41,6 +52,7 @@ export function LogsRoute(): React.ReactElement {
display: "flex",
alignItems: "center",
justifyContent: "center",
marginBottom: "10px",
}}
>
<Tooltip title="Previous day">
@ -71,5 +83,40 @@ export function LogsRoute(): React.ReactElement {
}
function LogsView(p: { logs: LogEntry[] }): React.ReactElement {
return "TODO : show logs";
if (p.logs.length == 0) {
return (
<Typography style={{ textAlign: "center" }}>
There was no log recorded on this day.
</Typography>
);
}
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
<TableHead>
<TableRow>
<TableCell>Device ID</TableCell>
<TableCell>Time</TableCell>
<TableCell>Severity</TableCell>
<TableCell>Message</TableCell>
</TableRow>
</TableHead>
<TableBody>
{p.logs.map((row, id) => (
<TableRow key={id} hover>
<TableCell component="th" scope="row">
{row.device_id ?? "Backend"}
</TableCell>
<TableCell>
{new Date(row.time * 1000).toLocaleTimeString()}
</TableCell>
<TableCell>{row.severity}</TableCell>
<TableCell>{row.message}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}

View File

@ -9,13 +9,20 @@ export function SolarEnergyRouteContainer(
} & PropsWithChildren
): React.ReactElement {
return (
<div style={{ margin: p.homeWidget ? "0px" : "50px" }}>
<div
style={{
margin: p.homeWidget ? "0px" : "50px",
flex: 1,
maxWidth: "1300px",
}}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "20px",
flex: 1,
}}
>
<Typography variant={p.homeWidget ? "h6" : "h4"}>{p.label}</Typography>