@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-service-graph/index.tsx

@@ -0,0 +1,445 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../badge"
+import { Button } from "../button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+import {
+  Network,
+  Server,
+  Database,
+  Globe,
+  MessageSquare,
+  Zap,
+  RefreshCw,
+  ZoomIn,
+  ZoomOut,
+  Maximize2,
+  CheckCircle2,
+  XCircle,
+  AlertTriangle,
+} from "lucide-react"
+
+export type ServiceHealth = "healthy" | "degraded" | "unhealthy" | "unknown"
+export type ServiceType = "api" | "database" | "cache" | "queue" | "gateway" | "external"
+
+export interface ServiceNode {
+  id: string
+  name: string
+  type: ServiceType
+  health: ServiceHealth
+  namespace?: string
+  version?: string
+  replicas?: number
+  requestsPerSec?: number
+  errorRate?: number
+  latencyP50?: number
+  latencyP99?: number
+}
+
+export interface ServiceConnection {
+  source: string
+  target: string
+  protocol?: string
+  requestsPerSec?: number
+  errorRate?: number
+  latency?: number
+}
+
+export interface WakaServiceGraphProps {
+  /** List of services */
+  services: ServiceNode[]
+  /** List of connections between services */
+  connections: ServiceConnection[]
+  /** Selected service ID */
+  selectedService?: string
+  /** Callback when clicking on a service */
+  onServiceClick?: (service: ServiceNode) => void
+  /** Callback when clicking on a connection */
+  onConnectionClick?: (connection: ServiceConnection) => void
+  /** Callback when refreshing */
+  onRefresh?: () => void
+  /** Show metrics on nodes */
+  showMetrics?: boolean
+  /** Custom class name */
+  className?: string
+}
+
+const typeConfig: Record<ServiceType, { icon: React.ElementType; color: string }> = {
+  api: { icon: Server, color: "bg-blue-500" },
+  database: { icon: Database, color: "bg-purple-500" },
+  cache: { icon: Zap, color: "bg-yellow-500" },
+  queue: { icon: MessageSquare, color: "bg-orange-500" },
+  gateway: { icon: Globe, color: "bg-green-500" },
+  external: { icon: Network, color: "bg-gray-500" },
+}
+
+const healthConfig: Record<ServiceHealth, { color: string; borderColor: string; icon: React.ElementType }> = {
+  healthy: { color: "text-green-500", borderColor: "border-green-500", icon: CheckCircle2 },
+  degraded: { color: "text-yellow-500", borderColor: "border-yellow-500", icon: AlertTriangle },
+  unhealthy: { color: "text-red-500", borderColor: "border-red-500", icon: XCircle },
+  unknown: { color: "text-gray-500", borderColor: "border-gray-500", icon: AlertTriangle },
+}
+
+function ServiceNodeComponent({
+  service,
+  isSelected,
+  onClick,
+  showMetrics,
+  position,
+}: {
+  service: ServiceNode
+  isSelected: boolean
+  onClick?: () => void
+  showMetrics: boolean
+  position: { x: number; y: number }
+}) {
+  const typeConf = typeConfig[service.type]
+  const healthConf = healthConfig[service.health]
+  const TypeIcon = typeConf.icon
+  const HealthIcon = healthConf.icon
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div
+            className={cn(
+              "absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer",
+              "transition-all duration-200 hover:scale-110"
+            )}
+            style={{ left: position.x, top: position.y }}
+            onClick={onClick}
+          >
+            <div
+              className={cn(
+                "relative bg-background border-2 rounded-xl p-3 shadow-lg",
+                healthConf.borderColor,
+                isSelected && "ring-2 ring-primary ring-offset-2"
+              )}
+            >
+              {/* Health indicator */}
+              <div className={cn("absolute -top-2 -right-2", healthConf.color)}>
+                <HealthIcon className="h-4 w-4" />
+              </div>
+
+              {/* Icon */}
+              <div className={cn("w-10 h-10 rounded-lg flex items-center justify-center text-white", typeConf.color)}>
+                <TypeIcon className="h-5 w-5" />
+              </div>
+
+              {/* Name */}
+              <div className="mt-2 text-center">
+                <div className="font-medium text-sm truncate max-w-[100px]">{service.name}</div>
+                {service.namespace && (
+                  <div className="text-xs text-muted-foreground">{service.namespace}</div>
+                )}
+              </div>
+
+              {/* Metrics */}
+              {showMetrics && (
+                <div className="mt-2 text-xs text-center space-y-0.5">
+                  {service.requestsPerSec !== undefined && (
+                    <div className="text-muted-foreground">{service.requestsPerSec} req/s</div>
+                  )}
+                  {service.errorRate !== undefined && service.errorRate > 0 && (
+                    <div className="text-red-500">{(service.errorRate * 100).toFixed(1)}% errors</div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </TooltipTrigger>
+        <TooltipContent side="right" className="max-w-xs">
+          <div className="space-y-2">
+            <div className="font-semibold">{service.name}</div>
+            <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
+              <span className="text-muted-foreground">Type:</span>
+              <span className="capitalize">{service.type}</span>
+              <span className="text-muted-foreground">Health:</span>
+              <span className={healthConf.color}>{service.health}</span>
+              {service.version && (
+                <>
+                  <span className="text-muted-foreground">Version:</span>
+                  <span>{service.version}</span>
+                </>
+              )}
+              {service.replicas !== undefined && (
+                <>
+                  <span className="text-muted-foreground">Replicas:</span>
+                  <span>{service.replicas}</span>
+                </>
+              )}
+              {service.latencyP50 !== undefined && (
+                <>
+                  <span className="text-muted-foreground">Latency P50:</span>
+                  <span>{service.latencyP50}ms</span>
+                </>
+              )}
+              {service.latencyP99 !== undefined && (
+                <>
+                  <span className="text-muted-foreground">Latency P99:</span>
+                  <span>{service.latencyP99}ms</span>
+                </>
+              )}
+            </div>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+function ConnectionLine({
+  start,
+  end,
+  connection,
+  onClick,
+}: {
+  start: { x: number; y: number }
+  end: { x: number; y: number }
+  connection: ServiceConnection
+  onClick?: () => void
+}) {
+  // Calculate control points for curved line
+  const midX = (start.x + end.x) / 2
+  const midY = (start.y + end.y) / 2
+  const dx = end.x - start.x
+  const dy = end.y - start.y
+  const dist = Math.sqrt(dx * dx + dy * dy)
+  const curvature = 0.2
+
+  // Perpendicular offset for curve
+  const px = -dy / dist * curvature * dist
+  const py = dx / dist * curvature * dist
+
+  const controlX = midX + px
+  const controlY = midY + py
+
+  const path = `M ${start.x} ${start.y} Q ${controlX} ${controlY} ${end.x} ${end.y}`
+
+  // Determine line color based on error rate
+  const errorRate = connection.errorRate || 0
+  const lineColor = errorRate > 0.05 ? "#ef4444" : errorRate > 0.01 ? "#eab308" : "#6b7280"
+  const lineWidth = Math.min(Math.max((connection.requestsPerSec || 1) / 100, 1), 4)
+
+  return (
+    <g className="cursor-pointer hover:opacity-70" onClick={onClick}>
+      {/* Main line */}
+      <path
+        d={path}
+        fill="none"
+        stroke={lineColor}
+        strokeWidth={lineWidth}
+        strokeOpacity={0.6}
+        markerEnd="url(#arrowhead)"
+      />
+
+      {/* Label */}
+      {connection.requestsPerSec !== undefined && (
+        <text
+          x={controlX}
+          y={controlY}
+          textAnchor="middle"
+          dy={-8}
+          className="fill-muted-foreground text-xs"
+        >
+          {connection.requestsPerSec} req/s
+        </text>
+      )}
+    </g>
+  )
+}
+
+export function WakaServiceGraph({
+  services,
+  connections,
+  selectedService,
+  onServiceClick,
+  onConnectionClick,
+  onRefresh,
+  showMetrics = true,
+  className,
+}: WakaServiceGraphProps) {
+  const [zoom, setZoom] = React.useState(1)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+
+  // Calculate positions for services in a force-directed layout (simplified)
+  const positions = React.useMemo(() => {
+    const pos: Record<string, { x: number; y: number }> = {}
+    const width = 600
+    const height = 400
+    const centerX = width / 2
+    const centerY = height / 2
+
+    // Simple circular layout
+    const angleStep = (2 * Math.PI) / services.length
+    const radius = Math.min(width, height) * 0.35
+
+    services.forEach((service, i) => {
+      const angle = i * angleStep - Math.PI / 2
+      pos[service.id] = {
+        x: centerX + radius * Math.cos(angle),
+        y: centerY + radius * Math.sin(angle),
+      }
+    })
+
+    return pos
+  }, [services])
+
+  // Count services by health
+  const healthCounts = React.useMemo(() => {
+    return services.reduce((acc, s) => {
+      acc[s.health] = (acc[s.health] || 0) + 1
+      return acc
+    }, {} as Record<ServiceHealth, number>)
+  }, [services])
+
+  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">
+          <Network className="h-5 w-5" />
+          <h3 className="font-semibold">Service Mesh</h3>
+          <Badge variant="secondary">{services.length} services</Badge>
+
+          <div className="hidden md:flex items-center gap-1">
+            {healthCounts.healthy > 0 && (
+              <Badge className="bg-green-500 text-xs">{healthCounts.healthy} healthy</Badge>
+            )}
+            {healthCounts.degraded > 0 && (
+              <Badge className="bg-yellow-500 text-xs">{healthCounts.degraded} degraded</Badge>
+            )}
+            {healthCounts.unhealthy > 0 && (
+              <Badge className="bg-red-500 text-xs">{healthCounts.unhealthy} unhealthy</Badge>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1">
+          <Button variant="ghost" size="sm" onClick={() => setZoom((z) => Math.max(0.5, z - 0.1))}>
+            <ZoomOut className="h-4 w-4" />
+          </Button>
+          <span className="text-xs text-muted-foreground w-12 text-center">{(zoom * 100).toFixed(0)}%</span>
+          <Button variant="ghost" size="sm" onClick={() => setZoom((z) => Math.min(2, z + 0.1))}>
+            <ZoomIn className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => setZoom(1)}>
+            <Maximize2 className="h-4 w-4" />
+          </Button>
+          {onRefresh && (
+            <Button variant="ghost" size="sm" onClick={onRefresh}>
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Legend */}
+      <div className="flex items-center gap-4 px-3 py-2 border-b bg-muted/30 text-xs flex-wrap">
+        {Object.entries(typeConfig).map(([type, config]) => {
+          const Icon = config.icon
+          return (
+            <div key={type} className="flex items-center gap-1.5">
+              <div className={cn("w-3 h-3 rounded", config.color)} />
+              <span className="capitalize">{type}</span>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Graph */}
+      <div
+        ref={containerRef}
+        className="flex-1 relative overflow-hidden min-h-[400px]"
+        style={{ cursor: "grab" }}
+      >
+        <div
+          className="absolute inset-0 transition-transform duration-200"
+          style={{
+            transform: `scale(${zoom})`,
+            transformOrigin: "center center",
+          }}
+        >
+          {/* SVG for connections */}
+          <svg className="absolute inset-0 w-full h-full pointer-events-none">
+            <defs>
+              <marker
+                id="arrowhead"
+                markerWidth="10"
+                markerHeight="7"
+                refX="9"
+                refY="3.5"
+                orient="auto"
+              >
+                <polygon
+                  points="0 0, 10 3.5, 0 7"
+                  fill="#6b7280"
+                />
+              </marker>
+            </defs>
+
+            {connections.map((connection, i) => {
+              const startPos = positions[connection.source]
+              const endPos = positions[connection.target]
+              if (!startPos || !endPos) return null
+
+              return (
+                <ConnectionLine
+                  key={i}
+                  start={startPos}
+                  end={endPos}
+                  connection={connection}
+                  onClick={() => onConnectionClick?.(connection)}
+                />
+              )
+            })}
+          </svg>
+
+          {/* Service nodes */}
+          {services.map((service) => (
+            <ServiceNodeComponent
+              key={service.id}
+              service={service}
+              isSelected={selectedService === service.id}
+              onClick={() => onServiceClick?.(service)}
+              showMetrics={showMetrics}
+              position={positions[service.id]}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Default sample data for demo
+export const defaultServices: ServiceNode[] = [
+  { id: "gateway", name: "API Gateway", type: "gateway", health: "healthy", namespace: "ingress", version: "v2.1.0", replicas: 3, requestsPerSec: 1250, errorRate: 0.001 },
+  { id: "auth", name: "Auth Service", type: "api", health: "healthy", namespace: "auth", version: "v1.5.2", replicas: 2, requestsPerSec: 450, errorRate: 0.002 },
+  { id: "users", name: "User Service", type: "api", health: "healthy", namespace: "users", version: "v3.0.1", replicas: 3, requestsPerSec: 320, errorRate: 0.001 },
+  { id: "orders", name: "Order Service", type: "api", health: "degraded", namespace: "commerce", version: "v2.8.0", replicas: 4, requestsPerSec: 180, errorRate: 0.05 },
+  { id: "postgres", name: "PostgreSQL", type: "database", health: "healthy", version: "15.2", replicas: 1 },
+  { id: "redis", name: "Redis Cache", type: "cache", health: "healthy", version: "7.0", replicas: 3 },
+  { id: "rabbitmq", name: "RabbitMQ", type: "queue", health: "healthy", version: "3.12", replicas: 3 },
+  { id: "stripe", name: "Stripe API", type: "external", health: "healthy" },
+]
+
+export const defaultConnections: ServiceConnection[] = [
+  { source: "gateway", target: "auth", protocol: "gRPC", requestsPerSec: 450, errorRate: 0.001 },
+  { source: "gateway", target: "users", protocol: "gRPC", requestsPerSec: 320, errorRate: 0.001 },
+  { source: "gateway", target: "orders", protocol: "gRPC", requestsPerSec: 180, errorRate: 0.03 },
+  { source: "auth", target: "postgres", protocol: "PostgreSQL", requestsPerSec: 200 },
+  { source: "auth", target: "redis", protocol: "Redis", requestsPerSec: 800 },
+  { source: "users", target: "postgres", protocol: "PostgreSQL", requestsPerSec: 150 },
+  { source: "orders", target: "postgres", protocol: "PostgreSQL", requestsPerSec: 100 },
+  { source: "orders", target: "rabbitmq", protocol: "AMQP", requestsPerSec: 50 },
+  { source: "orders", target: "stripe", protocol: "HTTPS", requestsPerSec: 30 },
+]

package/src/components/waka-sponsored-badge/index.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+
+export type SponsoredBadgeVariant = "default" | "subtle" | "outline" | "dark"
+export type SponsoredBadgeSize = "sm" | "md" | "lg"
+
+export interface WakaSponsoredBadgeProps {
+  /** Sponsor name (optional) */
+  sponsor?: string
+  /** Badge variant */
+  variant?: SponsoredBadgeVariant
+  /** Badge size */
+  size?: SponsoredBadgeSize
+  /** Show info icon */
+  showIcon?: boolean
+  /** Custom label text */
+  label?: string
+  /** Custom class name */
+  className?: string
+  /** Callback when info is clicked */
+  onInfoClick?: () => void
+}
+
+export function WakaSponsoredBadge({
+  sponsor,
+  variant = "default",
+  size = "sm",
+  showIcon = true,
+  label = "Sponsored",
+  className,
+  onInfoClick,
+}: WakaSponsoredBadgeProps) {
+  const variantClasses: Record<SponsoredBadgeVariant, string> = {
+    default: "bg-muted text-muted-foreground border-transparent",
+    subtle: "bg-black/50 text-white border-transparent backdrop-blur-sm",
+    outline: "bg-transparent text-muted-foreground border-muted-foreground/30",
+    dark: "bg-black/70 text-white border-transparent",
+  }
+
+  const sizeClasses: Record<SponsoredBadgeSize, string> = {
+    sm: "text-[10px] px-1.5 py-0.5 gap-1",
+    md: "text-xs px-2 py-1 gap-1.5",
+    lg: "text-sm px-2.5 py-1 gap-2",
+  }
+
+  const iconSizes: Record<SponsoredBadgeSize, string> = {
+    sm: "h-2.5 w-2.5",
+    md: "h-3 w-3",
+    lg: "h-3.5 w-3.5",
+  }
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded border font-medium",
+        variantClasses[variant],
+        sizeClasses[size],
+        className
+      )}
+    >
+      <span className="whitespace-nowrap">
+        {sponsor ? `${label} by ${sponsor}` : label}
+      </span>
+
+      {showIcon && (
+        <button
+          onClick={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            onInfoClick?.()
+          }}
+          className={cn(
+            "rounded-full hover:opacity-70 transition-opacity focus:outline-none focus:ring-1 focus:ring-current",
+            iconSizes[size]
+          )}
+          aria-label="Why am I seeing this ad?"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            className="w-full h-full"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 16v-4" />
+            <path d="M12 8h.01" />
+          </svg>
+        </button>
+      )}
+    </span>
+  )
+}
+
+export default WakaSponsoredBadge