jaredandClaude Opus 5.5
7dba1750ee
Lint / JS (eslint) (push) Successful in 7s
Lint / Python (flake8) (push) Successful in 1m16s
Lint / Notify on failure (push) Skipped
Lint / Deploy (push) Skipped
Security / Python Security (bandit) (push) Successful in 1m42s
Lint / Python (flake8) (pull_request) Successful in 1m41s
Test / Python Tests (pytest) (push) Successful in 2m28s
Lint / JS (eslint) (pull_request) Successful in 10s
Lint / Notify on failure (pull_request) Skipped
Lint / Deploy (pull_request) Skipped
Security / Python Security (bandit) (pull_request) Successful in 1m22s
Test / Python Tests (pytest) (pull_request) Successful in 1m37s
Drawn to true scale, the 4U servers dwarfed the switches and no label could be read without zooming. Every device is now a card of the same height: its name and state on top, and below that its real faceplate (cropped to the ports) or, for a server, its front and a socket per NIC. Cables meet the card edge right at the port, with a short tail to it. The internet, modem and gateway sit side by side along the top, and unknown devices share the row of the gear on their switch, so the whole network fits a normal screen. On a phone the canvas takes the diagram's shape instead of leaving most of it empty. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
61 lines
3.8 KiB
HTML
61 lines
3.8 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. Drag to pan, scroll or pinch to zoom. Hover a device to trace its path to the internet; click a cable for its details, or a group of unknown devices to open it.</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">Unknown devices
|
|
<select class="lt-select tp-select" data-filter="stubs" aria-label="Unknown devices">
|
|
<option value="grouped">grouped per switch</option>
|
|
<option value="all">one by one</option>
|
|
<option value="none">hidden</option>
|
|
</select></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 %}
|