Developer
77c6b62ee2
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.
111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
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[];
|
|
}
|
|
|
|
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`;
|
|
}
|
|
|
|
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`;
|
|
}
|
|
|
|
function formatTimestamp(ts: number): string {
|
|
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 (
|
|
<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>
|
|
);
|
|
}
|