zoraxy/src/web/components/gan.html

<div id="ganetWindow" class="standardContainer">
    <div class="ui basic segment">
        <h2>Global Area Network</h2>
        <p>Virtual Network Hub that allows all networked devices to communicate as if they all reside in the same physical data center or cloud region</p>
    </div>
    <div class="gansnetworks">
        <div class="ganstats ui basic segment">
            <div style="float: right; max-width: 300px; margin-top: 0.4em;">
                <h1 class="ui header" style="text-align: right;">
                    <span class="ganControllerID"></span>
                    <div class="sub header">Network Controller ID</div>
                </h1>
            </div>
            <div class="ui list">
                <div class="item">
                    <i class="exchange icon"></i>
                    <div class="content">
                    <div class="header" style="font-size: 1.2em;" id="ganetCount">0</div>
                    <div class="description">Networks</div>
                    </div>
                </div>
                <div class="item">
                    <i class="desktop icon"></i>
                    <div class="content">
                    <div class="header" style="font-size: 1.2em;" id="ganodeCount">0</div>
                    <div class="description" id="connectedNodes" count="0">Connected Nodes</div>
                </div>
                </div>
            </div>
        </div>
        <div class="ganlist">
            <button class="ui basic orange button" onclick="addGANet();">Create New Network</button>
            <div class="ui divider"></div>
            <!-- 
            <div class="ui icon input" style="margin-bottom: 1em;">
                <input type="text" placeholder="Search a Network">
                <i class="circular search link icon"></i>
            </div>-->
            <div style="width: 100%; overflow-x: auto;">
                <table class="ui celled basic unstackable striped table">
                    <thead>
                        <tr>
                            <th>Network ID</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Subnet (Assign Range)</th>
                            <th>Nodes</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="GANetList">
                        <tr>
                            <td colspan="6"><i class="ui green circle check icon"></i> No Global Area Network Found on this host</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    /*
        Network Management Functions
    */
    function handleAddNetwork(){
        let networkName = $("#networkName").val().trim();
        if (networkName == ""){
            msgbox("Network name cannot be empty", false, 5000);
            return;
        }

        //Add network with default settings
        addGANet(networkName, "192.168.196.0/24");
        $("#networkName").val("");
    }

    function initGANetID(){
        $.get("/api/gan/network/info", function(data){
            if (data.error !== undefined){
                msgbox(data.error, false, 5000)
            }else{
                if (data != ""){
                    $(".ganControllerID").text(data);
                }
            }
        })
    }

    function addGANet() {
        $.ajax({
            url: "/api/gan/network/add",
            type: "POST",
            dataType: "json",
            data: {},
            success: function(response) {
                if (response.error != undefined){
                    msgbox(response.error, false, 5000);
                }else{
                    msgbox("Network added successfully");
                }
                console.log("Network added successfully:", response);
                listGANet();
            },
            error: function(xhr, status, error) {
                console.log("Error adding network:", error);
            }
        });
    }

    function listGANet(){
        $("#connectedNodes").attr("count", "0");

        $.get("/api/gan/network/list", function(data){
            $("#GANetList").empty();
            if (data.error != undefined){
                console.log(data.error);
                msgbox("Unable to load auth token for GANet", false, 5000);
                //token error or no zerotier found
                $(".gansnetworks").addClass("disabled");
                $("#GANetList").append(`<tr>
                    <td colspan="6"><i class="red times circle icon"></i> Auth token access error or not found</td>
                </tr>`);
                $(".ganControllerID").text('Access Denied');
            }else{
                var nodeCount = 0;
                data.forEach(function(gan){
                    $("#GANetList").append(`<tr class="ganetEntry" addr="${gan.nwid}">
                        <td><a href="#" onclick="event.preventDefault(); openGANetDetails('${gan.nwid}');">${gan.nwid}</a></td>
                        <td>${gan.name}</td>
                        <td class="gandesc" addr="${gan.nwid}"></td>
                        <td class="ganetSubnet"></td>
                        <td class="ganetNodes"></td>
                        <td>
                            <button onclick="openGANetDetails('${gan.nwid}');" class="ui tiny basic icon button" title="Edit Network"><i class="edit icon"></i></button>
                            <button onclick="removeGANet('${gan.nwid}');" class="ui tiny basic icon button" title="Remove Network"><i class="red remove icon"></i></button>
                        </td>
                    </tr>`);

                    nodeCount += 0;
                });

                if (data.length == 0){
                    $("#GANetList").append(`<tr>
                        <td colspan="6"><i class="ui green circle check icon"></i> No Global Area Network Found on this host</td>
                    </tr>`);
                }

                $("#ganodeCount").text(nodeCount);
                $("#ganetCount").text(data.length);

                //Load description
                $(".gandesc").each(function(){
                    let addr = $(this).attr("addr");
                    let domEle = $(this);
                    $.get("/api/gan/network/name?netid=" + addr, function(data){
                        $(domEle).text(data[1]);
                    });
                });

                $(".ganetEntry").each(function(){
                    let addr = $(this).attr("addr");
                    let subnetEle = $(this).find(".ganetSubnet");
                    let nodeEle = $(this).find(".ganetNodes");

                    $.get("/api/gan/network/list?netid=" + addr, function(data){
                        if (data.routes != undefined && data.routes.length > 0){
                            
                            if (data.ipAssignmentPools != undefined && data.ipAssignmentPools.length > 0){
                                $(subnetEle).html(`${data.routes[0].target} <br> (${data.ipAssignmentPools[0].ipRangeStart} - ${data.ipAssignmentPools[0].ipRangeEnd})`);
                            }else{
                                $(subnetEle).html(`${data.routes[0].target}<br>(Unassigned Range)`);
                            }
                        }else{
                            $(subnetEle).text("Unassigned");
                        }
                        //console.log(data);
                    });

                    $.get("/api/gan/members/list?netid=" + addr, function(data){
                        $(nodeEle).text(data.length);
                        let currentNodesCount = parseInt($("#connectedNodes").attr("count"));
                        currentNodesCount += data.length;
                        $("#connectedNodes").attr("count", currentNodesCount);
                        $("#ganodeCount").text($("#connectedNodes").attr("count"));
                    })
                });
            }
        })
    }

    //Remove the given GANet
    function removeGANet(netid){
        if (confirm("Confirm remove Network " + netid + " PERMANENTLY ?"))
        $.ajax({
            url: "/api/gan/network/remove",
            type: "POST",
            dataType: "json",
            data: {
                id: netid,
            },
            success: function(data){
                if (data.error != undefined){
                    msgbox(data.error, false, 5000);
                }else{
                    msgbox("Net " + netid + " removed");
                }
                listGANet();
            }
        });
    }

    function openGANetDetails(netid){
        $("#ganetWindow").load("./components/gandetails.html", function(){
            setTimeout(function(){
                initGanetDetails(netid);
            });
        });
       
    }

    //Bind event to tab switch
    tabSwitchEventBind["gan"] = function(){
        //On switch over to this page, load info
        listGANet();
        initGANetID();
    }
</script>