jaredandClaude Opus 5.5
aa7341af06
Lint / JS (eslint) (push) Successful in 21s
Lint / Python (flake8) (push) Successful in 1m20s
Lint / Notify on failure (push) Skipped
Lint / Deploy (push) Skipped
Security / Python Security (bandit) (push) Successful in 1m0s
Test / Python Tests (pytest) (push) Successful in 1m48s
Lint / Python (flake8) (pull_request) Successful in 1m44s
Lint / JS (eslint) (pull_request) Successful in 30s
Lint / Notify on failure (pull_request) Skipped
Lint / Deploy (pull_request) Skipped
Security / Python Security (bandit) (pull_request) Successful in 1m42s
Test / Python Tests (pytest) (pull_request) Successful in 1m16s
The dashboard's hand-drawn diagram was out of date. /topology replaces it with the network as the switches report it, every device drawn to scale from its faceplate or cutsheet front, and one cable per physical link leaving the port it is plugged into. - topology.py builds the graph: switch-to-switch cables seen from both ends are merged, servers get one cable per NIC, the gateway's internet port goes to the modem and on to the internet, unknown neighbours are stubs, and gear with no live cable is drawn where it was last seen. - Ports named after a different device than the one plugged in are flagged. - Cables show medium, speed, state and traffic; click one for its details, hover a device to trace its path to the internet; pan, zoom and filters. - The monitor now keeps host_macs (MAC to host NIC) in link_stats. - The old dashboard diagram and its JS and CSS are removed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
56 lines
3.6 KiB
HTML
56 lines
3.6 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Topology{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="lt-page-header">
|
|
<div>
|
|
<h1 class="lt-page-title">Topology</h1>
|
|
<p class="g-page-sub">Every device and cable as the switches see them right now, drawn from the real faceplates. Drag to pan, scroll or pinch to zoom. Hover a device to trace its path to the internet; click a cable for its details.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tp-toolbar no-print" role="toolbar" aria-label="Topology view">
|
|
<div class="tp-filters" role="group" aria-label="Show">
|
|
<label class="tp-filter"><input type="checkbox" data-filter="stubs"> Unknown devices</label>
|
|
<label class="tp-filter"><input type="checkbox" data-filter="power"> Power gear</label>
|
|
<label class="tp-filter"><input type="checkbox" data-filter="traffic"> Traffic</label>
|
|
<label class="tp-filter"><input type="checkbox" data-filter="tenG"> 10G only</label>
|
|
<label class="tp-filter"><input type="checkbox" data-filter="alerts"> Alerts only</label>
|
|
</div>
|
|
<div class="tp-zoom" role="group" aria-label="Zoom">
|
|
<button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-zoom="out" aria-label="Zoom out" title="Zoom out (-)">−</button>
|
|
<button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-zoom="fit" title="Fit everything (0)">Fit</button>
|
|
<button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" data-zoom="in" aria-label="Zoom in" title="Zoom in (+)">+</button>
|
|
</div>
|
|
<span class="tp-updated" id="tp-updated" aria-live="polite"></span>
|
|
</div>
|
|
|
|
<div class="tp-warnings" id="tp-warnings" role="status" hidden></div>
|
|
|
|
<div class="tp-canvas" id="tp-canvas" tabindex="0" aria-label="Network topology diagram. Use plus, minus and zero to zoom, and Tab to move between devices and cables.">
|
|
<svg class="tp-svg" id="tp-svg" xmlns="http://www.w3.org/2000/svg" role="group" aria-label="Network topology">
|
|
<g id="tp-world"></g>
|
|
</svg>
|
|
<div class="link-loading tp-loading" id="tp-loading">Loading topology</div>
|
|
<aside class="tp-panel" id="tp-panel" hidden aria-live="polite" aria-label="Cable details"></aside>
|
|
</div>
|
|
|
|
<div class="tp-legend" aria-label="Legend">
|
|
<span class="tp-key"><svg viewBox="0 0 40 12" aria-hidden="true"><path class="tp-key-line tp-m-dac" d="M2 6 H38"/></svg>DAC</span>
|
|
<span class="tp-key"><svg viewBox="0 0 40 12" aria-hidden="true"><path class="tp-key-line tp-m-fibre" d="M2 6 H38"/></svg>Fibre (multimode)</span>
|
|
<span class="tp-key"><svg viewBox="0 0 40 12" aria-hidden="true"><path class="tp-key-line tp-m-wanfibre" d="M2 6 H38"/></svg>Fibre (provider)</span>
|
|
<span class="tp-key"><svg viewBox="0 0 40 12" aria-hidden="true"><path class="tp-key-line tp-m-sfp" d="M2 6 H38"/></svg>SFP+ module</span>
|
|
<span class="tp-key"><svg viewBox="0 0 40 12" aria-hidden="true"><path class="tp-key-line tp-m-copper" d="M2 6 H38"/></svg>Copper</span>
|
|
<span class="tp-key">Thicker = faster (10G, 1G, 100M)</span>
|
|
<span class="tp-key"><svg viewBox="0 0 40 12" aria-hidden="true"><path class="tp-key-line tp-key-down" d="M2 6 H38"/></svg>Down</span>
|
|
<span class="tp-key"><svg viewBox="0 0 40 12" aria-hidden="true"><path class="tp-key-line tp-key-ghost" d="M2 6 H38"/></svg>Last seen</span>
|
|
<span class="tp-key"><span class="tp-key-warn" aria-hidden="true">⚠</span>Port name points at another device</span>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='faceplates.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='fronts.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='topology.js') }}"></script>
|
|
{% endblock %}
|