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

refactor(network): simplify diagram node visuals

Browse Source
This commit is contained in:
chihlasm
2026-04-14 02:42:47 +00:00
parent ed763d1cea
commit 3cd4084f78
3 changed files with 51 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
frontend/src/components/network/nodes/deviceRegistry.ts
View File

@@ -12,7 +12,6 @@ export interface DeviceRenderConfig {
accentClass: string
surfaceClass: string
category: string
glyph: string
}
// Category-semantic color palette — each color carries meaning:
@@ -66,13 +65,11 @@ function makeConfig(
icon: LucideIcon,
color: string,
category: string,
glyph: string,
): DeviceRenderConfig {
return {
icon,
color,
category,
glyph,
accentClass: CATEGORY_STYLES[category]?.accentClass ?? CATEGORY_STYLES.infrastructure.accentClass,
surfaceClass: CATEGORY_STYLES[category]?.surfaceClass ?? CATEGORY_STYLES.infrastructure.surfaceClass,
}
@@ -80,60 +77,60 @@ function makeConfig(
const SYSTEM_DEVICE_ICONS: Record<string, DeviceRenderConfig> = {
// Network layer
'router': makeConfig(Router, NETWORK_COLOR, 'network', 'RTR'),
'switch': makeConfig(Network, NETWORK_COLOR, 'network', 'SW'),
'access-point': makeConfig(Wifi, NETWORK_COLOR, 'network', 'AP'),
'load-balancer': makeConfig(Gauge, NETWORK_COLOR, 'network', 'LB'),
'router': makeConfig(Router, NETWORK_COLOR, 'network'),
'switch': makeConfig(Network, NETWORK_COLOR, 'network'),
'access-point': makeConfig(Wifi, NETWORK_COLOR, 'network'),
'load-balancer': makeConfig(Gauge, NETWORK_COLOR, 'network'),
// Security
'firewall': makeConfig(BrickWallFire, SECURITY_COLOR, 'security', 'FW'),
'badge-reader': makeConfig(KeyRound, SECURITY_COLOR, 'security', 'BR'),
'firewall': makeConfig(BrickWallFire, SECURITY_COLOR, 'security'),
'badge-reader': makeConfig(KeyRound, SECURITY_COLOR, 'security'),
// Compute
'server': makeConfig(Server, COMPUTE_COLOR, 'compute', 'SRV'),
'vm': makeConfig(Boxes, COMPUTE_COLOR, 'compute', 'VM'),
'container': makeConfig(Package, COMPUTE_COLOR, 'compute', 'CTR'),
'server': makeConfig(Server, COMPUTE_COLOR, 'compute'),
'vm': makeConfig(Boxes, COMPUTE_COLOR, 'compute'),
'container': makeConfig(Package, COMPUTE_COLOR, 'compute'),
// Storage
'nas': makeConfig(Database, STORAGE_COLOR, 'storage', 'NAS'),
'san': makeConfig(HardDrive, STORAGE_COLOR, 'storage', 'SAN'),
'cloud-storage': makeConfig(CloudCog, STORAGE_COLOR, 'storage', 'CS'),
'nas': makeConfig(Database, STORAGE_COLOR, 'storage'),
'san': makeConfig(HardDrive, STORAGE_COLOR, 'storage'),
'cloud-storage': makeConfig(CloudCog, STORAGE_COLOR, 'storage'),
// Cloud / Internet
'cloud': makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'CLD'),
'aws': makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'AWS'),
'azure': makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'AZ'),
'gcp': makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'GCP'),
'isp': makeConfig(Globe, CLOUD_COLOR, 'cloud', 'WAN'),
'cloud': makeConfig(Cloud, CLOUD_COLOR, 'cloud'),
'aws': makeConfig(Cloud, CLOUD_COLOR, 'cloud'),
'azure': makeConfig(Cloud, CLOUD_COLOR, 'cloud'),
'gcp': makeConfig(Cloud, CLOUD_COLOR, 'cloud'),
'isp': makeConfig(Globe, CLOUD_COLOR, 'cloud'),
// Endpoints
'workstation': makeConfig(Monitor, ENDPOINT_COLOR, 'endpoint', 'WS'),
'laptop': makeConfig(Laptop, ENDPOINT_COLOR, 'endpoint', 'LTP'),
'tablet': makeConfig(Tablet, ENDPOINT_COLOR, 'endpoint', 'TAB'),
'phone': makeConfig(Smartphone, ENDPOINT_COLOR, 'endpoint', 'PH'),
'printer': makeConfig(Printer, ENDPOINT_COLOR, 'endpoint', 'PRN'),
'workstation': makeConfig(Monitor, ENDPOINT_COLOR, 'endpoint'),
'laptop': makeConfig(Laptop, ENDPOINT_COLOR, 'endpoint'),
'tablet': makeConfig(Tablet, ENDPOINT_COLOR, 'endpoint'),
'phone': makeConfig(Smartphone, ENDPOINT_COLOR, 'endpoint'),
'printer': makeConfig(Printer, ENDPOINT_COLOR, 'endpoint'),
// Infrastructure / physical
'ups': makeConfig(BatteryCharging, INFRA_COLOR, 'infrastructure', 'UPS'),
'pdu': makeConfig(PlugZap, INFRA_COLOR, 'infrastructure', 'PDU'),
'rack': makeConfig(RectangleVertical, INFRA_COLOR, 'infrastructure', 'RCK'),
'patch-panel': makeConfig(Cable, INFRA_COLOR, 'infrastructure', 'PP'),
'camera': makeConfig(Camera, INFRA_COLOR, 'infrastructure', 'CAM'),
'nvr': makeConfig(Video, INFRA_COLOR, 'infrastructure', 'NVR'),
'iot': makeConfig(Radio, INFRA_COLOR, 'infrastructure', 'IOT'),
'ups': makeConfig(BatteryCharging, INFRA_COLOR, 'infrastructure'),
'pdu': makeConfig(PlugZap, INFRA_COLOR, 'infrastructure'),
'rack': makeConfig(RectangleVertical, INFRA_COLOR, 'infrastructure'),
'patch-panel': makeConfig(Cable, INFRA_COLOR, 'infrastructure'),
'camera': makeConfig(Camera, INFRA_COLOR, 'infrastructure'),
'nvr': makeConfig(Video, INFRA_COLOR, 'infrastructure'),
'iot': makeConfig(Radio, INFRA_COLOR, 'infrastructure'),
}
const CATEGORY_DEFAULTS: Record<string, DeviceRenderConfig> = {
'network': makeConfig(Router, NETWORK_COLOR, 'network', 'NET'),
'compute': makeConfig(Server, COMPUTE_COLOR, 'compute', 'CPU'),
'storage': makeConfig(Database, STORAGE_COLOR, 'storage', 'DB'),
'cloud': makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'CLD'),
'endpoint': makeConfig(Monitor, ENDPOINT_COLOR, 'endpoint', 'END'),
'infrastructure': makeConfig(PlugZap, INFRA_COLOR, 'infrastructure', 'INF'),
'security': makeConfig(BrickWallFire, SECURITY_COLOR, 'security', 'SEC'),
'network': makeConfig(Router, NETWORK_COLOR, 'network'),
'compute': makeConfig(Server, COMPUTE_COLOR, 'compute'),
'storage': makeConfig(Database, STORAGE_COLOR, 'storage'),
'cloud': makeConfig(Cloud, CLOUD_COLOR, 'cloud'),
'endpoint': makeConfig(Monitor, ENDPOINT_COLOR, 'endpoint'),
'infrastructure': makeConfig(PlugZap, INFRA_COLOR, 'infrastructure'),
'security': makeConfig(BrickWallFire, SECURITY_COLOR, 'security'),
}
const FALLBACK: DeviceRenderConfig = makeConfig(Cpu, INFRA_COLOR, 'infrastructure', 'DEV')
const FALLBACK: DeviceRenderConfig = makeConfig(Cpu, INFRA_COLOR, 'infrastructure')
export function getDeviceRenderConfig(slug: string, category?: string): DeviceRenderConfig {
if (SYSTEM_DEVICE_ICONS[slug]) return SYSTEM_DEVICE_ICONS[slug]