feat(frontend): add backup monitoring UI components

Add BackupJobsTable, BackupRunsTable, BackupAlertsTable, BackupDashboardWidget, and BackupsPage components for backup monitoring dashboard.
2026-05-11 21:52:04 +02:00
parent 36e5d85a82
commit a7a66ff370
5 changed files with 364 additions and 0 deletions
@@ -0,0 +1,56 @@
+import { Button, Chip, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import { BackupAlert } from "../types/backups";
+
+interface Props {
+    alerts: BackupAlert[];
+    onAcknowledge: (alertId: string) => void;
+}
+
+function formatTimestamp(ts: number): string {
+    return new Date(ts * 1000).toLocaleString();
+}
+
+export default function BackupAlertsTable({ alerts, onAcknowledge }: Props) {
+    return (
+        <TableContainer component={Paper}>
+            <Table>
+                <TableHead>
+                    <TableRow>
+                        <TableCell>Severity</TableCell>
+                        <TableCell>Type</TableCell>
+                        <TableCell>Message</TableCell>
+                        <TableCell>Created</TableCell>
+                        <TableCell>Actions</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {alerts.map((alert) => (
+                        <TableRow key={alert.id} hover>
+                            <TableCell>
+                                <Chip
+                                    label={alert.severity}
+                                    color={alert.severity === "critical" ? "error" : "warning"}
+                                    size="small"
+                                />
+                            </TableCell>
+                            <TableCell>{alert.alert_type}</TableCell>
+                            <TableCell>{alert.message}</TableCell>
+                            <TableCell>{formatTimestamp(alert.created_at)}</TableCell>
+                            <TableCell>
+                                {!alert.acknowledged && (
+                                    <Button
+                                        size="small"
+                                        variant="outlined"
+                                        onClick={() => onAcknowledge(alert.id)}
+                                    >
+                                        Acknowledge
+                                    </Button>
+                                )}
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+}