mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-08-29 01:35:39 -04:00
jakeandClaude Opus 4.6
fc982bee1b
- Add global MotionConfig reducedMotion="user" in root layout
- Add color-scheme: dark, theme-color meta, skip-to-main-content link
- Add aria-hidden={true} to ~60+ decorative icons across 33 files
- Add aria-label to all icon-only buttons (logout, star rating, play, delete, etc.)
- Replace transition-all with specific properties (11 files)
- Add motion-safe: prefix for CSS hover transforms and animate-pulse
- Add prefers-reduced-motion: reduce override in globals.css
- Add useReducedMotion guard to status-dot pulsing animation
- Fix focus-visible styles on auth form inputs (focus → focus-visible, stronger ring)
- Add text-balance to all headings (13 files)
- Replace "..." with "…" (U+2026) in all loading/placeholder text
- Add autocomplete, spellCheck, role="alert" to auth form
- Add aria-label to Switch controls and filmography select
- Fix heading hierarchy (h3 → h2 where h2 was skipped)
- Add break-words to title overview, overscroll-contain to drawer
- Add confirmation dialog for destructive library removal
- Add group-focus-within:opacity-100 for keyboard-accessible backup actions
- Add role="radio" + aria-checked to star rating buttons
- Add aria-label to carousel region, role="img" to TMDB logo SVG
- Add text-foreground to native select for dark mode consistency
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
582 lines
21 KiB
TypeScript
582 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
IconActivity,
|
|
IconAlertTriangle,
|
|
IconCalendarCheck,
|
|
IconCheck,
|
|
IconDatabase,
|
|
IconPlayerPlay,
|
|
IconRefresh,
|
|
} from "@tabler/icons-react";
|
|
import { useEffect, useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { StatusDot } from "@/components/status-dot";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { useSystemHealth } from "@/hooks/use-system-health";
|
|
import { useTimeAgo } from "@/hooks/use-time-ago";
|
|
import type { SystemHealthData } from "@/lib/services/system-health";
|
|
|
|
const JOB_LABELS: Record<string, string> = {
|
|
nightlyRefreshLibrary: "Library refresh",
|
|
refreshAvailability: "Availability",
|
|
refreshRecommendations: "Recommendations",
|
|
refreshTvChildren: "TV episodes",
|
|
cacheImages: "Image cache",
|
|
scheduledBackup: "Backup",
|
|
updateCheck: "Update check",
|
|
};
|
|
|
|
/** Convert a cron pattern to a short human-readable string */
|
|
function cronToHuman(pattern: string): string {
|
|
const parts = pattern.split(" ");
|
|
if (parts.length !== 5) return pattern;
|
|
const [min, hour, _dom, _mon, dow] = parts;
|
|
|
|
// Every N hours: "0 */6 * * *"
|
|
if (hour.startsWith("*/")) {
|
|
const n = Number.parseInt(hour.slice(2), 10);
|
|
return `Every ${n}h`;
|
|
}
|
|
|
|
// Twice daily: "0 1,13 * * *"
|
|
if (hour.includes(",") && !hour.includes("/") && !hour.includes("-")) {
|
|
const hours = hour.split(",");
|
|
if (hours.length === 2) {
|
|
return `Daily at ${hours.map((h) => `${h.padStart(2, "0")}:${min.padStart(2, "0")}`).join(", ")}`;
|
|
}
|
|
}
|
|
|
|
// Daily at specific time: "0 3 * * *"
|
|
if (/^\d+$/.test(hour) && /^\d+$/.test(min) && dow === "*") {
|
|
return `Daily at ${hour.padStart(2, "0")}:${min.padStart(2, "0")}`;
|
|
}
|
|
|
|
// Weekly
|
|
if (/^\d+$/.test(dow)) {
|
|
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
return `Weekly on ${days[Number(dow)] ?? dow}`;
|
|
}
|
|
|
|
return pattern;
|
|
}
|
|
|
|
function formatBytes(bytes: number): string {
|
|
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): string {
|
|
if (ms < 1000) return `${ms}ms`;
|
|
if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
|
|
return `${Math.round(ms / 60000)}m`;
|
|
}
|
|
|
|
function SkeletonCards() {
|
|
return (
|
|
<div className="space-y-3">
|
|
{["status", "jobs", "storage"].map((s) => (
|
|
<Card key={s} className="border-l-2 border-l-primary/30">
|
|
<CardContent>
|
|
<div className="flex items-start gap-3">
|
|
<Skeleton className="mt-0.5 h-8 w-8 rounded-lg" />
|
|
<div className="flex-1 space-y-2">
|
|
<Skeleton className="h-4 w-28" />
|
|
<Skeleton className="h-3 w-48" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Inline component that live-updates a relative timestamp */
|
|
function LiveTimeAgo({
|
|
date,
|
|
fallback = "",
|
|
}: {
|
|
date: string | Date | null | undefined;
|
|
fallback?: string;
|
|
}) {
|
|
const text = useTimeAgo(date, { fallback });
|
|
return <>{text}</>;
|
|
}
|
|
|
|
/** Renders 3 separate cards: System status, Background jobs, Storage */
|
|
export function SystemHealthCards() {
|
|
const { data, error, isLoading, isValidating, refresh } = useSystemHealth();
|
|
|
|
useEffect(() => {
|
|
if (error && !isLoading) {
|
|
toast.error("Failed to refresh system health");
|
|
}
|
|
}, [error, isLoading]);
|
|
|
|
if (isLoading) return <SkeletonCards />;
|
|
if (!data) return null;
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{/* ── Card 1: System Status ── */}
|
|
<Card className="border-l-2 border-l-primary/30">
|
|
<CardContent>
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
|
|
<IconActivity
|
|
aria-hidden={true}
|
|
className="size-4 text-primary"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<CardTitle>Health status</CardTitle>
|
|
<CardDescription suppressHydrationWarning>
|
|
Checked <LiveTimeAgo date={data.checkedAt} />
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
<Tooltip>
|
|
<TooltipTrigger
|
|
render={
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
aria-label="Refresh system health"
|
|
onClick={() => refresh()}
|
|
disabled={isValidating}
|
|
/>
|
|
}
|
|
>
|
|
{isValidating ? <Spinner /> : <IconRefresh />}
|
|
</TooltipTrigger>
|
|
<TooltipContent>Refresh</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</CardContent>
|
|
|
|
{/* Database */}
|
|
<CardContent className="border-t border-border/30 pt-4">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">
|
|
Database
|
|
</span>
|
|
<span className="font-mono text-[11px] text-muted-foreground">
|
|
{formatBytes(data.database.dbSizeBytes)}
|
|
{data.database.walSizeBytes > 0 &&
|
|
` + ${formatBytes(data.database.walSizeBytes)} WAL`}
|
|
</span>
|
|
</div>
|
|
</CardContent>
|
|
|
|
{/* TMDB */}
|
|
<CardContent className="border-t border-border/30 pt-4">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">
|
|
TMDB API
|
|
</span>
|
|
{!data.tmdb.tokenConfigured ? (
|
|
<>
|
|
<StatusDot status="error" />
|
|
<span className="text-xs text-muted-foreground/50">
|
|
Not configured
|
|
</span>
|
|
</>
|
|
) : data.tmdb.connected && data.tmdb.tokenValid ? (
|
|
<>
|
|
<StatusDot status="ok" />
|
|
<span className="text-xs text-muted-foreground">Connected</span>
|
|
<span className="font-mono text-[11px] text-muted-foreground/80">
|
|
{data.tmdb.responseTimeMs}ms
|
|
</span>
|
|
</>
|
|
) : data.tmdb.connected && !data.tmdb.tokenValid ? (
|
|
<>
|
|
<StatusDot status="error" />
|
|
<span className="text-xs text-destructive">Invalid token</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<StatusDot status="error" />
|
|
<span className="text-xs text-destructive">Unreachable</span>
|
|
{data.tmdb.error && (
|
|
<span className="text-[11px] text-muted-foreground/50">
|
|
{data.tmdb.error}
|
|
</span>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
|
|
{/* Environment */}
|
|
<CardContent className="border-t border-border/30 pt-4">
|
|
<div className="space-y-2">
|
|
<span className="inline-flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">
|
|
Environment
|
|
{data.environment.dataDirWritable ? (
|
|
<IconCheck
|
|
aria-hidden={true}
|
|
className="size-3 text-green-500"
|
|
/>
|
|
) : (
|
|
<IconAlertTriangle
|
|
aria-hidden={true}
|
|
className="size-3 text-destructive"
|
|
/>
|
|
)}
|
|
</span>
|
|
<div className="space-y-1">
|
|
{data.environment.envVars
|
|
.filter((env) => env.value !== null)
|
|
.map((env) => (
|
|
<div
|
|
key={env.name}
|
|
className="flex items-baseline gap-[1px] font-mono text-[11px] leading-relaxed"
|
|
>
|
|
<span className="text-muted-foreground/60">
|
|
{env.name}=
|
|
</span>
|
|
<span className="text-muted-foreground break-all">
|
|
{env.value}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* ── Card 2: Background Jobs ── */}
|
|
<BackgroundJobsCard jobs={data.jobs} onRefresh={refresh} />
|
|
|
|
{/* ── Card 3: Storage ── */}
|
|
<Card className="border-l-2 border-l-primary/30">
|
|
<CardContent>
|
|
<div className="flex items-start gap-3">
|
|
<div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
|
|
<IconDatabase
|
|
aria-hidden={true}
|
|
className="size-4 text-primary"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<CardTitle>Storage</CardTitle>
|
|
<CardDescription>
|
|
Image cache and backup disk usage
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
|
|
{/* Image cache */}
|
|
<CardContent className="border-t border-border/30 pt-4">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">
|
|
Image cache
|
|
</span>
|
|
{data.imageCache.enabled ? (
|
|
<span className="font-mono text-[11px] text-muted-foreground/50">
|
|
{formatBytes(data.imageCache.totalSizeBytes)}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
{data.imageCache.enabled ? (
|
|
<>
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
{data.imageCache.imageCount.toLocaleString()} cached images
|
|
</p>
|
|
<p className="mt-0.5 text-[10px] leading-relaxed text-muted-foreground/50">
|
|
{Object.entries(data.imageCache.categories)
|
|
.map(([name, cat]) => `${name} ${cat.count}`)
|
|
.join(" · ")}
|
|
</p>
|
|
</>
|
|
) : (
|
|
<p className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground/50">
|
|
<StatusDot status="inactive" />
|
|
Disabled
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
|
|
{/* Backup summary */}
|
|
<CardContent className="border-t border-border/30 pt-4">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">
|
|
Backups
|
|
</span>
|
|
{data.backups.backupCount > 0 && (
|
|
<span className="font-mono text-[11px] text-muted-foreground/50">
|
|
{formatBytes(data.backups.totalSizeBytes)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{data.backups.backupCount > 0 ? (
|
|
<p
|
|
className="mt-1 text-xs text-muted-foreground"
|
|
suppressHydrationWarning
|
|
>
|
|
{data.backups.backupCount} backups · last{" "}
|
|
<LiveTimeAgo
|
|
date={data.backups.lastBackupAt}
|
|
fallback="unknown"
|
|
/>
|
|
</p>
|
|
) : (
|
|
<p className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground/50">
|
|
<StatusDot status="inactive" />
|
|
No backups yet
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Background Jobs card with table layout and manual trigger */
|
|
function BackgroundJobsCard({
|
|
jobs,
|
|
onRefresh,
|
|
}: {
|
|
jobs: SystemHealthData["jobs"];
|
|
onRefresh: () => void;
|
|
}) {
|
|
const [triggeringJob, setTriggeringJob] = useState<string | null>(null);
|
|
|
|
const handleTrigger = async (jobName: string) => {
|
|
setTriggeringJob(jobName);
|
|
try {
|
|
const res = await fetch("/api/admin/jobs/trigger", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ jobName }),
|
|
});
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
throw new Error(data.error || "Failed to trigger job");
|
|
}
|
|
toast.success(`${JOB_LABELS[jobName] ?? jobName} triggered`);
|
|
// Refresh after a brief delay so the run shows up
|
|
setTimeout(onRefresh, 1500);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : "Failed to trigger job");
|
|
} finally {
|
|
setTriggeringJob(null);
|
|
}
|
|
};
|
|
|
|
const healthyCount = jobs.filter((j) => j.lastStatus === "success").length;
|
|
|
|
return (
|
|
<Card className="border-l-2 border-l-primary/30">
|
|
<CardContent>
|
|
<div className="flex items-start gap-3">
|
|
<div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
|
|
<IconCalendarCheck
|
|
aria-hidden={true}
|
|
className="size-4 text-primary"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<CardTitle>Background jobs</CardTitle>
|
|
<CardDescription>
|
|
{healthyCount} of {jobs.length} jobs healthy
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
<CardContent className="border-t border-border/30 px-0 pt-0 pb-0">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-b-border/30 hover:bg-transparent">
|
|
<TableHead className="h-8 pl-5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
|
|
Job
|
|
</TableHead>
|
|
<TableHead className="h-8 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
|
|
Schedule
|
|
</TableHead>
|
|
<TableHead className="h-8 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
|
|
Last run
|
|
</TableHead>
|
|
<TableHead className="h-8 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
|
|
Next run
|
|
</TableHead>
|
|
<TableHead className="h-8 pr-5 text-right text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
|
|
<span className="sr-only">Actions</span>
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{jobs.map((job) => {
|
|
const isTriggering = triggeringJob === job.jobName;
|
|
const isRunning = job.isCurrentlyRunning || isTriggering;
|
|
|
|
return (
|
|
<TableRow
|
|
key={job.jobName}
|
|
className="border-b-border/20 hover:bg-muted/30"
|
|
>
|
|
{/* Job name + status */}
|
|
<TableCell className="pl-5">
|
|
<div className="flex items-center gap-2">
|
|
{isRunning ? (
|
|
<Spinner className="size-2.5" />
|
|
) : job.lastStatus === null ? (
|
|
<StatusDot status="inactive" label="Never run" />
|
|
) : job.lastStatus === "success" ? (
|
|
<StatusDot status="ok" label="Last run succeeded" />
|
|
) : (
|
|
<StatusDot
|
|
status="error"
|
|
label={job.lastError ?? "Last run failed"}
|
|
/>
|
|
)}
|
|
<span className="text-xs text-muted-foreground">
|
|
{JOB_LABELS[job.jobName] ?? job.jobName}
|
|
</span>
|
|
</div>
|
|
</TableCell>
|
|
|
|
{/* Schedule */}
|
|
<TableCell>
|
|
{job.cronPattern ? (
|
|
<Tooltip>
|
|
<TooltipTrigger className="cursor-default">
|
|
<span className="text-xs text-muted-foreground/80">
|
|
{cronToHuman(job.cronPattern)}
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<span className="font-mono">{job.cronPattern}</span>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : (
|
|
<span className="text-xs text-muted-foreground/50">
|
|
—
|
|
</span>
|
|
)}
|
|
</TableCell>
|
|
|
|
{/* Last run */}
|
|
<TableCell>
|
|
{job.lastRunAt ? (
|
|
<Tooltip>
|
|
<TooltipTrigger className="cursor-default">
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span
|
|
className="text-xs text-muted-foreground/80"
|
|
suppressHydrationWarning
|
|
>
|
|
<LiveTimeAgo date={job.lastRunAt} />
|
|
</span>
|
|
{job.lastDurationMs !== null &&
|
|
job.lastDurationMs > 0 && (
|
|
<span className="font-mono text-[10px] text-muted-foreground/50">
|
|
{formatDuration(job.lastDurationMs)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{new Date(job.lastRunAt).toLocaleString()}
|
|
{job.lastError && (
|
|
<div className="mt-1 text-destructive">
|
|
{job.lastError}
|
|
</div>
|
|
)}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : (
|
|
<span className="text-xs text-muted-foreground/50">
|
|
Never
|
|
</span>
|
|
)}
|
|
</TableCell>
|
|
|
|
{/* Next run */}
|
|
<TableCell>
|
|
{job.nextRunAt ? (
|
|
<Tooltip>
|
|
<TooltipTrigger className="cursor-default">
|
|
<span
|
|
className="text-xs text-muted-foreground/80"
|
|
suppressHydrationWarning
|
|
>
|
|
<LiveTimeAgo date={job.nextRunAt} />
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{new Date(job.nextRunAt).toLocaleString()}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
) : (
|
|
<span className="text-xs text-muted-foreground/50">
|
|
—
|
|
</span>
|
|
)}
|
|
</TableCell>
|
|
|
|
{/* Trigger button */}
|
|
<TableCell className="pr-5 text-right">
|
|
<Tooltip>
|
|
<TooltipTrigger
|
|
render={
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
aria-label="Trigger job"
|
|
className="size-6"
|
|
disabled={isRunning}
|
|
onClick={() => handleTrigger(job.jobName)}
|
|
/>
|
|
}
|
|
>
|
|
{isRunning ? (
|
|
<Spinner className="size-3" />
|
|
) : (
|
|
<IconPlayerPlay
|
|
aria-hidden={true}
|
|
className="size-3 text-muted-foreground/50"
|
|
/>
|
|
)}
|
|
</TooltipTrigger>
|
|
<TooltipContent>Run now</TooltipContent>
|
|
</Tooltip>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|