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-08-05 19:15:34 +02:00
parent 478f950bd4
commit 31868a45f0
1 changed files with 37 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -54,8 +54,10 @@ async function loadBgpTables() {
ipv4Sum.innerHTML = buildSummary("IPv4", data.ipv4_info); ipv4Sum.innerHTML = buildSummary("IPv4", data.ipv4_info);
ipv6Sum.innerHTML = buildSummary("IPv6", data.ipv6_info); ipv6Sum.innerHTML = buildSummary("IPv6", data.ipv6_info);
renderPeers(ipv4Body, data.ipv4_peers); const bfdPeersSet = new Set(data.bfd_peers);
renderPeers(ipv6Body, data.ipv6_peers);
renderPeers(ipv4Body, data.ipv4_peers, bfdPeersSet);
renderPeers(ipv6Body, data.ipv6_peers, bfdPeersSet);
activatePopovers(); activatePopovers();
} catch (e) { } catch (e) {
@ -66,19 +68,19 @@ async function loadBgpTables() {
function buildSummary(label, info) { function buildSummary(label, info) {
const popContent = ` const popContent = `
<strong>BGP Router ID:</strong> ${info.router_id}<br> <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>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>VRF ID:</strong> ${info.vrf_id}<br>
<strong>RIB Entries:</strong> ${info.rib_entries} (using ${info.rib_memory})<br> <strong>RIB Entries:</strong> ${info.rib_entries} (using ${info.rib_memory})<br>
<strong>Peers:</strong> ${info.peers} (using ${info.peers_memory})<br> <strong>Peers:</strong> ${info.peers} (using ${info.peers_memory})<br>
<strong>BGP Table Version:</strong> ${info.table_version} <strong>BGP Table Version:</strong> ${info.table_version}
`.trim(); `.trim();
return ` return `
<h2 class="d-inline me-2">${label} Unicast Summary</h2> <h2 class="d-inline me-2">${label} Unicast Summary</h2>
<span tabindex="0" role="button" class="info-icon" <span tabindex="0" role="button" class="info-icon"
data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-toggle="popover" data-bs-trigger="hover focus"
data-bs-html="true" data-bs-title="${label} Summary Info" data-bs-html="true" data-bs-title="${label} Summary Info"
data-bs-content="${popContent}"> data-bs-content="${popContent}">
ℹ️ ℹ️
</span> </span>
@ -86,14 +88,15 @@ function buildSummary(label, info) {
`; `;
} }
function renderPeers(tbody, peers, bfdPeersSet) {
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>`;
return; return;
} }
const ip_version = tbody.id.includes('ipv4') ? 'ipv4' : 'ipv6';
peers.forEach((p, i) => { peers.forEach((p, i) => {
const popTitle = `<a href="https://bgp.tools/search?q=${p.as_number}" target="_blank" rel="noopener noreferrer">${p.as_number}</a> details<a>`; const popTitle = `<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 = `
@ -103,6 +106,8 @@ function renderPeers(tbody, peers) {
Outbound Queue: ${p.out_queue} Outbound Queue: ${p.out_queue}
`.trim(); `.trim();
const hasBfd = bfdPeersSet.has(p.neighbor);
const tr = document.createElement("tr"); const tr = document.createElement("tr");
tr.dataset.index = i; tr.dataset.index = i;
tr.innerHTML = ` tr.innerHTML = `
@ -112,13 +117,22 @@ function renderPeers(tbody, peers) {
<td>${p.state_pfx_rcd}</td> <td>${p.state_pfx_rcd}</td>
<td>${p.prefix_sent}</td> <td>${p.prefix_sent}</td>
<td>${p.description}</td> <td>${p.description}</td>
<td> <td class="d-flex justify-content-start">
<span tabindex="0" role="button" class="info-icon" <span tabindex="0" role="button" class="icon-info"
data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-toggle="popover" data-bs-trigger="hover 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>
<a href="/bgp/neighbor/${ip_version}/${p.neighbor}" class="icon-details" target="_blank" role="button"
data-bs-toggle="tooltip" data-bs-placement="top" title="Display BGP neighbor details">
</a>
${hasBfd ? `
<a href="/bfd/peer/${p.neighbor}" class="icon-bfd" target="_blank" role="button"
data-bs-toggle="tooltip" data-bs-placement="top" title="Display BFD peer details">
</a>
` : ''}
</td> </td>
`; `;
tbody.appendChild(tr); tbody.appendChild(tr);
@ -126,16 +140,22 @@ function renderPeers(tbody, peers) {
} }
function activatePopovers() { function activatePopovers() {
document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => { const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
const existing = bootstrap.Popover.getInstance(el); popoverTriggerList.map(function (popoverTriggerEl) {
if (existing) existing.dispose(); return new bootstrap.Popover(popoverTriggerEl);
new bootstrap.Popover(el); });
}
function activateTooltips() {
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
}); });
} }
function showError(sumEl, bodyEl, label) { function showError(sumEl, bodyEl, label) {
sumEl.textContent = `Error fetching ${label} data.`; sumEl.textContent = `Error fetching ${label} data.`;
bodyEl.innerHTML = `<tr><td colspan="7" class="text-center text-danger">Error retrieving data.</td></tr>`; bodyEl.innerHTML = `<tr><td colspan="8" class="text-center text-danger">Error retrieving data.</td></tr>`;
} }
function refreshBGPTable() { function refreshBGPTable() {