@wakastellar/ui 2.1.2 → 2.3.2

package/src/blocks/infrastructure-map/index.tsx

@@ -0,0 +1,638 @@
+"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 {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../../components/tooltip"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import {
+  Globe,
+  Server,
+  Database,
+  Cloud,
+  Shield,
+  Activity,
+  AlertTriangle,
+  CheckCircle2,
+  Layers,
+  ZoomIn,
+  ZoomOut,
+  Maximize2,
+  RefreshCw,
+  Filter,
+  HardDrive,
+  Cpu,
+  Network,
+  Lock,
+  Box,
+  Container,
+} from "lucide-react"
+
+export type ResourceType = "region" | "vpc" | "subnet" | "server" | "database" | "loadbalancer" | "cache" | "storage" | "container" | "function" | "cdn" | "firewall"
+export type ResourceStatus = "healthy" | "warning" | "critical" | "unknown" | "maintenance"
+export type CloudProvider = "aws" | "gcp" | "azure" | "custom"
+
+export interface InfraResource {
+  id: string
+  name: string
+  type: ResourceType
+  status: ResourceStatus
+  provider?: CloudProvider
+  region?: string
+  metadata?: Record<string, string | number>
+  children?: InfraResource[]
+  connections?: string[] // IDs of connected resources
+  metrics?: {
+    cpu?: number
+    memory?: number
+    network?: number
+    requests?: number
+    latency?: number
+    errors?: number
+  }
+}
+
+export interface InfrastructureMapProps {
+  resources: InfraResource[]
+  onResourceClick?: (resource: InfraResource) => void
+  onRefresh?: () => void
+  showConnections?: boolean
+  viewMode?: "tree" | "grid" | "topology"
+  className?: string
+}
+
+const typeConfig: Record<ResourceType, { icon: React.ElementType; color: string; label: string }> = {
+  region: { icon: Globe, color: "text-blue-500", label: "Region" },
+  vpc: { icon: Network, color: "text-purple-500", label: "VPC" },
+  subnet: { icon: Layers, color: "text-indigo-500", label: "Subnet" },
+  server: { icon: Server, color: "text-gray-500", label: "Server" },
+  database: { icon: Database, color: "text-green-500", label: "Database" },
+  loadbalancer: { icon: Activity, color: "text-cyan-500", label: "Load Balancer" },
+  cache: { icon: HardDrive, color: "text-red-500", label: "Cache" },
+  storage: { icon: HardDrive, color: "text-orange-500", label: "Storage" },
+  container: { icon: Container, color: "text-blue-400", label: "Container" },
+  function: { icon: Cpu, color: "text-yellow-500", label: "Function" },
+  cdn: { icon: Globe, color: "text-teal-500", label: "CDN" },
+  firewall: { icon: Shield, color: "text-red-400", label: "Firewall" },
+}
+
+const statusConfig: Record<ResourceStatus, { 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" },
+  maintenance: { color: "text-blue-500", bgColor: "bg-blue-500", label: "Maintenance" },
+}
+
+const providerConfig: Record<CloudProvider, { label: string; color: string }> = {
+  aws: { label: "AWS", color: "text-orange-500" },
+  gcp: { label: "GCP", color: "text-blue-500" },
+  azure: { label: "Azure", color: "text-cyan-500" },
+  custom: { label: "Custom", color: "text-gray-500" },
+}
+
+function ResourceNode({
+  resource,
+  depth = 0,
+  onClick,
+  isExpanded,
+  onToggle,
+}: {
+  resource: InfraResource
+  depth?: number
+  onClick?: () => void
+  isExpanded?: boolean
+  onToggle?: () => void
+}) {
+  const typeConf = typeConfig[resource.type]
+  const statusConf = statusConfig[resource.status]
+  const Icon = typeConf.icon
+  const hasChildren = resource.children && resource.children.length > 0
+
+  return (
+    <div className={cn("border-l-2", depth > 0 && "ml-6", statusConf.color.replace("text-", "border-"))}>
+      <div
+        className={cn(
+          "flex items-center gap-3 p-3 cursor-pointer rounded-r-lg transition-all",
+          "hover:bg-muted/50",
+          resource.status === "critical" && "bg-red-500/5",
+          resource.status === "warning" && "bg-yellow-500/5"
+        )}
+        onClick={onClick}
+      >
+        {/* Expand toggle */}
+        {hasChildren && (
+          <button
+            className="p-1 hover:bg-muted rounded"
+            onClick={(e) => {
+              e.stopPropagation()
+              onToggle?.()
+            }}
+          >
+            <Layers className={cn("h-4 w-4", isExpanded && "rotate-90")} />
+          </button>
+        )}
+
+        {/* Icon */}
+        <div className={cn("p-2 rounded-lg bg-muted/50")}>
+          <Icon className={cn("h-5 w-5", typeConf.color)} />
+        </div>
+
+        {/* Info */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="font-medium truncate">{resource.name}</span>
+            <Badge variant="outline" className="text-xs shrink-0">
+              {typeConf.label}
+            </Badge>
+            {resource.provider && (
+              <Badge variant="secondary" className={cn("text-xs shrink-0", providerConfig[resource.provider].color)}>
+                {providerConfig[resource.provider].label}
+              </Badge>
+            )}
+          </div>
+          {resource.region && (
+            <div className="text-xs text-muted-foreground mt-0.5">
+              {resource.region}
+            </div>
+          )}
+        </div>
+
+        {/* Metrics preview */}
+        {resource.metrics && (
+          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+            {resource.metrics.cpu !== undefined && (
+              <span className={cn(resource.metrics.cpu > 80 && "text-red-500")}>
+                CPU: {resource.metrics.cpu}%
+              </span>
+            )}
+            {resource.metrics.memory !== undefined && (
+              <span className={cn(resource.metrics.memory > 80 && "text-red-500")}>
+                MEM: {resource.metrics.memory}%
+              </span>
+            )}
+            {resource.metrics.latency !== undefined && (
+              <span className={cn(resource.metrics.latency > 500 && "text-yellow-500")}>
+                {resource.metrics.latency}ms
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Status indicator */}
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger>
+              <div className={cn("w-3 h-3 rounded-full shrink-0", statusConf.bgColor)} />
+            </TooltipTrigger>
+            <TooltipContent>{statusConf.label}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+    </div>
+  )
+}
+
+function ResourceTree({
+  resources,
+  depth = 0,
+  expandedIds,
+  onToggle,
+  onResourceClick,
+}: {
+  resources: InfraResource[]
+  depth?: number
+  expandedIds: Set<string>
+  onToggle: (id: string) => void
+  onResourceClick?: (resource: InfraResource) => void
+}) {
+  return (
+    <div className={cn(depth > 0 && "ml-4")}>
+      {resources.map((resource) => (
+        <React.Fragment key={resource.id}>
+          <ResourceNode
+            resource={resource}
+            depth={depth}
+            onClick={() => onResourceClick?.(resource)}
+            isExpanded={expandedIds.has(resource.id)}
+            onToggle={() => onToggle(resource.id)}
+          />
+          {expandedIds.has(resource.id) && resource.children && (
+            <ResourceTree
+              resources={resource.children}
+              depth={depth + 1}
+              expandedIds={expandedIds}
+              onToggle={onToggle}
+              onResourceClick={onResourceClick}
+            />
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}
+
+function ResourceGrid({
+  resources,
+  onResourceClick,
+}: {
+  resources: InfraResource[]
+  onResourceClick?: (resource: InfraResource) => void
+}) {
+  // Flatten resources for grid view
+  const flattenResources = (items: InfraResource[]): InfraResource[] => {
+    return items.reduce<InfraResource[]>((acc, item) => {
+      acc.push(item)
+      if (item.children) {
+        acc.push(...flattenResources(item.children))
+      }
+      return acc
+    }, [])
+  }
+
+  const allResources = flattenResources(resources)
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+      {allResources.map((resource) => {
+        const typeConf = typeConfig[resource.type]
+        const statusConf = statusConfig[resource.status]
+        const Icon = typeConf.icon
+
+        return (
+          <Card
+            key={resource.id}
+            className={cn(
+              "cursor-pointer transition-all hover:shadow-md",
+              resource.status === "critical" && "border-red-500/50",
+              resource.status === "warning" && "border-yellow-500/50"
+            )}
+            onClick={() => onResourceClick?.(resource)}
+          >
+            <CardContent className="p-4">
+              <div className="flex items-start justify-between">
+                <div className={cn("p-2 rounded-lg", `${typeConf.color.replace("text-", "bg-")}/10`)}>
+                  <Icon className={cn("h-5 w-5", typeConf.color)} />
+                </div>
+                <div className={cn("w-2 h-2 rounded-full", statusConf.bgColor)} />
+              </div>
+              <div className="mt-3">
+                <div className="font-medium truncate">{resource.name}</div>
+                <div className="text-xs text-muted-foreground">{typeConf.label}</div>
+              </div>
+              {resource.metrics && (
+                <div className="flex items-center gap-2 mt-2 text-xs">
+                  {resource.metrics.cpu !== undefined && (
+                    <span className={cn(resource.metrics.cpu > 80 && "text-red-500")}>
+                      {resource.metrics.cpu}%
+                    </span>
+                  )}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )
+      })}
+    </div>
+  )
+}
+
+function InfraStats({ resources }: { resources: InfraResource[] }) {
+  const stats = React.useMemo(() => {
+    let total = 0
+    let healthy = 0
+    let warning = 0
+    let critical = 0
+
+    const count = (items: InfraResource[]) => {
+      items.forEach((item) => {
+        total++
+        if (item.status === "healthy") healthy++
+        if (item.status === "warning") warning++
+        if (item.status === "critical") critical++
+        if (item.children) count(item.children)
+      })
+    }
+    count(resources)
+
+    return { total, healthy, warning, critical }
+  }, [resources])
+
+  return (
+    <div className="flex items-center gap-6">
+      <div className="flex items-center gap-2">
+        <Box className="h-4 w-4 text-muted-foreground" />
+        <span className="font-medium">{stats.total}</span>
+        <span className="text-muted-foreground text-sm">Resources</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <CheckCircle2 className="h-4 w-4 text-green-500" />
+        <span className="font-medium text-green-500">{stats.healthy}</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <AlertTriangle className="h-4 w-4 text-yellow-500" />
+        <span className="font-medium text-yellow-500">{stats.warning}</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <AlertTriangle className="h-4 w-4 text-red-500" />
+        <span className="font-medium text-red-500">{stats.critical}</span>
+      </div>
+    </div>
+  )
+}
+
+export function InfrastructureMap({
+  resources,
+  onResourceClick,
+  onRefresh,
+  showConnections = false,
+  viewMode: initialViewMode = "tree",
+  className,
+}: InfrastructureMapProps) {
+  const [viewMode, setViewMode] = React.useState(initialViewMode)
+  const [expandedIds, setExpandedIds] = React.useState<Set<string>>(() => {
+    // Expand first level by default
+    return new Set(resources.map((r) => r.id))
+  })
+  const [statusFilter, setStatusFilter] = React.useState<ResourceStatus | "all">("all")
+
+  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 ids = new Set<string>()
+    const collectIds = (items: InfraResource[]) => {
+      items.forEach((item) => {
+        ids.add(item.id)
+        if (item.children) collectIds(item.children)
+      })
+    }
+    collectIds(resources)
+    setExpandedIds(ids)
+  }
+
+  const collapseAll = () => {
+    setExpandedIds(new Set())
+  }
+
+  // Filter resources by status
+  const filteredResources = React.useMemo(() => {
+    if (statusFilter === "all") return resources
+
+    const filterByStatus = (items: InfraResource[]): InfraResource[] => {
+      return items
+        .filter((item) => {
+          const hasMatchingChild = item.children?.some((c) => {
+            const filtered = filterByStatus([c])
+            return filtered.length > 0
+          })
+          return item.status === statusFilter || hasMatchingChild
+        })
+        .map((item) => ({
+          ...item,
+          children: item.children ? filterByStatus(item.children) : undefined,
+        }))
+    }
+
+    return filterByStatus(resources)
+  }, [resources, statusFilter])
+
+  return (
+    <Card className={className}>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Cloud className="h-5 w-5" />
+            <CardTitle>Infrastructure Map</CardTitle>
+          </div>
+          <InfraStats resources={resources} />
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* Toolbar */}
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex items-center gap-2">
+            <Select value={viewMode} onValueChange={(v) => setViewMode(v as "tree" | "grid")}>
+              <SelectTrigger className="w-28">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="tree">Tree View</SelectItem>
+                <SelectItem value="grid">Grid View</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select value={statusFilter} onValueChange={(v) => setStatusFilter(v as ResourceStatus | "all")}>
+              <SelectTrigger className="w-32">
+                <Filter className="h-4 w-4 mr-2" />
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Status</SelectItem>
+                <SelectItem value="healthy">Healthy</SelectItem>
+                <SelectItem value="warning">Warning</SelectItem>
+                <SelectItem value="critical">Critical</SelectItem>
+                <SelectItem value="maintenance">Maintenance</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center gap-1">
+            {viewMode === "tree" && (
+              <>
+                <Button variant="ghost" size="sm" onClick={expandAll}>
+                  <Maximize2 className="h-4 w-4 mr-1" />
+                  Expand
+                </Button>
+                <Button variant="ghost" size="sm" onClick={collapseAll}>
+                  Collapse
+                </Button>
+              </>
+            )}
+            {onRefresh && (
+              <Button variant="ghost" size="sm" onClick={onRefresh}>
+                <RefreshCw className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="min-h-[400px]">
+          {filteredResources.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-64 text-muted-foreground">
+              <Cloud className="h-12 w-12 mb-4" />
+              <p>No resources found</p>
+            </div>
+          ) : viewMode === "tree" ? (
+            <ResourceTree
+              resources={filteredResources}
+              expandedIds={expandedIds}
+              onToggle={toggleExpand}
+              onResourceClick={onResourceClick}
+            />
+          ) : (
+            <ResourceGrid
+              resources={filteredResources}
+              onResourceClick={onResourceClick}
+            />
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+// Default sample data
+export const defaultInfraResources: InfraResource[] = [
+  {
+    id: "region-us-east-1",
+    name: "us-east-1",
+    type: "region",
+    status: "healthy",
+    provider: "aws",
+    region: "N. Virginia",
+    children: [
+      {
+        id: "vpc-prod",
+        name: "production-vpc",
+        type: "vpc",
+        status: "healthy",
+        provider: "aws",
+        metadata: { cidr: "10.0.0.0/16" },
+        children: [
+          {
+            id: "subnet-public-1",
+            name: "public-subnet-1a",
+            type: "subnet",
+            status: "healthy",
+            metadata: { az: "us-east-1a", cidr: "10.0.1.0/24" },
+            children: [
+              {
+                id: "alb-1",
+                name: "api-load-balancer",
+                type: "loadbalancer",
+                status: "healthy",
+                metrics: { requests: 15000, latency: 45 },
+              },
+              {
+                id: "nat-1",
+                name: "nat-gateway-1a",
+                type: "firewall",
+                status: "healthy",
+              },
+            ],
+          },
+          {
+            id: "subnet-private-1",
+            name: "private-subnet-1a",
+            type: "subnet",
+            status: "warning",
+            metadata: { az: "us-east-1a", cidr: "10.0.10.0/24" },
+            children: [
+              {
+                id: "ec2-api-1",
+                name: "api-server-1",
+                type: "server",
+                status: "healthy",
+                metrics: { cpu: 45, memory: 62 },
+              },
+              {
+                id: "ec2-api-2",
+                name: "api-server-2",
+                type: "server",
+                status: "warning",
+                metrics: { cpu: 85, memory: 78 },
+              },
+              {
+                id: "ec2-api-3",
+                name: "api-server-3",
+                type: "server",
+                status: "healthy",
+                metrics: { cpu: 52, memory: 55 },
+              },
+            ],
+          },
+          {
+            id: "subnet-data-1",
+            name: "data-subnet-1a",
+            type: "subnet",
+            status: "healthy",
+            metadata: { az: "us-east-1a", cidr: "10.0.20.0/24" },
+            children: [
+              {
+                id: "rds-primary",
+                name: "postgres-primary",
+                type: "database",
+                status: "healthy",
+                metrics: { cpu: 35, memory: 68 },
+              },
+              {
+                id: "redis-1",
+                name: "redis-cluster",
+                type: "cache",
+                status: "healthy",
+                metrics: { memory: 45 },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: "region-eu-west-1",
+    name: "eu-west-1",
+    type: "region",
+    status: "critical",
+    provider: "aws",
+    region: "Ireland",
+    children: [
+      {
+        id: "vpc-prod-eu",
+        name: "production-vpc-eu",
+        type: "vpc",
+        status: "critical",
+        children: [
+          {
+            id: "ec2-eu-1",
+            name: "api-server-eu-1",
+            type: "server",
+            status: "critical",
+            metrics: { cpu: 98, memory: 95 },
+          },
+          {
+            id: "rds-eu",
+            name: "postgres-replica",
+            type: "database",
+            status: "warning",
+            metrics: { cpu: 75, memory: 82 },
+          },
+        ],
+      },
+    ],
+  },
+]