manage/frontend/src/pages/service-tabs/AlertsTab.tsx

/**
 * Alertmanager Alerts tab (spec R2.4, R8.2).
 *
 * Lifts the Alertmanager alerts content from the old cross-service
 * ObservabilityPage into an instance-scoped tab. Renders the active-alert
 * summary (total + by severity) and the expandable alert list.
 *
 * The hooks (useAlertmanagerAlerts, useAlertmanagerStatus) are global /
 * first-configured for now — they don't accept a service_id yet. Wiring
 * `instance.id` into them is a documented follow-up once the hooks gain the
 * parameter. The `instance` prop is accepted for future scoping.
 */
import { AlertTriangle, Bell, ChevronDown, Inbox } from "lucide-react";
import {
	useAlertmanagerAlerts,
	useAlertmanagerStatus,
} from "../../hooks/useObservability";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger,
} from "@/components/ui/collapsible";
import type { AlertmanagerAlert, ServiceInstance } from "../../types";

function severityVariant(
	severity: string,
): "default" | "secondary" | "destructive" | "outline" {
	switch (severity.toLowerCase()) {
		case "critical":
			return "destructive";
		case "warning":
			return "default";
		case "info":
			return "secondary";
		default:
			return "outline";
	}
}

function AlertItem({ alert }: { alert: AlertmanagerAlert }) {
	return (
		<Collapsible>
			<CollapsibleTrigger asChild>
				<div className="group cursor-pointer rounded-lg border p-3 transition-colors hover:bg-muted/50">
					<div className="flex items-start justify-between gap-2">
						<div className="font-medium text-sm">{alert.name}</div>
						<div className="flex items-center gap-1">
							<Badge variant={severityVariant(alert.severity)}>
								{alert.severity}
							</Badge>
							<ChevronDown className="h-4 w-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
						</div>
					</div>
					<div className="mt-1 text-xs text-muted-foreground">
						{alert.summary || alert.description}
					</div>
					{alert.active_since && (
						<div className="mt-1 text-[10px] text-muted-foreground">
							Since {new Date(alert.active_since).toLocaleString()}
						</div>
					)}
				</div>
			</CollapsibleTrigger>
			<CollapsibleContent className="overflow-hidden">
				<div className="space-y-2 rounded-b-lg border-x border-b p-3 text-sm">
					{alert.description && (
						<div>
							<span className="font-medium">Description:</span>{" "}
							{alert.description}
						</div>
					)}
					<div className="grid grid-cols-2 gap-2 text-xs">
						{alert.job_name && (
							<div>
								<span className="font-medium">Job:</span> {alert.job_name}
							</div>
						)}
						{alert.category && (
							<div>
								<span className="font-medium">Category:</span> {alert.category}
							</div>
						)}
						<div>
							<span className="font-medium">State:</span> {alert.state}
						</div>
						<div>
							<span className="font-medium">Since:</span>{" "}
							{alert.active_since
								? new Date(alert.active_since).toLocaleString()
								: "unknown"}
						</div>
					</div>
					{alert.labels && Object.keys(alert.labels).length > 0 && (
						<div className="flex flex-wrap gap-1 pt-1">
							{Object.entries(alert.labels).map(([key, value]) => (
								<Badge key={key} variant="secondary" className="text-[10px]">
									{key}={value}
								</Badge>
							))}
						</div>
					)}
				</div>
			</CollapsibleContent>
		</Collapsible>
	);
}

export function AlertsTab({ instance }: { instance: ServiceInstance }) {
	// Global / first-configured hooks for now; instance.id scoping is a
	// follow-up (see file docstring).
	void instance;

	const {
		data: alertsSummary,
		isLoading: alertsLoading,
		error: alertsError,
	} = useAlertmanagerAlerts();
	const { data: status, isLoading: statusLoading } = useAlertmanagerStatus();

	const statusDetail = status?.up
		? status.version
			? `version ${status.version}`
			: "reachable"
		: statusLoading
			? "checking…"
			: "unreachable";

	return (
		<div className="space-y-4">
			<div className="flex items-center gap-2 text-sm text-muted-foreground">
				<Bell className="h-4 w-4" />
				Alertmanager {statusDetail}
			</div>

			{alertsError && (
				<Alert variant="destructive">
					<AlertTitle>Failed to load alerts</AlertTitle>
					<AlertDescription>{alertsError.message}</AlertDescription>
				</Alert>
			)}

			<Card>
				<CardHeader>
					<CardTitle className="flex items-center gap-2">
						<AlertTriangle className="h-4 w-4" />
						Active Alerts ({alertsSummary?.total ?? 0})
					</CardTitle>
				</CardHeader>
				<CardContent className="space-y-3">
					{alertsLoading ? (
						<div className="space-y-2">
							<Skeleton className="h-16 w-full" />
							<Skeleton className="h-16 w-full" />
							<Skeleton className="h-16 w-full" />
						</div>
					) : !alertsSummary || alertsSummary.total === 0 ? (
						<div className="flex h-full min-h-[160px] flex-col items-center justify-center gap-2 rounded-md border p-6 text-center">
							<Inbox className="h-8 w-8 text-muted-foreground" />
							<div className="font-medium">No active alerts</div>
							<div className="max-w-md text-sm text-muted-foreground">
								Everything looks quiet. Firing alerts will appear here.
							</div>
						</div>
					) : (
						<>
							{alertsSummary.alerts.map((alert, idx) => (
								<AlertItem key={`${alert.name}-${idx}`} alert={alert} />
							))}
							{alertsSummary.total > alertsSummary.alerts.length && (
								<div className="text-center text-xs text-muted-foreground">
									{alertsSummary.total - alertsSummary.alerts.length} more alert
									{alertsSummary.total - alertsSummary.alerts.length === 1
										? ""
										: "s"}{" "}
									in Alertmanager
								</div>
							)}
						</>
					)}
				</CardContent>
			</Card>
		</div>
	);
}