Update templates/bgp-route.html
This commit is contained in:
parent
a5a5fb196d
commit
b8e643c10f
1 changed files with 19 additions and 154 deletions
|
|
@ -1,156 +1,21 @@
|
||||||
<!DOCTYPE html>
|
{% extends "base.html" %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>AS215085 - Router tools | BGP route lookup</title>
|
|
||||||
<link rel="icon" type="image/png" href="../static/img/cropped-Pixelhosting-logo-favicon-32x32.png">
|
|
||||||
<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">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<div class="header-content">
|
|
||||||
<a href="/"> <img src="../static/img/as215085-logo.png" alt="AS215085 Logo" style="height: 120px; opacity: 1;!important"> </a>
|
|
||||||
<h2><b>core1.doet.pixelhosting.nl</b></h2>
|
|
||||||
<p><b>Proudly delivering the backbone for PixelHosting’s services</b></p>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #07AAF9;">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
|
||||||
<ul class="navbar-nav justify-content-center w-100">
|
|
||||||
<li class="nav-item"><a class="nav-link text-white" href="/">Home</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link text-white" href="/bgp">BGP summary</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link text-white" href="/bgp-route">BGP route</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link text-white" href="/arp">ARP table</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link text-white" href="/neighbors">Neighbors table</a></li>
|
|
||||||
<li class="nav-item"><a class="nav-link text-white" href="/interfaces">Interfaces table</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<main>
|
|
||||||
<section id="bgp-route-lookup">
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="prefixInput"
|
|
||||||
class="form-control"
|
|
||||||
placeholder="Type the prefix here, for example, 2606:4700:4700::/48 or 1.1.1.0/24"
|
|
||||||
aria-label="Enter a prefix"
|
|
||||||
onkeydown="if(event.key === 'Enter') loadBGPRoute()"
|
|
||||||
/>
|
|
||||||
<button class="btn btn-outline-primary" type="button" onclick="loadBGPRoute()">Lookup</button>
|
|
||||||
</div>
|
|
||||||
<pre id="bgpOutput" aria-label="BGP Route Lookup output">Enter a prefix and click Lookup.</pre>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<footer class="text-center py-3">
|
|
||||||
<p>© 2020 – <span id="year"></span> AS215085 (PixelHosting). All rights reserved.</p>
|
|
||||||
<script>document.getElementById("year").textContent = new Date().getFullYear();</script>
|
|
||||||
</footer>
|
|
||||||
<script src="../static/js/materialize.min.js"></script>
|
|
||||||
<script>
|
|
||||||
function detectIpVersion(ip) {
|
|
||||||
const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}(\/\d{1,2})?$/;
|
|
||||||
const ipv6Regex = /^([0-9a-fA-F:]+)(\/\d{1,3})?$/;
|
|
||||||
|
|
||||||
if (ipv4Regex.test(ip)) {
|
{% block title %}AS215085 - Router tools | BGP route lookup{% endblock %}
|
||||||
return "ipv4";
|
|
||||||
} else if (ipv6Regex.test(ip)) {
|
|
||||||
return "ipv6";
|
|
||||||
} else {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function highlightBGPOutput(text) {
|
{% block content %}
|
||||||
text = text.replace(/\b215085\b/g, '<span class="asn215085-highlight">215085</span>');
|
<script src="../static/js/pages/bgp-route.js"></script>
|
||||||
|
<section id="bgp-route-lookup">
|
||||||
text = text.replace(/\b\d{4,6}\b/g, match => {
|
<div class="input-group mb-3">
|
||||||
if (match === '215085') return match;
|
<input
|
||||||
return `<span class="asn-highlight">${match}</span>`;
|
type="text"
|
||||||
});
|
id="prefixInput"
|
||||||
|
class="form-control"
|
||||||
text = text.split('\n').map(line => {
|
placeholder="Type the prefix here, for example, 2606:4700:4700::/48 or 1.1.1.0/24"
|
||||||
if (line.toLowerCase().includes('best')) {
|
aria-label="Enter a prefix"
|
||||||
return `<strong class="best-line">${line}</strong>`;
|
onkeydown="if(event.key === 'Enter') loadBGPRoute()"
|
||||||
}
|
/>
|
||||||
return line;
|
<button class="btn btn-outline-primary" type="button" onclick="loadBGPRoute()">Lookup</button>
|
||||||
}).join('\n');
|
</div>
|
||||||
|
<pre id="bgpOutput" aria-label="BGP Route Lookup output">Enter a prefix and click Lookup.</pre>
|
||||||
text = text.split('\n').map(line => {
|
</section>
|
||||||
if (line.toLowerCase().includes('table entry')) {
|
{% endblock %}
|
||||||
return `<strong class="best-line">${line}</strong>`;
|
|
||||||
}
|
|
||||||
return line;
|
|
||||||
}).join('\n');
|
|
||||||
|
|
||||||
text = text.split('\n').map(line => {
|
|
||||||
if (line.toLowerCase().includes('multipath')) {
|
|
||||||
return `<strong class="best-line">${line}</strong>`;
|
|
||||||
}
|
|
||||||
return line;
|
|
||||||
}).join('\n');
|
|
||||||
|
|
||||||
return text.replace(/\n/g, '<br>');
|
|
||||||
}
|
|
||||||
|
|
||||||
function displayBGPRoute(data) {
|
|
||||||
const outputElem = document.getElementById("bgpOutput");
|
|
||||||
const rawText = data.data || JSON.stringify(data, null, 2);
|
|
||||||
const highlighted = highlightBGPOutput(rawText);
|
|
||||||
outputElem.innerHTML = highlighted;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadBGPRoute() {
|
|
||||||
const outputElem = document.getElementById("bgpOutput");
|
|
||||||
const prefix = document.getElementById("prefixInput").value.trim();
|
|
||||||
|
|
||||||
if (!prefix) {
|
|
||||||
outputElem.textContent = "Voer eerst een geldig prefix in.";
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ip_version = detectIpVersion(prefix);
|
|
||||||
if (!ip_version) {
|
|
||||||
outputElem.textContent = "Ongeldig IP-adres of prefix.";
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
outputElem.textContent = "Loading...";
|
|
||||||
|
|
||||||
const postData = {
|
|
||||||
ip_version: ip_version,
|
|
||||||
bgprouteprefix: prefix
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch("/bgp-route/lookup", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
body: JSON.stringify(postData),
|
|
||||||
});
|
|
||||||
if (!response.ok) throw new Error("Network response was not ok");
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (data.error) {
|
|
||||||
outputElem.textContent = "Error: " + data.error;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
displayBGPRoute(data);
|
|
||||||
} catch (error) {
|
|
||||||
outputElem.textContent = "Fout bij ophalen van data: " + error.message;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue