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">Connection</a>
        <a class="nettools item bluefont" data-tab="tab3">Interface</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">
        <div style="position: relative;">
            <h2>Web SSH</h2>
            <p>Connect to a network node within the local area network of the gateway</p>
            <div class="ui small form">
                <div class="three fields">
                    <div class="field">
                        <label>Server Name or IP Address</label>
                        <input type="text" id="ssh_server" placeholder="e.g. example.com or 192.168.1.1">
                    </div>
                    <div class="field">
                        <label>Port Number</label>
                        <input type="number" id="ssh_port" placeholder="e.g. 22 or 2022">
                    </div>
                        <div class="field">
                            <label>Username</label>
                            <input type="text" id="ssh_username" placeholder="root">
                        </div>
                    </div>
                </div>
            </div>
            <button class="ui basic larger orange circular button" onclick="connectSSH();">Connect using SSH</button>
            <div class="ui inverted message" style="display: block;">
                Copy from Terminal <code style="float: right;">Ctrl + Insert</code><br>
                Paste to Terminal <code style="float: right;">Shift + Insert</code>
            </div>
        </div>
       
        <div class="ui divider"></div>
    </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');
    });

    function connectSSH(){
        function validateForm() {
            var serverInput = document.getElementById("ssh_server");
            var portInput = document.getElementById("ssh_port");
            var usernameInput = document.getElementById("ssh_username");

            var server = serverInput.value.trim();
            var port = parseInt(portInput.value.trim() || "22");
            var username = usernameInput.value.trim() || "root";

            var isValid = true;

            // Validate server input
            if (server === "") {
                msgbox("Server Name or IP Address is required", false, 5000);
                serverInput.focus();
                isValid = false;
            } else if (!isIpAddress(server) && !isDomainName(server)) {
                msgbox("Invalid Server Name or IP Address", false, 5000);
                serverInput.focus();
                isValid = false;
            }

            // Validate port input
            if (isNaN(port) || port < 2 || port > 65533) {
                msgbox("Port Number must be a number between 2 and 65533", false, 5000);
                portInput.focus();
                isValid = false;
            }

            if (isValid){
                //OK! Launch SSH terminal
                let settingPayload = {
                    server: server,
                    port: port,
                    username: username
                }

                let settings = encodeURIComponent(JSON.stringify(settingPayload));
                launchToolWithSize('./tools/sshconn.html#' + settings,1000, 640);
            }else{

            }
        }

        // Returns true if the given string is a valid IP address
        function isIpAddress(str) {
            var pattern = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
            return pattern.test(str);
        }

        // Returns true if the given string is a valid domain name
        function isDomainName(str) {
            var pattern = /^[a-z\d\-]{1,63}(\.[a-z\d\-]{1,63})*$/i;
            return pattern.test(str);
        }

        validateForm();
    }
    
</script>
<script>
function launchToolWithSize(url, width, height){
    let windowName = Date.now();
    window.open(url,'w'+windowName,
    `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>