Router-tools/static/js/pages/bgp.js

function filterTable(searchInputId,tableId){
    const input=document.getElementById(searchInputId);
    const filter=input.value.toUpperCase();
    const table=document.getElementById(tableId);
    const tr=table.getElementsByTagName("tr");

    for(let i=1;i<tr.length;i++){
        tr[i].style.display="none";
        const td=tr[i].getElementsByTagName("td");
        for(let j=0;j<td.length;j++){
            if(td[j]){
                const txtValue=td[j].textContent||td[j].innerText;
                if(txtValue.toUpperCase().indexOf(filter)>-1){
                    tr[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);

    headers.forEach(header=>{
        if(header!==th){
            header.classList.remove('asc','desc');
            header.setAttribute('data-sort-state','none');
        }
    });

    let currentState=th.getAttribute('data-sort-state')||'none';
    let newState=currentState==='none'?'asc':currentState==='asc'?'desc':'none';

    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));
        });
    }

    rows.forEach(row=>tbody.appendChild(row));
}

async function loadBgpTables(){
    const ipv4SummaryEl=document.getElementById("ipv4Summary");
    const ipv6SummaryEl=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();

        ipv4SummaryEl.innerHTML=`
            <p>BGP Router ID: ${data.ipv4_info.router_id}, Local AS Number: <a href="https://bgp.tools/search?q=${data.ipv4_info.local_as}" target="_blank" rel="noopener noreferrer">${data.ipv4_info.local_as}</a>, VRF ID: ${data.ipv4_info.vrf_id}</p>
            <p>BGP Table Version:${data.ipv4_info.table_version}</p>
            <p>RIB Entries:${data.ipv4_info.rib_entries},using ${data.ipv4_info.rib_memory}</p>
            <p>Peers:${data.ipv4_info.peers},using ${data.ipv4_info.peers_memory}</p>
        `;

        ipv6SummaryEl.innerHTML=`
            <p>BGP Router ID: ${data.ipv6_info.router_id}, Local AS Number: <a href="https://bgp.tools/search?q=${data.ipv6_info.local_as}" target="_blank" rel="noopener noreferrer">${data.ipv6_info.local_as}</a>, VRF ID: ${data.ipv6_info.vrf_id}</p>
            <p>BGP Table Version:${data.ipv6_info.table_version}</p>
            <p>RIB Entries:${data.ipv6_info.rib_entries},using ${data.ipv6_info.rib_memory}</p>
            <p>Peers:${data.ipv6_info.peers},using ${data.ipv6_info.peers_memory}</p>
        `;

        ipv4Body.innerHTML="";
        if(data.ipv4_peers.length===0){
            ipv4Body.innerHTML=`<tr><td colspan="12" class="text-center">No data available.</td></tr>`;
        }else{
            data.ipv4_peers.forEach((peer,index)=>{
                const row=document.createElement("tr");
                row.setAttribute("data-index",index);
                row.innerHTML=`
                    <td>${peer.neighbor}</td>
                    <td>${peer.version}</td>
                    <td><a href="https://bgp.tools/search?q=${peer.as_number}" target="_blank">${peer.as_number}</a></td>
                    <td>${peer.msg_received}</td>
                    <td>${peer.msg_sent}</td>
                    <td>${peer.table_version}</td>
                    <td>${peer.in_queue}</td>
                    <td>${peer.out_queue}</td>
                    <td>${peer.up_down}</td>
                    <td>${peer.state_pfx_rcd}</td>
                    <td>${peer.prefix_sent}</td>
                    <td>${peer.description}</td>
                `;
                ipv4Body.appendChild(row);
            });
        }

        ipv6Body.innerHTML="";
        if(data.ipv6_peers.length===0){
            ipv6Body.innerHTML=`<tr><td colspan="12" class="text-center">No data available.</td></tr>`;
        }else{
            data.ipv6_peers.forEach((peer,index)=>{
                const row=document.createElement("tr");
                row.setAttribute("data-index",index);
                row.innerHTML=`
                    <td>${peer.neighbor}</td>
                    <td>${peer.version}</td>
                    <td><a href="https://bgp.tools/search?q=${peer.as_number}" target="_blank">${peer.as_number}</a></td>
                    <td>${peer.msg_received}</td>
                    <td>${peer.msg_sent}</td>
                    <td>${peer.table_version}</td>
                    <td>${peer.in_queue}</td>
                    <td>${peer.out_queue}</td>
                    <td>${peer.up_down}</td>
                    <td>${peer.state_pfx_rcd}</td>
                    <td>${peer.prefix_sent}</td>
                    <td>${peer.description}</td>
                `;
                ipv6Body.appendChild(row);
            });
        }
    }catch(error){
        ipv4SummaryEl.textContent="Error fetching IPv4 data.";
        ipv6SummaryEl.textContent="Error fetching IPv6 data.";
        ipv4Body.innerHTML=`<tr><td colspan="12" class="text-center text-danger">Error retrieving data.</td></tr>`;
        ipv6Body.innerHTML=`<tr><td colspan="12" class="text-center text-danger">Error retrieving data.</td></tr>`;
    }
}

window.addEventListener("DOMContentLoaded",()=>{
    loadBgpTables();
});

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");

    searchInput.value="";
    searchInput2.value="";

    refreshIcon.classList.add("d-none");
    refreshIcon2.classList.add("d-none");
    refreshSpinner.classList.remove("d-none");
    refreshSpinner2.classList.remove("d-none");

    loadBgpTables().then(()=>{
        refreshIcon.classList.remove("d-none");
        refreshIcon2.classList.remove("d-none");
        refreshSpinner.classList.add("d-none");
        refreshSpinner2.classList.add("d-none");
    });
}