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/App.tsx
+19 -5
View File
@@ -43,6 +43,7 @@ import {
import { import {
LayoutDashboard, LayoutDashboard,
Activity, Activity,
DatabaseBackup,
Monitor, Monitor,
Users, Users,
Zap, Zap,
@@ -82,8 +83,9 @@ function useDarkMode() {
const navItems = [ const navItems = [
{ path: "/", label: "Dashboard", icon: LayoutDashboard }, { path: "/", label: "Dashboard", icon: LayoutDashboard },
{ path: "/observability", label: "Observability", icon: Activity }, { path: "/observability", label: "Observability", icon: Activity },
{ path: "/applications", label: "Media", icon: Monitor }, { path: "/media", label: "Media", icon: Monitor },
{ path: "/files", label: "Files", icon: FolderOpen }, { path: "/files", label: "Files", icon: FolderOpen },
{ path: "/backups", label: "Backups", icon: DatabaseBackup },
{ path: "/users", label: "Users", icon: Users }, { path: "/users", label: "Users", icon: Users },
{ path: "/actions", label: "Actions", icon: Zap }, { path: "/actions", label: "Actions", icon: Zap },
{ path: "/settings", label: "Settings", icon: SettingsIcon }, { path: "/settings", label: "Settings", icon: SettingsIcon },
@@ -432,9 +434,15 @@ function AppInner() {
<Routes> <Routes>
<Route element={<AuthenticatedApp />}> <Route element={<AuthenticatedApp />}>
<Route path="/" element={<Dashboard />} /> <Route path="/" element={<Dashboard />} />
<Route path="/monitoring" element={<Navigate to="/observability" replace />} /> <Route
<Route path="/applications" element={<Applications />} /> path="/monitoring"
element={<Navigate to="/observability" replace />}
/>
<Route path="/media" element={<Applications />} /> <Route path="/media" element={<Applications />} />
<Route
path="/applications"
element={<Navigate to="/media" replace />}
/>
<Route path="/users" element={<UsersPage />} /> <Route path="/users" element={<UsersPage />} />
<Route path="/actions" element={<Actions />} /> <Route path="/actions" element={<Actions />} />
<Route path="/files" element={<FileBrowser />} /> <Route path="/files" element={<FileBrowser />} />
@@ -457,9 +465,15 @@ function AppInner() {
} }
> >
<Route path="/" element={<Dashboard />} /> <Route path="/" element={<Dashboard />} />
<Route path="/monitoring" element={<Navigate to="/observability" replace />} /> <Route
<Route path="/applications" element={<Applications />} /> path="/monitoring"
element={<Navigate to="/observability" replace />}
/>
<Route path="/media" element={<Applications />} /> <Route path="/media" element={<Applications />} />
<Route
path="/applications"
element={<Navigate to="/media" replace />}
/>
<Route path="/users" element={<UsersPage />} /> <Route path="/users" element={<UsersPage />} />
<Route path="/actions" element={<Actions />} /> <Route path="/actions" element={<Actions />} />
<Route path="/files" element={<FileBrowser />} /> <Route path="/files" element={<FileBrowser />} />
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"; import type { BackupAlert } from "../types/backups";
interface Props { interface Props {
alerts: BackupAlert[]; alerts: BackupAlert[];
onAcknowledge: (alertId: string) => void; onAcknowledge: (alertId: string) => void;
} }
function formatTimestamp(ts: number): string { 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) { export default function BackupAlertsTable({ alerts, onAcknowledge }: Props) {
return ( return (
<TableContainer component={Paper}> <div className="overflow-hidden rounded-lg border border-border">
<Table> <Table aria-label="Backup alerts">
<TableHead> <TableHeader>
<TableRow> <TableRow className="bg-card hover:bg-card">
<TableCell>Severity</TableCell> <TableHead>Severity</TableHead>
<TableCell>Type</TableCell> <TableHead>Type</TableHead>
<TableCell>Message</TableCell> <TableHead>Message</TableHead>
<TableCell>Created</TableCell> <TableHead>Created</TableHead>
<TableCell>Actions</TableCell> <TableHead>Actions</TableHead>
</TableRow> </TableRow>
</TableHead> </TableHeader>
<TableBody> <TableBody>
{alerts.map((alert) => ( {alerts.map((alert) => (
<TableRow key={alert.id} hover> <TableRow key={alert.id}>
<TableCell> <TableCell>
<Chip <Badge variant={severityVariant(alert.severity)}>
label={alert.severity} {alert.severity}
color={alert.severity === "critical" ? "error" : "warning"} </Badge>
size="small" </TableCell>
/> <TableCell>{alert.alert_type}</TableCell>
</TableCell> <TableCell>{alert.message}</TableCell>
<TableCell>{alert.alert_type}</TableCell> <TableCell>{formatTimestamp(alert.created_at)}</TableCell>
<TableCell>{alert.message}</TableCell> <TableCell>
<TableCell>{formatTimestamp(alert.created_at)}</TableCell> {!alert.acknowledged && (
<TableCell> <Button
{!alert.acknowledged && ( size="sm"
<Button variant="outline"
size="small" onClick={() => onAcknowledge(alert.id)}
variant="outlined" >
onClick={() => onAcknowledge(alert.id)} Acknowledge
> </Button>
Acknowledge )}
</Button> </TableCell>
)} </TableRow>
</TableCell> ))}
</TableRow> </TableBody>
))} </Table>
</TableBody> </div>
</Table> );
</TableContainer>
);
} }
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"; import { useBackupDashboard } from "../hooks/useBackups";
export default function BackupDashboardWidget() { export default function BackupDashboardWidget() {
const { data, isLoading } = useBackupDashboard(); const { data, isLoading } = useBackupDashboard();
if (isLoading || !data) { return (
return ( <Card>
<Card> <CardHeader>
<CardContent> <CardTitle>Backups</CardTitle>
<Typography variant="h6">Backups</Typography> </CardHeader>
<Typography color="text.secondary">Loading...</Typography> <CardContent>
</CardContent> {isLoading || !data ? (
</Card> <p className="text-sm text-muted-foreground">Loading…</p>
); ) : (
} <div className="flex flex-row flex-wrap gap-6">
<div>
return ( <div className="text-2xl font-semibold">{data.total_jobs}</div>
<Card> <div className="text-xs text-muted-foreground">Jobs</div>
<CardContent> </div>
<Typography variant="h6" gutterBottom>Backups</Typography> <div>
<Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}> <div className="text-2xl font-semibold">
<Box> {data.success_rate_24h}%
<Typography variant="h4">{data.total_jobs}</Typography> </div>
<Typography variant="body2" color="text.secondary">Jobs</Typography> <div className="text-xs text-muted-foreground">24h Success</div>
</Box> </div>
<Box> <div>
<Typography variant="h4">{data.success_rate_24h}%</Typography> <div className="text-2xl font-semibold">
<Typography variant="body2" color="text.secondary">24h Success</Typography> {data.active_alerts > 0 ? (
</Box> <Badge variant="destructive">{data.active_alerts}</Badge>
<Box> ) : (
<Typography variant="h4"> 0
{data.active_alerts > 0 ? ( )}
<Chip label={data.active_alerts} color="error" size="small" /> </div>
) : ( <div className="text-xs text-muted-foreground">Alerts</div>
0 </div>
)} {data.last_failed_at && (
</Typography> <div className="self-center text-xs text-destructive">
<Typography variant="body2" color="text.secondary">Alerts</Typography> Last failed:{" "}
</Box> {new Date(data.last_failed_at * 1000).toLocaleString()}
{data.last_failed_at && ( </div>
<Box> )}
<Typography variant="body2" color="error"> </div>
Last failed: {new Date(data.last_failed_at * 1000).toLocaleString()} )}
</Typography> </CardContent>
</Box> </Card>
)} );
</Box>
</CardContent>
</Card>
);
} }
frontend/src/components/BackupJobsTable.tsx
+76 -70
View File
@@ -1,84 +1,90 @@
import { Badge } from "@/components/ui/badge";
import { import {
Chip, Table,
Paper, TableBody,
Table, TableCell,
TableBody, TableHead,
TableCell, TableHeader,
TableContainer, TableRow,
TableHead, } from "@/components/ui/table";
TableRow,
} from "@mui/material";
import type { BackupJob, BackupRun } from "../types/backups"; import type { BackupJob, BackupRun } from "../types/backups";
interface Props { interface Props {
jobs: BackupJob[]; jobs: BackupJob[];
latestRuns: Map<string, BackupRun>; latestRuns: Map<string, BackupRun>;
} }
function formatInterval(seconds: number | null): string { function formatInterval(seconds: number | null): string {
if (!seconds) return "N/A"; if (!seconds) return "N/A";
if (seconds < 60) return `${seconds}s`; if (seconds < 60) return `${seconds}s`;
if (seconds < 3600) return `${Math.floor(seconds / 60)}m`; if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
if (seconds < 86400) return `${Math.floor(seconds / 3600)}h`; if (seconds < 86400) return `${Math.floor(seconds / 3600)}h`;
return `${Math.floor(seconds / 86400)}d`; return `${Math.floor(seconds / 86400)}d`;
} }
function formatTimestamp(ts: number | null): string { function formatTimestamp(ts: number | null): string {
if (!ts) return "Never"; if (!ts) return "Never";
return new Date(ts * 1000).toLocaleString(); 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) { export default function BackupJobsTable({ jobs, latestRuns }: Props) {
return ( return (
<TableContainer component={Paper}> <div className="overflow-hidden rounded-lg border border-border">
<Table> <Table aria-label="Backup jobs">
<TableHead> <TableHeader>
<TableRow> <TableRow className="bg-card hover:bg-card">
<TableCell>Name</TableCell> <TableHead>Name</TableHead>
<TableCell>Source</TableCell> <TableHead>Source</TableHead>
<TableCell>Target</TableCell> <TableHead>Target</TableHead>
<TableCell>Schedule</TableCell> <TableHead>Schedule</TableHead>
<TableCell>Last Status</TableCell> <TableHead>Last Status</TableHead>
<TableCell>Last Run</TableCell> <TableHead>Last Run</TableHead>
<TableCell>Next Expected</TableCell> <TableHead>Next Expected</TableHead>
</TableRow> </TableRow>
</TableHead> </TableHeader>
<TableBody> <TableBody>
{jobs.map((job) => { {jobs.map((job) => {
const run = latestRuns.get(job.id); const run = latestRuns.get(job.id);
const status = run?.status ?? "unknown"; const status = run?.status ?? "unknown";
const nextExpected = run && job.schedule_interval_seconds const nextExpected =
? run.started_at + job.schedule_interval_seconds run && job.schedule_interval_seconds
: null; ? run.started_at + job.schedule_interval_seconds
: null;
return (
<TableRow key={job.id} hover> return (
<TableCell>{job.name}</TableCell> <TableRow key={job.id}>
<TableCell>{job.source ?? "—"}</TableCell> <TableCell>{job.name}</TableCell>
<TableCell>{job.target ?? "—"}</TableCell> <TableCell>{job.source ?? "—"}</TableCell>
<TableCell>{formatInterval(job.schedule_interval_seconds)}</TableCell> <TableCell>{job.target ?? "—"}</TableCell>
<TableCell> <TableCell>
<Chip {formatInterval(job.schedule_interval_seconds)}
label={status} </TableCell>
color={ <TableCell>
status === "success" <Badge variant={statusVariant(status)}>{status}</Badge>
? "success" </TableCell>
: status === "failure" <TableCell>
? "error" {formatTimestamp(run?.started_at ?? null)}
: status === "in_progress" </TableCell>
? "warning" <TableCell>{formatTimestamp(nextExpected)}</TableCell>
: "default" </TableRow>
} );
size="small" })}
/> </TableBody>
</TableCell> </Table>
<TableCell>{formatTimestamp(run?.started_at ?? null)}</TableCell> </div>
<TableCell>{formatTimestamp(nextExpected)}</TableCell> );
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
);
} }
frontend/src/components/BackupRunsTable.tsx
+93 -86
View File
@@ -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 { 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"; import type { BackupRun } from "../types/backups";
interface Props { interface Props {
runs: BackupRun[]; runs: BackupRun[];
} }
function formatBytes(bytes: number | null): string { function formatBytes(bytes: number | null): string {
if (bytes === null || bytes === undefined) return "—"; if (bytes === null || bytes === undefined) return "—";
if (bytes < 1024) return `${bytes} B`; if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; if (bytes < 1024 * 1024 * 1024)
return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`; return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
} }
function formatDuration(ms: number | null): string { function formatDuration(ms: number | null): string {
if (ms === null || ms === undefined) return "—"; if (ms === null || ms === undefined) return "—";
if (ms < 1000) return `${ms}ms`; if (ms < 1000) return `${ms}ms`;
if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`; if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
if (ms < 3600_000) return `${(ms / 60_000).toFixed(1)}m`; if (ms < 3600_000) return `${(ms / 60_000).toFixed(1)}m`;
return `${(ms / 3600_000).toFixed(1)}h`; return `${(ms / 3600_000).toFixed(1)}h`;
} }
function formatTimestamp(ts: number): string { 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) { export default function BackupRunsTable({ runs }: Props) {
const [statusFilter, setStatusFilter] = useState<string>("all"); const [statusFilter, setStatusFilter] = useState<string>("all");
const filteredRuns = statusFilter === "all" const filteredRuns =
? runs statusFilter === "all"
: runs.filter((r) => r.status === statusFilter); ? runs
: runs.filter((r) => r.status === statusFilter);
return (
<> return (
<FormControl sx={{ minWidth: 120, mb: 2 }}> <div className="space-y-3">
<InputLabel>Status</InputLabel> <Select value={statusFilter} onValueChange={setStatusFilter}>
<Select <SelectTrigger className="w-[160px]" aria-label="Status filter">
value={statusFilter} <SelectValue placeholder="Status" />
label="Status" </SelectTrigger>
onChange={(e) => setStatusFilter(e.target.value)} <SelectContent>
> <SelectItem value="all">All</SelectItem>
<MenuItem value="all">All</MenuItem> <SelectItem value="success">Success</SelectItem>
<MenuItem value="success">Success</MenuItem> <SelectItem value="failure">Failure</SelectItem>
<MenuItem value="failure">Failure</MenuItem> <SelectItem value="in_progress">In Progress</SelectItem>
<MenuItem value="in_progress">In Progress</MenuItem> </SelectContent>
</Select> </Select>
</FormControl>
<div className="overflow-hidden rounded-lg border border-border">
<TableContainer component={Paper}> <Table aria-label="Backup runs">
<Table> <TableHeader>
<TableHead> <TableRow className="bg-card hover:bg-card">
<TableRow> <TableHead>Job</TableHead>
<TableCell>Job</TableCell> <TableHead>Status</TableHead>
<TableCell>Status</TableCell> <TableHead>Duration</TableHead>
<TableCell>Duration</TableCell> <TableHead>Size</TableHead>
<TableCell>Size</TableCell> <TableHead>Started</TableHead>
<TableCell>Started</TableCell> </TableRow>
</TableRow> </TableHeader>
</TableHead> <TableBody>
<TableBody> {filteredRuns.map((run) => (
{filteredRuns.map((run) => ( <TableRow key={run.id}>
<TableRow key={run.id} hover> <TableCell>{run.job_id}</TableCell>
<TableCell>{run.job_id}</TableCell> <TableCell>
<TableCell> <Badge variant={statusVariant(run.status)}>
<Chip {run.status}
label={run.status} </Badge>
color={ </TableCell>
run.status === "success" <TableCell>{formatDuration(run.duration_ms)}</TableCell>
? "success" <TableCell>{formatBytes(run.bytes_transferred)}</TableCell>
: run.status === "failure" <TableCell>{formatTimestamp(run.started_at)}</TableCell>
? "error" </TableRow>
: "warning" ))}
} </TableBody>
size="small" </Table>
/> </div>
</TableCell> </div>
<TableCell>{formatDuration(run.duration_ms)}</TableCell> );
<TableCell>{formatBytes(run.bytes_transferred)}</TableCell>
<TableCell>{formatTimestamp(run.started_at)}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
);
} }
frontend/src/components/BackupsPage.tsx
+63 -60
View File
@@ -1,69 +1,72 @@
import { Box, Tab, Tabs, Typography } from "@mui/material";
import { useState } from "react"; import { useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { import {
useAcknowledgeAlert, useAcknowledgeAlert,
useBackupAlerts, useBackupAlerts,
useBackupJobs, useBackupJobs,
useBackupRuns, useBackupRuns,
} from "../hooks/useBackups"; } from "../hooks/useBackups";
import BackupAlertsTable from "./BackupAlertsTable"; import BackupAlertsTable from "./BackupAlertsTable";
import BackupJobsTable from "./BackupJobsTable"; import BackupJobsTable from "./BackupJobsTable";
import BackupRunsTable from "./BackupRunsTable"; import BackupRunsTable from "./BackupRunsTable";
export default function BackupsPage() { export default function BackupsPage() {
const [tab, setTab] = useState(0); const [tab, setTab] = useState("jobs");
const { data: jobsData, isLoading: jobsLoading } = useBackupJobs(); const { data: jobsData, isLoading: jobsLoading } = useBackupJobs();
const { data: runsData, isLoading: runsLoading } = useBackupRuns(); const { data: runsData, isLoading: runsLoading } = useBackupRuns();
const { data: alertsData, isLoading: alertsLoading } = useBackupAlerts(undefined, false); const { data: alertsData, isLoading: alertsLoading } = useBackupAlerts(
const acknowledgeMutation = useAcknowledgeAlert(); undefined,
false,
// Build a map of latest runs per job );
const latestRuns = new Map(); const acknowledgeMutation = useAcknowledgeAlert();
if (runsData) {
for (const run of runsData) { // Build a map of latest runs per job
const existing = latestRuns.get(run.job_id); const latestRuns = new Map();
if (!existing || run.started_at > existing.started_at) { if (runsData) {
latestRuns.set(run.job_id, run); 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>
const alertsLabel = alertsData ? `Alerts (${alertsData.length})` : "Alerts";
<Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 2 }}>
<Tab label="Jobs" /> return (
<Tab label="Runs" /> <div className="space-y-4">
<Tab label={`Alerts ${alertsData ? `(${alertsData.length})` : ""}`} /> <h1 className="text-2xl font-bold tracking-tight">Backups</h1>
</Tabs> <Tabs value={tab} onValueChange={setTab}>
<TabsList>
{tab === 0 && ( <TabsTrigger value="jobs">Jobs</TabsTrigger>
jobsLoading ? ( <TabsTrigger value="runs">Runs</TabsTrigger>
<Typography>Loading jobs...</Typography> <TabsTrigger value="alerts">{alertsLabel}</TabsTrigger>
) : ( </TabsList>
<BackupJobsTable jobs={jobsData ?? []} latestRuns={latestRuns} /> <TabsContent value="jobs">
) {jobsLoading ? (
)} <p className="text-sm text-muted-foreground">Loading jobs…</p>
) : (
{tab === 1 && ( <BackupJobsTable jobs={jobsData ?? []} latestRuns={latestRuns} />
runsLoading ? ( )}
<Typography>Loading runs...</Typography> </TabsContent>
) : ( <TabsContent value="runs">
<BackupRunsTable runs={runsData ?? []} /> {runsLoading ? (
) <p className="text-sm text-muted-foreground">Loading runs…</p>
)} ) : (
<BackupRunsTable runs={runsData ?? []} />
{tab === 2 && ( )}
alertsLoading ? ( </TabsContent>
<Typography>Loading alerts...</Typography> <TabsContent value="alerts">
) : ( {alertsLoading ? (
<BackupAlertsTable <p className="text-sm text-muted-foreground">Loading alerts…</p>
alerts={alertsData ?? []} ) : (
onAcknowledge={(id) => acknowledgeMutation.mutate(id)} <BackupAlertsTable
/> alerts={alertsData ?? []}
) onAcknowledge={(id) => acknowledgeMutation.mutate(id)}
)} />
</Box> )}
); </TabsContent>
</Tabs>
</div>
);
} }
frontend/src/components/__tests__/BackupAlertsTable.test.tsx
+63
View File
@@ -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();
});
});
frontend/src/components/__tests__/BackupDashboardWidget.test.tsx
+63
View File
@@ -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();
});
});
frontend/src/components/__tests__/BackupRunsTable.test.tsx
+59
View File
@@ -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();
});
});
openspec/changes/web-ui-rework/apply-progress.md
+168
View File
@@ -330,3 +330,171 @@ Slice 2 is complete (25/71 tasks). Next in dependency order: **Slice 3 — Backu
cluster + nav/IA** (uses slice-2 `Table`/`Badge`/`Tabs`/cards and lands the cluster + nav/IA** (uses slice-2 `Table`/`Badge`/`Tabs`/cards and lands the
`/backups` nav item + `/applications`→`/media` redirect; `DatabaseBackup` icon `/backups` nav item + `/applications`→`/media` redirect; `DatabaseBackup` icon
confirmed available). See `tasks.md` Slices 3–8 for the verbatim unchecked list. confirmed available). See `tasks.md` Slices 3–8 for the verbatim unchecked list.
## Slice 3 — Backups cluster + navigation/IA — COMPLETE
All 8 Slice-3 task lines in `tasks.md` are now `- [x]`. The 5 Backups components
are MUI-free and the reconciled IA (`/backups` top-level nav item, Media at
`/media`, `/applications` → redirect) is live. Cumulative change task progress:
25 → **33/71** complete.
### Status context consumed
- `applyState` reported by the status engine: **blocked** (`blockedReasons`:
domain specs missing/partial; legacy flat `spec.md` present without domain
specs). Same planning-completeness gap as slices 1–2 — **not** a safety or
`actionContext` blocker.
- `actionContext`: `mode: repo-local`, `workspaceRoot: /home/user/Manage_01`,
`allowedEditRoots: ["/home/user/Manage_01"]`, `warnings: []` — safe.
- This run executed the explicitly delegated **Slice 3 (Backups cluster +
nav/IA)** scope per the parent acceptance contract. Slice-3 work is fully
specified in `tasks.md` (Slice 3) + `design.md` (§1 mapping table, §2.3
status→Badge variant map, §4 IA) and does not depend on the missing domain
specs. `instructions.apply`: "Implement only unchecked tasks from the tasks
artifact." → proceeded under the parent's explicit slice delegation.
- `artifactStore: openspec`; persisted task checkboxes updated in `tasks.md`
(Slice 3: 0 → 8 `[x]`).
### Completed tasks (persisted checkboxes updated)
- [x] Migrated `BackupAlertsTable.tsx` → shadcn `Table` family on a bordered
rounded surface + `Badge` (`severityVariant`: `critical`→`destructive`,
`warning`→`warning`) + `Button variant="outline" size="sm"` acknowledge
(hidden when `acknowledged`). Preserve `formatTimestamp`, props, callback.
- [x] Migrated `BackupJobsTable.tsx` → shadcn `Table` + `Badge`
(`statusVariant`: `success`→`success`, `failure`→`destructive`,
`in_progress`→`warning`, unknown→`secondary`). Latest-run status, `formatInterval`,
last-run + next-expected timing preserved.
- [x] Migrated `BackupRunsTable.tsx` → shadcn `Select` (status filter,
`onValueChange`) + `Badge` (`success`/`destructive`/`warning`) + `Table`.
`formatDuration`/`formatBytes`/`formatTimestamp` + filter logic preserved.
- [x] Migrated `BackupDashboardWidget.tsx` → shadcn `Card`/`CardHeader`/
`CardTitle`/`CardContent` + `Badge` (active_alerts>0 → `destructive`) +
`text-destructive` last-failed line. total_jobs / 24h success rate / active
alerts / last-failed-time + loading state preserved.
- [x] Migrated `BackupsPage.tsx` → shadcn `Tabs` (controlled `value`/
`onValueChange`, string values `jobs|runs|alerts`) with `TabsContent` per tab;
jobs/runs/alerts behavior, latest-runs map, and the acknowledge mutation
preserved. In-page `<h1>` kept to match the already-migrated `ObservabilityPage`.
- [x] Applied the §4 IA nav + route edits in `App.tsx`: imported `DatabaseBackup`
from lucide-react; nav `Media` retargeted `/applications` → `/media`; added
top-level `{ path: "/backups", label: "Backups", icon: DatabaseBackup }` (after
Files, before Users); in **both** route blocks `/media` is the canonical
`<Applications />` element and `/applications` is `<Navigate to="/media"
replace />` (mirrors the existing `/monitoring` → `/observability` redirect).
`/backups` already rendered `<BackupsPage />`.
- [x] Added component tests: `BackupRunsTable` (status→Badge variant mapping +
formatted duration/size), `BackupAlertsTable` (severity→variant, acknowledge
callback fires with the id, acknowledged hides the button),
`BackupDashboardWidget` (loading state, stats render, active_alerts>0 →
destructive Badge + last-failed line). 8 new tests across 3 files.
- [x] **Exit gate green:** `/backups` reachable from the sidebar; `/applications`
redirects to `/media`; 5 Backups components MUI-free; `npm run build` +
`npm run lint` + `npm test` + `npm run test:node` all pass.
### Files changed (tracked)
Modified (6):
- `frontend/src/components/BackupAlertsTable.tsx`
- `frontend/src/components/BackupJobsTable.tsx`
- `frontend/src/components/BackupRunsTable.tsx`
- `frontend/src/components/BackupDashboardWidget.tsx`
- `frontend/src/components/BackupsPage.tsx`
- `frontend/src/App.tsx` (icon import, `navItems`, both route blocks)
Added (new, 3 test files):
- `frontend/src/components/__tests__/BackupRunsTable.test.tsx`
- `frontend/src/components/__tests__/BackupAlertsTable.test.tsx`
- `frontend/src/components/__tests__/BackupDashboardWidget.test.tsx`
Persisted artifact updated:
- `openspec/changes/web-ui-rework/tasks.md` (Slice 3 checkboxes 0 → 8 `[x]`)
Untouched (no-unintended-edits respected): **no `frontend/src/pages/*` file was
edited this slice** — `git status --porcelain frontend/src/pages` is empty.
Applications.tsx itself was **not** edited (slice 4 owns it); only its route +
nav entry changed. No `components/ui/*` primitive was modified. The pre-existing
`/monitoring` → `/observability` redirect is intact.
### Commands run (validation) — all green
- `grep -rlE '@mui/(material|icons-material)' <5 backups files>` → **ALL 5
BACKUPS MUI-FREE**.
- `cd frontend && npm run build` → **PASS** (`tsc -b` + `vite build`; the
>500 kB chunk-size warning is pre-existing and unrelated).
- `cd frontend && npm run lint` → **PASS** (0 errors; the only 2 items are the
pre-existing `react-hooks/exhaustive-deps` **warnings** in
`UsersPage.impl.tsx`, out of Slice-3 scope).
- `cd frontend && npm test` → **PASS** (Vitest: **15 files, 30 tests**; +3 files
and +8 tests vs slice-2 baseline of 12 files / 22 tests + the badge smoke).
- `cd frontend && npm run test:node` → **PASS** (legacy node:test: 4 tests,
0 fail).
- IA verification (`grep` of `App.tsx`): nav has `/media` Media + `/backups`
Backups; both route blocks have `/media` canonical + `/applications` Navigate
redirect + `/backups` BackupsPage; `/monitoring`→`/observability` intact.
### Design decisions / deviations
1. **Backups nav icon: `DatabaseBackup`.** Verified at the pinned
`lucide-react@^1.14.0` (slice-1 confirmation re-checked this run via
`node -e "…require('lucide-react').DatabaseBackup"` → object). Semantic fit,
no fallback needed. Placed after Files, before Users per design §4.1.
2. **`/applications` is a replace-redirect to `/media`** in both route blocks
(OIDC-configured branch + unauthenticated branch), mirroring the existing
`/monitoring` → `/observability` redirect. `/media` is the canonical
`<Applications />` route. React Router v6 ranks routes by specificity, so
order is cosmetic; rendered `/media` before the `/applications` redirect to
match design §4.2's example snippet. The `Applications.tsx` component file
is **not** renamed (out of scope — design §4 non-goal).
3. **`BackupsPage` keeps an in-page `<h1>`** ("Backups") to match the
already-migrated `ObservabilityPage` (`<h1 className="text-2xl font-bold
tracking-tight">`). The shell's `<main>` already provides `p-4 md:p-6`, so
the old `Box sx={{ p: 3 }}` double-padding was dropped per design §2.2.
4. **Status / severity → Badge variant** uses the `chart-N` cue map per design
§2.3 (success=chart-2/success, failure/critical=chart-4/destructive,
in_progress=chart-3/warning, unknown=secondary). Verified via the
`data-variant` attribute assertions in the new tests (mirrors the slice-2
`SessionActivityPanel` test pattern).
5. **`BackupRunsTable` status filter** uses the shadcn `Select` (`onValueChange`
with string values) instead of MUI `Select`/`FormControl`/`InputLabel`/
`MenuItem`; an `aria-label="Status filter"` is on the trigger for a11y. The
`all|success|failure|in_progress` filter set is unchanged.
6. **`latestRuns` map left un-memoized** in `BackupsPage` (verbatim from the
pre-migration source) to preserve behavior exactly and avoid an extra
`useMemo`/exhaustive-deps surface.
### Slice boundary / PR
- Slice 3 is forecast "likely OK" at ≤400 lines as a single PR (tasks §per-slice
table). Actual review churn: ~6 modified components/App (~250 ins / ~270 del)
- 3 new test files (~150 lines) ≈ **~400 changed lines**, right at the budget.
The parent delegated the whole slice as one unit and owns the commit/PR; if
the parent prefers, the nav/route edit in `App.tsx` is a clean split point.
All gates are green.
### Remaining tasks (Slices 4–8, 38 unchecked)
Slice 3 is complete (33/71 tasks). Next in dependency order: **Slice 4 —
Dashboard + Applications surface** (depends on slices 2 + 3; reuses
`BackupDashboardWidget` from this slice and the reconciled `/media` route; the
`Applications.tsx` component itself is migrated here). The first unchecked items:
- [ ] Migrate `frontend/src/pages/Applications.tsx` …
- [ ] Migrate `frontend/src/pages/Dashboard.tsx` …
- … (see `tasks.md` Slices 4–8 for the verbatim unchecked list)
### Top risk for slice 4
- **`Dashboard.tsx` is the heaviest single page** (20 distinct MUI components:
Dialog/FormControl/FormControlLabel/Grid/Select/Switch/TextField/Stack/Grid…)
and composes the slice-3 `BackupDashboardWidget` plus `NowPlaying`. It is
forecast "medium" (~300–450 lines) and may need a 4a (Applications, smaller)
→ 4b (Dashboard) sub-split on overrun. The reconciled `/media` route + the
shortcut deep-links must be re-pointed to `/media` (any Dashboard shortcut
still linking `/applications` will rely on the new redirect until re-pointed).
Overall change `applyState` remains **blocked** on missing domain specs (legacy
flat `spec.md`); does not block Slice 3 (done) but should be resolved before
`sdd-verify`/archive.
openspec/changes/web-ui-rework/tasks.md
+8 -8
View File
@@ -146,14 +146,14 @@ Each slice section restates this gate as its final task.
> This is where Backups becomes a top-level nav item and the Media/Applications route > This is where Backups becomes a top-level nav item and the Media/Applications route
> is reconciled. > is reconciled.
- [ ] Migrate `frontend/src/components/BackupAlertsTable.tsx` (Chip/Paper/Table family/FormControl/InputLabel/MenuItem/Select/Button → `Badge` (status cues), bordered surface, shadcn `Table` family, shadcn `Select`; acknowledge button preserved; severity → Badge variant). - [x] Migrate `frontend/src/components/BackupAlertsTable.tsx` (Chip/Paper/Table family/FormControl/InputLabel/MenuItem/Select/Button → `Badge` (status cues), bordered surface, shadcn `Table` family, shadcn `Select`; acknowledge button preserved; severity → Badge variant).
- [ ] Migrate `frontend/src/components/BackupJobsTable.tsx` (Chip/Paper/Table family → `Badge` + shadcn `Table`; latest-run status + next-expected timing preserved). - [x] Migrate `frontend/src/components/BackupJobsTable.tsx` (Chip/Paper/Table family → `Badge` + shadcn `Table`; latest-run status + next-expected timing preserved).
- [ ] Migrate `frontend/src/components/BackupRunsTable.tsx` (Chip/FormControl/InputLabel/MenuItem/Paper/Select/Table family → shadcn `Select` + `Badge` + `Table`; status filter + formatted duration/size/timestamp preserved). - [x] Migrate `frontend/src/components/BackupRunsTable.tsx` (Chip/FormControl/InputLabel/MenuItem/Paper/Select/Table family → shadcn `Select` + `Badge` + `Table`; status filter + formatted duration/size/timestamp preserved).
- [ ] Migrate `frontend/src/components/BackupDashboardWidget.tsx` (Box/Card/CardContent/Chip/Typography → shadcn `Card` + `Badge`; total jobs / 24h success rate / active alerts / last-failed-time preserved). - [x] Migrate `frontend/src/components/BackupDashboardWidget.tsx` (Box/Card/CardContent/Chip/Typography → shadcn `Card` + `Badge`; total jobs / 24h success rate / active alerts / last-failed-time preserved).
- [ ] Migrate `frontend/src/components/BackupsPage.tsx` (Box/Tab/Tabs/Typography → shadcn `Tabs`; tabs Jobs/Runs/Alerts behavior + acknowledge mutation preserved). - [x] Migrate `frontend/src/components/BackupsPage.tsx` (Box/Tab/Tabs/Typography → shadcn `Tabs`; tabs Jobs/Runs/Alerts behavior + acknowledge mutation preserved).
- [ ] Apply the IA nav + route edits in `frontend/src/App.tsx` per design §4: import a Backups icon (`DatabaseBackup`, or the slice-1-chosen fallback) from lucide-react; add a top-level `{ path: "/backups", label: "Backups", icon: … }` nav item (after Files, before Users); retarget the Media nav item from `/applications` to `/media`; in **both** route blocks add `<Route path="/media" element={<Applications />} />` and convert `<Route path="/applications" …>` to `<Route path="/applications" element={<Navigate to="/media" replace />} />`, mirroring the existing `/monitoring` → `/observability` redirect. - [x] Apply the IA nav + route edits in `frontend/src/App.tsx` per design §4: import a Backups icon (`DatabaseBackup`, or the slice-1-chosen fallback) from lucide-react; add a top-level `{ path: "/backups", label: "Backups", icon: … }` nav item (after Files, before Users); retarget the Media nav item from `/applications` to `/media`; in **both** route blocks add `<Route path="/media" element={<Applications />} />` and convert `<Route path="/applications" …>` to `<Route path="/applications" element={<Navigate to="/media" replace />} />`, mirroring the existing `/monitoring` → `/observability` redirect.
- [ ] Add/extend component tests for the migrated Backups tables (status Badge variant mapping; alert acknowledge callback). - [x] Add/extend component tests for the migrated Backups tables (status Badge variant mapping; alert acknowledge callback).
- [ ] **Exit gate:** `/backups` reachable from the sidebar; `/applications` redirects to `/media`; Backups cluster MUI-free; `npm run build` + `npm run lint` + `npm test` + `node --test tests` green. - [x] **Exit gate:** `/backups` reachable from the sidebar; `/applications` redirects to `/media`; Backups cluster MUI-free; `npm run build` + `npm run lint` + `npm test` + `node --test tests` green.
--- ---