2019-03-26 12:53:42 +01:00
|
|
|
|
<%frame "frame.html"%>
|
|
|
|
|
|
|
|
|
|
<h1>Network Overview</h1>
|
2019-04-08 08:47:12 +02:00
|
|
|
|
<h2>Hosts / Nodes <span class="ui-icon ui-icon-refresh" onclick="$('#nodeTable').DataTable().ajax.reload(null, false);"></span></h2>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<table id="nodeTable"></table>
|
|
|
|
|
</div>
|
2019-03-26 12:53:42 +01:00
|
|
|
|
|
|
|
|
|
<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>
|
2019-04-11 13:05:07 +02:00
|
|
|
|
<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>
|
2019-03-26 12:53:42 +01:00
|
|
|
|
<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();
|
2019-04-11 13:05:07 +02:00
|
|
|
|
$("#dDeviceType").prop("disabled",true).selectmenu().val("");
|
2019-03-26 12:53:42 +01:00
|
|
|
|
|
|
|
|
|
} 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();
|
2019-04-04 19:34:19 +02:00
|
|
|
|
$.each( node.URIs, function(){ $("#dURIs").append($("<span>" + this.Scheme + "://" + this.Host + ":" + this.Port + (this.Fragment ? "#" + this.Fragment : "") + "</span><br>")); } );
|
2019-03-26 12:53:42 +01:00
|
|
|
|
|
|
|
|
|
$("#dInterfaces").empty();
|
|
|
|
|
$.each( node.Interfaces, function(){
|
|
|
|
|
var intf = this;
|
2019-04-02 01:25:44 +02:00
|
|
|
|
$.each( intf.ConfiguredIPs, function(){
|
|
|
|
|
$("#dInterfaces").append( $( "<option value='"+ this.Network +"'>" + this.IP + "[ " + intf.Name + " ]</option>" ) );
|
2019-03-26 12:53:42 +01:00
|
|
|
|
});
|
|
|
|
|
});
|
2019-04-11 13:05:07 +02:00
|
|
|
|
|
|
|
|
|
$("#dDeviceType").prop("disabled",false).selectmenu().val(this.DeviceType);
|
|
|
|
|
|
2019-03-26 12:53:42 +01:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$("#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" },
|
2019-04-11 13:05:07 +02:00
|
|
|
|
{ title: "Gerätetyp", data: "DeviceType" },
|
2019-03-26 12:53:42 +01:00
|
|
|
|
{ title: "Standort", data: "Location", render: function(d,t,r){ return d.Latitude + "/" + d.Longitude; } }
|
|
|
|
|
],
|
|
|
|
|
columnDefs: [
|
|
|
|
|
{ targets: 0, data: null, defaultContent: "<button>?</button>" }
|
|
|
|
|
],
|
|
|
|
|
select: "single",
|
|
|
|
|
height: 300,
|
2019-04-08 08:47:12 +02:00
|
|
|
|
fixedHeader: true,
|
|
|
|
|
ajax: {
|
|
|
|
|
url: "/collections/Node",
|
|
|
|
|
dataSrc: ""
|
|
|
|
|
}
|
2019-03-26 12:53:42 +01:00
|
|
|
|
})
|
|
|
|
|
.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()
|
|
|
|
|
{
|
2019-04-08 08:47:12 +02:00
|
|
|
|
$("#nodeTable").DataTable().ajax.reload(null, false);
|
2019-03-26 12:53:42 +01:00
|
|
|
|
}
|
2019-04-15 09:18:41 +02:00
|
|
|
|
|
|
|
|
|
|
2019-03-26 12:53:42 +01:00
|
|
|
|
|
|
|
|
|
showNode(null);
|
2019-04-08 08:47:12 +02:00
|
|
|
|
//refreshNodeTable();
|
2019-03-26 12:53:42 +01:00
|
|
|
|
|
|
|
|
|
</script>
|