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

feat(frontend): add backup monitoring UI components

Browse Source 
Add BackupJobsTable, BackupRunsTable, BackupAlertsTable,
BackupDashboardWidget, and BackupsPage components for
backup monitoring dashboard.
This commit is contained in:
Alex
2026-05-11 21:52:04 +02:00
parent 36e5d85a82
commit a7a66ff370
5 changed files with 364 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/BackupDashboardWidget.tsx
+52
View File
@@ -0,0 +1,52 @@
import { Card, CardContent, Typography, Box, Chip } from "@mui/material";
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>
);
}