@wakastellar/ui 2.1.2 → 2.3.2

package/src/blocks/incident-manager/index.tsx

@@ -0,0 +1,586 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../../components/badge"
+import { Button } from "../../components/button"
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/card"
+import { Input } from "../../components/input"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar"
+import { ScrollArea } from "../../components/scroll-area"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/tabs"
+import { Progress } from "../../components/progress"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import {
+  AlertTriangle,
+  AlertCircle,
+  Bell,
+  CheckCircle2,
+  Clock,
+  MessageSquare,
+  Phone,
+  Plus,
+  Search,
+  Shield,
+  User,
+  Users,
+  Activity,
+  TrendingUp,
+  TrendingDown,
+  ExternalLink,
+  MoreVertical,
+  Play,
+  Pause,
+  XCircle,
+} from "lucide-react"
+
+export type IncidentSeverity = "critical" | "high" | "medium" | "low"
+export type IncidentStatus = "triggered" | "acknowledged" | "investigating" | "identified" | "resolved" | "closed"
+
+export interface IncidentResponder {
+  id: string
+  name: string
+  avatar?: string
+  role: string
+  status: "available" | "engaged" | "offline"
+}
+
+export interface IncidentEvent {
+  id: string
+  type: "status_change" | "comment" | "assignment" | "escalation" | "runbook"
+  timestamp: Date
+  user?: string
+  content: string
+}
+
+export interface Incident {
+  id: string
+  title: string
+  description?: string
+  severity: IncidentSeverity
+  status: IncidentStatus
+  service?: string
+  createdAt: Date
+  acknowledgedAt?: Date
+  resolvedAt?: Date
+  responders: IncidentResponder[]
+  events: IncidentEvent[]
+  impact?: string
+  affectedUsers?: number
+  slackChannel?: string
+  runbookUrl?: string
+}
+
+export interface IncidentManagerProps {
+  incidents: Incident[]
+  onCreateIncident?: () => void
+  onAcknowledge?: (incident: Incident) => void
+  onResolve?: (incident: Incident) => void
+  onEscalate?: (incident: Incident) => void
+  onAssign?: (incident: Incident, responder: IncidentResponder) => void
+  className?: string
+}
+
+const severityConfig: Record<IncidentSeverity, { label: string; color: string; bgColor: string }> = {
+  critical: { label: "Critical", color: "text-red-500", bgColor: "bg-red-500" },
+  high: { label: "High", color: "text-orange-500", bgColor: "bg-orange-500" },
+  medium: { label: "Medium", color: "text-yellow-500", bgColor: "bg-yellow-500" },
+  low: { label: "Low", color: "text-blue-500", bgColor: "bg-blue-500" },
+}
+
+const statusConfig: Record<IncidentStatus, { label: string; color: string; icon: React.ElementType }> = {
+  triggered: { label: "Triggered", color: "text-red-500", icon: AlertCircle },
+  acknowledged: { label: "Acknowledged", color: "text-orange-500", icon: Bell },
+  investigating: { label: "Investigating", color: "text-yellow-500", icon: Search },
+  identified: { label: "Identified", color: "text-blue-500", icon: Activity },
+  resolved: { label: "Resolved", color: "text-green-500", icon: CheckCircle2 },
+  closed: { label: "Closed", color: "text-gray-500", icon: XCircle },
+}
+
+function formatDuration(start: Date, end?: Date): string {
+  const diff = (end || new Date()).getTime() - start.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 formatTime(date: Date): string {
+  return date.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" })
+}
+
+function IncidentCard({
+  incident,
+  onAcknowledge,
+  onResolve,
+  onSelect,
+}: {
+  incident: Incident
+  onAcknowledge?: () => void
+  onResolve?: () => void
+  onSelect?: () => void
+}) {
+  const sevConf = severityConfig[incident.severity]
+  const statConf = statusConfig[incident.status]
+  const StatusIcon = statConf.icon
+  const isActive = !["resolved", "closed"].includes(incident.status)
+
+  return (
+    <Card
+      className={cn(
+        "cursor-pointer transition-all hover:shadow-md",
+        incident.severity === "critical" && isActive && "border-red-500/50 bg-red-500/5",
+        incident.severity === "high" && isActive && "border-orange-500/30"
+      )}
+      onClick={onSelect}
+    >
+      <CardContent className="p-4">
+        <div className="flex items-start gap-3">
+          <div className={cn("p-2 rounded-lg shrink-0", `${sevConf.bgColor}/10`)}>
+            <AlertTriangle className={cn("h-5 w-5", sevConf.color)} />
+          </div>
+
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 flex-wrap">
+              <Badge className={cn("text-white text-xs", sevConf.bgColor)}>
+                {sevConf.label}
+              </Badge>
+              <Badge variant="outline" className={cn("text-xs", statConf.color)}>
+                <StatusIcon className="h-3 w-3 mr-1" />
+                {statConf.label}
+              </Badge>
+              {incident.service && (
+                <Badge variant="secondary" className="text-xs">
+                  {incident.service}
+                </Badge>
+              )}
+            </div>
+
+            <h4 className="font-semibold mt-2 truncate">{incident.title}</h4>
+
+            {incident.description && (
+              <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+                {incident.description}
+              </p>
+            )}
+
+            <div className="flex items-center gap-4 mt-3 text-xs text-muted-foreground">
+              <span className="flex items-center gap-1">
+                <Clock className="h-3 w-3" />
+                {formatDuration(incident.createdAt, incident.resolvedAt)}
+              </span>
+              {incident.affectedUsers !== undefined && (
+                <span className="flex items-center gap-1">
+                  <Users className="h-3 w-3" />
+                  {incident.affectedUsers} affected
+                </span>
+              )}
+              <span className="flex items-center gap-1">
+                <MessageSquare className="h-3 w-3" />
+                {incident.events.length}
+              </span>
+            </div>
+
+            {/* Responders */}
+            {incident.responders.length > 0 && (
+              <div className="flex items-center gap-2 mt-3">
+                <div className="flex -space-x-2">
+                  {incident.responders.slice(0, 3).map((responder) => (
+                    <Avatar key={responder.id} className="h-6 w-6 border-2 border-background">
+                      <AvatarImage src={responder.avatar} />
+                      <AvatarFallback className="text-xs">
+                        {responder.name.slice(0, 2).toUpperCase()}
+                      </AvatarFallback>
+                    </Avatar>
+                  ))}
+                  {incident.responders.length > 3 && (
+                    <div className="h-6 w-6 rounded-full bg-muted flex items-center justify-center text-xs border-2 border-background">
+                      +{incident.responders.length - 3}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Quick actions */}
+          {isActive && (
+            <div className="flex flex-col gap-1 shrink-0">
+              {incident.status === "triggered" && onAcknowledge && (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="h-7 text-xs"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onAcknowledge()
+                  }}
+                >
+                  Ack
+                </Button>
+              )}
+              {incident.status !== "triggered" && incident.status !== "resolved" && onResolve && (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="h-7 text-xs text-green-500"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onResolve()
+                  }}
+                >
+                  Resolve
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function IncidentStats({ incidents }: { incidents: Incident[] }) {
+  const active = incidents.filter((i) => !["resolved", "closed"].includes(i.status))
+  const critical = active.filter((i) => i.severity === "critical")
+  const mttr = React.useMemo(() => {
+    const resolved = incidents.filter((i) => i.resolvedAt)
+    if (resolved.length === 0) return 0
+    const total = resolved.reduce((acc, i) => {
+      return acc + (i.resolvedAt!.getTime() - i.createdAt.getTime())
+    }, 0)
+    return Math.round(total / resolved.length / 60000) // in minutes
+  }, [incidents])
+
+  return (
+    <div className="grid grid-cols-4 gap-4">
+      <Card>
+        <CardContent className="p-4 text-center">
+          <div className="text-3xl font-bold text-red-500">{active.length}</div>
+          <div className="text-sm text-muted-foreground">Active Incidents</div>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent className="p-4 text-center">
+          <div className="text-3xl font-bold text-orange-500">{critical.length}</div>
+          <div className="text-sm text-muted-foreground">Critical</div>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent className="p-4 text-center">
+          <div className="text-3xl font-bold">{mttr}m</div>
+          <div className="text-sm text-muted-foreground">Avg MTTR</div>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent className="p-4 text-center">
+          <div className="text-3xl font-bold text-green-500">
+            {incidents.filter((i) => i.status === "resolved").length}
+          </div>
+          <div className="text-sm text-muted-foreground">Resolved Today</div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export function IncidentManager({
+  incidents,
+  onCreateIncident,
+  onAcknowledge,
+  onResolve,
+  onEscalate,
+  onAssign,
+  className,
+}: IncidentManagerProps) {
+  const [searchQuery, setSearchQuery] = React.useState("")
+  const [severityFilter, setSeverityFilter] = React.useState<IncidentSeverity | "all">("all")
+  const [statusFilter, setStatusFilter] = React.useState<"active" | "resolved" | "all">("active")
+  const [selectedIncident, setSelectedIncident] = React.useState<Incident | null>(null)
+
+  // Filter incidents
+  const filteredIncidents = React.useMemo(() => {
+    return incidents
+      .filter((i) => {
+        if (searchQuery && !i.title.toLowerCase().includes(searchQuery.toLowerCase())) return false
+        if (severityFilter !== "all" && i.severity !== severityFilter) return false
+        if (statusFilter === "active" && ["resolved", "closed"].includes(i.status)) return false
+        if (statusFilter === "resolved" && !["resolved", "closed"].includes(i.status)) return false
+        return true
+      })
+      .sort((a, b) => {
+        // Sort by severity first, then by date
+        const sevOrder = { critical: 0, high: 1, medium: 2, low: 3 }
+        const sevDiff = sevOrder[a.severity] - sevOrder[b.severity]
+        if (sevDiff !== 0) return sevDiff
+        return b.createdAt.getTime() - a.createdAt.getTime()
+      })
+  }, [incidents, searchQuery, severityFilter, statusFilter])
+
+  return (
+    <div className={cn("flex flex-col gap-6", className)}>
+      {/* Stats */}
+      <IncidentStats incidents={incidents} />
+
+      {/* Main content */}
+      <div className="flex gap-6">
+        {/* Incidents list */}
+        <div className="flex-1 space-y-4">
+          {/* Toolbar */}
+          <div className="flex items-center gap-3">
+            <div className="relative flex-1 max-w-sm">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search incidents..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+
+            <Select value={severityFilter} onValueChange={(v) => setSeverityFilter(v as IncidentSeverity | "all")}>
+              <SelectTrigger className="w-32">
+                <SelectValue placeholder="Severity" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Severity</SelectItem>
+                <SelectItem value="critical">Critical</SelectItem>
+                <SelectItem value="high">High</SelectItem>
+                <SelectItem value="medium">Medium</SelectItem>
+                <SelectItem value="low">Low</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select value={statusFilter} onValueChange={(v) => setStatusFilter(v as "active" | "resolved" | "all")}>
+              <SelectTrigger className="w-32">
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="active">Active</SelectItem>
+                <SelectItem value="resolved">Resolved</SelectItem>
+                <SelectItem value="all">All</SelectItem>
+              </SelectContent>
+            </Select>
+
+            {onCreateIncident && (
+              <Button onClick={onCreateIncident}>
+                <Plus className="h-4 w-4 mr-1" />
+                Create Incident
+              </Button>
+            )}
+          </div>
+
+          {/* Incidents */}
+          <ScrollArea className="h-[600px]">
+            <div className="space-y-3 pr-4">
+              {filteredIncidents.length === 0 ? (
+                <div className="flex flex-col items-center justify-center h-48 text-muted-foreground">
+                  <Shield className="h-12 w-12 mb-4 text-green-500" />
+                  <p className="text-lg font-medium">No incidents</p>
+                  <p className="text-sm">All systems are operational</p>
+                </div>
+              ) : (
+                filteredIncidents.map((incident) => (
+                  <IncidentCard
+                    key={incident.id}
+                    incident={incident}
+                    onAcknowledge={onAcknowledge ? () => onAcknowledge(incident) : undefined}
+                    onResolve={onResolve ? () => onResolve(incident) : undefined}
+                    onSelect={() => setSelectedIncident(incident)}
+                  />
+                ))
+              )}
+            </div>
+          </ScrollArea>
+        </div>
+
+        {/* Incident detail panel */}
+        {selectedIncident && (
+          <Card className="w-96 shrink-0">
+            <CardHeader className="pb-3">
+              <div className="flex items-center justify-between">
+                <Badge className={cn("text-white", severityConfig[selectedIncident.severity].bgColor)}>
+                  {severityConfig[selectedIncident.severity].label}
+                </Badge>
+                <Button variant="ghost" size="sm" onClick={() => setSelectedIncident(null)}>
+                  <XCircle className="h-4 w-4" />
+                </Button>
+              </div>
+              <CardTitle className="mt-2">{selectedIncident.title}</CardTitle>
+              <div className="flex items-center gap-2 mt-2">
+                <Badge variant="outline" className={statusConfig[selectedIncident.status].color}>
+                  {statusConfig[selectedIncident.status].label}
+                </Badge>
+                {selectedIncident.service && (
+                  <Badge variant="secondary">{selectedIncident.service}</Badge>
+                )}
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {selectedIncident.description && (
+                <p className="text-sm text-muted-foreground">{selectedIncident.description}</p>
+              )}
+
+              {/* Impact */}
+              {selectedIncident.impact && (
+                <div>
+                  <div className="text-xs font-medium text-muted-foreground mb-1">Impact</div>
+                  <p className="text-sm">{selectedIncident.impact}</p>
+                </div>
+              )}
+
+              {/* Timeline */}
+              <div>
+                <div className="text-xs font-medium text-muted-foreground mb-2">Timeline</div>
+                <div className="space-y-2">
+                  {selectedIncident.events.slice(0, 5).map((event) => (
+                    <div key={event.id} className="flex items-start gap-2 text-xs">
+                      <span className="text-muted-foreground shrink-0">
+                        {formatTime(event.timestamp)}
+                      </span>
+                      <span>{event.content}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Responders */}
+              <div>
+                <div className="text-xs font-medium text-muted-foreground mb-2">Responders</div>
+                <div className="space-y-2">
+                  {selectedIncident.responders.map((responder) => (
+                    <div key={responder.id} className="flex items-center gap-2">
+                      <Avatar className="h-6 w-6">
+                        <AvatarImage src={responder.avatar} />
+                        <AvatarFallback className="text-xs">
+                          {responder.name.slice(0, 2).toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="text-sm">{responder.name}</span>
+                      <Badge variant="outline" className="text-xs ml-auto">
+                        {responder.role}
+                      </Badge>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Actions */}
+              <div className="flex flex-col gap-2 pt-2 border-t">
+                {selectedIncident.slackChannel && (
+                  <Button variant="outline" size="sm" className="justify-start">
+                    <MessageSquare className="h-4 w-4 mr-2" />
+                    Join #{selectedIncident.slackChannel}
+                  </Button>
+                )}
+                {selectedIncident.runbookUrl && (
+                  <Button variant="outline" size="sm" className="justify-start">
+                    <ExternalLink className="h-4 w-4 mr-2" />
+                    View Runbook
+                  </Button>
+                )}
+                {onEscalate && !["resolved", "closed"].includes(selectedIncident.status) && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="justify-start text-orange-500"
+                    onClick={() => onEscalate(selectedIncident)}
+                  >
+                    <Phone className="h-4 w-4 mr-2" />
+                    Escalate
+                  </Button>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// Default sample data
+export const defaultIncidents: Incident[] = [
+  {
+    id: "1",
+    title: "Database connection pool exhausted",
+    description: "Production database is experiencing connection pool exhaustion, causing request timeouts",
+    severity: "critical",
+    status: "investigating",
+    service: "api-gateway",
+    createdAt: new Date(Date.now() - 45 * 60000),
+    acknowledgedAt: new Date(Date.now() - 40 * 60000),
+    impact: "50% of API requests failing with 504 errors",
+    affectedUsers: 12500,
+    slackChannel: "incident-db-001",
+    runbookUrl: "https://runbooks.example.com/db-pool",
+    responders: [
+      { id: "1", name: "John Doe", role: "Incident Commander", status: "engaged" },
+      { id: "2", name: "Jane Smith", role: "DBA", status: "engaged" },
+    ],
+    events: [
+      { id: "e1", type: "status_change", timestamp: new Date(Date.now() - 45 * 60000), content: "Incident triggered by alerting system" },
+      { id: "e2", type: "assignment", timestamp: new Date(Date.now() - 43 * 60000), content: "John Doe assigned as IC", user: "System" },
+      { id: "e3", type: "status_change", timestamp: new Date(Date.now() - 40 * 60000), content: "Incident acknowledged", user: "John Doe" },
+      { id: "e4", type: "comment", timestamp: new Date(Date.now() - 35 * 60000), content: "Investigating connection pool settings", user: "Jane Smith" },
+      { id: "e5", type: "status_change", timestamp: new Date(Date.now() - 30 * 60000), content: "Status changed to investigating", user: "John Doe" },
+    ],
+  },
+  {
+    id: "2",
+    title: "High latency on payment service",
+    description: "Payment processing latency increased to >2s, above SLA threshold",
+    severity: "high",
+    status: "acknowledged",
+    service: "payment-service",
+    createdAt: new Date(Date.now() - 20 * 60000),
+    acknowledgedAt: new Date(Date.now() - 15 * 60000),
+    affectedUsers: 3200,
+    responders: [
+      { id: "3", name: "Alice Johnson", role: "On-Call Engineer", status: "engaged" },
+    ],
+    events: [
+      { id: "e6", type: "status_change", timestamp: new Date(Date.now() - 20 * 60000), content: "Incident triggered" },
+      { id: "e7", type: "status_change", timestamp: new Date(Date.now() - 15 * 60000), content: "Acknowledged by Alice Johnson" },
+    ],
+  },
+  {
+    id: "3",
+    title: "Elevated error rate on search API",
+    severity: "medium",
+    status: "triggered",
+    service: "search-service",
+    createdAt: new Date(Date.now() - 5 * 60000),
+    responders: [],
+    events: [
+      { id: "e8", type: "status_change", timestamp: new Date(Date.now() - 5 * 60000), content: "Incident triggered by alerting system" },
+    ],
+  },
+  {
+    id: "4",
+    title: "Memory leak in recommendation engine",
+    description: "Gradual memory increase detected, auto-scaling keeping up but needs investigation",
+    severity: "low",
+    status: "resolved",
+    service: "recommendation-engine",
+    createdAt: new Date(Date.now() - 4 * 3600000),
+    acknowledgedAt: new Date(Date.now() - 3.5 * 3600000),
+    resolvedAt: new Date(Date.now() - 2 * 3600000),
+    responders: [
+      { id: "4", name: "Bob Wilson", role: "Backend Engineer", status: "available" },
+    ],
+    events: [
+      { id: "e9", type: "status_change", timestamp: new Date(Date.now() - 4 * 3600000), content: "Incident triggered" },
+      { id: "e10", type: "status_change", timestamp: new Date(Date.now() - 2 * 3600000), content: "Resolved - deployed fix v2.3.1" },
+    ],
+  },
+]