Blackwhitebear8/Vyos-BGP-route-visualizer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add templates/visual-route.html

Browse source
This commit is contained in:
Blackwhitebear8 2025-07-06 17:58:03 +02:00
parent d10e522e01
commit ce12507c83
1 changed files with 92 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

92
templates/visual-route.html Normal file
View file

@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BGP route visualizer</title>
<script src="../static/js/bootstrap.bundle.min.js"></script>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/css/style.css" rel="stylesheet">
<script type="text/javascript" src="../static/js/vis-network.min.js"></script>
<script src="../static/js/pages/visual-route.js"></script>
</head>
<body>
<header>
<div class="header-content">
<p><b>BGP route visualizer</b></p>
</div>
</header>
<main>
<section>
<div class="bgprtv-container">
<form id="bgprtv-form">
<div class="input-group mb-3">
<input type="text" id="bgprtv-ip-address" class="form-control" name="ip_address" placeholder="Enter IPv4 or IPv6 Address" required>
<button type="submit" class="btn btn-outline-primary">Visualize</button>
</div>
</form>
<div class="bgprtv-legend-container">
<div class="bgprtv-legend-item">
<div class="bgprtv-legend-symbol"><div class="bgprtv-legend-line best-path"></div></div>
<span><b>Best path</b></span>
</div>
<div class="bgprtv-legend-item">
<div class="bgprtv-legend-symbol"><div class="bgprtv-legend-line multipath"></div></div>
<span><b>Multipath</b></span>
</div>
<div class="bgprtv-legend-item">
<div class="bgprtv-legend-symbol"><div class="bgprtv-legend-line alt-path"></div></div>
<span><b>Alternate path</b></span>
</div>
<div class="bgprtv-legend-item">
<div class="bgprtv-legend-symbol"><div class="bgprtv-legend-node best-path-node"></div></div>
<span>Best path node</span>
</div>
<div class="bgprtv-legend-item">
<div class="bgprtv-legend-symbol"><div class="bgprtv-legend-node multipath-node"></div></div>
<span>Multipath node</span>
</div>
<div class="bgprtv-legend-item">
<div class="bgprtv-legend-symbol"><div class="bgprtv-legend-node alt-path-node"></div></div>
<span>Alternate path node</span>
</div>
<div class="bgprtv-filter-container">
<h4 class="bgprtv-filter-title">Filter by Path Type:</h4>
<div id="bgprtv-filter-controls">
<label>
<input type="checkbox" name="bgprtv-filter" value="active"> Active paths
</label>
<span class="bgprtv-filter-separator"></span>
<label>
<input type="checkbox" name="bgprtv-filter" value="all" checked> All paths
</label>
<label>
<input type="checkbox" name="bgprtv-filter" value="transit"> Transit
</label>
<label>
<input type="checkbox" name="bgprtv-filter" value="ix"> IX
</label>
<label>
<input type="checkbox" name="bgprtv-filter" value="customer"> Customer
</label>
<label>
<input type="checkbox" name="bgprtv-filter" value="other"> Other
</label>
</div>
</div>
</div>
<div id="bgprtv-loader" style="display:none; text-align: center; padding: 20px;">Loading...</div>
<div id="bgprtv-error-message" style="display:none; color: #dc3545; text-align: center; padding: 10px; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px;"></div>
<div id="bgprtv-mynetwork" data-graph-url="{{ url_for('visual_route_graph') }}"></div>
</div>
</section>
</main>
<footer>
<p>&copy; <span id="year"></span> BGP route visualizer.</p>
<script> document.getElementById("year").textContent = new Date().getFullYear(); </script>
</footer>
<script src="../static/js/materialize.min.js"></script>
</body>