feat(frontend): slice 3 — Backups cluster migration + nav/IA
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
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,84 +1,90 @@
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Chip,
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
} from "@mui/material";
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { BackupJob, BackupRun } from "../types/backups";
|
||||
|
||||
interface Props {
|
||||
jobs: BackupJob[];
|
||||
latestRuns: Map<string, BackupRun>;
|
||||
jobs: BackupJob[];
|
||||
latestRuns: Map<string, BackupRun>;
|
||||
}
|
||||
|
||||
function formatInterval(seconds: number | null): string {
|
||||
if (!seconds) return "N/A";
|
||||
if (seconds < 60) return `${seconds}s`;
|
||||
if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
|
||||
if (seconds < 86400) return `${Math.floor(seconds / 3600)}h`;
|
||||
return `${Math.floor(seconds / 86400)}d`;
|
||||
if (!seconds) return "N/A";
|
||||
if (seconds < 60) return `${seconds}s`;
|
||||
if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
|
||||
if (seconds < 86400) return `${Math.floor(seconds / 3600)}h`;
|
||||
return `${Math.floor(seconds / 86400)}d`;
|
||||
}
|
||||
|
||||
function formatTimestamp(ts: number | null): string {
|
||||
if (!ts) return "Never";
|
||||
return new Date(ts * 1000).toLocaleString();
|
||||
if (!ts) return "Never";
|
||||
return new Date(ts * 1000).toLocaleString();
|
||||
}
|
||||
|
||||
type StatusVariant = "success" | "destructive" | "warning" | "secondary";
|
||||
|
||||
/**
|
||||
* Map a job/run status onto a Badge variant per design §2.3:
|
||||
* `success` → success (chart-2); `failure` → destructive (chart-4);
|
||||
* `in_progress` → warning (chart-3); unknown → secondary (neutral accent).
|
||||
*/
|
||||
function statusVariant(status: string): StatusVariant {
|
||||
if (status === "success") return "success";
|
||||
if (status === "failure") return "destructive";
|
||||
if (status === "in_progress") return "warning";
|
||||
return "secondary";
|
||||
}
|
||||
|
||||
export default function BackupJobsTable({ jobs, latestRuns }: Props) {
|
||||
return (
|
||||
<TableContainer component={Paper}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell>Source</TableCell>
|
||||
<TableCell>Target</TableCell>
|
||||
<TableCell>Schedule</TableCell>
|
||||
<TableCell>Last Status</TableCell>
|
||||
<TableCell>Last Run</TableCell>
|
||||
<TableCell>Next Expected</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{jobs.map((job) => {
|
||||
const run = latestRuns.get(job.id);
|
||||
const status = run?.status ?? "unknown";
|
||||
const nextExpected = run && job.schedule_interval_seconds
|
||||
? run.started_at + job.schedule_interval_seconds
|
||||
: null;
|
||||
|
||||
return (
|
||||
<TableRow key={job.id} hover>
|
||||
<TableCell>{job.name}</TableCell>
|
||||
<TableCell>{job.source ?? "—"}</TableCell>
|
||||
<TableCell>{job.target ?? "—"}</TableCell>
|
||||
<TableCell>{formatInterval(job.schedule_interval_seconds)}</TableCell>
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={status}
|
||||
color={
|
||||
status === "success"
|
||||
? "success"
|
||||
: status === "failure"
|
||||
? "error"
|
||||
: status === "in_progress"
|
||||
? "warning"
|
||||
: "default"
|
||||
}
|
||||
size="small"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>{formatTimestamp(run?.started_at ?? null)}</TableCell>
|
||||
<TableCell>{formatTimestamp(nextExpected)}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
return (
|
||||
<div className="overflow-hidden rounded-lg border border-border">
|
||||
<Table aria-label="Backup jobs">
|
||||
<TableHeader>
|
||||
<TableRow className="bg-card hover:bg-card">
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Source</TableHead>
|
||||
<TableHead>Target</TableHead>
|
||||
<TableHead>Schedule</TableHead>
|
||||
<TableHead>Last Status</TableHead>
|
||||
<TableHead>Last Run</TableHead>
|
||||
<TableHead>Next Expected</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{jobs.map((job) => {
|
||||
const run = latestRuns.get(job.id);
|
||||
const status = run?.status ?? "unknown";
|
||||
const nextExpected =
|
||||
run && job.schedule_interval_seconds
|
||||
? run.started_at + job.schedule_interval_seconds
|
||||
: null;
|
||||
|
||||
return (
|
||||
<TableRow key={job.id}>
|
||||
<TableCell>{job.name}</TableCell>
|
||||
<TableCell>{job.source ?? "—"}</TableCell>
|
||||
<TableCell>{job.target ?? "—"}</TableCell>
|
||||
<TableCell>
|
||||
{formatInterval(job.schedule_interval_seconds)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={statusVariant(status)}>{status}</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{formatTimestamp(run?.started_at ?? null)}
|
||||
</TableCell>
|
||||
<TableCell>{formatTimestamp(nextExpected)}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,103 +1,110 @@
|
||||
import {
|
||||
Chip,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Paper,
|
||||
Select,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
} from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { BackupRun } from "../types/backups";
|
||||
|
||||
interface Props {
|
||||
runs: BackupRun[];
|
||||
runs: BackupRun[];
|
||||
}
|
||||
|
||||
function formatBytes(bytes: number | null): string {
|
||||
if (bytes === null || bytes === undefined) return "—";
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
|
||||
if (bytes === null || bytes === undefined) return "—";
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024)
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
|
||||
}
|
||||
|
||||
function formatDuration(ms: number | null): string {
|
||||
if (ms === null || ms === undefined) return "—";
|
||||
if (ms < 1000) return `${ms}ms`;
|
||||
if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
|
||||
if (ms < 3600_000) return `${(ms / 60_000).toFixed(1)}m`;
|
||||
return `${(ms / 3600_000).toFixed(1)}h`;
|
||||
if (ms === null || ms === undefined) return "—";
|
||||
if (ms < 1000) return `${ms}ms`;
|
||||
if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
|
||||
if (ms < 3600_000) return `${(ms / 60_000).toFixed(1)}m`;
|
||||
return `${(ms / 3600_000).toFixed(1)}h`;
|
||||
}
|
||||
|
||||
function formatTimestamp(ts: number): string {
|
||||
return new Date(ts * 1000).toLocaleString();
|
||||
return new Date(ts * 1000).toLocaleString();
|
||||
}
|
||||
|
||||
type StatusVariant = "success" | "destructive" | "warning";
|
||||
|
||||
/**
|
||||
* Map a run status onto a Badge variant per design §2.3:
|
||||
* `success` → success (chart-2); `failure` → destructive (chart-4);
|
||||
* `in_progress` → warning (chart-3).
|
||||
*/
|
||||
function statusVariant(status: string): StatusVariant {
|
||||
if (status === "success") return "success";
|
||||
if (status === "failure") return "destructive";
|
||||
return "warning";
|
||||
}
|
||||
|
||||
export default function BackupRunsTable({ runs }: Props) {
|
||||
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||||
|
||||
const filteredRuns = statusFilter === "all"
|
||||
? runs
|
||||
: runs.filter((r) => r.status === statusFilter);
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormControl sx={{ minWidth: 120, mb: 2 }}>
|
||||
<InputLabel>Status</InputLabel>
|
||||
<Select
|
||||
value={statusFilter}
|
||||
label="Status"
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
>
|
||||
<MenuItem value="all">All</MenuItem>
|
||||
<MenuItem value="success">Success</MenuItem>
|
||||
<MenuItem value="failure">Failure</MenuItem>
|
||||
<MenuItem value="in_progress">In Progress</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<TableContainer component={Paper}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Job</TableCell>
|
||||
<TableCell>Status</TableCell>
|
||||
<TableCell>Duration</TableCell>
|
||||
<TableCell>Size</TableCell>
|
||||
<TableCell>Started</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{filteredRuns.map((run) => (
|
||||
<TableRow key={run.id} hover>
|
||||
<TableCell>{run.job_id}</TableCell>
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={run.status}
|
||||
color={
|
||||
run.status === "success"
|
||||
? "success"
|
||||
: run.status === "failure"
|
||||
? "error"
|
||||
: "warning"
|
||||
}
|
||||
size="small"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>{formatDuration(run.duration_ms)}</TableCell>
|
||||
<TableCell>{formatBytes(run.bytes_transferred)}</TableCell>
|
||||
<TableCell>{formatTimestamp(run.started_at)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</>
|
||||
);
|
||||
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||||
|
||||
const filteredRuns =
|
||||
statusFilter === "all"
|
||||
? runs
|
||||
: runs.filter((r) => r.status === statusFilter);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="w-[160px]" aria-label="Status filter">
|
||||
<SelectValue placeholder="Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All</SelectItem>
|
||||
<SelectItem value="success">Success</SelectItem>
|
||||
<SelectItem value="failure">Failure</SelectItem>
|
||||
<SelectItem value="in_progress">In Progress</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<div className="overflow-hidden rounded-lg border border-border">
|
||||
<Table aria-label="Backup runs">
|
||||
<TableHeader>
|
||||
<TableRow className="bg-card hover:bg-card">
|
||||
<TableHead>Job</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Duration</TableHead>
|
||||
<TableHead>Size</TableHead>
|
||||
<TableHead>Started</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredRuns.map((run) => (
|
||||
<TableRow key={run.id}>
|
||||
<TableCell>{run.job_id}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={statusVariant(run.status)}>
|
||||
{run.status}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{formatDuration(run.duration_ms)}</TableCell>
|
||||
<TableCell>{formatBytes(run.bytes_transferred)}</TableCell>
|
||||
<TableCell>{formatTimestamp(run.started_at)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,69 +1,72 @@
|
||||
import { Box, Tab, Tabs, Typography } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import {
|
||||
useAcknowledgeAlert,
|
||||
useBackupAlerts,
|
||||
useBackupJobs,
|
||||
useBackupRuns,
|
||||
useAcknowledgeAlert,
|
||||
useBackupAlerts,
|
||||
useBackupJobs,
|
||||
useBackupRuns,
|
||||
} from "../hooks/useBackups";
|
||||
import BackupAlertsTable from "./BackupAlertsTable";
|
||||
import BackupJobsTable from "./BackupJobsTable";
|
||||
import BackupRunsTable from "./BackupRunsTable";
|
||||
|
||||
export default function BackupsPage() {
|
||||
const [tab, setTab] = useState(0);
|
||||
const { data: jobsData, isLoading: jobsLoading } = useBackupJobs();
|
||||
const { data: runsData, isLoading: runsLoading } = useBackupRuns();
|
||||
const { data: alertsData, isLoading: alertsLoading } = useBackupAlerts(undefined, false);
|
||||
const acknowledgeMutation = useAcknowledgeAlert();
|
||||
|
||||
// Build a map of latest runs per job
|
||||
const latestRuns = new Map();
|
||||
if (runsData) {
|
||||
for (const run of runsData) {
|
||||
const existing = latestRuns.get(run.job_id);
|
||||
if (!existing || run.started_at > existing.started_at) {
|
||||
latestRuns.set(run.job_id, run);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Typography variant="h4" gutterBottom>Backups</Typography>
|
||||
|
||||
<Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 2 }}>
|
||||
<Tab label="Jobs" />
|
||||
<Tab label="Runs" />
|
||||
<Tab label={`Alerts ${alertsData ? `(${alertsData.length})` : ""}`} />
|
||||
</Tabs>
|
||||
|
||||
{tab === 0 && (
|
||||
jobsLoading ? (
|
||||
<Typography>Loading jobs...</Typography>
|
||||
) : (
|
||||
<BackupJobsTable jobs={jobsData ?? []} latestRuns={latestRuns} />
|
||||
)
|
||||
)}
|
||||
|
||||
{tab === 1 && (
|
||||
runsLoading ? (
|
||||
<Typography>Loading runs...</Typography>
|
||||
) : (
|
||||
<BackupRunsTable runs={runsData ?? []} />
|
||||
)
|
||||
)}
|
||||
|
||||
{tab === 2 && (
|
||||
alertsLoading ? (
|
||||
<Typography>Loading alerts...</Typography>
|
||||
) : (
|
||||
<BackupAlertsTable
|
||||
alerts={alertsData ?? []}
|
||||
onAcknowledge={(id) => acknowledgeMutation.mutate(id)}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
const [tab, setTab] = useState("jobs");
|
||||
const { data: jobsData, isLoading: jobsLoading } = useBackupJobs();
|
||||
const { data: runsData, isLoading: runsLoading } = useBackupRuns();
|
||||
const { data: alertsData, isLoading: alertsLoading } = useBackupAlerts(
|
||||
undefined,
|
||||
false,
|
||||
);
|
||||
const acknowledgeMutation = useAcknowledgeAlert();
|
||||
|
||||
// Build a map of latest runs per job
|
||||
const latestRuns = new Map();
|
||||
if (runsData) {
|
||||
for (const run of runsData) {
|
||||
const existing = latestRuns.get(run.job_id);
|
||||
if (!existing || run.started_at > existing.started_at) {
|
||||
latestRuns.set(run.job_id, run);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const alertsLabel = alertsData ? `Alerts (${alertsData.length})` : "Alerts";
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-2xl font-bold tracking-tight">Backups</h1>
|
||||
<Tabs value={tab} onValueChange={setTab}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="jobs">Jobs</TabsTrigger>
|
||||
<TabsTrigger value="runs">Runs</TabsTrigger>
|
||||
<TabsTrigger value="alerts">{alertsLabel}</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="jobs">
|
||||
{jobsLoading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading jobs…</p>
|
||||
) : (
|
||||
<BackupJobsTable jobs={jobsData ?? []} latestRuns={latestRuns} />
|
||||
)}
|
||||
</TabsContent>
|
||||
<TabsContent value="runs">
|
||||
{runsLoading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading runs…</p>
|
||||
) : (
|
||||
<BackupRunsTable runs={runsData ?? []} />
|
||||
)}
|
||||
</TabsContent>
|
||||
<TabsContent value="alerts">
|
||||
{alertsLoading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading alerts…</p>
|
||||
) : (
|
||||
<BackupAlertsTable
|
||||
alerts={alertsData ?? []}
|
||||
onAcknowledge={(id) => acknowledgeMutation.mutate(id)}
|
||||
/>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import BackupAlertsTable from "../BackupAlertsTable";
|
||||
import type { BackupAlert } from "../../types/backups";
|
||||
|
||||
function alert(overrides: Partial<BackupAlert> = {}): BackupAlert {
|
||||
return {
|
||||
id: "a1",
|
||||
job_id: "job-1",
|
||||
run_id: null,
|
||||
alert_type: "failed_status",
|
||||
severity: "warning",
|
||||
message: "Run failed",
|
||||
acknowledged: false,
|
||||
resolved_at: null,
|
||||
created_at: 1_700_000_000,
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe("BackupAlertsTable", () => {
|
||||
it("maps alert severity onto Badge variants per design §2.3", () => {
|
||||
render(
|
||||
<BackupAlertsTable
|
||||
alerts={[
|
||||
alert({ id: "c", severity: "critical" }),
|
||||
alert({ id: "w", severity: "warning" }),
|
||||
]}
|
||||
onAcknowledge={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText("critical").getAttribute("data-variant")).toBe(
|
||||
"destructive",
|
||||
);
|
||||
expect(screen.getByText("warning").getAttribute("data-variant")).toBe(
|
||||
"warning",
|
||||
);
|
||||
});
|
||||
|
||||
it("calls onAcknowledge with the alert id when the button is clicked", async () => {
|
||||
const onAcknowledge = vi.fn();
|
||||
render(
|
||||
<BackupAlertsTable
|
||||
alerts={[alert({ id: "ack-me" })]}
|
||||
onAcknowledge={onAcknowledge}
|
||||
/>,
|
||||
);
|
||||
await userEvent.click(screen.getByRole("button", { name: "Acknowledge" }));
|
||||
expect(onAcknowledge).toHaveBeenCalledTimes(1);
|
||||
expect(onAcknowledge).toHaveBeenCalledWith("ack-me");
|
||||
});
|
||||
|
||||
it("hides the acknowledge button for already-acknowledged alerts", () => {
|
||||
render(
|
||||
<BackupAlertsTable
|
||||
alerts={[alert({ id: "done", acknowledged: true })]}
|
||||
onAcknowledge={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.queryByRole("button", { name: "Acknowledge" })).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,63 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import BackupDashboardWidget from "../BackupDashboardWidget";
|
||||
import { useBackupDashboard } from "../../hooks/useBackups";
|
||||
|
||||
// The widget reads from the react-query hook; mocking `useBackupDashboard` lets
|
||||
// us exercise the render paths without a QueryClientProvider or network.
|
||||
vi.mock("../../hooks/useBackups", () => ({
|
||||
useBackupDashboard: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockUseBackupDashboard = vi.mocked(useBackupDashboard);
|
||||
type DashboardResult = ReturnType<typeof useBackupDashboard>;
|
||||
|
||||
function mockResult(
|
||||
data: DashboardResult["data"],
|
||||
isLoading = false,
|
||||
): DashboardResult {
|
||||
return { data, isLoading } as DashboardResult;
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
mockUseBackupDashboard.mockReset();
|
||||
});
|
||||
|
||||
describe("BackupDashboardWidget", () => {
|
||||
it("renders the loading state while data is pending", () => {
|
||||
mockUseBackupDashboard.mockReturnValue(mockResult(undefined, true));
|
||||
render(<BackupDashboardWidget />);
|
||||
expect(screen.getByText("Loading…")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the backup dashboard stats (jobs / 24h success)", () => {
|
||||
mockUseBackupDashboard.mockReturnValue(
|
||||
mockResult({
|
||||
total_jobs: 4,
|
||||
success_rate_24h: 96,
|
||||
active_alerts: 0,
|
||||
last_failed_at: null,
|
||||
}),
|
||||
);
|
||||
render(<BackupDashboardWidget />);
|
||||
expect(screen.getByText("4")).toBeInTheDocument();
|
||||
expect(screen.getByText("96%")).toBeInTheDocument();
|
||||
expect(screen.getByText("Jobs")).toBeInTheDocument();
|
||||
expect(screen.getByText("24h Success")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders a destructive Badge for active alerts and shows last-failed time", () => {
|
||||
mockUseBackupDashboard.mockReturnValue(
|
||||
mockResult({
|
||||
total_jobs: 2,
|
||||
success_rate_24h: 50,
|
||||
active_alerts: 3,
|
||||
last_failed_at: 1_700_000_000,
|
||||
}),
|
||||
);
|
||||
render(<BackupDashboardWidget />);
|
||||
const badge = screen.getByText("3");
|
||||
expect(badge.getAttribute("data-variant")).toBe("destructive");
|
||||
expect(screen.getByText(/Last failed:/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,59 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import BackupRunsTable from "../BackupRunsTable";
|
||||
import type { BackupRun } from "../../types/backups";
|
||||
|
||||
function run(overrides: Partial<BackupRun> = {}): BackupRun {
|
||||
return {
|
||||
id: "r1",
|
||||
job_id: "job-1",
|
||||
started_at: 1_700_000_000,
|
||||
ended_at: null,
|
||||
status: "success",
|
||||
bytes_transferred: 2048,
|
||||
duration_ms: 1500,
|
||||
error_message: null,
|
||||
details_json: null,
|
||||
created_at: 1_700_000_000,
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe("BackupRunsTable", () => {
|
||||
it("maps run status onto Badge variants per design §2.3", () => {
|
||||
render(
|
||||
<BackupRunsTable
|
||||
runs={[
|
||||
run({ id: "a", status: "success" }),
|
||||
run({ id: "b", status: "failure" }),
|
||||
run({ id: "c", status: "in_progress" }),
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText("success").getAttribute("data-variant")).toBe(
|
||||
"success",
|
||||
);
|
||||
expect(screen.getByText("failure").getAttribute("data-variant")).toBe(
|
||||
"destructive",
|
||||
);
|
||||
expect(screen.getByText("in_progress").getAttribute("data-variant")).toBe(
|
||||
"warning",
|
||||
);
|
||||
});
|
||||
|
||||
it("renders the formatted duration and transferred size", () => {
|
||||
render(
|
||||
<BackupRunsTable
|
||||
runs={[
|
||||
run({
|
||||
id: "fmt",
|
||||
duration_ms: 1500,
|
||||
bytes_transferred: 2048,
|
||||
}),
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText("1.5s")).toBeInTheDocument();
|
||||
expect(screen.getByText("2.0 KB")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user