diff --git a/static/js/pages/bgp.js b/static/js/pages/bgp.js index 06cec05..cebdf08 100644 --- a/static/js/pages/bgp.js +++ b/static/js/pages/bgp.js @@ -1,169 +1,141 @@ -function filterTable(searchInputId,tableId){ - const input=document.getElementById(searchInputId); - const filter=input.value.toUpperCase(); - const table=document.getElementById(tableId); - const tr=table.getElementsByTagName("tr"); +function filterTable(searchInputId, tableId) { + const filter = document.getElementById(searchInputId).value.toUpperCase(); + const rows = document.getElementById(tableId).getElementsByTagName("tr"); - for(let i=1;i-1){ - tr[i].style.display=""; - break; - } + for (let i = 1; i < rows.length; i++) { + rows[i].style.display = "none"; + for (const cell of rows[i].getElementsByTagName("td")) { + if ((cell.textContent || cell.innerText).toUpperCase().includes(filter)) { + rows[i].style.display = ""; + break; } } } } -function sortTable(tableId,columnIndex,th){ - const table=document.getElementById(tableId); - const tbody=table.tBodies[0]; - const rows=Array.from(tbody.rows); - const headers=Array.from(th.parentNode.children); +function sortTable(tableId, columnIndex, th) { + const tbody = document.getElementById(tableId).tBodies[0]; + const rows = Array.from(tbody.rows); + const headers = Array.from(th.parentNode.children); - headers.forEach(header=>{ - if(header!==th){ - header.classList.remove('asc','desc'); - header.setAttribute('data-sort-state','none'); - } - }); + headers.forEach(h => h !== th && (h.className = "", h.dataset.sortState = "none")); - let currentState=th.getAttribute('data-sort-state')||'none'; - let newState=currentState==='none'?'asc':currentState==='asc'?'desc':'none'; + const state = th.dataset.sortState || "none"; + const newState = state === "none" ? "asc" : state === "asc" ? "desc" : "none"; + th.dataset.sortState = newState; + th.className = newState !== "none" ? newState : ""; - th.classList.remove('asc','desc'); - if(newState!=='none')th.classList.add(newState); - th.setAttribute('data-sort-state',newState); - - if(newState==='none'){ - rows.sort((a,b)=>parseInt(a.getAttribute('data-index'))-parseInt(b.getAttribute('data-index'))); - }else{ - rows.sort((a,b)=>{ - const aText=a.cells[columnIndex].textContent.trim(); - const bText=b.cells[columnIndex].textContent.trim(); - - const aNum=parseFloat(aText.replace(/[^0-9.-]/g,'')); - const bNum=parseFloat(bText.replace(/[^0-9.-]/g,'')); - const isNumeric=!isNaN(aNum)&&!isNaN(bNum); - - return newState==='asc' - ?(isNumeric?aNum-bNum:aText.localeCompare(bText)) - :(isNumeric?bNum-aNum:bText.localeCompare(aText)); + if (newState === "none") { + rows.sort((a, b) => a.dataset.index - b.dataset.index); + } else { + rows.sort((a, b) => { + const aTxt = a.cells[columnIndex].textContent.trim(); + const bTxt = b.cells[columnIndex].textContent.trim(); + const aNum = parseFloat(aTxt.replace(/[^0-9.-]/g, "")); + const bNum = parseFloat(bTxt.replace(/[^0-9.-]/g, "")); + const numeric = !isNaN(aNum) && !isNaN(bNum); + const cmp = numeric ? aNum - bNum : aTxt.localeCompare(bTxt); + return newState === "asc" ? cmp : -cmp; }); } - - rows.forEach(row=>tbody.appendChild(row)); + rows.forEach(r => tbody.appendChild(r)); } -async function loadBgpTables(){ - const ipv4SummaryEl=document.getElementById("ipv4Summary"); - const ipv6SummaryEl=document.getElementById("ipv6Summary"); - const ipv4Body=document.getElementById("ipv4TableBody"); - const ipv6Body=document.getElementById("ipv6TableBody"); +async function loadBgpTables() { + const ipv4Sum = document.getElementById("ipv4Summary"); + const ipv6Sum = document.getElementById("ipv6Summary"); + const ipv4Body = document.getElementById("ipv4TableBody"); + const ipv6Body = document.getElementById("ipv6TableBody"); - try{ - const response=await fetch("/bgp/json"); - const data=await response.json(); + try { + const res = await fetch("/bgp/json"); + const data = await res.json(); - ipv4SummaryEl.innerHTML=` -

BGP Router ID: ${data.ipv4_info.router_id}, Local AS Number: ${data.ipv4_info.local_as}, VRF ID: ${data.ipv4_info.vrf_id}

-

BGP Table Version:${data.ipv4_info.table_version}

-

RIB Entries:${data.ipv4_info.rib_entries},using ${data.ipv4_info.rib_memory}

-

Peers:${data.ipv4_info.peers},using ${data.ipv4_info.peers_memory}

- `; + ipv4Sum.innerHTML = summaryHtml(data.ipv4_info); + ipv6Sum.innerHTML = summaryHtml(data.ipv6_info); - ipv6SummaryEl.innerHTML=` -

BGP Router ID: ${data.ipv6_info.router_id}, Local AS Number: ${data.ipv6_info.local_as}, VRF ID: ${data.ipv6_info.vrf_id}

-

BGP Table Version:${data.ipv6_info.table_version}

-

RIB Entries:${data.ipv6_info.rib_entries},using ${data.ipv6_info.rib_memory}

-

Peers:${data.ipv6_info.peers},using ${data.ipv6_info.peers_memory}

- `; + renderPeers(ipv4Body, data.ipv4_peers, "ipv4Table"); + renderPeers(ipv6Body, data.ipv6_peers, "ipv6Table"); - ipv4Body.innerHTML=""; - if(data.ipv4_peers.length===0){ - ipv4Body.innerHTML=`No data available.`; - }else{ - data.ipv4_peers.forEach((peer,index)=>{ - const row=document.createElement("tr"); - row.setAttribute("data-index",index); - row.innerHTML=` - ${peer.neighbor} - ${peer.version} - ${peer.as_number} - ${peer.msg_received} - ${peer.msg_sent} - ${peer.table_version} - ${peer.in_queue} - ${peer.out_queue} - ${peer.up_down} - ${peer.state_pfx_rcd} - ${peer.prefix_sent} - ${peer.description} - `; - ipv4Body.appendChild(row); - }); - } + bootstrap.Popover.getInstance(document.body)?.dispose?.(); + document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el)); - ipv6Body.innerHTML=""; - if(data.ipv6_peers.length===0){ - ipv6Body.innerHTML=`No data available.`; - }else{ - data.ipv6_peers.forEach((peer,index)=>{ - const row=document.createElement("tr"); - row.setAttribute("data-index",index); - row.innerHTML=` - ${peer.neighbor} - ${peer.version} - ${peer.as_number} - ${peer.msg_received} - ${peer.msg_sent} - ${peer.table_version} - ${peer.in_queue} - ${peer.out_queue} - ${peer.up_down} - ${peer.state_pfx_rcd} - ${peer.prefix_sent} - ${peer.description} - `; - ipv6Body.appendChild(row); - }); - } - }catch(error){ - ipv4SummaryEl.textContent="Error fetching IPv4 data."; - ipv6SummaryEl.textContent="Error fetching IPv6 data."; - ipv4Body.innerHTML=`Error retrieving data.`; - ipv6Body.innerHTML=`Error retrieving data.`; + } catch (e) { + showError(ipv4Sum, ipv4Body, "IPv4"); + showError(ipv6Sum, ipv6Body, "IPv6"); } } -window.addEventListener("DOMContentLoaded",()=>{ - loadBgpTables(); -}); +function summaryHtml(info) { + return ` +

BGP Router ID: ${info.router_id}, + Local AS: ${info.local_as}, + VRF ID: ${info.vrf_id}

+

${info.rib_entries} RIB Entries, using ${info.rib_memory}

+

${info.peers} Peers, using ${info.peers_memory}

+

BGP Table Version: ${info.table_version}

+ `; +} -function refreshBGPTable(){ - const searchInput=document.getElementById("ipv4Search"); - const searchInput2=document.getElementById("ipv6Search"); - const refreshIcon=document.getElementById("refreshIcon"); - const refreshIcon2=document.getElementById("refreshIcon2"); - const refreshSpinner=document.getElementById("refreshSpinner"); - const refreshSpinner2=document.getElementById("refreshSpinner2"); +function renderPeers(tbody, peers, tableId) { + tbody.innerHTML = ""; + if (!peers.length) { + tbody.innerHTML = `No data available.`; + return; + } - searchInput.value=""; - searchInput2.value=""; + peers.forEach((p, i) => { + const popTitle = + `${p.as_number} details`; - refreshIcon.classList.add("d-none"); - refreshIcon2.classList.add("d-none"); - refreshSpinner.classList.remove("d-none"); - refreshSpinner2.classList.remove("d-none"); + const popContent = ` + Messages Received: ${p.msg_received}
+ Messages Sent: ${p.msg_sent}
+ Inbound Queue: ${p.in_queue}
+ Outbound Queue: ${p.out_queue} + `.trim(); - loadBgpTables().then(()=>{ - refreshIcon.classList.remove("d-none"); - refreshIcon2.classList.remove("d-none"); - refreshSpinner.classList.add("d-none"); - refreshSpinner2.classList.add("d-none"); + const tr = document.createElement("tr"); + tr.dataset.index = i; + tr.innerHTML = ` + ${p.neighbor} + ${p.as_number} + ${p.up_down} + ${p.state_pfx_rcd} + ${p.prefix_sent} + ${p.description} + + + ℹ️ + + + `; + tbody.appendChild(tr); }); } + + +function showError(sumEl, bodyEl, label) { + sumEl.textContent = `Error fetching ${label} data.`; + bodyEl.innerHTML = `Error retrieving data.`; +} + +function refreshBGPTable() { + ["ipv4Search", "ipv6Search"].forEach(id => (document.getElementById(id).value = "")); + toggleRefresh(true); + loadBgpTables().finally(() => toggleRefresh(false)); +} + +function toggleRefresh(loading) { + document.getElementById("refreshIcon").classList.toggle("d-none", loading); + document.getElementById("refreshSpinner").classList.toggle("d-none", !loading); + document.getElementById("refreshIcon2").classList.toggle("d-none", loading); + document.getElementById("refreshSpinner2").classList.toggle("d-none", !loading); +} + +document.addEventListener("DOMContentLoaded", loadBgpTables); \ No newline at end of file