Skip to content

feat(svg): partial connection indicator#62

Merged
peterbaumert merged 1 commit into
mainfrom
feature/partial-connection-indicator
Apr 10, 2026
Merged

feat(svg): partial connection indicator#62
peterbaumert merged 1 commit into
mainfrom
feature/partial-connection-indicator

Conversation

@peterbaumert
Copy link
Copy Markdown
Owner

Summary

Closes #61

Adds a visual distinction in the SVG renderer between fully connected and partially connected ports (i.e. a cable is attached but the path does not resolve to a far-end device — e.g. switch → patch panel → open outlet).

Changes

New connection states (SVG only)

State Fill colour Overlay
Full connection Green #198754
Partial connection (new) Yellow #ffc107 Small warning dot (top-right corner)
Enabled, unconnected Grey #6c757d
Disabled Red #dc3545

How it works

  • Detection: uses NetBox's existing link_peers and connected_endpoints attributes — no new ORM queries. A port is partially connected when link_peers.length > 0 AND connected_endpoints.length == 0.
  • Partial fill (bg-warning): applied in status-colour mode (cable_colors off), shows yellow.
  • Warning dot: a small <circle> element is injected by JS into the top-right corner of the port <rect>. It is always visible — even when cable colour mode overrides the fill — so the partial state is never hidden.

Files changed

File Change
templates/…/deviceview.html Added partiallyConnected to portData; updated applyPortStatus() with new branch + dot injection
templates/…/ports.html Same as above (device-tab template)
static/…/css/device_view_svg.css Added .dv-port.bg-warning fill rule and .dv-partial-dot style

Notes

  • SVG-only feature as agreed in the issue thread — the CSS Grid path is unchanged.
  • No Python/model changes required; all connection-state data is already available in the template context via NetBox's ORM.

Introduces a third connection state for the SVG rendering path:
- Full connection  (green) — both cable ends resolve to a device
- Partial connection (yellow + dot) — cable attached but far-end has no device
- Unconnected/disabled — unchanged grey/red

A yellow warning dot is injected into the top-right corner of each
partially connected port via JS, remaining visible even when cable
colour mode overrides the fill colour.

Closes #61
@peterbaumert peterbaumert merged commit 5c2ff07 into main Apr 10, 2026
4 checks passed
@peterbaumert peterbaumert deleted the feature/partial-connection-indicator branch April 10, 2026 09:44
peterbaumert added a commit that referenced this pull request Apr 10, 2026
Introduces a third connection state for the SVG rendering path:
- Full connection  (green) — both cable ends resolve to a device
- Partial connection (yellow + dot) — cable attached but far-end has no device
- Unconnected/disabled — unchanged grey/red

A yellow warning dot is injected into the top-right corner of each
partially connected port via JS, remaining visible even when cable
colour mode overrides the fill colour.

Closes #61
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Color ports

1 participant