chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add device registry, DeviceNode, ConnectionEdge for React Flow

Browse Source 
Creates the React Flow building blocks for the network diagram editor:
device type registry with icon/color mappings, DeviceNode component with
status indicators and connection handles, ConnectionEdge with per-type
styling, and nodeTypes/edgeTypes registration maps.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-04-04 07:50:10 +00:00
parent 1ec7bbbbd3
commit 354b44844c
5 changed files with 188 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/src/components/network/nodes/deviceRegistry.ts Normal file
View File

@@ -0,0 +1,73 @@
import type { LucideIcon } from 'lucide-react'
import {
Network, Layers, Shield, Wifi, Server, Monitor, Box, Cloud,
Printer, Smartphone, HardDrive, Scale, Database, CloudCog,
Cpu, Tablet, Laptop, BatteryCharging, LayoutGrid, RectangleVertical,
Cable, Camera, KeyRound,
} from 'lucide-react'
export interface DeviceRenderConfig {
icon: LucideIcon
color: string
}
const SYSTEM_DEVICE_ICONS: Record<string, DeviceRenderConfig> = {
'router': { icon: Network, color: 'var(--color-accent)' },
'switch': { icon: Layers, color: 'var(--color-text-muted-foreground)' },
'firewall': { icon: Shield, color: 'var(--color-accent)' },
'access-point': { icon: Wifi, color: 'var(--color-text-muted-foreground)' },
'load-balancer': { icon: Scale, color: 'var(--color-text-muted-foreground)' },
'server': { icon: Server, color: 'var(--color-text-muted-foreground)' },
'workstation': { icon: Monitor, color: 'var(--color-text-muted-foreground)' },
'vm': { icon: Box, color: 'var(--color-text-muted-foreground)' },
'container': { icon: Cpu, color: 'var(--color-text-muted-foreground)' },
'nas': { icon: Database, color: 'var(--color-text-muted-foreground)' },
'san': { icon: HardDrive, color: 'var(--color-text-muted-foreground)' },
'cloud-storage': { icon: CloudCog, color: 'var(--color-text-muted-foreground)' },
'cloud': { icon: Cloud, color: 'var(--color-text-muted-foreground)' },
'aws': { icon: Cloud, color: 'var(--color-text-muted-foreground)' },
'azure': { icon: Cloud, color: 'var(--color-text-muted-foreground)' },
'gcp': { icon: Cloud, color: 'var(--color-text-muted-foreground)' },
'printer': { icon: Printer, color: 'var(--color-text-muted-foreground)' },
'phone': { icon: Smartphone, color: 'var(--color-text-muted-foreground)' },
'iot': { icon: HardDrive, color: 'var(--color-text-muted-foreground)' },
'camera': { icon: Camera, color: 'var(--color-text-muted-foreground)' },
'tablet': { icon: Tablet, color: 'var(--color-text-muted-foreground)' },
'laptop': { icon: Laptop, color: 'var(--color-text-muted-foreground)' },
'ups': { icon: BatteryCharging, color: 'var(--color-text-muted-foreground)' },
'pdu': { icon: LayoutGrid, color: 'var(--color-text-muted-foreground)' },
'rack': { icon: RectangleVertical, color: 'var(--color-text-muted-foreground)' },
'patch-panel': { icon: Cable, color: 'var(--color-text-muted-foreground)' },
'nvr': { icon: Camera, color: 'var(--color-text-muted-foreground)' },
'badge-reader': { icon: KeyRound, color: 'var(--color-text-muted-foreground)' },
}
const CATEGORY_DEFAULTS: Record<string, DeviceRenderConfig> = {
'network': { icon: Network, color: 'var(--color-text-muted-foreground)' },
'compute': { icon: Server, color: 'var(--color-text-muted-foreground)' },
'storage': { icon: Database, color: 'var(--color-text-muted-foreground)' },
'cloud': { icon: Cloud, color: 'var(--color-text-muted-foreground)' },
'endpoint': { icon: Monitor, color: 'var(--color-text-muted-foreground)' },
'infrastructure': { icon: LayoutGrid, color: 'var(--color-text-muted-foreground)' },
'security': { icon: Shield, color: 'var(--color-text-muted-foreground)' },
}
const FALLBACK: DeviceRenderConfig = { icon: Box, color: 'var(--color-text-muted-foreground)' }
export function getDeviceRenderConfig(slug: string, category?: string): DeviceRenderConfig {
if (SYSTEM_DEVICE_ICONS[slug]) return SYSTEM_DEVICE_ICONS[slug]
if (category && CATEGORY_DEFAULTS[category]) return CATEGORY_DEFAULTS[category]
return FALLBACK
}
export const CATEGORY_LABELS: Record<string, string> = {
'network': 'Network',
'compute': 'Compute',
'storage': 'Storage',
'cloud': 'Cloud',
'endpoint': 'Endpoints',
'infrastructure': 'Infrastructure',
'security': 'Security',
}
export const CATEGORY_ORDER = ['network', 'compute', 'storage', 'cloud', 'endpoint', 'infrastructure', 'security']