Components

​

Main Components

​

ConnectionsDashboard

• Fetches connection data from /api/connections every 5 seconds
• Manages React Flow nodes and edges state
• Provides tab navigation between diagram and table views
• Handles process termination via kill button

const [data, setData] = useState<ConnectionsData | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [killingPid, setKillingPid] = useState<number | null>(null);
const [nodes, setNodes, onNodesChange] = useNodesState([]);
const [edges, setEdges, onEdgesChange] = useEdgesState([]);

​

React Flow Nodes

​

ListenerNode

type ListenerNodeData = {
  label: string;                 // Process or service name
  port: number;                  // Listening port
  pid?: number;                  // Process ID
  processIconType?: string;      // Icon type (node, redis, etc.)
  isDocker?: boolean;            // Whether it's a Docker container
};

• Border with primary color accent
• Process icon + optional Docker icon
• Service label with optional “(typical: X)” suffix
• Port number below label
• Source handle on the right for connections

<ListenerNode
  data={{
    label: "redis-server",
    port: 6379,
    pid: 1234,
    processIconType: "redis",
    isDocker: true
  }}
/>

​

TargetNode

type TargetNodeData = {
  label: string;     // Service name or address:port
  address: string;   // IP address
  port: number;      // Port number
};

• Muted border and background
• Service label (e.g., “MongoDB”)
• Address:port below label
• Target handle on the left for incoming connections

​

Icon Components

​

ProcessIcon

type ProcessIconProps = {
  type: ProcessIconType | string | undefined;
  size?: number;      // Default: 20
  className?: string;
};

type ProcessIconType =
  | "psys" | "node" | "next" | "redis" | "mongo"
  | "postgres" | "mysql" | "apache" | "ssh" | "generic";

import { ProcessIcon } from "@/components/process-icon";

<ProcessIcon type="redis" size={18} />
<ProcessIcon type="node" size={14} className="text-green-500" />

​

DockerIcon

type DockerIconProps = {
  size?: number;      // Default: 20
  className?: string;
};

import { DockerIcon } from "@/components/docker-icon";

<DockerIcon size={12} className="text-[#2496ed]" />

​

shadcn/ui Components

​

Card

• Card - Container wrapper
• CardHeader - Header section
• CardTitle - Title text
• CardContent - Main content area

<Card className="h-full min-h-0 flex flex-col overflow-hidden w-full">
  <CardHeader className="py-3 shrink-0">
    <CardTitle className="text-base">Connections</CardTitle>
  </CardHeader>
  <CardContent className="flex-1 min-h-[400px] p-0 w-full">
    <ReactFlow ... />
  </CardContent>
</Card>

​

Table

• Table - Table wrapper
• TableHeader - Header row container
• TableBody - Body rows container
• TableRow - Individual row
• TableHead - Header cell
• TableCell - Data cell

<Table className="w-full">
  <TableHeader>
    <TableRow>
      <TableHead>Process</TableHead>
      <TableHead>Port</TableHead>
      ...
    </TableRow>
  </TableHeader>
  <TableBody>
    {data.listeners.map((l) => (
      <TableRow key={...}>
        <TableCell>{l.processName}</TableCell>
        ...
      </TableRow>
    ))}
  </TableBody>
</Table>

​

Badge

• default - Primary style
• secondary - Muted style
• destructive - Error style
• outline - Outlined style

<Badge variant="secondary">
  {connection.toLabel || `${connection.toAddress}:${connection.toPort}`}
</Badge>

​

Button

<Button variant="outline" size="sm" onClick={fetchData} disabled={loading}>
  <RefreshCw className={`mr-2 h-4 w-4 ${loading ? "animate-spin" : ""}`} />
  Refresh
</Button>

​

Tabs

• Tabs - Container
• TabsList - Tab buttons container
• TabsTrigger - Individual tab button
• TabsContent - Content for each tab

<Tabs defaultValue="diagram">
  <TabsList>
    <TabsTrigger value="diagram">
      <Network className="h-4 w-4" />
      Diagram
    </TabsTrigger>
    <TabsTrigger value="table">
      <TableIcon className="h-4 w-4" />
      Table
    </TabsTrigger>
  </TabsList>
  <TabsContent value="diagram">...</TabsContent>
  <TabsContent value="table">...</TabsContent>
</Tabs>

​

Service Logos

• nodejs.tsx - Node.js logo
• nextjsIconDark.tsx / nextjsLogoLight.tsx - Next.js logos
• redis.tsx - Redis logo
• mongodbIconLight.tsx / mongodbIconDark.tsx / mongodbWordmarkLight.tsx / mongodbWordmarkDark.tsx - MongoDB variations
• postgresql.tsx / postgresqlWordmarkLight.tsx / postgresqlWordmarkDark.tsx - PostgreSQL variations
• mysqlIconLight.tsx / mysqlIconDark.tsx / mysqlWordmarkLight.tsx / mysqlWordmarkDark.tsx - MySQL variations
• docker.tsx - Docker whale logo

type SvgProps = {
  width?: number;
  height?: number;
  className?: string;
};

​

Component Utilities

​

buildFlow

function buildFlow(data: ConnectionsData): {
  nodes: Node[];
  edges: Edge[];
}

1. Create listener nodes (left side) with vertical spacing
2. Build a map of unique connection targets
3. Create target nodes (right side) for each unique target
4. Create edges from listeners to targets
5. Deduplicate edges to prevent visual clutter

• Listeners: x: 40, y: 40 + index * (NODE_HEIGHT + GAP)
• Targets: x: 40 + LISTENER_NODE_WIDTH + 120, y: 40 + index * (NODE_HEIGHT + GAP)