Display log events

central_frontend/src/routes/LogsRoute.tsx

@@ -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>
+  );
 }

central_frontend/src/widgets/SolarEnergyRouteContainer.tsx

@@ -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>