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/BackupDashboardWidget.tsx
+45 -48
View File
@@ -1,52 +1,49 @@
import { Card, CardContent, Typography, Box, Chip } from "@mui/material";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useBackupDashboard } from "../hooks/useBackups";
export default function BackupDashboardWidget() {
const { data, isLoading } = useBackupDashboard();
if (isLoading || !data) {
return (
<Card>
<CardContent>
<Typography variant="h6">Backups</Typography>
<Typography color="text.secondary">Loading...</Typography>
</CardContent>
</Card>
);
}
return (
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>Backups</Typography>
<Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
<Box>
<Typography variant="h4">{data.total_jobs}</Typography>
<Typography variant="body2" color="text.secondary">Jobs</Typography>
</Box>
<Box>
<Typography variant="h4">{data.success_rate_24h}%</Typography>
<Typography variant="body2" color="text.secondary">24h Success</Typography>
</Box>
<Box>
<Typography variant="h4">
{data.active_alerts > 0 ? (
<Chip label={data.active_alerts} color="error" size="small" />
) : (
0
)}
</Typography>
<Typography variant="body2" color="text.secondary">Alerts</Typography>
</Box>
{data.last_failed_at && (
<Box>
<Typography variant="body2" color="error">
Last failed: {new Date(data.last_failed_at * 1000).toLocaleString()}
</Typography>
</Box>
)}
</Box>
</CardContent>
</Card>
);
const { data, isLoading } = useBackupDashboard();
return (
<Card>
<CardHeader>
<CardTitle>Backups</CardTitle>
</CardHeader>
<CardContent>
{isLoading || !data ? (
<p className="text-sm text-muted-foreground">Loading…</p>
) : (
<div className="flex flex-row flex-wrap gap-6">
<div>
<div className="text-2xl font-semibold">{data.total_jobs}</div>
<div className="text-xs text-muted-foreground">Jobs</div>
</div>
<div>
<div className="text-2xl font-semibold">
{data.success_rate_24h}%
</div>
<div className="text-xs text-muted-foreground">24h Success</div>
</div>
<div>
<div className="text-2xl font-semibold">
{data.active_alerts > 0 ? (
<Badge variant="destructive">{data.active_alerts}</Badge>
) : (
0
)}
</div>
<div className="text-xs text-muted-foreground">Alerts</div>
</div>
{data.last_failed_at && (
<div className="self-center text-xs text-destructive">
Last failed:{" "}
{new Date(data.last_failed_at * 1000).toLocaleString()}
</div>
)}
</div>
)}
</CardContent>
</Card>
);
}