Zoraxy/web/components/networktools.html

<div class="standardContainer">
    <div class="ui basic segment">
        <h2>Network Tools</h2>
        <p>Network tools to help manage your cluster nodes</p>
    </div>


    <div class="ui top attached tabular menu">
        <a class="nettools item active bluefont" data-tab="tab1">Discovery</a>
        <a class="nettools item bluefont" data-tab="tab2">Connections</a>
        <a class="nettools item bluefont" data-tab="tab3">Network Interfaces</a>
    </div>

    <div class="ui bottom attached tab segment active" data-tab="tab1">
        <h2>Multicast DNS (mDNS) Scanner</h2>
        <p>Discover mDNS enabled service in this gateway forwarded network</p>
        <button class="ui basic larger circular button" onclick="launchToolWithSize('./tools/mdns.html',1000, 640);">View Discovery</button>
        <div class="ui divider"></div>
        <h2>IP Scanner</h2>
        <p>Discover local area network devices by pinging them one by one</p>
        <button class="ui basic larger circular button" onclick="launchToolWithSize('./tools/ipscan.html',1000, 640);">Start Scanner</button>
    </div>

    <div class="ui bottom attached tab segment" data-tab="tab2">
    <p>Content of tab 2</p>
    </div>

    <div class="ui bottom attached tab segment" data-tab="tab3">
        <h2>Network Interfaces</h2>
        <p>Network Interface Card (NIC) currently installed on this host</p>
        <table id="network-interfaces-table" class="ui selectable inverted striped celled table">
            <thead>
                <tr>
                    <th>Interface Name</th>
                    <th>ID</th>
                    <th>IP Address</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<script>
    // Activate the default tab

    $('.menu .nettools.item').tab();
    $('.menu .nettools.item').addClass("activated");

    // Switch tabs when clicking on the menu items
    $('.menu .nettools.item').on('click', function() {
        $('.menu .item').removeClass('active');
        $(this).addClass('active');
        var tab = $(this).attr('data-tab');
        $('.tab.segment').removeClass('active');
        $('div[data-tab="' + tab + '"]').addClass('active');
    });
    
</script>
<script>
function launchToolWithSize(url, width, height){
    window.open(url,'targetWindow',
    `toolbar=no,
    location=no,
    status=no,
    menubar=no,
    scrollbars=yes,
    resizable=yes,
    width=${width},
    height=${height}`);
}

/*
    NIC Info
*/

function renderNICInfo(){
    $.get("/api/stats/listnic",function(data){
        var tbody = document.querySelector("#network-interfaces-table tbody");
        data.forEach(function(item) {
            var tr = document.createElement("tr");
            var name = document.createElement("td");
            name.textContent = item.Name;
            var id = document.createElement("td");
            id.textContent = item.ID;
            var ips = document.createElement("td");
            ips.innerHTML = item.IPs.join("<br>");
            tr.appendChild(name);
            tr.appendChild(id);
            tr.appendChild(ips);
            tbody.appendChild(tr);
        });
    });
}
renderNICInfo();
</script>