ln.skyscanner/templates/static/network/nodes.html

<%frame "frame.html"%>

<h1>Network Overview</h1>
<h2>Hosts / Nodes
    <span class="ui-icon ui-icon-refresh" onclick="$('#nodeTable').DataTable().ajax.reload(null, false);"></span>
    <a href="" onclick="LN().rpc('entities','SyncSkytron',[],function(r,e){}); return false;">Sync with Skytron CRM</a>
</h2>

<div>
    <table id="nodeTable"></table>
</div>

<h2>Details</h2>
<div class="flex row">
    <fieldset style="max-width: 500px;">
        <label for="dName">Bezeichnung</label><input type="text" id="dName"><br>
        <label for="dPrimaryIP">Primäre IP</label><input type="text" id="dPrimaryIP"><br>
        <label for="dPrimaryMac">Primäre MAC</label><input type="text" id="dPrimaryMac"><br>
        <label for="dCreated">Erstellt</label><input type="text" id="dCreated" readonly="true"><br>
        <label for="dLastUpdate">Letztes Update</label><input type="text" id="dLastUpdate" readonly="true">
    </fieldset>
    <fieldset style="max-width: 500px;">
        <label for="dVendor">Hersteller</label><input type="text" id="dVendor"><br>
        <label for="dProduct">Modell</label><input type="text" id="dProduct"><br>
        <label for="dProductLine">Modellzeile</label><input type="text" id="dProductLine"><br>
        <label for="dDeviceType">Gerätetyp</label><select id="dDeviceType">
            <option value="UNKNOWN">-</option>
            <option value="ROUTER">Router</option>
            <option value="PTP">PtP</option>
            <option value="PTMP">PtmP</option>
            <option value="UPS">USV</option>
            <option value="SERVER">Server</option>
        </select>
        <label for="dLocation">Lokalisation</label><input type="text" id="dLocation"><br>
    </fieldset>
    <fieldset id="dURIs">
    </fieldset>
    <fieldset>
        <select id="dInterfaces" size="12">
        </select>
    </fieldset>
</div>

<script type="text/javascript">
    
    function showNode(node)
    {
        if (node == null)
        {
            $("#dName").prop("disabled", true).val("");
            $("#dPrimaryIP").prop("disabled", true).val("");
            $("#dPrimaryMac").prop("disabled", true).val("");
            $("#dCreated").prop("disabled", true).val("");
            $("#dLastUpdate").prop("disabled", true).val("");

            $("#dVendor").prop("disabled", true).val("");
            $("#dProduct").prop("disabled", true).val("");
            $("#dProductLine").prop("disabled", true).val("");
            $("#dLocation").prop("disabled", true).val("");
    
            $("#dURIs").empty();
            $("#dInterfaces").empty();
            $("#dDeviceType").prop("disabled",true).selectmenu().val("");
    
        } else {
            $("#dName").prop("disabled", false).val(node.Name);
            $("#dPrimaryIP").prop("disabled", true).val(node.PrimaryIP);
            $("#dPrimaryMac").prop("disabled", true).val(node.PrimaryMac);
            $("#dCreated").prop("disabled", true).val(node.Created);
            $("#dLastUpdate").prop("disabled", true).val(node.LastUpdate);
    
            $("#dVendor").prop("disabled", false).val(node.Vendor);
            $("#dProduct").prop("disabled", false).val(node.Product);
            $("#dProductLine").prop("disabled", false).val(node.ProductLine);
            $("#dLocation").prop("disabled", false).val(node.Location.Latitude + " / " + node.Location.Longitude);
    
            $("#dURIs").empty();
            $.each( node.URIs, function(){ $("#dURIs").append($("<span>" + this.Scheme + "://" + this.Host + ":" + this.Port + (this.Fragment ? "#" + this.Fragment : "") + "</span><br>")); } );
    
            $("#dInterfaces").empty();
            $.each( node.Interfaces, function(){
                var intf = this;
                $.each( intf.ConfiguredIPs, function(){
                    $("#dInterfaces").append( $( "<option value='"+ this.Network +"'>" + this.IP + "[ " + intf.Name + " ]</option>" ) );
                });
            });

            $("#dDeviceType").prop("disabled",false).selectmenu().val(this.DeviceType);

        }
    }
    
    $("#dInterfaces").change( function(e){
        skyapi().call("api/network","GetHostsInSubnet", [ $(this).children("option:selected").val() ], function(neighbors){
                $("#nodeTable").DataTable().clear().rows.add( neighbors ).draw();
            });
    });
    
    $("#nodeTable").DataTable({
        columns: [
            { title: "", data: null },
            { title: "Bezeichnung", data: "Name" },
            { title: "Primäre IP", data: "PrimaryIP" },
            { title: "Primäre MAC", data: "PrimaryMac" },
            { title: "Erstellt", data: "Created" },
            { title: "Letztes Update", data: "LastUpdate" },
            { title: "Hersteller", data: "Vendor" },
            { title: "Produkt", data: "Product" },
            { title: "Gerätetyp", data: "DeviceType" },
            { title: "Standort", data: "Location", render: function(d,t,r){ return d.Latitude + "/" + d.Longitude; } },
            { title: "UniqueIdentity", data: "UniqueIdentity" }
        ],
        columnDefs: [
            { targets: 0, data: null, defaultContent: "<button>?</button>" }
        ],
        select: "single",
        height: 300,
        fixedHeader: true,
    })
    .on( "select", function(e,dt,type,indexes){
            if (indexes.length > 0)
            {
                var selNode = dt.rows( indexes ).data()[0];
                showNode(selNode);
            };
    })
    .on( "deselect", function(e,dt,type,indexes){
        showNode(null);
    });
    
    function refreshNodeTable()
    {
    }
   
    
    
    showNode(null);
    //refreshNodeTable();

    LN().rpc("entities","GetNodes",[],function(r,e){
        console.log("received " + r.length + " nodes");

        $("#nodeTable").DataTable()
            .clear()
            .rows
                .add(r);
    });
    
</script>