From 31868a45f0c7bf29043a0d8d0bd77f444f8814ab Mon Sep 17 00:00:00 2001
From: Blackwhitebear8 <blackwhitebear8@git@pixelhosting.nl>
Date: Tue, 5 Aug 2025 19:15:34 +0200
Subject: [PATCH] Update static/js/pages/bgp.js

---
 static/js/pages/bgp.js | 54 +++++++++++++++++++++++++++++-------------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/static/js/pages/bgp.js b/static/js/pages/bgp.js
index 669387b..74c9c6e 100644
--- a/static/js/pages/bgp.js
+++ b/static/js/pages/bgp.js
@@ -54,8 +54,10 @@ async function loadBgpTables() {
     ipv4Sum.innerHTML = buildSummary("IPv4", data.ipv4_info);
     ipv6Sum.innerHTML = buildSummary("IPv6", data.ipv6_info);
 
-    renderPeers(ipv4Body, data.ipv4_peers);
-    renderPeers(ipv6Body, data.ipv6_peers);
+    const bfdPeersSet = new Set(data.bfd_peers);
+
+    renderPeers(ipv4Body, data.ipv4_peers, bfdPeersSet);
+    renderPeers(ipv6Body, data.ipv6_peers, bfdPeersSet);
 
     activatePopovers();
   } catch (e) {
@@ -66,19 +68,19 @@ async function loadBgpTables() {
 
 function buildSummary(label, info) {
   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>VRF ID:</strong> ${info.vrf_id}<br>
-    <strong>RIB Entries:</strong> ${info.rib_entries} (using ${info.rib_memory})<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}
+    <strong>BGP Table Version:</strong> ${info.table_version}
   `.trim();
 
   return `
     <h2 class="d-inline me-2">${label} Unicast Summary</h2>
     <span tabindex="0" role="button" class="info-icon"
           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}">
           ℹ️
     </span>
@@ -86,14 +88,15 @@ function buildSummary(label, info) {
   `;
 }
 
-
-function renderPeers(tbody, peers) {
+function renderPeers(tbody, peers, bfdPeersSet) {
   tbody.innerHTML = "";
   if (!peers.length) {
     tbody.innerHTML = `<tr><td colspan="7" class="text-center">No data available.</td></tr>`;
     return;
   }
 
+  const ip_version = tbody.id.includes('ipv4') ? 'ipv4' : 'ipv6';
+
   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 popContent = `
@@ -103,6 +106,8 @@ function renderPeers(tbody, peers) {
       Outbound Queue: ${p.out_queue}
     `.trim();
 
+    const hasBfd = bfdPeersSet.has(p.neighbor);
+
     const tr = document.createElement("tr");
     tr.dataset.index = i;
     tr.innerHTML = `
@@ -112,13 +117,22 @@ function renderPeers(tbody, peers) {
       <td>${p.state_pfx_rcd}</td>
       <td>${p.prefix_sent}</td>
       <td>${p.description}</td>
-      <td>
-        <span tabindex="0" role="button" class="info-icon"
+      <td class="d-flex justify-content-start">
+        <span tabindex="0" role="button" class="icon-info"
               data-bs-toggle="popover" data-bs-trigger="hover focus"
               data-bs-html="true" data-bs-title='${popTitle}'
               data-bs-content="${popContent}">
-              ℹ️
         </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>
     `;
     tbody.appendChild(tr);
@@ -126,16 +140,22 @@ function renderPeers(tbody, peers) {
 }
 
 function activatePopovers() {
-  document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => {
-    const existing = bootstrap.Popover.getInstance(el);
-    if (existing) existing.dispose();
-    new bootstrap.Popover(el);
+  const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+  popoverTriggerList.map(function (popoverTriggerEl) {
+    return new bootstrap.Popover(popoverTriggerEl);
+  });
+}
+
+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) {
   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() {