@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-alert-panel/index.tsx

@@ -0,0 +1,493 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Button } from "../button"
+import { Badge } from "../badge"
+import { ScrollArea } from "../scroll-area"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../select"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../dropdown-menu"
+import {
+  AlertCircle,
+  AlertTriangle,
+  Info,
+  Bell,
+  BellOff,
+  Check,
+  Clock,
+  MoreVertical,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  Filter,
+  RefreshCw,
+  Volume2,
+  VolumeX,
+} from "lucide-react"
+
+export type AlertSeverity = "critical" | "warning" | "info"
+export type AlertStatus = "firing" | "acknowledged" | "resolved" | "silenced"
+
+export interface Alert {
+  id: string
+  title: string
+  description?: string
+  severity: AlertSeverity
+  status: AlertStatus
+  source: string
+  startedAt: Date
+  endedAt?: Date
+  acknowledgedAt?: Date
+  acknowledgedBy?: string
+  silencedUntil?: Date
+  labels?: Record<string, string>
+  annotations?: Record<string, string>
+  fingerprint?: string
+  runbookUrl?: string
+}
+
+export interface WakaAlertPanelProps {
+  /** List of alerts */
+  alerts: Alert[]
+  /** Callback when acknowledging an alert */
+  onAcknowledge?: (alertId: string) => void
+  /** Callback when silencing an alert */
+  onSilence?: (alertId: string, duration: number) => void
+  /** Callback when resolving an alert */
+  onResolve?: (alertId: string) => void
+  /** Callback when viewing alert details */
+  onViewDetails?: (alert: Alert) => void
+  /** Callback when clicking runbook link */
+  onRunbook?: (alert: Alert) => void
+  /** Callback when refreshing alerts */
+  onRefresh?: () => void
+  /** Whether alerts are loading */
+  isLoading?: boolean
+  /** Show resolved alerts */
+  showResolved?: boolean
+  /** Custom class name */
+  className?: string
+  /** Title */
+  title?: string
+}
+
+const severityConfig: Record<AlertSeverity, { icon: React.ElementType; color: string; bgColor: string }> = {
+  critical: { icon: AlertCircle, color: "text-red-500", bgColor: "bg-red-500/10 border-red-500/30" },
+  warning: { icon: AlertTriangle, color: "text-yellow-500", bgColor: "bg-yellow-500/10 border-yellow-500/30" },
+  info: { icon: Info, color: "text-blue-500", bgColor: "bg-blue-500/10 border-blue-500/30" },
+}
+
+const statusConfig: Record<AlertStatus, { label: string; variant: "default" | "secondary" | "outline" | "destructive" }> = {
+  firing: { label: "Firing", variant: "destructive" },
+  acknowledged: { label: "Acknowledged", variant: "secondary" },
+  resolved: { label: "Resolved", variant: "outline" },
+  silenced: { label: "Silenced", variant: "outline" },
+}
+
+function formatDuration(date: Date): string {
+  const now = new Date()
+  const diff = now.getTime() - date.getTime()
+  const minutes = Math.floor(diff / 60000)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+
+  if (days > 0) return `${days}d ${hours % 24}h`
+  if (hours > 0) return `${hours}h ${minutes % 60}m`
+  return `${minutes}m`
+}
+
+function AlertCard({
+  alert,
+  onAcknowledge,
+  onSilence,
+  onResolve,
+  onViewDetails,
+  onRunbook,
+}: {
+  alert: Alert
+  onAcknowledge?: (alertId: string) => void
+  onSilence?: (alertId: string, duration: number) => void
+  onResolve?: (alertId: string) => void
+  onViewDetails?: (alert: Alert) => void
+  onRunbook?: (alert: Alert) => void
+}) {
+  const config = severityConfig[alert.severity]
+  const statusCfg = statusConfig[alert.status]
+  const Icon = config.icon
+
+  return (
+    <div
+      className={cn(
+        "border rounded-lg p-4 transition-all",
+        config.bgColor,
+        alert.status === "firing" && alert.severity === "critical" && "animate-pulse"
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <Icon className={cn("h-5 w-5 mt-0.5 shrink-0", config.color)} />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <h4 className="font-semibold truncate">{alert.title}</h4>
+            <Badge variant={statusCfg.variant}>{statusCfg.label}</Badge>
+            <Badge variant="outline" className="text-xs">
+              {alert.source}
+            </Badge>
+          </div>
+
+          {alert.description && (
+            <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+              {alert.description}
+            </p>
+          )}
+
+          <div className="flex items-center gap-4 mt-2 text-xs text-muted-foreground">
+            <span className="flex items-center gap-1">
+              <Clock className="h-3 w-3" />
+              {formatDuration(alert.startedAt)}
+            </span>
+            {alert.acknowledgedBy && (
+              <span>
+                Ack by {alert.acknowledgedBy}
+              </span>
+            )}
+            {alert.silencedUntil && alert.silencedUntil > new Date() && (
+              <span className="flex items-center gap-1">
+                <VolumeX className="h-3 w-3" />
+                Silenced until {alert.silencedUntil.toLocaleTimeString()}
+              </span>
+            )}
+          </div>
+
+          {alert.labels && Object.keys(alert.labels).length > 0 && (
+            <div className="flex items-center gap-1 mt-2 flex-wrap">
+              {Object.entries(alert.labels).slice(0, 3).map(([key, value]) => (
+                <Badge key={key} variant="outline" className="text-xs">
+                  {key}={value}
+                </Badge>
+              ))}
+              {Object.keys(alert.labels).length > 3 && (
+                <Badge variant="outline" className="text-xs">
+                  +{Object.keys(alert.labels).length - 3}
+                </Badge>
+              )}
+            </div>
+          )}
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+              <MoreVertical className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => onViewDetails?.(alert)}>
+              <Eye className="h-4 w-4 mr-2" />
+              View Details
+            </DropdownMenuItem>
+            {alert.runbookUrl && (
+              <DropdownMenuItem onClick={() => onRunbook?.(alert)}>
+                <ExternalLink className="h-4 w-4 mr-2" />
+                View Runbook
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuSeparator />
+            {alert.status === "firing" && (
+              <>
+                <DropdownMenuItem onClick={() => onAcknowledge?.(alert.id)}>
+                  <Check className="h-4 w-4 mr-2" />
+                  Acknowledge
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => onSilence?.(alert.id, 30)}>
+                  <VolumeX className="h-4 w-4 mr-2" />
+                  Silence 30m
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => onSilence?.(alert.id, 60)}>
+                  <VolumeX className="h-4 w-4 mr-2" />
+                  Silence 1h
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => onSilence?.(alert.id, 240)}>
+                  <VolumeX className="h-4 w-4 mr-2" />
+                  Silence 4h
+                </DropdownMenuItem>
+              </>
+            )}
+            {alert.status !== "resolved" && (
+              <DropdownMenuItem onClick={() => onResolve?.(alert.id)}>
+                <CheckCircle className="h-4 w-4 mr-2" />
+                Mark Resolved
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  )
+}
+
+// Add missing import
+import { CheckCircle } from "lucide-react"
+
+export function WakaAlertPanel({
+  alerts,
+  onAcknowledge,
+  onSilence,
+  onResolve,
+  onViewDetails,
+  onRunbook,
+  onRefresh,
+  isLoading = false,
+  showResolved = false,
+  className,
+  title = "Alerts",
+}: WakaAlertPanelProps) {
+  const [severityFilter, setSeverityFilter] = React.useState<AlertSeverity | "all">("all")
+  const [statusFilter, setStatusFilter] = React.useState<AlertStatus | "all">("all")
+
+  // Filter alerts
+  const filteredAlerts = React.useMemo(() => {
+    return alerts.filter((alert) => {
+      if (!showResolved && alert.status === "resolved") return false
+      if (severityFilter !== "all" && alert.severity !== severityFilter) return false
+      if (statusFilter !== "all" && alert.status !== statusFilter) return false
+      return true
+    })
+  }, [alerts, showResolved, severityFilter, statusFilter])
+
+  // Count by severity
+  const severityCounts = React.useMemo(() => {
+    const active = alerts.filter((a) => a.status !== "resolved")
+    return {
+      critical: active.filter((a) => a.severity === "critical").length,
+      warning: active.filter((a) => a.severity === "warning").length,
+      info: active.filter((a) => a.severity === "info").length,
+    }
+  }, [alerts])
+
+  // Group by status
+  const groupedAlerts = React.useMemo(() => {
+    const firing = filteredAlerts.filter((a) => a.status === "firing")
+    const acknowledged = filteredAlerts.filter((a) => a.status === "acknowledged")
+    const silenced = filteredAlerts.filter((a) => a.status === "silenced")
+    const resolved = filteredAlerts.filter((a) => a.status === "resolved")
+    return { firing, acknowledged, silenced, resolved }
+  }, [filteredAlerts])
+
+  return (
+    <div className={cn("flex flex-col border rounded-lg bg-background", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between gap-4 p-3 border-b">
+        <div className="flex items-center gap-3">
+          <Bell className="h-5 w-5" />
+          <h3 className="font-semibold">{title}</h3>
+
+          {/* Severity counts */}
+          <div className="flex items-center gap-1">
+            {severityCounts.critical > 0 && (
+              <Badge variant="destructive" className="text-xs">
+                {severityCounts.critical} critical
+              </Badge>
+            )}
+            {severityCounts.warning > 0 && (
+              <Badge className="bg-yellow-500 text-xs">
+                {severityCounts.warning} warning
+              </Badge>
+            )}
+            {severityCounts.info > 0 && (
+              <Badge variant="secondary" className="text-xs">
+                {severityCounts.info} info
+              </Badge>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {onRefresh && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onRefresh}
+              disabled={isLoading}
+            >
+              <RefreshCw className={cn("h-4 w-4", isLoading && "animate-spin")} />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="flex items-center gap-2 p-2 border-b bg-muted/30">
+        <Select value={severityFilter} onValueChange={(v) => setSeverityFilter(v as AlertSeverity | "all")}>
+          <SelectTrigger className="w-[130px] h-8">
+            <Filter className="h-4 w-4 mr-2" />
+            <SelectValue placeholder="Severity" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Severity</SelectItem>
+            <SelectItem value="critical">Critical</SelectItem>
+            <SelectItem value="warning">Warning</SelectItem>
+            <SelectItem value="info">Info</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select value={statusFilter} onValueChange={(v) => setStatusFilter(v as AlertStatus | "all")}>
+          <SelectTrigger className="w-[140px] h-8">
+            <SelectValue placeholder="Status" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Status</SelectItem>
+            <SelectItem value="firing">Firing</SelectItem>
+            <SelectItem value="acknowledged">Acknowledged</SelectItem>
+            <SelectItem value="silenced">Silenced</SelectItem>
+            {showResolved && <SelectItem value="resolved">Resolved</SelectItem>}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Alerts list */}
+      <ScrollArea className="flex-1">
+        <div className="p-3 space-y-4">
+          {filteredAlerts.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
+              <BellOff className="h-8 w-8 mb-2" />
+              <span>No alerts to display</span>
+            </div>
+          ) : (
+            <>
+              {groupedAlerts.firing.length > 0 && (
+                <div className="space-y-2">
+                  <h4 className="text-sm font-medium text-red-500 flex items-center gap-2">
+                    <Volume2 className="h-4 w-4" />
+                    Firing ({groupedAlerts.firing.length})
+                  </h4>
+                  {groupedAlerts.firing.map((alert) => (
+                    <AlertCard
+                      key={alert.id}
+                      alert={alert}
+                      onAcknowledge={onAcknowledge}
+                      onSilence={onSilence}
+                      onResolve={onResolve}
+                      onViewDetails={onViewDetails}
+                      onRunbook={onRunbook}
+                    />
+                  ))}
+                </div>
+              )}
+
+              {groupedAlerts.acknowledged.length > 0 && (
+                <div className="space-y-2">
+                  <h4 className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                    <Check className="h-4 w-4" />
+                    Acknowledged ({groupedAlerts.acknowledged.length})
+                  </h4>
+                  {groupedAlerts.acknowledged.map((alert) => (
+                    <AlertCard
+                      key={alert.id}
+                      alert={alert}
+                      onAcknowledge={onAcknowledge}
+                      onSilence={onSilence}
+                      onResolve={onResolve}
+                      onViewDetails={onViewDetails}
+                      onRunbook={onRunbook}
+                    />
+                  ))}
+                </div>
+              )}
+
+              {groupedAlerts.silenced.length > 0 && (
+                <div className="space-y-2">
+                  <h4 className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                    <VolumeX className="h-4 w-4" />
+                    Silenced ({groupedAlerts.silenced.length})
+                  </h4>
+                  {groupedAlerts.silenced.map((alert) => (
+                    <AlertCard
+                      key={alert.id}
+                      alert={alert}
+                      onAcknowledge={onAcknowledge}
+                      onSilence={onSilence}
+                      onResolve={onResolve}
+                      onViewDetails={onViewDetails}
+                      onRunbook={onRunbook}
+                    />
+                  ))}
+                </div>
+              )}
+
+              {showResolved && groupedAlerts.resolved.length > 0 && (
+                <div className="space-y-2">
+                  <h4 className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4" />
+                    Resolved ({groupedAlerts.resolved.length})
+                  </h4>
+                  {groupedAlerts.resolved.map((alert) => (
+                    <AlertCard
+                      key={alert.id}
+                      alert={alert}
+                      onAcknowledge={onAcknowledge}
+                      onSilence={onSilence}
+                      onResolve={onResolve}
+                      onViewDetails={onViewDetails}
+                      onRunbook={onRunbook}
+                    />
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}
+
+// Default sample alerts for demo
+export const defaultAlerts: Alert[] = [
+  {
+    id: "1",
+    title: "High CPU Usage on prod-api-1",
+    description: "CPU usage has exceeded 90% for more than 5 minutes",
+    severity: "critical",
+    status: "firing",
+    source: "prometheus",
+    startedAt: new Date(Date.now() - 15 * 60000),
+    labels: { instance: "prod-api-1", job: "api-server" },
+    runbookUrl: "https://runbooks.example.com/high-cpu",
+  },
+  {
+    id: "2",
+    title: "Database Connection Pool Exhausted",
+    description: "PostgreSQL connection pool is at 95% capacity",
+    severity: "warning",
+    status: "acknowledged",
+    source: "prometheus",
+    startedAt: new Date(Date.now() - 45 * 60000),
+    acknowledgedAt: new Date(Date.now() - 30 * 60000),
+    acknowledgedBy: "john.doe",
+    labels: { db: "primary", pool: "main" },
+  },
+  {
+    id: "3",
+    title: "SSL Certificate Expiring Soon",
+    description: "Certificate for api.example.com expires in 7 days",
+    severity: "info",
+    status: "silenced",
+    source: "cert-manager",
+    startedAt: new Date(Date.now() - 2 * 3600000),
+    silencedUntil: new Date(Date.now() + 24 * 3600000),
+    labels: { domain: "api.example.com" },
+  },
+]