@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-trace-viewer/index.tsx

@@ -0,0 +1,490 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../badge"
+import { Button } from "../button"
+import { ScrollArea } from "../scroll-area"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+import {
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  AlertCircle,
+  CheckCircle2,
+  Loader2,
+  ExternalLink,
+  Copy,
+} from "lucide-react"
+
+export type SpanStatus = "ok" | "error" | "unset"
+
+export interface TraceSpan {
+  id: string
+  traceId: string
+  parentId?: string
+  operationName: string
+  serviceName: string
+  startTime: number // timestamp in ms
+  duration: number // duration in ms
+  status: SpanStatus
+  tags?: Record<string, string | number | boolean>
+  logs?: Array<{
+    timestamp: number
+    message: string
+    level?: "info" | "warn" | "error"
+  }>
+  children?: TraceSpan[]
+}
+
+export interface WakaTraceViewerProps {
+  /** Root spans of the trace */
+  spans: TraceSpan[]
+  /** Trace ID */
+  traceId?: string
+  /** Total trace duration */
+  totalDuration?: number
+  /** Callback when clicking on a span */
+  onSpanClick?: (span: TraceSpan) => void
+  /** Callback when copying trace ID */
+  onCopyTraceId?: (traceId: string) => void
+  /** Show service colors */
+  showServiceColors?: boolean
+  /** Custom class name */
+  className?: string
+}
+
+const serviceColors = [
+  "bg-blue-500",
+  "bg-green-500",
+  "bg-purple-500",
+  "bg-orange-500",
+  "bg-pink-500",
+  "bg-cyan-500",
+  "bg-yellow-500",
+  "bg-red-500",
+]
+
+function getServiceColor(serviceName: string, serviceMap: Map<string, string>): string {
+  if (!serviceMap.has(serviceName)) {
+    serviceMap.set(serviceName, serviceColors[serviceMap.size % serviceColors.length])
+  }
+  return serviceMap.get(serviceName)!
+}
+
+function SpanRow({
+  span,
+  depth,
+  totalDuration,
+  minTime,
+  serviceMap,
+  isExpanded,
+  onToggle,
+  onSpanClick,
+}: {
+  span: TraceSpan
+  depth: number
+  totalDuration: number
+  minTime: number
+  serviceMap: Map<string, string>
+  isExpanded: boolean
+  onToggle: () => void
+  onSpanClick?: (span: TraceSpan) => void
+}) {
+  const hasChildren = span.children && span.children.length > 0
+  const serviceColor = getServiceColor(span.serviceName, serviceMap)
+
+  // Calculate position and width on timeline
+  const startPercent = ((span.startTime - minTime) / totalDuration) * 100
+  const widthPercent = Math.max((span.duration / totalDuration) * 100, 0.5)
+
+  const statusIcon = {
+    ok: <CheckCircle2 className="h-4 w-4 text-green-500" />,
+    error: <AlertCircle className="h-4 w-4 text-red-500" />,
+    unset: <Clock className="h-4 w-4 text-muted-foreground" />,
+  }
+
+  return (
+    <div className="group">
+      <div
+        className={cn(
+          "flex items-center gap-2 px-2 py-1.5 hover:bg-muted/50 cursor-pointer border-b border-border/30",
+          span.status === "error" && "bg-red-500/5"
+        )}
+        onClick={() => onSpanClick?.(span)}
+      >
+        {/* Expand/Collapse */}
+        <div style={{ width: depth * 20 }} />
+        <button
+          onClick={(e) => {
+            e.stopPropagation()
+            onToggle()
+          }}
+          className="w-5 h-5 flex items-center justify-center"
+          disabled={!hasChildren}
+        >
+          {hasChildren ? (
+            isExpanded ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <ChevronRight className="h-4 w-4" />
+            )
+          ) : (
+            <span className="w-4" />
+          )}
+        </button>
+
+        {/* Service indicator */}
+        <div className={cn("w-3 h-3 rounded-full shrink-0", serviceColor)} />
+
+        {/* Service name */}
+        <span className="text-xs text-muted-foreground w-24 truncate shrink-0">
+          {span.serviceName}
+        </span>
+
+        {/* Operation name */}
+        <span className="text-sm font-medium truncate w-48 shrink-0">
+          {span.operationName}
+        </span>
+
+        {/* Status */}
+        <div className="shrink-0">{statusIcon[span.status]}</div>
+
+        {/* Timeline bar */}
+        <div className="flex-1 h-6 bg-muted/30 rounded relative min-w-[200px]">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div
+                  className={cn(
+                    "absolute h-full rounded transition-all",
+                    span.status === "error" ? "bg-red-500" : serviceColor,
+                    "opacity-80 hover:opacity-100"
+                  )}
+                  style={{
+                    left: `${startPercent}%`,
+                    width: `${widthPercent}%`,
+                    minWidth: "4px",
+                  }}
+                />
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="text-xs space-y-1">
+                  <div className="font-semibold">{span.operationName}</div>
+                  <div>Service: {span.serviceName}</div>
+                  <div>Duration: {span.duration.toFixed(2)}ms</div>
+                  <div>Start: +{(span.startTime - minTime).toFixed(2)}ms</div>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+
+        {/* Duration */}
+        <span className="text-xs text-muted-foreground w-20 text-right shrink-0">
+          {span.duration.toFixed(2)}ms
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function SpanTree({
+  spans,
+  depth,
+  totalDuration,
+  minTime,
+  serviceMap,
+  expandedIds,
+  onToggle,
+  onSpanClick,
+}: {
+  spans: TraceSpan[]
+  depth: number
+  totalDuration: number
+  minTime: number
+  serviceMap: Map<string, string>
+  expandedIds: Set<string>
+  onToggle: (id: string) => void
+  onSpanClick?: (span: TraceSpan) => void
+}) {
+  return (
+    <>
+      {spans.map((span) => {
+        const isExpanded = expandedIds.has(span.id)
+        return (
+          <React.Fragment key={span.id}>
+            <SpanRow
+              span={span}
+              depth={depth}
+              totalDuration={totalDuration}
+              minTime={minTime}
+              serviceMap={serviceMap}
+              isExpanded={isExpanded}
+              onToggle={() => onToggle(span.id)}
+              onSpanClick={onSpanClick}
+            />
+            {isExpanded && span.children && (
+              <SpanTree
+                spans={span.children}
+                depth={depth + 1}
+                totalDuration={totalDuration}
+                minTime={minTime}
+                serviceMap={serviceMap}
+                expandedIds={expandedIds}
+                onToggle={onToggle}
+                onSpanClick={onSpanClick}
+              />
+            )}
+          </React.Fragment>
+        )
+      })}
+    </>
+  )
+}
+
+export function WakaTraceViewer({
+  spans,
+  traceId,
+  totalDuration: propTotalDuration,
+  onSpanClick,
+  onCopyTraceId,
+  showServiceColors = true,
+  className,
+}: WakaTraceViewerProps) {
+  const [expandedIds, setExpandedIds] = React.useState<Set<string>>(new Set())
+  const serviceMap = React.useMemo(() => new Map<string, string>(), [])
+
+  // Calculate min time and total duration
+  const { minTime, totalDuration } = React.useMemo(() => {
+    const allSpans: TraceSpan[] = []
+    const collectSpans = (spans: TraceSpan[]) => {
+      spans.forEach((span) => {
+        allSpans.push(span)
+        if (span.children) collectSpans(span.children)
+      })
+    }
+    collectSpans(spans)
+
+    if (allSpans.length === 0) return { minTime: 0, totalDuration: 1 }
+
+    const minTime = Math.min(...allSpans.map((s) => s.startTime))
+    const maxTime = Math.max(...allSpans.map((s) => s.startTime + s.duration))
+    return {
+      minTime,
+      totalDuration: propTotalDuration || maxTime - minTime || 1,
+    }
+  }, [spans, propTotalDuration])
+
+  const toggleExpand = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }
+
+  const expandAll = () => {
+    const allIds = new Set<string>()
+    const collectIds = (spans: TraceSpan[]) => {
+      spans.forEach((span) => {
+        allIds.add(span.id)
+        if (span.children) collectIds(span.children)
+      })
+    }
+    collectIds(spans)
+    setExpandedIds(allIds)
+  }
+
+  const collapseAll = () => {
+    setExpandedIds(new Set())
+  }
+
+  // Get unique services
+  const services = React.useMemo(() => {
+    const serviceSet = new Set<string>()
+    const collectServices = (spans: TraceSpan[]) => {
+      spans.forEach((span) => {
+        serviceSet.add(span.serviceName)
+        if (span.children) collectServices(span.children)
+      })
+    }
+    collectServices(spans)
+    return Array.from(serviceSet)
+  }, [spans])
+
+  // Count spans
+  const spanCount = React.useMemo(() => {
+    let count = 0
+    const countSpans = (spans: TraceSpan[]) => {
+      spans.forEach((span) => {
+        count++
+        if (span.children) countSpans(span.children)
+      })
+    }
+    countSpans(spans)
+    return count
+  }, [spans])
+
+  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">
+          <h3 className="font-semibold">Trace</h3>
+          {traceId && (
+            <div className="flex items-center gap-1">
+              <code className="text-xs bg-muted px-2 py-0.5 rounded font-mono">
+                {traceId.slice(0, 16)}...
+              </code>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0"
+                onClick={() => onCopyTraceId?.(traceId)}
+              >
+                <Copy className="h-3 w-3" />
+              </Button>
+            </div>
+          )}
+          <Badge variant="secondary">{spanCount} spans</Badge>
+          <Badge variant="outline">{totalDuration.toFixed(2)}ms</Badge>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="sm" onClick={expandAll}>
+            Expand All
+          </Button>
+          <Button variant="ghost" size="sm" onClick={collapseAll}>
+            Collapse All
+          </Button>
+        </div>
+      </div>
+
+      {/* Service legend */}
+      {showServiceColors && services.length > 0 && (
+        <div className="flex items-center gap-3 px-3 py-2 border-b bg-muted/30 flex-wrap">
+          <span className="text-xs text-muted-foreground">Services:</span>
+          {services.map((service) => (
+            <div key={service} className="flex items-center gap-1.5">
+              <div className={cn("w-2.5 h-2.5 rounded-full", getServiceColor(service, serviceMap))} />
+              <span className="text-xs">{service}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Timeline header */}
+      <div className="flex items-center gap-2 px-2 py-1 border-b bg-muted/20 text-xs text-muted-foreground">
+        <div className="w-5" />
+        <div className="w-5" />
+        <div className="w-3" />
+        <div className="w-24">Service</div>
+        <div className="w-48">Operation</div>
+        <div className="w-4" />
+        <div className="flex-1 flex justify-between min-w-[200px]">
+          <span>0ms</span>
+          <span>{(totalDuration / 2).toFixed(0)}ms</span>
+          <span>{totalDuration.toFixed(0)}ms</span>
+        </div>
+        <div className="w-20 text-right">Duration</div>
+      </div>
+
+      {/* Spans */}
+      <ScrollArea className="flex-1">
+        {spans.length === 0 ? (
+          <div className="flex items-center justify-center h-32 text-muted-foreground">
+            No spans to display
+          </div>
+        ) : (
+          <SpanTree
+            spans={spans}
+            depth={0}
+            totalDuration={totalDuration}
+            minTime={minTime}
+            serviceMap={serviceMap}
+            expandedIds={expandedIds}
+            onToggle={toggleExpand}
+            onSpanClick={onSpanClick}
+          />
+        )}
+      </ScrollArea>
+    </div>
+  )
+}
+
+// Default sample trace for demo
+export const defaultTraceSpans: TraceSpan[] = [
+  {
+    id: "span-1",
+    traceId: "abc123def456",
+    operationName: "HTTP GET /api/users",
+    serviceName: "api-gateway",
+    startTime: 0,
+    duration: 245,
+    status: "ok",
+    children: [
+      {
+        id: "span-2",
+        traceId: "abc123def456",
+        parentId: "span-1",
+        operationName: "authenticate",
+        serviceName: "auth-service",
+        startTime: 5,
+        duration: 35,
+        status: "ok",
+      },
+      {
+        id: "span-3",
+        traceId: "abc123def456",
+        parentId: "span-1",
+        operationName: "SELECT * FROM users",
+        serviceName: "user-service",
+        startTime: 45,
+        duration: 120,
+        status: "ok",
+        children: [
+          {
+            id: "span-4",
+            traceId: "abc123def456",
+            parentId: "span-3",
+            operationName: "PostgreSQL Query",
+            serviceName: "postgres",
+            startTime: 50,
+            duration: 95,
+            status: "ok",
+          },
+        ],
+      },
+      {
+        id: "span-5",
+        traceId: "abc123def456",
+        parentId: "span-1",
+        operationName: "cache.get",
+        serviceName: "redis",
+        startTime: 170,
+        duration: 8,
+        status: "ok",
+      },
+      {
+        id: "span-6",
+        traceId: "abc123def456",
+        parentId: "span-1",
+        operationName: "serialize response",
+        serviceName: "api-gateway",
+        startTime: 185,
+        duration: 55,
+        status: "ok",
+      },
+    ],
+  },
+]