jason/rack-planner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(rack-planner): add support for WAN and SFP ports with right-justified layout and distinct styling

Browse Source
This commit is contained in:
jason
2026-03-22 15:16:54 -05:00
parent b26f88a89e
commit 1f360cdb2a
6 changed files with 162 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/api/client.ts
View File

@@ -81,6 +81,8 @@ const racks = {
notes?: string;
portCount?: number;
portType?: PortType;
sfpCount?: number;
wanCount?: number;
}
) => post<Module>(`/racks/${rackId}/modules`, data),
};

61
client/src/components/modals/AddModuleModal.tsx
View File

@@ -35,6 +35,8 @@ export function AddModuleModal({ open, onClose, rackId, uPosition, initialType }
const [ipAddress, setIpAddress] = useState('');
const [manufacturer, setManufacturer] = useState('');
const [model, setModel] = useState('');
const [sfpCount, setSfpCount] = useState(0);
const [wanCount, setWanCount] = useState(0);
const [loading, setLoading] = useState(false);
// Sync state when modal opens with a new initialType (e.g. drag-drop reuse)
@@ -54,6 +56,8 @@ export function AddModuleModal({ open, onClose, rackId, uPosition, initialType }
setName(MODULE_TYPE_LABELS[type]);
setUSize(MODULE_U_DEFAULTS[type]);
setPortCount(MODULE_PORT_DEFAULTS[type]);
setSfpCount(0);
setWanCount(0);
}
function reset() {
@@ -64,6 +68,8 @@ export function AddModuleModal({ open, onClose, rackId, uPosition, initialType }
setIpAddress('');
setManufacturer('');
setModel('');
setSfpCount(0);
setWanCount(0);
}
async function handleSubmit(e: FormEvent) {
@@ -77,6 +83,8 @@ export function AddModuleModal({ open, onClose, rackId, uPosition, initialType }
uPosition,
uSize,
portCount,
sfpCount,
wanCount,
ipAddress: ipAddress.trim() || undefined,
manufacturer: manufacturer.trim() || undefined,
model: model.trim() || undefined,
@@ -165,31 +173,17 @@ export function AddModuleModal({ open, onClose, rackId, uPosition, initialType }
/>
</div>
<div className="grid grid-cols-3 gap-3">
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1">
<label className="block text-sm text-slate-300">Size (U)</label>
<input
type="number"
min={1}
max={20}
type="number" min={1} max={20}
value={uSize}
onChange={(e) => setUSize(Number(e.target.value))}
disabled={loading}
className="w-full bg-slate-900 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
/>
</div>
<div className="space-y-1">
<label className="block text-sm text-slate-300">Port count</label>
<input
type="number"
min={0}
max={128}
value={portCount}
onChange={(e) => setPortCount(Number(e.target.value))}
disabled={loading}
className="w-full bg-slate-900 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
/>
</div>
<div className="space-y-1">
<label className="block text-sm text-slate-300">IP Address</label>
<input
@@ -202,6 +196,41 @@ export function AddModuleModal({ open, onClose, rackId, uPosition, initialType }
</div>
</div>
<div className="grid grid-cols-3 gap-3">
<div className="space-y-1">
<label className="block text-sm text-slate-300">Ethernet</label>
<input
type="number" min={0} max={128}
value={portCount}
onChange={(e) => setPortCount(Number(e.target.value))}
disabled={loading}
className="w-full bg-slate-900 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
/>
</div>
<div className="space-y-1">
<label className="block text-sm text-slate-300">SFP</label>
<input
type="number" min={0} max={128}
value={sfpCount}
onChange={(e) => setSfpCount(Number(e.target.value))}
disabled={loading}
className="w-full bg-slate-900 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
/>
</div>
<div className="space-y-1">
<label className="block text-sm text-slate-300">WAN</label>
<input
type="number" min={0} max={128}
value={wanCount}
onChange={(e) => setWanCount(Number(e.target.value))}
disabled={loading}
className="w-full bg-slate-900 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
/>
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1">
<label className="block text-sm text-slate-300">Manufacturer</label>

119
client/src/components/rack/ModuleBlock.tsx
View File

@@ -43,17 +43,25 @@ export function ModuleBlock({ module }: ModuleBlockProps) {
const height = displayUSize * U_HEIGHT_PX;
const hasPorts = module.ports.length > 0;
// Split ports into rows of PORTS_PER_ROW
// Categorize ports for layout: separate WAN/SFP to the right
const mainPorts = module.ports.filter(p => !['SFP', 'SFP_PLUS', 'QSFP', 'WAN'].includes(p.portType));
const sidePorts = module.ports.filter(p => ['SFP', 'SFP_PLUS', 'QSFP', 'WAN'].includes(p.portType));
// Split Main ports into rows
const portRows: (typeof module.ports)[] = [];
for (let i = 0; i < module.ports.length; i += PORTS_PER_ROW) {
portRows.push(module.ports.slice(i, i + PORTS_PER_ROW));
for (let i = 0; i < mainPorts.length; i += PORTS_PER_ROW) {
portRows.push(mainPorts.slice(i, i + PORTS_PER_ROW));
}
// Only show as many rows as fit within the current height
// Each row needs ~14px (10px dot + 4px gap/padding)
const availableForPorts = height - 16; // subtract top padding + resize handle
// Calculate vertical space
const availableForPorts = height - 16;
const maxRows = Math.max(1, Math.floor(availableForPorts / 14));
const visibleRows = portRows.slice(0, maxRows);
const hiddenPortCount = module.ports.length - visibleRows.flat().length;
const hiddenPortCount = mainPorts.length - visibleRows.flat().length;
// SFP/WAN ports often sit on the far right of the module
// We'll show them on the first row if possible
// Compute the maximum allowed uSize for this module (rack bounds + collision)
const maxResizeU = useCallback((): number => {
@@ -163,35 +171,76 @@ export function ModuleBlock({ module }: ModuleBlockProps) {
{hasPorts && previewUSize === null ? (
<div className="flex flex-col gap-[3px] px-2 pt-[5px]">
{visibleRows.map((row, rowIdx) => (
<div key={rowIdx} className="flex gap-[3px]">
{row.map((port) => {
const hasVlan = port.vlans.length > 0;
const vlanColor = hasVlan
? port.mode === 'ACCESS'
? port.vlans[0]?.vlan?.color || '#10b981'
: '#8b5cf6'
: '#475569';
const isCablingSource = cablingFromPortId === port.id;
<div key={rowIdx} className="flex justify-between items-center w-full">
{/* Standard ports */}
<div className="flex gap-[3px]">
{row.map((port) => {
const hasVlan = port.vlans.length > 0;
const vlanColor = hasVlan
? port.mode === 'ACCESS'
? port.vlans[0]?.vlan?.color || '#10b981'
: '#8b5cf6'
: '#475569';
const isCablingSource = cablingFromPortId === port.id;
return (
<button
key={port.id}
data-port-id={port.id}
onPointerDown={(e) => e.stopPropagation()}
onClick={(e) => handlePortClick(e, port.id)}
aria-label={`Port ${port.portNumber}`}
title={`Port ${port.portNumber}${port.label ? ` · ${port.label}` : ''}${
hasVlan ? ` (VLAN ${port.vlans.map((v) => v.vlan?.vlanId).filter(Boolean).join(',')})` : ''
}\nShift+Click for settings`}
style={{ backgroundColor: vlanColor, borderColor: 'rgba(0,0,0,0.2)' }}
className={cn(
'w-2.5 h-2.5 rounded-sm border transition-all shrink-0 hover:scale-110 hover:brightness-125',
isCablingSource &&
'ring-2 ring-blue-400 ring-offset-1 ring-offset-slate-900 animate-pulse'
)}
/>
);
})}
return (
<button
key={port.id}
data-port-id={port.id}
onPointerDown={(e) => e.stopPropagation()}
onClick={(e) => handlePortClick(e, port.id)}
aria-label={`Port ${port.portNumber}`}
title={`Port ${port.portNumber}${port.label ? ` · ${port.label}` : ''}${
hasVlan ? ` (VLAN ${port.vlans.map((v) => v.vlan?.vlanId).filter(Boolean).join(',')})` : ''
}\nShift+Click for settings`}
style={{ backgroundColor: vlanColor, borderColor: 'rgba(0,0,0,0.2)' }}
className={cn(
'w-2.5 h-2.5 rounded-sm border transition-all shrink-0 hover:scale-110 hover:brightness-125',
isCablingSource && 'ring-2 ring-blue-400 ring-offset-1 ring-offset-slate-900 animate-pulse'
)}
/>
);
})}
</div>
{/* SFP/WAN group (on first row) */}
{rowIdx === 0 && sidePorts.length > 0 && (
<div className="flex gap-[3px] ml-auto">
{sidePorts.map((port) => {
const hasVlan = port.vlans.length > 0;
const isSfp = ['SFP', 'SFP_PLUS', 'QSFP'].includes(port.portType);
const isWan = port.portType === 'WAN';
const vlanColor = hasVlan
? port.mode === 'ACCESS'
? port.vlans[0]?.vlan?.color || '#10b981'
: '#8b5cf6'
: isWan ? '#3b82f6' : '#64748b';
const isCablingSource = cablingFromPortId === port.id;
return (
<button
key={port.id}
data-port-id={port.id}
onPointerDown={(e) => e.stopPropagation()}
onClick={(e) => handlePortClick(e, port.id)}
aria-label={`${port.portType} Port ${port.portNumber}`}
title={`${port.portType} Port ${port.portNumber}${port.label ? ` · ${port.label}` : ''}${
hasVlan ? ` (VLAN ${port.vlans.map((v) => v.vlan?.vlanId).filter(Boolean).join(',')})` : ''
}\nShift+Click for settings`}
style={{ backgroundColor: vlanColor, borderColor: isSfp ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.2)' }}
className={cn(
'w-2.5 h-2.5 border transition-all shrink-0 hover:scale-110 hover:brightness-125',
isSfp ? 'rounded-none rotate-45 scale-[0.85]' : 'rounded-full',
isCablingSource && 'ring-2 ring-blue-400 ring-offset-1 ring-offset-slate-900 animate-pulse',
isWan && 'ring-1 ring-blue-400/50'
)}
/>
);
})}
</div>
)}
</div>
))}
{hiddenPortCount > 0 && (

2
client/src/types/index.ts
View File

@@ -14,7 +14,7 @@ export type ModuleType =
| 'BLANK'
| 'OTHER';
export type PortType = 'ETHERNET' | 'SFP' | 'SFP_PLUS' | 'QSFP' | 'CONSOLE' | 'UPLINK';
export type PortType = 'ETHERNET' | 'SFP' | 'SFP_PLUS' | 'QSFP' | 'CONSOLE' | 'UPLINK' | 'WAN';
export type VlanMode = 'ACCESS' | 'TRUNK' | 'HYBRID';