@wakastellar/ui 2.1.2 → 2.3.2

package/src/blocks/apm-overview/index.tsx

@@ -0,0 +1,672 @@
+"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 { Progress } from "../../components/progress"
+import { ScrollArea } from "../../components/scroll-area"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import {
+  Activity,
+  TrendingUp,
+  TrendingDown,
+  Clock,
+  AlertTriangle,
+  CheckCircle2,
+  XCircle,
+  Zap,
+  BarChart3,
+  ArrowRight,
+  ExternalLink,
+  RefreshCw,
+  Search,
+  Filter,
+  Server,
+  Globe,
+  Database,
+  Cpu,
+  MemoryStick,
+  HardDrive,
+} from "lucide-react"
+
+export type ServiceStatus = "healthy" | "warning" | "critical" | "unknown"
+export type TimeRange = "1h" | "6h" | "24h" | "7d" | "30d"
+
+export interface ServiceMetrics {
+  requestsPerSecond: number
+  avgResponseTime: number // in ms
+  p50ResponseTime: number
+  p95ResponseTime: number
+  p99ResponseTime: number
+  errorRate: number // percentage
+  successRate: number // percentage
+  activeConnections: number
+  cpuUsage?: number
+  memoryUsage?: number
+  throughput?: number // requests per minute
+}
+
+export interface ServiceEndpoint {
+  path: string
+  method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH"
+  requestsPerMinute: number
+  avgResponseTime: number
+  errorRate: number
+  status: ServiceStatus
+}
+
+export interface APMService {
+  id: string
+  name: string
+  type: "api" | "web" | "worker" | "database" | "cache" | "queue"
+  status: ServiceStatus
+  metrics: ServiceMetrics
+  previousMetrics?: ServiceMetrics
+  endpoints?: ServiceEndpoint[]
+  instances?: number
+  version?: string
+  dependencies?: string[]
+  tags?: string[]
+}
+
+export interface APMTransaction {
+  id: string
+  name: string
+  service: string
+  duration: number
+  timestamp: Date
+  status: "success" | "error"
+  traceId?: string
+}
+
+export interface APMOverviewProps {
+  services: APMService[]
+  recentTransactions?: APMTransaction[]
+  timeRange?: TimeRange
+  onTimeRangeChange?: (range: TimeRange) => void
+  onServiceClick?: (service: APMService) => void
+  onTransactionClick?: (transaction: APMTransaction) => void
+  onRefresh?: () => void
+  className?: string
+}
+
+const statusConfig: Record<ServiceStatus, { color: string; bgColor: string; label: string }> = {
+  healthy: { color: "text-green-500", bgColor: "bg-green-500", label: "Healthy" },
+  warning: { color: "text-yellow-500", bgColor: "bg-yellow-500", label: "Warning" },
+  critical: { color: "text-red-500", bgColor: "bg-red-500", label: "Critical" },
+  unknown: { color: "text-gray-500", bgColor: "bg-gray-500", label: "Unknown" },
+}
+
+const serviceTypeConfig: Record<APMService["type"], { icon: React.ElementType; color: string }> = {
+  api: { icon: Globe, color: "text-blue-500" },
+  web: { icon: Globe, color: "text-purple-500" },
+  worker: { icon: Cpu, color: "text-orange-500" },
+  database: { icon: Database, color: "text-green-500" },
+  cache: { icon: HardDrive, color: "text-red-500" },
+  queue: { icon: Activity, color: "text-cyan-500" },
+}
+
+function formatMs(ms: number): string {
+  if (ms < 1) return `${(ms * 1000).toFixed(0)}µs`
+  if (ms < 1000) return `${ms.toFixed(0)}ms`
+  return `${(ms / 1000).toFixed(2)}s`
+}
+
+function formatNumber(n: number): string {
+  if (n < 1000) return n.toFixed(0)
+  if (n < 1000000) return `${(n / 1000).toFixed(1)}k`
+  return `${(n / 1000000).toFixed(1)}M`
+}
+
+function TrendIndicator({ current, previous }: { current: number; previous?: number }) {
+  if (previous === undefined) return null
+  const change = ((current - previous) / previous) * 100
+  const isPositive = change > 0
+
+  return (
+    <span className={cn(
+      "text-xs flex items-center gap-0.5",
+      isPositive ? "text-red-500" : "text-green-500"
+    )}>
+      {isPositive ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
+      {Math.abs(change).toFixed(1)}%
+    </span>
+  )
+}
+
+function MetricCard({
+  title,
+  value,
+  unit,
+  previousValue,
+  status,
+  icon: Icon,
+}: {
+  title: string
+  value: number
+  unit?: string
+  previousValue?: number
+  status?: ServiceStatus
+  icon: React.ElementType
+}) {
+  const statusConf = status ? statusConfig[status] : null
+
+  return (
+    <Card>
+      <CardContent className="p-4">
+        <div className="flex items-start justify-between">
+          <div className="p-2 rounded-lg bg-muted">
+            <Icon className="h-4 w-4 text-muted-foreground" />
+          </div>
+          {statusConf && (
+            <div className={cn("w-2 h-2 rounded-full", statusConf.bgColor)} />
+          )}
+        </div>
+        <div className="mt-3">
+          <div className="flex items-baseline gap-1">
+            <span className="text-2xl font-bold">{formatNumber(value)}</span>
+            {unit && <span className="text-sm text-muted-foreground">{unit}</span>}
+          </div>
+          <div className="flex items-center justify-between mt-1">
+            <span className="text-sm text-muted-foreground">{title}</span>
+            <TrendIndicator current={value} previous={previousValue} />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function ServiceCard({
+  service,
+  onClick,
+}: {
+  service: APMService
+  onClick?: () => void
+}) {
+  const statusConf = statusConfig[service.status]
+  const typeConf = serviceTypeConfig[service.type]
+  const TypeIcon = typeConf.icon
+  const { metrics, previousMetrics } = service
+
+  const apdexScore = (metrics.successRate / 100) * (1 - (metrics.p95ResponseTime / 3000))
+
+  return (
+    <Card
+      className={cn(
+        "cursor-pointer transition-all hover:shadow-md",
+        service.status === "critical" && "border-red-500/50",
+        service.status === "warning" && "border-yellow-500/30"
+      )}
+      onClick={onClick}
+    >
+      <CardContent className="p-4">
+        <div className="flex items-start gap-4">
+          {/* Service icon */}
+          <div className={cn("p-2 rounded-lg", `${typeConf.color.replace("text-", "bg-")}/10`)}>
+            <TypeIcon className={cn("h-5 w-5", typeConf.color)} />
+          </div>
+
+          {/* Main info */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <h4 className="font-semibold truncate">{service.name}</h4>
+              <div className={cn("w-2 h-2 rounded-full shrink-0", statusConf.bgColor)} />
+              {service.version && (
+                <Badge variant="outline" className="text-xs">
+                  v{service.version}
+                </Badge>
+              )}
+            </div>
+
+            <div className="flex items-center gap-4 mt-2 text-sm">
+              <span className="flex items-center gap-1">
+                <Zap className="h-3 w-3 text-muted-foreground" />
+                {metrics.requestsPerSecond}/s
+              </span>
+              <span className="flex items-center gap-1">
+                <Clock className="h-3 w-3 text-muted-foreground" />
+                {formatMs(metrics.avgResponseTime)}
+              </span>
+              <span className={cn(
+                "flex items-center gap-1",
+                metrics.errorRate > 5 && "text-red-500",
+                metrics.errorRate > 1 && metrics.errorRate <= 5 && "text-yellow-500"
+              )}>
+                <AlertTriangle className="h-3 w-3" />
+                {metrics.errorRate.toFixed(2)}%
+              </span>
+            </div>
+
+            {/* Response time breakdown */}
+            <div className="flex items-center gap-4 mt-3 text-xs text-muted-foreground">
+              <span>p50: {formatMs(metrics.p50ResponseTime)}</span>
+              <span>p95: {formatMs(metrics.p95ResponseTime)}</span>
+              <span>p99: {formatMs(metrics.p99ResponseTime)}</span>
+            </div>
+
+            {/* Tags */}
+            {service.tags && service.tags.length > 0 && (
+              <div className="flex items-center gap-1 mt-2">
+                {service.tags.slice(0, 3).map((tag) => (
+                  <Badge key={tag} variant="secondary" className="text-xs">
+                    {tag}
+                  </Badge>
+                ))}
+                {service.tags.length > 3 && (
+                  <span className="text-xs text-muted-foreground">
+                    +{service.tags.length - 3}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Right side metrics */}
+          <div className="text-right shrink-0 space-y-1">
+            <div className="text-lg font-bold text-green-500">
+              {metrics.successRate.toFixed(1)}%
+            </div>
+            <div className="text-xs text-muted-foreground">Success</div>
+            {service.instances && (
+              <div className="text-xs text-muted-foreground">
+                {service.instances} instances
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Resource usage */}
+        {(metrics.cpuUsage !== undefined || metrics.memoryUsage !== undefined) && (
+          <div className="grid grid-cols-2 gap-3 mt-4 pt-3 border-t">
+            {metrics.cpuUsage !== undefined && (
+              <div>
+                <div className="flex items-center justify-between text-xs mb-1">
+                  <span className="text-muted-foreground flex items-center gap-1">
+                    <Cpu className="h-3 w-3" /> CPU
+                  </span>
+                  <span className={cn(metrics.cpuUsage > 80 && "text-red-500")}>
+                    {metrics.cpuUsage}%
+                  </span>
+                </div>
+                <Progress
+                  value={metrics.cpuUsage}
+                  className={cn(
+                    "h-1.5",
+                    metrics.cpuUsage > 80 && "[&>div]:bg-red-500"
+                  )}
+                />
+              </div>
+            )}
+            {metrics.memoryUsage !== undefined && (
+              <div>
+                <div className="flex items-center justify-between text-xs mb-1">
+                  <span className="text-muted-foreground flex items-center gap-1">
+                    <MemoryStick className="h-3 w-3" /> Memory
+                  </span>
+                  <span className={cn(metrics.memoryUsage > 80 && "text-red-500")}>
+                    {metrics.memoryUsage}%
+                  </span>
+                </div>
+                <Progress
+                  value={metrics.memoryUsage}
+                  className={cn(
+                    "h-1.5",
+                    metrics.memoryUsage > 80 && "[&>div]:bg-red-500"
+                  )}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function RecentTransactions({
+  transactions,
+  onClick,
+}: {
+  transactions: APMTransaction[]
+  onClick?: (t: APMTransaction) => void
+}) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base flex items-center gap-2">
+          <Activity className="h-4 w-4" />
+          Recent Transactions
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-[300px]">
+          <div className="space-y-2">
+            {transactions.map((tx) => (
+              <div
+                key={tx.id}
+                className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted/50 cursor-pointer transition-colors"
+                onClick={() => onClick?.(tx)}
+              >
+                {tx.status === "success" ? (
+                  <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
+                ) : (
+                  <XCircle className="h-4 w-4 text-red-500 shrink-0" />
+                )}
+
+                <div className="flex-1 min-w-0">
+                  <div className="font-medium text-sm truncate">{tx.name}</div>
+                  <div className="text-xs text-muted-foreground">{tx.service}</div>
+                </div>
+
+                <div className="text-right shrink-0">
+                  <div className={cn(
+                    "text-sm font-medium",
+                    tx.duration > 1000 && "text-yellow-500",
+                    tx.duration > 3000 && "text-red-500"
+                  )}>
+                    {formatMs(tx.duration)}
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    {tx.timestamp.toLocaleTimeString()}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function APMOverview({
+  services,
+  recentTransactions = [],
+  timeRange = "1h",
+  onTimeRangeChange,
+  onServiceClick,
+  onTransactionClick,
+  onRefresh,
+  className,
+}: APMOverviewProps) {
+  const [statusFilter, setStatusFilter] = React.useState<ServiceStatus | "all">("all")
+
+  // Aggregate metrics
+  const aggregateMetrics = React.useMemo(() => {
+    const totalRequests = services.reduce((acc, s) => acc + s.metrics.requestsPerSecond, 0)
+    const avgResponseTime = services.reduce((acc, s) => acc + s.metrics.avgResponseTime, 0) / services.length
+    const avgErrorRate = services.reduce((acc, s) => acc + s.metrics.errorRate, 0) / services.length
+    const healthyCount = services.filter((s) => s.status === "healthy").length
+
+    return {
+      totalRequests,
+      avgResponseTime,
+      avgErrorRate,
+      healthyCount,
+      totalServices: services.length,
+    }
+  }, [services])
+
+  const filteredServices = React.useMemo(() => {
+    if (statusFilter === "all") return services
+    return services.filter((s) => s.status === statusFilter)
+  }, [services, statusFilter])
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Activity className="h-6 w-6" />
+              <div>
+                <CardTitle>Application Performance</CardTitle>
+                <p className="text-sm text-muted-foreground">
+                  Monitor service health and performance metrics
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Select value={timeRange} onValueChange={(v) => onTimeRangeChange?.(v as TimeRange)}>
+                <SelectTrigger className="w-28">
+                  <Clock className="h-4 w-4 mr-2" />
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1h">Last 1h</SelectItem>
+                  <SelectItem value="6h">Last 6h</SelectItem>
+                  <SelectItem value="24h">Last 24h</SelectItem>
+                  <SelectItem value="7d">Last 7d</SelectItem>
+                  <SelectItem value="30d">Last 30d</SelectItem>
+                </SelectContent>
+              </Select>
+
+              {onRefresh && (
+                <Button variant="outline" onClick={onRefresh}>
+                  <RefreshCw className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* Key metrics */}
+      <div className="grid grid-cols-4 gap-4">
+        <MetricCard
+          title="Total Requests"
+          value={aggregateMetrics.totalRequests}
+          unit="/s"
+          icon={Zap}
+        />
+        <MetricCard
+          title="Avg Response Time"
+          value={aggregateMetrics.avgResponseTime}
+          unit="ms"
+          icon={Clock}
+          status={aggregateMetrics.avgResponseTime > 500 ? "warning" : "healthy"}
+        />
+        <MetricCard
+          title="Error Rate"
+          value={aggregateMetrics.avgErrorRate}
+          unit="%"
+          icon={AlertTriangle}
+          status={aggregateMetrics.avgErrorRate > 5 ? "critical" : aggregateMetrics.avgErrorRate > 1 ? "warning" : "healthy"}
+        />
+        <MetricCard
+          title="Services Healthy"
+          value={aggregateMetrics.healthyCount}
+          unit={`/ ${aggregateMetrics.totalServices}`}
+          icon={CheckCircle2}
+          status={aggregateMetrics.healthyCount === aggregateMetrics.totalServices ? "healthy" : "warning"}
+        />
+      </div>
+
+      <div className="grid grid-cols-3 gap-6">
+        {/* Services */}
+        <div className="col-span-2 space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="font-semibold">Services</h3>
+            <div className="flex items-center gap-2">
+              {(["all", "healthy", "warning", "critical"] as const).map((status) => (
+                <Button
+                  key={status}
+                  variant={statusFilter === status ? "default" : "ghost"}
+                  size="sm"
+                  onClick={() => setStatusFilter(status)}
+                >
+                  {status === "all" ? "All" : statusConfig[status].label}
+                </Button>
+              ))}
+            </div>
+          </div>
+
+          <ScrollArea className="h-[500px]">
+            <div className="space-y-4 pr-4">
+              {filteredServices.map((service) => (
+                <ServiceCard
+                  key={service.id}
+                  service={service}
+                  onClick={() => onServiceClick?.(service)}
+                />
+              ))}
+            </div>
+          </ScrollArea>
+        </div>
+
+        {/* Recent transactions */}
+        <div>
+          <RecentTransactions
+            transactions={recentTransactions}
+            onClick={onTransactionClick}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Default sample data
+export const defaultAPMServices: APMService[] = [
+  {
+    id: "1",
+    name: "api-gateway",
+    type: "api",
+    status: "healthy",
+    version: "2.4.1",
+    instances: 3,
+    metrics: {
+      requestsPerSecond: 1250,
+      avgResponseTime: 45,
+      p50ResponseTime: 32,
+      p95ResponseTime: 120,
+      p99ResponseTime: 250,
+      errorRate: 0.12,
+      successRate: 99.88,
+      activeConnections: 450,
+      cpuUsage: 45,
+      memoryUsage: 62,
+    },
+    tags: ["production", "critical"],
+  },
+  {
+    id: "2",
+    name: "user-service",
+    type: "api",
+    status: "healthy",
+    version: "1.8.0",
+    instances: 2,
+    metrics: {
+      requestsPerSecond: 350,
+      avgResponseTime: 85,
+      p50ResponseTime: 65,
+      p95ResponseTime: 180,
+      p99ResponseTime: 450,
+      errorRate: 0.5,
+      successRate: 99.5,
+      activeConnections: 120,
+      cpuUsage: 35,
+      memoryUsage: 55,
+    },
+    tags: ["production"],
+  },
+  {
+    id: "3",
+    name: "payment-service",
+    type: "api",
+    status: "warning",
+    version: "3.1.0",
+    instances: 2,
+    metrics: {
+      requestsPerSecond: 150,
+      avgResponseTime: 520,
+      p50ResponseTime: 280,
+      p95ResponseTime: 1200,
+      p99ResponseTime: 2500,
+      errorRate: 2.5,
+      successRate: 97.5,
+      activeConnections: 85,
+      cpuUsage: 78,
+      memoryUsage: 82,
+    },
+    tags: ["production", "payment"],
+  },
+  {
+    id: "4",
+    name: "notification-worker",
+    type: "worker",
+    status: "healthy",
+    instances: 5,
+    metrics: {
+      requestsPerSecond: 500,
+      avgResponseTime: 25,
+      p50ResponseTime: 18,
+      p95ResponseTime: 55,
+      p99ResponseTime: 120,
+      errorRate: 0.05,
+      successRate: 99.95,
+      activeConnections: 0,
+      cpuUsage: 25,
+      memoryUsage: 40,
+    },
+  },
+  {
+    id: "5",
+    name: "postgres-primary",
+    type: "database",
+    status: "healthy",
+    instances: 1,
+    metrics: {
+      requestsPerSecond: 2500,
+      avgResponseTime: 8,
+      p50ResponseTime: 5,
+      p95ResponseTime: 25,
+      p99ResponseTime: 80,
+      errorRate: 0.01,
+      successRate: 99.99,
+      activeConnections: 120,
+      cpuUsage: 55,
+      memoryUsage: 72,
+    },
+  },
+  {
+    id: "6",
+    name: "redis-cache",
+    type: "cache",
+    status: "healthy",
+    instances: 3,
+    metrics: {
+      requestsPerSecond: 15000,
+      avgResponseTime: 0.5,
+      p50ResponseTime: 0.3,
+      p95ResponseTime: 1.2,
+      p99ResponseTime: 3,
+      errorRate: 0.001,
+      successRate: 99.999,
+      activeConnections: 500,
+      memoryUsage: 45,
+    },
+  },
+]
+
+export const defaultAPMTransactions: APMTransaction[] = [
+  { id: "1", name: "POST /api/users", service: "user-service", duration: 85, timestamp: new Date(Date.now() - 5000), status: "success" },
+  { id: "2", name: "GET /api/products", service: "api-gateway", duration: 42, timestamp: new Date(Date.now() - 12000), status: "success" },
+  { id: "3", name: "POST /api/payments", service: "payment-service", duration: 1250, timestamp: new Date(Date.now() - 25000), status: "error" },
+  { id: "4", name: "GET /api/orders/:id", service: "api-gateway", duration: 65, timestamp: new Date(Date.now() - 45000), status: "success" },
+  { id: "5", name: "POST /api/notifications", service: "notification-worker", duration: 22, timestamp: new Date(Date.now() - 60000), status: "success" },
+  { id: "6", name: "GET /api/users/:id", service: "user-service", duration: 95, timestamp: new Date(Date.now() - 90000), status: "success" },
+  { id: "7", name: "PUT /api/cart", service: "api-gateway", duration: 180, timestamp: new Date(Date.now() - 120000), status: "success" },
+  { id: "8", name: "POST /api/checkout", service: "payment-service", duration: 3200, timestamp: new Date(Date.now() - 180000), status: "error" },
+]