Build OverSnitch dashboard
Full implementation on top of the Next.js scaffold: - Leaderboard with per-user request count, storage, avg GB/req, and optional Tautulli watch stats (plays, watch hours), each with dense per-metric rank (#N/total) - SWR cache on /api/stats (5-min stale, force-refresh via button); client-side localStorage seed so the UI is instant on return visits - Alerting system: content-centric alerts (unfulfilled downloads, partial TV downloads, stale pending requests) and user-behavior alerts (ghost requester, low watch rate, declined streak) - Partial TV detection: flags ended series with <90% of episodes on disk - Alert persistence in data/alerts.json with open/closed state, auto-resolve when condition clears, manual close with per-category cooldown, and per-alert notes - Alert detail page rendered as a server component for instant load - Dark UI with Tailwind v4, severity-colored left borders, summary cards with icons, sortable leaderboard table Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
170
src/app/alerts/[id]/AlertDetail.tsx
Normal file
170
src/app/alerts/[id]/AlertDetail.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Alert, AlertSeverity } from "@/lib/types";
|
||||
|
||||
const severityAccent: Record<AlertSeverity, string> = {
|
||||
danger: "border-l-red-500",
|
||||
warning: "border-l-yellow-500",
|
||||
info: "border-l-blue-500",
|
||||
};
|
||||
|
||||
function timeAgo(iso: string): string {
|
||||
const diff = Date.now() - new Date(iso).getTime();
|
||||
const mins = Math.floor(diff / 60_000);
|
||||
if (mins < 1) return "just now";
|
||||
if (mins < 60) return `${mins}m ago`;
|
||||
const hrs = Math.floor(mins / 60);
|
||||
if (hrs < 24) return `${hrs}h ago`;
|
||||
return `${Math.floor(hrs / 24)}d ago`;
|
||||
}
|
||||
|
||||
function shortDate(iso: string): string {
|
||||
return new Date(iso).toLocaleDateString(undefined, {
|
||||
month: "short", day: "numeric", hour: "numeric", minute: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
export default function AlertDetail({ initialAlert }: { initialAlert: Alert }) {
|
||||
const [alert, setAlert] = useState<Alert>(initialAlert);
|
||||
const [actionLoading, setActionLoading] = useState(false);
|
||||
const [commentText, setCommentText] = useState("");
|
||||
const [commentLoading, setCommentLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function toggleStatus() {
|
||||
setActionLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const newStatus = alert.status === "open" ? "closed" : "open";
|
||||
const res = await fetch(`/api/alerts/${alert.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
});
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
setAlert(await res.json());
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : String(e));
|
||||
} finally {
|
||||
setActionLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function submitComment(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!commentText.trim()) return;
|
||||
setCommentLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/alerts/${alert.id}/comments`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ body: commentText.trim() }),
|
||||
});
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const comment = await res.json();
|
||||
setAlert((prev) => ({ ...prev, comments: [...prev.comments, comment] }));
|
||||
setCommentText("");
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : String(e));
|
||||
} finally {
|
||||
setCommentLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
const isOpen = alert.status === "open";
|
||||
const isResolved = alert.closeReason === "resolved";
|
||||
const statusTime = isOpen ? alert.firstSeen : (alert.closedAt ?? alert.firstSeen);
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-2xl px-4 py-8 space-y-5">
|
||||
|
||||
<Link
|
||||
href="/?tab=alerts"
|
||||
className="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-300 transition-colors"
|
||||
>
|
||||
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
All Alerts
|
||||
</Link>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-lg border border-red-800 bg-red-950/30 px-4 py-3 text-red-300 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Alert card */}
|
||||
<div className={`rounded-xl bg-slate-800/40 border border-slate-700/60 border-l-4 px-6 py-5 space-y-3 ${severityAccent[alert.severity]}`}>
|
||||
|
||||
{/* Status row */}
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className={`inline-flex items-center gap-1.5 text-xs font-semibold ${
|
||||
isOpen ? "text-green-400" : isResolved ? "text-teal-400" : "text-slate-500"
|
||||
}`}>
|
||||
{isOpen && <span className="h-1.5 w-1.5 rounded-full bg-green-400 shrink-0" />}
|
||||
{isOpen ? "Open" : isResolved ? "Auto-resolved" : "Closed"}
|
||||
<span className="text-slate-700 font-normal">·</span>
|
||||
<span className="text-slate-600 font-normal">{timeAgo(statusTime)}</span>
|
||||
</span>
|
||||
|
||||
<button
|
||||
onClick={toggleStatus}
|
||||
disabled={actionLoading}
|
||||
className={`rounded-lg px-4 py-1.5 text-xs font-semibold transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
|
||||
isOpen
|
||||
? "bg-slate-700 hover:bg-slate-600 text-white"
|
||||
: "bg-green-900/50 hover:bg-green-800/50 text-green-300 border border-green-800"
|
||||
}`}
|
||||
>
|
||||
{actionLoading ? "…" : isOpen ? "Close" : "Reopen"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Title + description */}
|
||||
<div className="space-y-1.5">
|
||||
<h1 className="text-lg font-bold text-white leading-snug">{alert.title}</h1>
|
||||
<p className="text-sm text-slate-400 leading-relaxed">{alert.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<section className="space-y-3 pt-1">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-widest text-slate-600">Notes</h2>
|
||||
|
||||
{alert.comments.length === 0 && (
|
||||
<p className="text-sm text-slate-700">No notes yet.</p>
|
||||
)}
|
||||
|
||||
{alert.comments.map((c) => (
|
||||
<div key={c.id} className="space-y-1">
|
||||
<p className="text-xs text-slate-600">{shortDate(c.createdAt)}</p>
|
||||
<p className="text-sm text-slate-300 whitespace-pre-wrap leading-relaxed">{c.body}</p>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<form onSubmit={submitComment} className="flex flex-col gap-2 pt-1">
|
||||
<textarea
|
||||
value={commentText}
|
||||
onChange={(e) => setCommentText(e.target.value)}
|
||||
placeholder="Add a note…"
|
||||
rows={3}
|
||||
className="w-full rounded-lg bg-slate-800/40 border border-slate-700/60 focus:border-slate-500 text-sm text-white placeholder-slate-700 px-4 py-3 focus:outline-none resize-none transition-colors"
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={commentLoading || !commentText.trim()}
|
||||
className="rounded-lg bg-slate-700 hover:bg-slate-600 disabled:opacity-40 disabled:cursor-not-allowed px-4 py-2 text-sm font-medium text-white transition-colors"
|
||||
>
|
||||
{commentLoading ? "Saving…" : "Save"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user