130 lines
4.8 KiB
HTML
130 lines
4.8 KiB
HTML
<%frame "frame.html"%>
|
|
|
|
<h1>Network HopTable</h1>
|
|
<h2>Hosts / Nodes</h2>
|
|
<table id="nodeTable"></table>
|
|
|
|
<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="dLocation">Lokalisation</label><input type="text" id="dLocation"><br>
|
|
</fieldset>
|
|
<fieldset id="dURIs">
|
|
</fieldset>
|
|
<fieldset>
|
|
<select id="dInterfaces" size="12">
|
|
</select>
|
|
</fieldset>
|
|
<fieldset>
|
|
<select id="dPath" 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();
|
|
$("#dPath").empty();
|
|
|
|
} 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 + "</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>" ) );
|
|
});
|
|
});
|
|
|
|
skyapi().call("api/network","GetHopTable", [ node.ID ], function(neighbors){
|
|
$("#nodeTable").DataTable().clear().rows.add( neighbors ).draw();
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
$("#nodeTable").DataTable({
|
|
columns: [
|
|
{ title: "", data: null },
|
|
{ title: "Bezeichnung", data: "Node.Name" },
|
|
{ title: "Primäre IP", data: "Node.PrimaryIP" },
|
|
{ title: "Primäre MAC", data: "Node.PrimaryMac" },
|
|
{ title: "Hop Count", data: "HopCount" }
|
|
],
|
|
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.Node);
|
|
|
|
$("#dPath").empty();
|
|
$.each( selNode.Path, function(){
|
|
var p = this;
|
|
$("#dPath").append( $( "<option value='"+ p +"'>" + p + "</option>" ) );
|
|
});
|
|
|
|
};
|
|
})
|
|
.on( "deselect", function(e,dt,type,indexes){
|
|
showNode(null);
|
|
});
|
|
|
|
function refreshNodeTable()
|
|
{
|
|
skyapi().call("api/network","GetHopTable",[],
|
|
function(rows){
|
|
$("#nodeTable").DataTable().clear().rows.add( rows ).draw();
|
|
});
|
|
}
|
|
|
|
showNode(null);
|
|
refreshNodeTable();
|
|
|
|
</script>
|