113 lines
3.9 KiB
JavaScript
113 lines
3.9 KiB
JavaScript
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 loadInterfaceTable(){
|
|
const tableBody=document.getElementById("interfaceTableBody");
|
|
const loadingRow=document.getElementById("interface-loading-row");
|
|
|
|
try{
|
|
const response=await fetch("/interfaces/json");
|
|
const data=await response.json();
|
|
|
|
tableBody.innerHTML="";
|
|
|
|
if(!data.interface_table||data.interface_table.length===0){
|
|
tableBody.innerHTML="<tr><td colspan='7' class='text-center'>No data available.</td></tr>";
|
|
return;
|
|
}
|
|
|
|
data.interface_table.forEach((entry,index)=>{
|
|
const row=document.createElement("tr");
|
|
row.setAttribute("data-index",index);
|
|
row.innerHTML=`
|
|
<td><a href="/port/${entry.interface}" target="_blank">${entry.interface}</a></td>
|
|
<td>${entry.ip_address}</td>
|
|
<td><a href="https://bgp.tools/search?q=${entry.mac_address}" target="_blank">${entry.mac_address}</a></td>
|
|
<td>${entry.vrf}</td>
|
|
<td>${entry.mtu}</td>
|
|
<td>${entry.status}</td>
|
|
<td>${entry.description}</td>
|
|
`;
|
|
tableBody.appendChild(row);
|
|
});
|
|
}catch(err){
|
|
tableBody.innerHTML="<tr><td colspan='7' class='text-center text-danger'>Error retrieving data.</td></tr>";
|
|
}
|
|
}
|
|
|
|
window.addEventListener("DOMContentLoaded",()=>{
|
|
loadInterfaceTable();
|
|
});
|
|
|
|
function refreshTable(){
|
|
const searchInput=document.getElementById("interfaceSearch");
|
|
const refreshIcon=document.getElementById("refreshIcon");
|
|
const refreshSpinner=document.getElementById("refreshSpinner");
|
|
|
|
searchInput.value="";
|
|
|
|
refreshIcon.classList.add("d-none");
|
|
refreshSpinner.classList.remove("d-none");
|
|
|
|
loadInterfaceTable().then(()=>{
|
|
refreshIcon.classList.remove("d-none");
|
|
refreshSpinner.classList.add("d-none");
|
|
});
|
|
}
|