Josh Wright
c86b8ff33a
- Add author field ("user" | "system") to AlertComment
- System comments are automatically added when an alert is reopened
by the engine ("Alert reopened — condition is still active.") or
manually via the UI ("Manually reopened.")
- Alert detail page redesigned with a two-column layout (3/5 detail,
2/5 comments) at lg breakpoint
- System comments render as centered event dividers with a gear icon;
user comments render as avatar + bubble
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
255 lines
12 KiB
TypeScript
255 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import { Alert, AlertSeverity, AlertComment } from "@/lib/types";
|
|
|
|
// ── Severity theming ─────────────────────────────────────────────────────────
|
|
|
|
const severityAccent: Record<AlertSeverity, string> = {
|
|
danger: "border-l-red-500",
|
|
warning: "border-l-yellow-500",
|
|
info: "border-l-blue-500",
|
|
};
|
|
|
|
const severityText: Record<AlertSeverity, string> = {
|
|
danger: "text-red-400",
|
|
warning: "text-yellow-400",
|
|
info: "text-blue-400",
|
|
};
|
|
|
|
const severityLabel: Record<AlertSeverity, string> = {
|
|
danger: "Critical",
|
|
warning: "Warning",
|
|
info: "Info",
|
|
};
|
|
|
|
// ── Helpers ───────────────────────────────────────────────────────────────────
|
|
|
|
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",
|
|
});
|
|
}
|
|
|
|
// ── Comment row ───────────────────────────────────────────────────────────────
|
|
|
|
function CommentRow({ comment }: { comment: AlertComment }) {
|
|
const isSystem = comment.author === "system";
|
|
|
|
if (isSystem) {
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-px flex-1 bg-slate-800" />
|
|
<div className="flex items-center gap-1.5 text-xs text-slate-600 shrink-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-3 w-3">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
</svg>
|
|
<span className="italic">{comment.body}</span>
|
|
<span className="text-slate-700">·</span>
|
|
<span>{timeAgo(comment.createdAt)}</span>
|
|
</div>
|
|
<div className="h-px flex-1 bg-slate-800" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-1.5">
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center shrink-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-3.5 w-3.5 text-slate-400">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
|
</svg>
|
|
</div>
|
|
<span className="text-xs font-semibold text-slate-300">User</span>
|
|
<span className="text-xs text-slate-600">{shortDate(comment.createdAt)}</span>
|
|
</div>
|
|
<div className="ml-8">
|
|
<p className="text-sm text-slate-300 whitespace-pre-wrap leading-relaxed bg-slate-800/60 rounded-lg border border-slate-700/40 px-4 py-3">
|
|
{comment.body}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Main component ────────────────────────────────────────────────────────────
|
|
|
|
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);
|
|
const bottomRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
}, [alert.comments.length]);
|
|
|
|
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-5xl px-4 py-8 space-y-6">
|
|
|
|
<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>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6 items-start">
|
|
|
|
{/* ── Alert detail ─────────────────────────────────────────────── */}
|
|
<div className={`lg:col-span-3 rounded-xl bg-slate-800/40 border border-slate-700/60 border-l-4 overflow-hidden ${severityAccent[alert.severity]}`}>
|
|
<div className="px-6 py-6 space-y-4">
|
|
|
|
{/* 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>
|
|
|
|
{/* Severity + title + description */}
|
|
<div className="space-y-1.5">
|
|
<span className={`text-xs font-bold uppercase tracking-widest ${severityText[alert.severity]}`}>
|
|
{severityLabel[alert.severity]}
|
|
</span>
|
|
<h1 className="text-xl font-bold text-white leading-snug">{alert.title}</h1>
|
|
<p className="text-sm text-slate-400 leading-relaxed pt-1">{alert.description}</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Comments ─────────────────────────────────────────────────── */}
|
|
<div className="lg:col-span-2 flex flex-col gap-4">
|
|
|
|
<h2 className="text-xs font-semibold uppercase tracking-widest text-slate-600">
|
|
Comments
|
|
</h2>
|
|
|
|
<div className="space-y-4">
|
|
{alert.comments.length === 0 && (
|
|
<p className="text-sm text-slate-700">No comments yet.</p>
|
|
)}
|
|
{alert.comments.map((c) => (
|
|
<CommentRow key={c.id} comment={c} />
|
|
))}
|
|
<div ref={bottomRef} />
|
|
</div>
|
|
|
|
<form onSubmit={submitComment} className="flex flex-col gap-2 pt-2 border-t border-slate-800">
|
|
<textarea
|
|
value={commentText}
|
|
onChange={(e) => setCommentText(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
|
|
e.preventDefault();
|
|
if (commentText.trim()) submitComment(e as unknown as React.FormEvent);
|
|
}
|
|
}}
|
|
placeholder="Add a comment…"
|
|
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…" : "Comment"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|