alex/manage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): slice 3 — Backups cluster migration + nav/IA

Browse Source 
Web UI rework.
- Migrate BackupAlertsTable, BackupJobsTable, BackupRunsTable,
  BackupsPage, BackupDashboardWidget off @mui (shadcn Table + Badge
  severity variants: success=chart-2, warning=chart-3, destructive)
- App.tsx IA: Backups now top-level nav (DatabaseBackup icon);
  Media surface primary at /media; /applications -> /media redirect
  in both route trees (mirrors /monitoring -> /observability)

Gate: build + lint + test green.
This commit is contained in:
Developer
2026-06-17 12:53:36 +00:00
parent 109e74db41
commit 77c6b62ee2
11 changed files with 720 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/BackupAlertsTable.tsx
+63 -46
View File
@@ -1,56 +1,73 @@
import { Button, Chip, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import type { BackupAlert } from "../types/backups";
interface Props {
alerts: BackupAlert[];
onAcknowledge: (alertId: string) => void;
alerts: BackupAlert[];
onAcknowledge: (alertId: string) => void;
}
function formatTimestamp(ts: number): string {
return new Date(ts * 1000).toLocaleString();
return new Date(ts * 1000).toLocaleString();
}
type SeverityVariant = "destructive" | "warning";
/**
* Map an alert severity onto a Badge variant per design §2.3.
* `critical` → destructive (chart-4); `warning` → warning (chart-3).
*/
function severityVariant(severity: string): SeverityVariant {
return severity === "critical" ? "destructive" : "warning";
}
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>
);
return (
<div className="overflow-hidden rounded-lg border border-border">
<Table aria-label="Backup alerts">
<TableHeader>
<TableRow className="bg-card hover:bg-card">
<TableHead>Severity</TableHead>
<TableHead>Type</TableHead>
<TableHead>Message</TableHead>
<TableHead>Created</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{alerts.map((alert) => (
<TableRow key={alert.id}>
<TableCell>
<Badge variant={severityVariant(alert.severity)}>
{alert.severity}
</Badge>
</TableCell>
<TableCell>{alert.alert_type}</TableCell>
<TableCell>{alert.message}</TableCell>
<TableCell>{formatTimestamp(alert.created_at)}</TableCell>
<TableCell>
{!alert.acknowledged && (
<Button
size="sm"
variant="outline"
onClick={() => onAcknowledge(alert.id)}
>
Acknowledge
</Button>
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
}