PixelHosting/Router-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update static/js/pages/bgp.js

Browse source
This commit is contained in:
Blackwhitebear8 2025-06-28 13:21:40 +02:00
parent 82db3d6972
commit 0c44bb4bfe
1 changed files with 121 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

63
static/js/pages/bgp.js
View file

@ -34,7 +34,7 @@ function sortTable(tableId, columnIndex, th) {
const aNum = parseFloat(aTxt.replace(/[^0-9.-]/g, "")); const aNum = parseFloat(aTxt.replace(/[^0-9.-]/g, ""));
const bNum = parseFloat(bTxt.replace(/[^0-9.-]/g, "")); const bNum = parseFloat(bTxt.replace(/[^0-9.-]/g, ""));
const numeric = !isNaN(aNum) && !isNaN(bNum); const numeric = !isNaN(aNum) && !isNaN(bNum);
const cmp = numeric ? aNum - bNum : aTxt.localeCompare(bTxt); const cmp = numeric ? aNum - bNum : aTxt.localeCompare(bTxt, undefined, { numeric: true });
return newState === "asc" ? cmp : -cmp; return newState === "asc" ? cmp : -cmp;
}); });
} }
@ -51,33 +51,43 @@ async function loadBgpTables() {
const res = await fetch("/bgp/json"); const res = await fetch("/bgp/json");
const data = await res.json(); const data = await res.json();
ipv4Sum.innerHTML = summaryHtml(data.ipv4_info); ipv4Sum.innerHTML = buildSummary("IPv4", data.ipv4_info);
ipv6Sum.innerHTML = summaryHtml(data.ipv6_info); ipv6Sum.innerHTML = buildSummary("IPv6", data.ipv6_info);
renderPeers(ipv4Body, data.ipv4_peers, "ipv4Table"); renderPeers(ipv4Body, data.ipv4_peers);
renderPeers(ipv6Body, data.ipv6_peers, "ipv6Table"); renderPeers(ipv6Body, data.ipv6_peers);
bootstrap.Popover.getInstance(document.body)?.dispose?.();
document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el));
activatePopovers();
} catch (e) { } catch (e) {
showError(ipv4Sum, ipv4Body, "IPv4"); showError(ipv4Sum, ipv4Body, "IPv4");
showError(ipv6Sum, ipv6Body, "IPv6"); showError(ipv6Sum, ipv6Body, "IPv6");
} }
} }
function summaryHtml(info) { function buildSummary(label, info) {
const popContent = `
<strong>BGP Router ID:</strong> ${info.router_id}<br>
<strong>Local AS:</strong> <a href='https://bgp.tools/search?q=${info.local_as}' target='_blank'>${info.local_as}</a><br>
<strong>VRF ID:</strong> ${info.vrf_id}<br>
<strong>RIB Entries:</strong> ${info.rib_entries} (using ${info.rib_memory})<br>
<strong>Peers:</strong> ${info.peers}, using ${info.peers_memory}<br>
<strong>BGP Table Version:</strong> ${info.table_version}
`.trim();
return ` return `
<p>BGP Router ID: ${info.router_id}, <h2 class="d-inline me-2">${label} Unicast Summary</h2>
Local AS: <a href="https://bgp.tools/search?q=${info.local_as}" target="_blank">${info.local_as}</a>, <span tabindex="0" role="button" class="info-icon"
VRF ID: ${info.vrf_id}</p> data-bs-toggle="popover" data-bs-trigger="hover focus"
<p>${info.rib_entries} RIB Entries, using ${info.rib_memory}</p> data-bs-html="true" data-bs-title="${label} Summary Info"
<p>${info.peers} Peers, using ${info.peers_memory}</p> data-bs-content="${popContent}">
<p>BGP Table Version: ${info.table_version}</p> ℹ️
</span>
<div class="mt-1"><strong>Peers:</strong> ${info.peers}</div>
`; `;
} }
function renderPeers(tbody, peers, tableId) {
function renderPeers(tbody, peers) {
tbody.innerHTML = ""; tbody.innerHTML = "";
if (!peers.length) { if (!peers.length) {
tbody.innerHTML = `<tr><td colspan="7" class="text-center">No data available.</td></tr>`; tbody.innerHTML = `<tr><td colspan="7" class="text-center">No data available.</td></tr>`;
@ -85,14 +95,12 @@ function renderPeers(tbody, peers, tableId) {
} }
peers.forEach((p, i) => { peers.forEach((p, i) => {
const popTitle = const popTitle = `<a href="https://bgp.tools/search?q=${p.as_number}" target="_blank" rel="noopener noreferrer">${p.as_number}</a> details<a>`;
`<a href="https://bgp.tools/search?q=${p.as_number}" target="_blank" rel="noopener noreferrer">${p.as_number}</a> details<a>`;
const popContent = ` const popContent = `
Messages Received: ${p.msg_received}<br> Messages Received: ${p.msg_received}<br>
Messages Sent: ${p.msg_sent}<br> Messages Sent: ${p.msg_sent}<br>
Inbound Queue: ${p.in_queue}<br> Inbound Q: ${p.in_queue}<br>
Outbound Queue: ${p.out_queue} Outbound Q: ${p.out_queue}
`.trim(); `.trim();
const tr = document.createElement("tr"); const tr = document.createElement("tr");
@ -106,10 +114,8 @@ function renderPeers(tbody, peers, tableId) {
<td>${p.description}</td> <td>${p.description}</td>
<td> <td>
<span tabindex="0" role="button" class="info-icon" <span tabindex="0" role="button" class="info-icon"
data-bs-toggle="popover" data-bs-toggle="popover" data-bs-trigger="hover focus"
data-bs-trigger="focus" data-bs-html="true" data-bs-title='${popTitle}'
data-bs-html="true"
data-bs-title='${popTitle}'
data-bs-content="${popContent}"> data-bs-content="${popContent}">
ℹ️ ℹ️
</span> </span>
@ -119,6 +125,13 @@ function renderPeers(tbody, peers, tableId) {
}); });
} }
function activatePopovers() {
document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => {
const existing = bootstrap.Popover.getInstance(el);
if (existing) existing.dispose();
new bootstrap.Popover(el);
});
}
function showError(sumEl, bodyEl, label) { function showError(sumEl, bodyEl, label) {
sumEl.textContent = `Error fetching ${label} data.`; sumEl.textContent = `Error fetching ${label} data.`;