Redesign device front panel: 24-port PoE switch (US24PRO) #7

New Issue

2026-11-05T10:26:16-05:00

jared commented

2026-11-05 10:26:16 -05:00

Make the front panel on the device page match the real hardware. This covers one model so it can be checked port by port against the physical unit.

Device: 24RJ45-POE (UniFi model code US24PRO, 26 ports reported by UniFi)

Current state

SWITCH_LAYOUTS in static/port-inspector.js draws odd ports on the top row, even ports on the bottom row, and ports 25-26 as a separate SFP section:

'US24PRO': {
  rows: [[1,3,5,...,23],[2,4,6,...,24]],
  sfp_section: [25,26],
}

renderChassis also hardcodes model === 'US24PRO' to add a group separator class. This should become part of the layout config so it isn't a special case.

README calls this model "UniFi Switch Pro 24", which should be checked against the hardware, since this unit provides PoE.

To investigate

UniFi's stat/device reported 26 ports, while Gandalf's collected port list showed 25 in one check. Find out which port is dropped and why.
The names of ports 11 and 22 don't match the neighbors seen on them. They are probably outdated, so the panel should make a mismatch like this easy to spot.

Verify against the unit or datasheet

Port grouping and spacing, including where the groups split.
Whether ports 25-26 are SFP or SFP+, and their position on the chassis.
Which ports support PoE and at what power.

Acceptance criteria

Port numbering, grouping and connector types match a reference photo of the unit
PoE-capable ports and current PoE draw are clear at a glance
The US24PRO special case in renderChassis is replaced by layout config
All 26 ports appear, and the 25 vs 26 difference is explained or fixed
Each port shows state, speed and neighbor without overlapping text
Clicking a port or using the keyboard opens the existing port panel, and #port-N links still work
No sideways page scroll at phone width
Reference photo or datasheet link is recorded on this issue

Make the front panel on the device page match the real hardware. This covers one model so it can be checked port by port against the physical unit. **Device:** `24RJ45-POE` (UniFi model code `US24PRO`, 26 ports reported by UniFi) ## Current state `SWITCH_LAYOUTS` in `static/port-inspector.js` draws odd ports on the top row, even ports on the bottom row, and ports 25-26 as a separate SFP section: ```js 'US24PRO': { rows: [[1,3,5,...,23],[2,4,6,...,24]], sfp_section: [25,26], } ``` `renderChassis` also hardcodes `model === 'US24PRO'` to add a group separator class. This should become part of the layout config so it isn't a special case. README calls this model "UniFi Switch Pro 24", which should be checked against the hardware, since this unit provides PoE. ## To investigate - UniFi's `stat/device` reported 26 ports, while Gandalf's collected port list showed 25 in one check. Find out which port is dropped and why. - The names of ports 11 and 22 don't match the neighbors seen on them. They are probably outdated, so the panel should make a mismatch like this easy to spot. ## Verify against the unit or datasheet - Port grouping and spacing, including where the groups split. - Whether ports 25-26 are SFP or SFP+, and their position on the chassis. - Which ports support PoE and at what power. ## Acceptance criteria - [ ] Port numbering, grouping and connector types match a reference photo of the unit - [ ] PoE-capable ports and current PoE draw are clear at a glance - [ ] The `US24PRO` special case in `renderChassis` is replaced by layout config - [ ] All 26 ports appear, and the 25 vs 26 difference is explained or fixed - [ ] Each port shows state, speed and neighbor without overlapping text - [ ] Clicking a port or using the keyboard opens the existing port panel, and `#port-N` links still work - [ ] No sideways page scroll at phone width - [ ] Reference photo or datasheet link is recorded on this issue

jared referenced this issue

2026-11-05 11:12:07 -05:00

Draw realistic front panels for every device model #13

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: LotusGuild/gandalf#7