luci-app-bmx7: refactory, multiple fixes and add topology graph
Signed-off-by: p4u <p4u@dabax.net>
This commit is contained in:
p4u
parent
3d97690ba3
commit
a1e102093f
10 changed files with 1005 additions and 196 deletions
|
|
@ -59,9 +59,19 @@ function index()
|
||||||
entry(place,call("action_status_j"),"Status",0)
|
entry(place,call("action_status_j"),"Status",0)
|
||||||
table.remove(place)
|
table.remove(place)
|
||||||
|
|
||||||
-- Nodes list
|
-- Topology
|
||||||
|
table.insert(place,"Topology")
|
||||||
|
entry(place,call("topology"),"Topology",1)
|
||||||
|
table.remove(place)
|
||||||
|
|
||||||
|
-- Nodes
|
||||||
table.insert(place,"Nodes")
|
table.insert(place,"Nodes")
|
||||||
entry(place,call("action_nodes_j"),"Nodes",1)
|
entry(place,call("action_nodes_j"),"Nodes",2)
|
||||||
|
table.remove(place)
|
||||||
|
|
||||||
|
-- Tunnels
|
||||||
|
table.insert(place,"Gateways")
|
||||||
|
entry(place,call("action_tunnels_j"),"Gateways",3)
|
||||||
table.remove(place)
|
table.remove(place)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
@ -70,8 +80,14 @@ function action_status_j()
|
||||||
luci.template.render("bmx7/status_j", {})
|
luci.template.render("bmx7/status_j", {})
|
||||||
end
|
end
|
||||||
|
|
||||||
function action_nodes_j()
|
function action_tunnels_j()
|
||||||
local http = require "luci.http"
|
luci.template.render("bmx7/tunnels_j", {})
|
||||||
local link_non_js = "/cgi-bin/luci" .. http.getenv("PATH_INFO") .. '/nodes_nojs'
|
end
|
||||||
luci.template.render("bmx7/nodes_j", {link_non_js=link_non_js})
|
|
||||||
|
function topology()
|
||||||
|
luci.template.render("bmx7/topology", {})
|
||||||
|
end
|
||||||
|
|
||||||
|
function action_nodes_j()
|
||||||
|
luci.template.render("bmx7/nodes_j", {})
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<div class="cbi-map">
|
||||||
|
<div class="cbi-section">
|
||||||
|
<legend><%:Bmx7 mesh nodes%></legend>
|
||||||
|
<div class="cbi-section-node">
|
||||||
|
<div class="table" id="nodes_div">
|
||||||
|
<div class="tr table-titles">
|
||||||
|
<div class="th"><%:Name%></div>
|
||||||
|
<div class="th"><%:Short ID%></div>
|
||||||
|
<div class="th"><%:S/s/T/t%></div>
|
||||||
|
<div class="th"><%:Primary IPv6%></div>
|
||||||
|
<div class="th"><%:Via Neighbour%></div>
|
||||||
|
<div class="th"><%:Device%></div>
|
||||||
|
<div class="th"><%:Metric%></div>
|
||||||
|
<div class="th"><%:Last Ref%></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="<%=resource%>/bmx7/js/polling.js"></script>
|
||||||
|
<script type="text/javascript">//<![CDATA[
|
||||||
|
new TablePooler(10,"/cgi-bin/bmx7-info", {'$originators':''}, "nodes_div", function(st){
|
||||||
|
var originators = st.originators;
|
||||||
|
var res = Array();
|
||||||
|
originators.forEach(function(originator,i){
|
||||||
|
var name = originator.name;
|
||||||
|
var shortId = originator.shortId;
|
||||||
|
var SsTt = originator.S+'/'+originator.s+'/'+originator.T+'/'+originator.t;
|
||||||
|
var primaryIp = originator.primaryIp;
|
||||||
|
var nbName = originator.nbName;
|
||||||
|
var dev = originator.dev;
|
||||||
|
var metric = originator.metric;
|
||||||
|
var lastRef = originator.lastRef;
|
||||||
|
res.push([name, shortId, SsTt, primaryIp,
|
||||||
|
nbName, dev, metric, lastRef]);
|
||||||
|
});
|
||||||
|
return res;
|
||||||
|
});
|
||||||
|
//]]></script>
|
||||||
|
|
@ -27,19 +27,16 @@
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
div.hideme{
|
div.hideme{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.info{
|
div.info{
|
||||||
background: #FFF;
|
background: #FFF;
|
||||||
border: solid 0px;
|
border: solid 0px;
|
||||||
height: 90px;
|
height: 190px;
|
||||||
display: block;
|
display: block;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.inforow{
|
div.inforow{
|
||||||
text-align:left;
|
text-align:left;
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
|
|
@ -48,18 +45,15 @@
|
||||||
float: left;
|
float: left;
|
||||||
white-space:nowrap;
|
white-space:nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.inforow.newline{
|
div.inforow.newline{
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
u {
|
u {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
#extra-info ul { list-style: none outside none; margin-left: 0em; }
|
#extra-info ul { list-style: none outside none; margin-left: 0em; }
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="cbi-map">
|
<div class="cbi-map">
|
||||||
|
|
||||||
<h2>Mesh nodes</h2>
|
<h2>Mesh nodes</h2>
|
||||||
|
|
@ -70,40 +64,38 @@
|
||||||
Tip: click the <img src="<%=resource%>/bmx7/world.png" /> icon to see individual node information.
|
Tip: click the <img src="<%=resource%>/bmx7/world.png" /> icon to see individual node information.
|
||||||
</center>
|
</center>
|
||||||
</div>
|
</div>
|
||||||
<fieldset class="cbi-section">
|
|
||||||
|
|
||||||
|
<div class="cbi-section">
|
||||||
<legend><%:Originators%></legend>
|
<legend><%:Originators%></legend>
|
||||||
<table class="cbi-section-table" id="descriptions_table">
|
<div class="cbi-section-node">
|
||||||
<tr class="cbi-section-table-titles">
|
<div class="table" id="nodes_div">
|
||||||
<th class="cbi-section-table-cell"></th>
|
<div class="tr table-titles">
|
||||||
<th class="cbi-section-table-cell"><%:Name%></th>
|
<div class="th"></div>
|
||||||
<th class="cbi-section-table-cell"><%:Short ID%></th>
|
<div class="th"><%:Name%></div>
|
||||||
<th class="cbi-section-table-cell"><%:S/s/T/t%></th>
|
<div class="th"><%:Short ID%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Primary IPv6 address%></th>
|
<div class="th"><%:S/s/T/t%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Via neighbour%></th>
|
<div class="th"><%:Primary IPv6%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Metric%></th>
|
<div class="th"><%:Via Neighbour%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Last desc.%></th>
|
<div class="th"><%:Metric%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Last ref.%></th>
|
<div class="th"><%:Last Desc%></div>
|
||||||
<th class="cbi-section-table-cell"><%: %></th>
|
<div class="th"><%:Last Ref%></div>
|
||||||
</tr>
|
<div class="th"><%: %></div>
|
||||||
<tr class="cbi-section-table-row">
|
</div>
|
||||||
<td colspan="11"><br /><center><em><%:Collecting data...%></em></center></td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
</table>
|
</div>
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">//<![CDATA[
|
<script type="text/javascript">//<![CDATA[
|
||||||
var displayExtraInfo = function ( id ) {
|
var displayExtraInfo = function ( id ) {
|
||||||
console.log('aaa'+id)
|
|
||||||
document.getElementById('extra-info').innerHTML = document.getElementById(id).innerHTML;
|
document.getElementById('extra-info').innerHTML = document.getElementById(id).innerHTML;
|
||||||
}
|
}
|
||||||
|
new TablePooler(5,"/cgi-bin/bmx7-info", {'$originators':''}, "nodes_div", function(st){
|
||||||
new TablePooler(5,"/cgi-bin/bmx7-info", {'$originators':''}, "descriptions_table", function(st){
|
|
||||||
var infoicon = "<%=resource%>/bmx7/world_small.png";
|
var infoicon = "<%=resource%>/bmx7/world_small.png";
|
||||||
var originators = st.originators;
|
var originators = st.originators;
|
||||||
var res = Array();
|
var res = Array();
|
||||||
|
|
||||||
originators.forEach(function(originator,i){
|
originators.forEach(function(originator,i){
|
||||||
var name = originator.name;
|
var name = originator.name;
|
||||||
var shortId = originator.shortId;
|
var shortId = originator.shortId;
|
||||||
|
|
@ -119,57 +111,45 @@
|
||||||
var metric = originator.metric;
|
var metric = originator.metric;
|
||||||
var lastDesc = originator.lastDesc;
|
var lastDesc = originator.lastDesc;
|
||||||
var lastRef = originator.lastRef;
|
var lastRef = originator.lastRef;
|
||||||
|
|
||||||
var extrainfo = '<a onclick="displayExtraInfo(\'ip-' + i + '\')"><img src="' + infoicon + '" / ></a>';
|
var extrainfo = '<a onclick="displayExtraInfo(\'ip-' + i + '\')"><img src="' + infoicon + '" / ></a>';
|
||||||
var extrainfo_link = '<a onclick="displayExtraInfo(\'ip-' + i + '\')">' + '<img src="' + infoicon + '" />' + '</a>';
|
var extrainfo_link = '<a onclick="displayExtraInfo(\'ip-' + i + '\')">' + '<img src="' + infoicon + '" />' + '</a>';
|
||||||
|
|
||||||
extrainfo = '<div id="ip-'+ i +'" class="hideme">'
|
|
||||||
|
|
||||||
|
extrainfo = '<div id="ip-'+ i +'" class="hideme">'
|
||||||
+ "<div class='inforow'>"
|
+ "<div class='inforow'>"
|
||||||
+ "<h4><u>" + name + '</u></h4>\n'
|
+ "<h4><u>" + name + '</u></h4>\n'
|
||||||
+ 'Node ID: ' + nodeId + "</div>"
|
+ 'Node ID: ' + shortId + "</div>"
|
||||||
|
|
||||||
+ "<div class='inforow'>"
|
+ "<div class='inforow'>"
|
||||||
+ "<h5>Primary IPv6 address</h5>\n"
|
+ "<h5>Primary IPv6 address</h5>\n"
|
||||||
+ primaryIp + "</div>\n"
|
+ primaryIp + "</div>\n"
|
||||||
|
|
||||||
+ "<div class='inforow'>"
|
+ "<div class='inforow'>"
|
||||||
+ "<h5>Support & Trust</h5>\n"
|
+ "<h5>Support & Trust</h5>\n"
|
||||||
+ SsTt + "</div>\n"
|
+ SsTt + "</div>\n"
|
||||||
|
|
||||||
+ "<div class='inforow'>"
|
+ "<div class='inforow'>"
|
||||||
+ "<h5>Node key</h5>\n"
|
+ "<h5>Node key</h5>\n"
|
||||||
+ nodeKey + "</div>\n"
|
+ nodeKey + "</div>\n"
|
||||||
|
|
||||||
+ "<div class='inforow newline'>"
|
+ "<div class='inforow newline'>"
|
||||||
+ "<h5>Via neighbour</h5>\n"
|
+ "<h5>Via neighbour</h5>\n"
|
||||||
+ nbName + "</div>\n"
|
+ nbName + "</div>\n"
|
||||||
|
|
||||||
+ "<div class='inforow'>"
|
+ "<div class='inforow'>"
|
||||||
+ "<h5>Via device</h5>\n"
|
+ "<h5>Via device</h5>\n"
|
||||||
+ dev + "</div>\n"
|
+ dev + "</div>\n"
|
||||||
|
|
||||||
+ "<div class='inforow'>"
|
+ "<div class='inforow'>"
|
||||||
+ "<h5>Via remote link-local IPv6 address</h5>\n"
|
+ "<h5>Via link-local IPv6</h5>\n"
|
||||||
+ nbLocalIp + "</div>\n"
|
+ nbLocalIp + "</div>\n"
|
||||||
|
|
||||||
+ "<div class='inforow'>"
|
+ "<div class='inforow'>"
|
||||||
+ "<h5>Route metric</h5>\n"
|
+ "<h5>Route metric</h5>\n"
|
||||||
+ metric + "</div>\n"
|
+ metric + "</div>\n"
|
||||||
|
|
||||||
+ "<div class='inforow'>"
|
+ "<div class='inforow'>"
|
||||||
+ "<h5>Desc. size</h5>\n"
|
+ "<h5>Desc. size</h5>\n"
|
||||||
+ descSize + "</div>\n"
|
+ descSize + "</div>\n"
|
||||||
|
|
||||||
+ "\n</div>";
|
+ "\n</div>";
|
||||||
|
|
||||||
res.push([extrainfo_link, name, shortId, SsTt, primaryIp,
|
res.push([extrainfo_link, name, shortId, SsTt, primaryIp,
|
||||||
nbName, metric, lastDesc, lastRef, extrainfo]);
|
nbName, metric, lastDesc, lastRef, extrainfo]);
|
||||||
|
|
||||||
});
|
});
|
||||||
return res;
|
return res;
|
||||||
});
|
});
|
||||||
//]]></script>
|
//]]></script>
|
||||||
|
|
||||||
<%+footer%>
|
<%+footer%>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,30 +2,6 @@
|
||||||
<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
|
<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
|
||||||
<script type="text/javascript" src="<%=resource%>/bmx7/js/polling.js"></script>
|
<script type="text/javascript" src="<%=resource%>/bmx7/js/polling.js"></script>
|
||||||
|
|
||||||
<style>
|
|
||||||
div.hideme{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.info{
|
|
||||||
background: #FFF;
|
|
||||||
border: solid 1px;
|
|
||||||
height: 80px;
|
|
||||||
display: block;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.inforow{
|
|
||||||
text-align:left;
|
|
||||||
display:inline-block;
|
|
||||||
width:20%;
|
|
||||||
margin:5px;
|
|
||||||
vertical-align:top;
|
|
||||||
}
|
|
||||||
|
|
||||||
#extra-info ul { list-style: none outside none; margin-left: 0em; }
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="cbi-map">
|
<div class="cbi-map">
|
||||||
<center>
|
<center>
|
||||||
<img src="<%=resource%>/bmx7/bmx7logo.png" />
|
<img src="<%=resource%>/bmx7/bmx7logo.png" />
|
||||||
|
|
@ -38,145 +14,117 @@
|
||||||
|
|
||||||
<div class="cbi-map-descr"></div>
|
<div class="cbi-map-descr"></div>
|
||||||
|
|
||||||
<fieldset class="cbi-section">
|
<div class="cbi-section">
|
||||||
<legend><%:Node configuration%></legend>
|
<legend><%:Node configuration%></legend>
|
||||||
<table class="cbi-section-table" id="config_table">
|
<div class="cbi-section-node">
|
||||||
<tr class="cbi-section-table-titles">
|
<div class="table" id="config_div">
|
||||||
<th class="cbi-section-table-cell"><%:Short ID%></th>
|
<div class="tr table-titles">
|
||||||
<th class="cbi-section-table-cell"><%:Node name%></th>
|
<div class="th"><%:Short ID%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Primary IPv6 address%></th>
|
<div class="th"><%:Node name%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Node key%></th>
|
<div class="th"><%:Primary IPv6 address%></div>
|
||||||
<th class="cbi-section-table-cell"><%:BMX7 revision%></th>
|
<div class="th"><%:Node key%></div>
|
||||||
</tr>
|
<div class="th"><%:Short DHash%></div>
|
||||||
<tr class="cbi-section-table-row">
|
<div class="th"><%:BMX7 revision%></div>
|
||||||
<td colspan="5"><em><br /><%:Collecting data...%></em></td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
</table>
|
</div>
|
||||||
</fieldset>
|
</div>
|
||||||
|
|
||||||
<fieldset class="cbi-section">
|
|
||||||
|
<div class="cbi-section">
|
||||||
<legend><%:Node status%></legend>
|
<legend><%:Node status%></legend>
|
||||||
<table class="cbi-section-table" id="status_table">
|
<div class="cbi-section-node">
|
||||||
<tr class="cbi-section-table-titles">
|
<div class="table" id="status_div">
|
||||||
<th class="cbi-section-table-cell"><%:Nodes seen%></th>
|
<div class="tr table-titles">
|
||||||
<th class="cbi-section-table-cell"><%:Neighbours%></th>
|
<div class="th"><%:Nodes seen%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Tunnelled IPv6 address%></th>
|
<div class="th"><%:Neighbours%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Tunnelled IPv4 address%></th>
|
<div class="th"><%:Tunnelled IPv6 address%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Uptime%></th>
|
<div class="th"><%:Tunnelled IPv4 address%></div>
|
||||||
<th class="cbi-section-table-cell"><%:CPU usage%></th>
|
<div class="th"><%:Uptime%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Memory usage%></th>
|
<div class="th"><%:CPU usage%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Tx queue%></th>
|
<div class="th"><%:Memory usage%></div>
|
||||||
|
<div class="th"><%:Tx queue%></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</tr>
|
<div class="cbi-section">
|
||||||
<tr class="cbi-section-table-row">
|
<legend><%:Network interfaces%></legend>
|
||||||
<td colspan="8"><em><br /><%:Collecting data...%></em></td>
|
<div class="cbi-section-node">
|
||||||
</tr>
|
<div class="table" id="ifaces_div">
|
||||||
</table>
|
<div class="tr table-titles">
|
||||||
</fieldset>
|
<div class="th"><%:Interface%></div>
|
||||||
|
<div class="th"><%:State%></div>
|
||||||
|
<div class="th"><%:Type%></div>
|
||||||
|
<div class="th"><%:Max rate%></div>
|
||||||
|
<div class="th"><%:LinkLocal Ipv6%></div>
|
||||||
|
<div class="th"><%:RX BpP%></div>
|
||||||
|
<div class="th"><%:TX BpP%></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<fieldset class="cbi-section">
|
|
||||||
<legend><%:Interfaces%></legend>
|
|
||||||
<table class="cbi-section-table" id="ifaces_table">
|
|
||||||
<tr class="cbi-section-table-titles">
|
|
||||||
<th class="cbi-section-table-cell"><%:Interface%></th>
|
|
||||||
<th class="cbi-section-table-cell"><%:State%></th>
|
|
||||||
<th class="cbi-section-table-cell"><%:Type%></th>
|
|
||||||
<th class="cbi-section-table-cell"><%:Max. rate%></th>
|
|
||||||
<th class="cbi-section-table-cell"><%:Link-local IPv6 address%></th>
|
|
||||||
<th class="cbi-section-table-cell"><%:Rx BpP%></th>
|
|
||||||
<th class="cbi-section-table-cell"><%:Tx BpP%></th>
|
|
||||||
|
|
||||||
</tr>
|
<div class="cbi-section">
|
||||||
<tr class="cbi-section-table-row">
|
|
||||||
<td colspan="7"><em><br /><%:Collecting data...%></em></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset class="cbi-section">
|
|
||||||
<legend><%:Links%></legend>
|
<legend><%:Links%></legend>
|
||||||
<table class="cbi-section-table" id="links_table">
|
<div class="cbi-section-node">
|
||||||
<tr class="cbi-section-table-titles">
|
<div class="table" id="links_div">
|
||||||
<th class="cbi-section-table-cell"><%:Short ID%></th>
|
<div class="tr table-titles">
|
||||||
<th class="cbi-section-table-cell"><%:Name%></th>
|
<div class="th"><%:Short ID%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Link key%></th>
|
<div class="th"><%:Name%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Remote link-local IPv6 address%></th>
|
<div class="th"><%:Link key%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Device%></th>
|
<div class="th"><%:Remote linklocal IPv6%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Rx rate%></th>
|
<div class="th"><%:Device%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Tx rate%></th>
|
<div class="th"><%:RX rate%></div>
|
||||||
<th class="cbi-section-table-cell"><%:Routes%></th>
|
<div class="th"><%:TX rate%></div>
|
||||||
|
<div class="th"><%:Routes%></div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="cbi-section-table-row">
|
</div>
|
||||||
<td colspan="8"><em><br /><%:Collecting data...%></em></td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
</table>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">//<![CDATA[
|
<script type="text/javascript">//<![CDATA[
|
||||||
new TablePooler(1,"/cgi-bin/bmx7-info", {'$info':''}, "config_table", function(st){
|
new TablePooler(1,"/cgi-bin/bmx7-info", {'$info':''}, "config_div", function(st){
|
||||||
var res = Array();
|
var res = Array();
|
||||||
var sta = st.info[0].status;
|
var sta = st.info[0].status;
|
||||||
var ifaces = st.info[1].interfaces;
|
res.push([sta.shortId, sta.name, sta.primaryIp, sta.nodeKey, sta.shortDhash, sta.revision]);
|
||||||
|
|
||||||
res.push([sta.shortId, sta.name, sta.primaryIp, sta.nodeKey, sta.revision]);
|
|
||||||
res.push(['','','','',''])
|
|
||||||
res.push(['','','','',''])
|
|
||||||
|
|
||||||
return res;
|
return res;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
new TablePooler(1,"/cgi-bin/bmx7-info", {'$info':''}, "status_div", function(st){
|
||||||
new TablePooler(1,"/cgi-bin/bmx7-info", {'$info':''}, "status_table", function(st){
|
|
||||||
var res = Array();
|
var res = Array();
|
||||||
var sta = st.info[0].status;
|
var sta = st.info[0].status;
|
||||||
var mem = st.info[3].memory;
|
var mem = st.info[3].memory.bmx7;
|
||||||
|
|
||||||
var txQ = sta.txQ.split('/');
|
var txQ = sta.txQ.split('/');
|
||||||
console.log(txQ)
|
|
||||||
|
|
||||||
var ptxQ = '<p style="color:rgb('+parseInt(255*txQ[0]/txQ[1])+','+parseInt(128*(txQ[1]-txQ[0])/txQ[1])+',0)")>'+sta.txQ+'</p>';
|
var ptxQ = '<p style="color:rgb('+parseInt(255*txQ[0]/txQ[1])+','+parseInt(128*(txQ[1]-txQ[0])/txQ[1])+',0)")>'+sta.txQ+'</p>';
|
||||||
console.log(ptxQ)
|
res.push([sta.nodes, sta.nbs, sta.tun6Address, sta.tun4Address, sta.uptime, sta.cpu, mem, ptxQ]);
|
||||||
|
|
||||||
res.push([sta.nodes, sta.nbs, sta.tun6Address, sta.tun4Address, sta.uptime, sta.cpu, mem.bmx7, ptxQ]);
|
|
||||||
|
|
||||||
res.push(['','','','','','','',''])
|
|
||||||
res.push(['','','','','','','',''])
|
|
||||||
|
|
||||||
return res;
|
return res;
|
||||||
});
|
});
|
||||||
|
|
||||||
new TablePooler(1,"/cgi-bin/bmx7-info", {'$info':''}, "ifaces_table", function(st){
|
new TablePooler(1,"/cgi-bin/bmx7-info", {'$info':''}, "ifaces_div", function(st){
|
||||||
var res = Array();
|
var res = Array();
|
||||||
var sta = st.info[0].status;
|
|
||||||
var ifaces = st.info[1].interfaces;
|
var ifaces = st.info[1].interfaces;
|
||||||
|
|
||||||
ifaces.forEach(function(iface){
|
ifaces.forEach(function(iface){
|
||||||
res.push([iface.dev, iface.state, iface.type, iface.rateMax, iface.localIp, iface.rxBpP, iface.txBpP]);
|
res.push([iface.dev, iface.state, iface.type, iface.rateMax, iface.localIp, iface.rxBpP, iface.txBpP]);
|
||||||
});
|
});
|
||||||
res.push(['','','','','','',''])
|
|
||||||
if (ifaces.length % 2 == 0)
|
|
||||||
res.push('')
|
|
||||||
res.push(['','','','','','',''])
|
|
||||||
return res;
|
return res;
|
||||||
});
|
});
|
||||||
|
|
||||||
new TablePooler(1,"/cgi-bin/bmx7-info", {'links':''}, "links_table", function(st){
|
new TablePooler(1,"/cgi-bin/bmx7-info", {'$info':''}, "links_div", function(st){
|
||||||
var res = Array();
|
var res = Array();
|
||||||
links = st.links;
|
links = st.info[2].links;
|
||||||
|
|
||||||
links.forEach(function(link){
|
links.forEach(function(link){
|
||||||
res.push([link.shortId, link.name, link.linkKey, link.nbLocalIp, link.dev, link.rxRate, link.txRate, link.routes]);
|
res.push([link.shortId, link.name, link.linkKey, link.nbLocalIp, link.dev, link.rxRate, link.txRate, link.rts]);
|
||||||
});
|
});
|
||||||
res.push(['','','','','','','',''])
|
|
||||||
if (links.length % 2 == 0)
|
|
||||||
res.push([])
|
|
||||||
res.push(['','','','','','','',''])
|
|
||||||
return res;
|
return res;
|
||||||
});
|
});
|
||||||
|
|
||||||
//]]></script>
|
//]]></script>
|
||||||
|
|
||||||
<%+footer%>
|
<%+footer%>
|
||||||
|
|
|
||||||
54
luci-app-bmx7/files/usr/lib/lua/luci/view/bmx7/topology.htm
Normal file
54
luci-app-bmx7/files/usr/lib/lua/luci/view/bmx7/topology.htm
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
<%+header%>
|
||||||
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
|
||||||
|
<script type="text/javascript" src="<%=resource%>/bmx7/js/netjsongraph.js"></script>
|
||||||
|
|
||||||
|
<link href="<%=resource%>/bmx7/css/netjsongraph.css" rel="stylesheet">
|
||||||
|
<style type="text/css">
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.njg-overlay{
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
min-width: 200px;
|
||||||
|
max-width: 400px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
padding: 0 15px;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.njg-node {
|
||||||
|
fill: #008000;
|
||||||
|
fill-opacity: 0.8;
|
||||||
|
stroke: #008000;
|
||||||
|
stroke-width: 1px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.njg-node:hover,
|
||||||
|
.njg-node.njg-open{
|
||||||
|
fill-opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.njg-link {
|
||||||
|
stroke: #00ff00;
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-opacity: .5;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.njg-link:hover,
|
||||||
|
.njg-link.njg-open{
|
||||||
|
stroke-width: 3;
|
||||||
|
stroke-opacity: 1
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>d3.netJsonGraph("/cgi-bin/bmx7-info?netjson/network-graph.json", { defaultStyle: false });</script>
|
||||||
|
<%+footer%>
|
||||||
|
|
||||||
76
luci-app-bmx7/files/usr/lib/lua/luci/view/bmx7/tunnels_j.htm
Normal file
76
luci-app-bmx7/files/usr/lib/lua/luci/view/bmx7/tunnels_j.htm
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
<%#
|
||||||
|
Copyright (C) 2011 Pau Escrich <pau@dabax.net>
|
||||||
|
Contributors Lluis Esquerda <eskerda@gmail.com>
|
||||||
|
|
||||||
|
This program is free software; you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU General Public License as published by
|
||||||
|
the Free Software Foundation; either version 2 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU General Public License along
|
||||||
|
with this program; if not, write to the Free Software Foundation, Inc.,
|
||||||
|
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
||||||
|
|
||||||
|
The full GNU General Public License is included in this distribution in
|
||||||
|
the file called "COPYING".
|
||||||
|
-%>
|
||||||
|
|
||||||
|
|
||||||
|
<%+header%>
|
||||||
|
<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
|
||||||
|
<script type="text/javascript" src="<%=resource%>/bmx7/js/polling.js"></script>
|
||||||
|
|
||||||
|
<div class="cbi-map">
|
||||||
|
<h2>Gateway announcements</h2>
|
||||||
|
<div class="cbi-map-descr">Networks announced by mesh nodes</div>
|
||||||
|
|
||||||
|
<div class="cbi-section">
|
||||||
|
<legend><%:Announcements%></legend>
|
||||||
|
<div class="cbi-section-node">
|
||||||
|
<div class="table" id="tunnels_div">
|
||||||
|
<div class="tr table-titles">
|
||||||
|
<div class="th"><%:Status%></div>
|
||||||
|
<div class="th"><%:Name%></div>
|
||||||
|
<div class="th"><%:Node%></div>
|
||||||
|
<div class="th"><%:Network%></div>
|
||||||
|
<div class="th"><%:Bandwith%></div>
|
||||||
|
<div class="th"><%:Local net%></div>
|
||||||
|
<div class="th"><%:Path Metric%></div>
|
||||||
|
<div class="th"><%:Tun Metric%></div>
|
||||||
|
<div class="th"><%:Rating%></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript">//<![CDATA[
|
||||||
|
new TablePooler(5,"/cgi-bin/bmx7-info", {'$tunnels':''}, "tunnels_div", function(st){
|
||||||
|
var tunicon = "<%=resource%>/icons/tunnel.png";
|
||||||
|
var tunicon_dis = "<%=resource%>/icons/tunnel_disabled.png";
|
||||||
|
var applyicon = "<%=resource%>/cbi/apply.gif";
|
||||||
|
var res = Array();
|
||||||
|
for ( var k in st.tunnels ) {
|
||||||
|
var tunnel = st.tunnels[k];
|
||||||
|
var nodename = tunnel.remoteName;
|
||||||
|
var advnet = tunnel.advNet;
|
||||||
|
var status = '<img src="'+tunicon_dis+'"/>';
|
||||||
|
if ( tunnel.tunName != "---" ) status = '<img src="'+tunicon+'"/>';
|
||||||
|
if ( advnet == "0.0.0.0/0" ) advnet = "<b>Internet IPv4</b>";
|
||||||
|
if ( advnet == "::/0" ) advnet = "<b>Internet IPv6</b>";
|
||||||
|
if (nodename != "---") {
|
||||||
|
res.push([status, tunnel.tunName, nodename, advnet, tunnel.advBw, tunnel.net,
|
||||||
|
tunnel.pathMtc, tunnel.tunMtc, tunnel.rating]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
});
|
||||||
|
//]]></script>
|
||||||
|
|
||||||
|
<%+footer%>
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
.njg-overlay{
|
||||||
|
background: #fbfbfb;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
color: #6d6357;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
height: auto;
|
||||||
|
max-width: 400px;
|
||||||
|
min-width: 200px;
|
||||||
|
padding: 0 15px;
|
||||||
|
right: 10px;
|
||||||
|
top: 10px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.njg-metadata{
|
||||||
|
background: #fbfbfb;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
color: #6d6357;
|
||||||
|
display: none;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
height: auto;
|
||||||
|
left: 10px;
|
||||||
|
max-width: 500px;
|
||||||
|
min-width: 200px;
|
||||||
|
padding: 0 15px;
|
||||||
|
top: 10px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.njg-node{
|
||||||
|
stroke-opacity: 0.5;
|
||||||
|
stroke-width: 7px;
|
||||||
|
stroke: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.njg-node:hover,
|
||||||
|
.njg-node.njg-open {
|
||||||
|
stroke: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.njg-link{
|
||||||
|
cursor: pointer;
|
||||||
|
stroke: #999;
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-opacity: 0.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.njg-link:hover,
|
||||||
|
.njg-link.njg-open{
|
||||||
|
stroke-width: 4 !important;
|
||||||
|
stroke-opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
.njg-hidden {
|
||||||
|
display: none !important;
|
||||||
|
visibility: hidden !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.njg-tooltip{
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 10px;
|
||||||
|
fill: #000;
|
||||||
|
opacity: 0.5;
|
||||||
|
text-anchor: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.njg-overlay{
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
.njg-close{
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
.njg-close:before { content: "\2716"; }
|
||||||
|
|
||||||
|
.njg-metadata{
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.njg-node{ cursor: pointer }
|
||||||
|
.njg-link{ cursor: pointer }
|
||||||
|
|
||||||
|
#njg-select-group {
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 0 10px #ccc;
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
width: 50%;
|
||||||
|
margin-top: -7.5em;
|
||||||
|
margin-left: -25%;
|
||||||
|
padding: 5em 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#njg-select-group select {
|
||||||
|
font-size: 2em;
|
||||||
|
padding: 10px 15px;
|
||||||
|
width: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#njg-select-group option {
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#njg-select-group option[value=""] {
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,568 @@
|
||||||
|
// version 0.1
|
||||||
|
(function () {
|
||||||
|
/**
|
||||||
|
* vanilla JS implementation of jQuery.extend()
|
||||||
|
*/
|
||||||
|
d3._extend = function(defaults, options) {
|
||||||
|
var extended = {},
|
||||||
|
prop;
|
||||||
|
for(prop in defaults) {
|
||||||
|
if(Object.prototype.hasOwnProperty.call(defaults, prop)) {
|
||||||
|
extended[prop] = defaults[prop];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for(prop in options) {
|
||||||
|
if(Object.prototype.hasOwnProperty.call(options, prop)) {
|
||||||
|
extended[prop] = options[prop];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return extended;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @function
|
||||||
|
* @name d3._pxToNumber
|
||||||
|
* Convert strings like "10px" to 10
|
||||||
|
*
|
||||||
|
* @param {string} val The value to convert
|
||||||
|
* @return {int} The converted integer
|
||||||
|
*/
|
||||||
|
d3._pxToNumber = function(val) {
|
||||||
|
return parseFloat(val.replace('px'));
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @function
|
||||||
|
* @name d3._windowHeight
|
||||||
|
*
|
||||||
|
* Get window height
|
||||||
|
*
|
||||||
|
* @return {int} The window innerHeight
|
||||||
|
*/
|
||||||
|
d3._windowHeight = function() {
|
||||||
|
return window.innerHeight || document.documentElement.clientHeight || 600;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @function
|
||||||
|
* @name d3._getPosition
|
||||||
|
*
|
||||||
|
* Get the position of `element` relative to `container`
|
||||||
|
*
|
||||||
|
* @param {object} element
|
||||||
|
* @param {object} container
|
||||||
|
*/
|
||||||
|
d3._getPosition = function(element, container) {
|
||||||
|
var n = element.node(),
|
||||||
|
nPos = n.getBoundingClientRect();
|
||||||
|
cPos = container.node().getBoundingClientRect();
|
||||||
|
return {
|
||||||
|
top: nPos.top - cPos.top,
|
||||||
|
left: nPos.left - cPos.left,
|
||||||
|
width: nPos.width,
|
||||||
|
bottom: nPos.bottom - cPos.top,
|
||||||
|
height: nPos.height,
|
||||||
|
right: nPos.right - cPos.left
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* netjsongraph.js main function
|
||||||
|
*
|
||||||
|
* @constructor
|
||||||
|
* @param {string} url The NetJSON file url
|
||||||
|
* @param {object} opts The object with parameters to override {@link d3.netJsonGraph.opts}
|
||||||
|
*/
|
||||||
|
d3.netJsonGraph = function(url, opts) {
|
||||||
|
/**
|
||||||
|
* Default options
|
||||||
|
*
|
||||||
|
* @param {string} el "body" The container element el: "body" [description]
|
||||||
|
* @param {bool} metadata true Display NetJSON metadata at startup?
|
||||||
|
* @param {bool} defaultStyle true Use css style?
|
||||||
|
* @param {bool} animationAtStart false Animate nodes or not on load
|
||||||
|
* @param {array} scaleExtent [0.25, 5] The zoom scale's allowed range. @see {@link https://github.com/mbostock/d3/wiki/Zoom-Behavior#scaleExtent}
|
||||||
|
* @param {int} charge -130 The charge strength to the specified value. @see {@link https://github.com/mbostock/d3/wiki/Force-Layout#charge}
|
||||||
|
* @param {int} linkDistance 50 The target distance between linked nodes to the specified value. @see {@link https://github.com/mbostock/d3/wiki/Force-Layout#linkDistance}
|
||||||
|
* @param {float} linkStrength 0.2 The strength (rigidity) of links to the specified value in the range. @see {@link https://github.com/mbostock/d3/wiki/Force-Layout#linkStrength}
|
||||||
|
* @param {float} friction 0.9 The friction coefficient to the specified value. @see {@link https://github.com/mbostock/d3/wiki/Force-Layout#friction}
|
||||||
|
* @param {string} chargeDistance Infinity The maximum distance over which charge forces are applied. @see {@link https://github.com/mbostock/d3/wiki/Force-Layout#chargeDistance}
|
||||||
|
* @param {float} theta 0.8 The Barnes–Hut approximation criterion to the specified value. @see {@link https://github.com/mbostock/d3/wiki/Force-Layout#theta}
|
||||||
|
* @param {float} gravity 0.1 The gravitational strength to the specified numerical value. @see {@link https://github.com/mbostock/d3/wiki/Force-Layout#gravity}
|
||||||
|
* @param {int} circleRadius 8 The radius of circles (nodes) in pixel
|
||||||
|
* @param {string} labelDx "0" SVG dx (distance on x axis) attribute of node labels in graph
|
||||||
|
* @param {string} labelDy "-1.3em" SVG dy (distance on y axis) attribute of node labels in graph
|
||||||
|
* @param {function} onInit Callback function executed on initialization
|
||||||
|
* @param {function} onLoad Callback function executed after data has been loaded
|
||||||
|
* @param {function} onEnd Callback function executed when initial animation is complete
|
||||||
|
* @param {function} linkDistanceFunc By default high density areas have longer links
|
||||||
|
* @param {function} redraw Called when panning and zooming
|
||||||
|
* @param {function} prepareData Used to convert NetJSON NetworkGraph to the javascript data
|
||||||
|
* @param {function} onClickNode Called when a node is clicked
|
||||||
|
* @param {function} onClickLink Called when a link is clicked
|
||||||
|
*/
|
||||||
|
opts = d3._extend({
|
||||||
|
el: "body",
|
||||||
|
metadata: true,
|
||||||
|
defaultStyle: true,
|
||||||
|
animationAtStart: true,
|
||||||
|
scaleExtent: [0.25, 5],
|
||||||
|
charge: -130,
|
||||||
|
linkDistance: 50,
|
||||||
|
linkStrength: 0.2,
|
||||||
|
friction: 0.9, // d3 default
|
||||||
|
chargeDistance: Infinity, // d3 default
|
||||||
|
theta: 0.8, // d3 default
|
||||||
|
gravity: 0.1,
|
||||||
|
circleRadius: 8,
|
||||||
|
labelDx: "0",
|
||||||
|
labelDy: "-1.3em",
|
||||||
|
nodeClassProperty: null,
|
||||||
|
linkClassProperty: null,
|
||||||
|
/**
|
||||||
|
* @function
|
||||||
|
* @name onInit
|
||||||
|
*
|
||||||
|
* Callback function executed on initialization
|
||||||
|
* @param {string|object} url The netJson remote url or object
|
||||||
|
* @param {object} opts The object of passed arguments
|
||||||
|
* @return {function}
|
||||||
|
*/
|
||||||
|
onInit: function(url, opts) {},
|
||||||
|
/**
|
||||||
|
* @function
|
||||||
|
* @name onLoad
|
||||||
|
*
|
||||||
|
* Callback function executed after data has been loaded
|
||||||
|
* @param {string|object} url The netJson remote url or object
|
||||||
|
* @param {object} opts The object of passed arguments
|
||||||
|
* @return {function}
|
||||||
|
*/
|
||||||
|
onLoad: function(url, opts) {},
|
||||||
|
/**
|
||||||
|
* @function
|
||||||
|
* @name onEnd
|
||||||
|
*
|
||||||
|
* Callback function executed when initial animation is complete
|
||||||
|
* @param {string|object} url The netJson remote url or object
|
||||||
|
* @param {object} opts The object of passed arguments
|
||||||
|
* @return {function}
|
||||||
|
*/
|
||||||
|
onEnd: function(url, opts) {},
|
||||||
|
/**
|
||||||
|
* @function
|
||||||
|
* @name linkDistanceFunc
|
||||||
|
*
|
||||||
|
* By default, high density areas have longer links
|
||||||
|
*/
|
||||||
|
linkDistanceFunc: function(d){
|
||||||
|
var val = opts.linkDistance;
|
||||||
|
if(d.source.linkCount >= 4 && d.target.linkCount >= 4) {
|
||||||
|
return val * 2;
|
||||||
|
}
|
||||||
|
return val;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @function
|
||||||
|
* @name redraw
|
||||||
|
*
|
||||||
|
* Called on zoom and pan
|
||||||
|
*/
|
||||||
|
redraw: function() {
|
||||||
|
panner.attr("transform",
|
||||||
|
"translate(" + d3.event.translate + ") " +
|
||||||
|
"scale(" + d3.event.scale + ")"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @function
|
||||||
|
* @name prepareData
|
||||||
|
*
|
||||||
|
* Convert NetJSON NetworkGraph to the data structure consumed by d3
|
||||||
|
*
|
||||||
|
* @param graph {object}
|
||||||
|
*/
|
||||||
|
prepareData: function(graph) {
|
||||||
|
var nodesMap = {},
|
||||||
|
nodes = graph.nodes.slice(), // copy
|
||||||
|
links = graph.links.slice(), // copy
|
||||||
|
nodes_length = graph.nodes.length,
|
||||||
|
links_length = graph.links.length;
|
||||||
|
|
||||||
|
for(var i = 0; i < nodes_length; i++) {
|
||||||
|
// count how many links every node has
|
||||||
|
nodes[i].linkCount = 0;
|
||||||
|
nodesMap[nodes[i].id] = i;
|
||||||
|
}
|
||||||
|
for(var c = 0; c < links_length; c++) {
|
||||||
|
var sourceIndex = nodesMap[links[c].source],
|
||||||
|
targetIndex = nodesMap[links[c].target];
|
||||||
|
// ensure source and target exist
|
||||||
|
if(!nodes[sourceIndex]) { throw("source '" + links[c].source + "' not found"); }
|
||||||
|
if(!nodes[targetIndex]) { throw("target '" + links[c].target + "' not found"); }
|
||||||
|
links[c].source = nodesMap[links[c].source];
|
||||||
|
links[c].target = nodesMap[links[c].target];
|
||||||
|
// add link count to both ends
|
||||||
|
nodes[sourceIndex].linkCount++;
|
||||||
|
nodes[targetIndex].linkCount++;
|
||||||
|
}
|
||||||
|
return { "nodes": nodes, "links": links };
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @function
|
||||||
|
* @name onClickNode
|
||||||
|
*
|
||||||
|
* Called when a node is clicked
|
||||||
|
*/
|
||||||
|
onClickNode: function(n) {
|
||||||
|
var overlay = d3.select(".njg-overlay"),
|
||||||
|
overlayInner = d3.select(".njg-overlay > .njg-inner"),
|
||||||
|
html = "<p><b>id</b>: " + n.id + "</p>";
|
||||||
|
if(n.label) { html += "<p><b>label</b>: " + n.label + "</p>"; }
|
||||||
|
if(n.properties) {
|
||||||
|
for(var key in n.properties) {
|
||||||
|
if(!n.properties.hasOwnProperty(key)) { continue; }
|
||||||
|
html += "<p><b>"+key.replace(/_/g, " ")+"</b>: " + n.properties[key] + "</p>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(n.linkCount) { html += "<p><b>links</b>: " + n.linkCount + "</p>"; }
|
||||||
|
if(n.local_addresses) {
|
||||||
|
html += "<p><b>local addresses</b>:<br>" + n.local_addresses.join('<br>') + "</p>";
|
||||||
|
}
|
||||||
|
overlayInner.html(html);
|
||||||
|
overlay.classed("njg-hidden", false);
|
||||||
|
overlay.style("display", "block");
|
||||||
|
// set "open" class to current node
|
||||||
|
removeOpenClass();
|
||||||
|
d3.select(this).classed("njg-open", true);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @function
|
||||||
|
* @name onClickLink
|
||||||
|
*
|
||||||
|
* Called when a node is clicked
|
||||||
|
*/
|
||||||
|
onClickLink: function(l) {
|
||||||
|
var overlay = d3.select(".njg-overlay"),
|
||||||
|
overlayInner = d3.select(".njg-overlay > .njg-inner"),
|
||||||
|
html = "<p><b>source</b>: " + (l.source.label || l.source.id) + "</p>";
|
||||||
|
html += "<p><b>target</b>: " + (l.target.label || l.target.id) + "</p>";
|
||||||
|
html += "<p><b>cost</b>: " + l.cost + "</p>";
|
||||||
|
if(l.properties) {
|
||||||
|
for(var key in l.properties) {
|
||||||
|
if(!l.properties.hasOwnProperty(key)) { continue; }
|
||||||
|
html += "<p><b>"+ key.replace(/_/g, " ") +"</b>: " + l.properties[key] + "</p>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
overlayInner.html(html);
|
||||||
|
overlay.classed("njg-hidden", false);
|
||||||
|
overlay.style("display", "block");
|
||||||
|
// set "open" class to current link
|
||||||
|
removeOpenClass();
|
||||||
|
d3.select(this).classed("njg-open", true);
|
||||||
|
}
|
||||||
|
}, opts);
|
||||||
|
|
||||||
|
// init callback
|
||||||
|
opts.onInit(url, opts);
|
||||||
|
|
||||||
|
if(!opts.animationAtStart) {
|
||||||
|
opts.linkStrength = 2;
|
||||||
|
opts.friction = 0.3;
|
||||||
|
opts.gravity = 0;
|
||||||
|
}
|
||||||
|
if(opts.el == "body") {
|
||||||
|
var body = d3.select(opts.el),
|
||||||
|
rect = body.node().getBoundingClientRect();
|
||||||
|
if (d3._pxToNumber(d3.select("body").style("height")) < 60) {
|
||||||
|
body.style("height", d3._windowHeight() - rect.top - rect.bottom + "px");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var el = d3.select(opts.el).style("position", "relative"),
|
||||||
|
width = d3._pxToNumber(el.style('width')),
|
||||||
|
height = d3._pxToNumber(el.style('height')),
|
||||||
|
force = d3.layout.force()
|
||||||
|
.charge(opts.charge)
|
||||||
|
.linkStrength(opts.linkStrength)
|
||||||
|
.linkDistance(opts.linkDistanceFunc)
|
||||||
|
.friction(opts.friction)
|
||||||
|
.chargeDistance(opts.chargeDistance)
|
||||||
|
.theta(opts.theta)
|
||||||
|
.gravity(opts.gravity)
|
||||||
|
// width is easy to get, if height is 0 take the height of the body
|
||||||
|
.size([width, height]),
|
||||||
|
zoom = d3.behavior.zoom().scaleExtent(opts.scaleExtent),
|
||||||
|
// panner is the element that allows zooming and panning
|
||||||
|
panner = el.append("svg")
|
||||||
|
.attr("width", width)
|
||||||
|
.attr("height", height)
|
||||||
|
.call(zoom.on("zoom", opts.redraw))
|
||||||
|
.append("g")
|
||||||
|
.style("position", "absolute"),
|
||||||
|
svg = d3.select(opts.el + " svg"),
|
||||||
|
drag = force.drag(),
|
||||||
|
overlay = d3.select(opts.el).append("div").attr("class", "njg-overlay"),
|
||||||
|
closeOverlay = overlay.append("a").attr("class", "njg-close"),
|
||||||
|
overlayInner = overlay.append("div").attr("class", "njg-inner"),
|
||||||
|
metadata = d3.select(opts.el).append("div").attr("class", "njg-metadata"),
|
||||||
|
metadataInner = metadata.append("div").attr("class", "njg-inner"),
|
||||||
|
closeMetadata = metadata.append("a").attr("class", "njg-close"),
|
||||||
|
// container of ungrouped networks
|
||||||
|
str = [],
|
||||||
|
selected = [],
|
||||||
|
/**
|
||||||
|
* @function
|
||||||
|
* @name removeOpenClass
|
||||||
|
*
|
||||||
|
* Remove open classes from nodes and links
|
||||||
|
*/
|
||||||
|
removeOpenClass = function () {
|
||||||
|
d3.selectAll("svg .njg-open").classed("njg-open", false);
|
||||||
|
};
|
||||||
|
processJson = function(graph) {
|
||||||
|
/**
|
||||||
|
* Init netJsonGraph
|
||||||
|
*/
|
||||||
|
init = function(url, opts) {
|
||||||
|
d3.netJsonGraph(url, opts);
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Remove all instances
|
||||||
|
*/
|
||||||
|
destroy = function() {
|
||||||
|
force.stop();
|
||||||
|
d3.select("#selectGroup").remove();
|
||||||
|
d3.select(".njg-overlay").remove();
|
||||||
|
d3.select(".njg-metadata").remove();
|
||||||
|
overlay.remove();
|
||||||
|
overlayInner.remove();
|
||||||
|
metadata.remove();
|
||||||
|
svg.remove();
|
||||||
|
node.remove();
|
||||||
|
link.remove();
|
||||||
|
nodes = [];
|
||||||
|
links = [];
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Destroy and e-init all instances
|
||||||
|
* @return {[type]} [description]
|
||||||
|
*/
|
||||||
|
reInit = function() {
|
||||||
|
destroy();
|
||||||
|
init(url, opts);
|
||||||
|
};
|
||||||
|
|
||||||
|
var data = opts.prepareData(graph),
|
||||||
|
links = data.links,
|
||||||
|
nodes = data.nodes;
|
||||||
|
|
||||||
|
// disable some transitions while dragging
|
||||||
|
drag.on('dragstart', function(n){
|
||||||
|
d3.event.sourceEvent.stopPropagation();
|
||||||
|
zoom.on('zoom', null);
|
||||||
|
})
|
||||||
|
// re-enable transitions when dragging stops
|
||||||
|
.on('dragend', function(n){
|
||||||
|
zoom.on('zoom', opts.redraw);
|
||||||
|
})
|
||||||
|
.on("drag", function(d) {
|
||||||
|
// avoid pan & drag conflict
|
||||||
|
d3.select(this).attr("x", d.x = d3.event.x).attr("y", d.y = d3.event.y);
|
||||||
|
});
|
||||||
|
|
||||||
|
force.nodes(nodes).links(links).start();
|
||||||
|
|
||||||
|
var link = panner.selectAll(".link")
|
||||||
|
.data(links)
|
||||||
|
.enter().append("line")
|
||||||
|
.attr("class", function (link) {
|
||||||
|
var baseClass = "njg-link",
|
||||||
|
addClass = null;
|
||||||
|
value = link.properties && link.properties[opts.linkClassProperty];
|
||||||
|
if (opts.linkClassProperty && value) {
|
||||||
|
// if value is stirng use that as class
|
||||||
|
if (typeof(value) === "string") {
|
||||||
|
addClass = value;
|
||||||
|
}
|
||||||
|
else if (typeof(value) === "number") {
|
||||||
|
addClass = opts.linkClassProperty + value;
|
||||||
|
}
|
||||||
|
else if (value === true) {
|
||||||
|
addClass = opts.linkClassProperty;
|
||||||
|
}
|
||||||
|
return baseClass + " " + addClass;
|
||||||
|
}
|
||||||
|
return baseClass;
|
||||||
|
})
|
||||||
|
.on("click", opts.onClickLink),
|
||||||
|
groups = panner.selectAll(".node")
|
||||||
|
.data(nodes)
|
||||||
|
.enter()
|
||||||
|
.append("g");
|
||||||
|
node = groups.append("circle")
|
||||||
|
.attr("class", function (node) {
|
||||||
|
var baseClass = "njg-node",
|
||||||
|
addClass = null;
|
||||||
|
value = node.properties && node.properties[opts.nodeClassProperty];
|
||||||
|
if (opts.nodeClassProperty && value) {
|
||||||
|
// if value is stirng use that as class
|
||||||
|
if (typeof(value) === "string") {
|
||||||
|
addClass = value;
|
||||||
|
}
|
||||||
|
else if (typeof(value) === "number") {
|
||||||
|
addClass = opts.nodeClassProperty + value;
|
||||||
|
}
|
||||||
|
else if (value === true) {
|
||||||
|
addClass = opts.nodeClassProperty;
|
||||||
|
}
|
||||||
|
return baseClass + " " + addClass;
|
||||||
|
}
|
||||||
|
return baseClass;
|
||||||
|
})
|
||||||
|
.attr("r", opts.circleRadius)
|
||||||
|
.on("click", opts.onClickNode)
|
||||||
|
.call(drag);
|
||||||
|
|
||||||
|
var labels = groups.append('text')
|
||||||
|
.text(function(n){ return n.label || n.id })
|
||||||
|
.attr('dx', opts.labelDx)
|
||||||
|
.attr('dy', opts.labelDy)
|
||||||
|
.attr('class', 'njg-tooltip');
|
||||||
|
|
||||||
|
// Close overlay
|
||||||
|
closeOverlay.on("click", function() {
|
||||||
|
removeOpenClass();
|
||||||
|
overlay.classed("njg-hidden", true);
|
||||||
|
});
|
||||||
|
// Close Metadata panel
|
||||||
|
closeMetadata.on("click", function() {
|
||||||
|
// Reinitialize the page
|
||||||
|
if(graph.type === "NetworkCollection") {
|
||||||
|
reInit();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
removeOpenClass();
|
||||||
|
metadata.classed("njg-hidden", true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// default style
|
||||||
|
// TODO: probably change defaultStyle
|
||||||
|
// into something else
|
||||||
|
if(opts.defaultStyle) {
|
||||||
|
var colors = d3.scale.category20c();
|
||||||
|
node.style({
|
||||||
|
"fill": function(d){ return colors(d.linkCount); },
|
||||||
|
"cursor": "pointer"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// Metadata style
|
||||||
|
if(opts.metadata) {
|
||||||
|
metadata.attr("class", "njg-metadata").style("display", "block");
|
||||||
|
}
|
||||||
|
|
||||||
|
var attrs = ["protocol",
|
||||||
|
"version",
|
||||||
|
"revision",
|
||||||
|
"metric",
|
||||||
|
"router_id",
|
||||||
|
"topology_id"],
|
||||||
|
html = "";
|
||||||
|
if(graph.label) {
|
||||||
|
html += "<h3>" + graph.label + "</h3>";
|
||||||
|
}
|
||||||
|
for(var i in attrs) {
|
||||||
|
var attr = attrs[i];
|
||||||
|
if(graph[attr]) {
|
||||||
|
html += "<p><b>" + attr + "</b>: <span>" + graph[attr] + "</span></p>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Add nodes and links count
|
||||||
|
html += "<p><b>nodes</b>: <span>" + graph.nodes.length + "</span></p>";
|
||||||
|
html += "<p><b>links</b>: <span>" + graph.links.length + "</span></p>";
|
||||||
|
metadataInner.html(html);
|
||||||
|
metadata.classed("njg-hidden", false);
|
||||||
|
|
||||||
|
// onLoad callback
|
||||||
|
opts.onLoad(url, opts);
|
||||||
|
|
||||||
|
force.on("tick", function() {
|
||||||
|
link.attr("x1", function(d) {
|
||||||
|
return d.source.x;
|
||||||
|
})
|
||||||
|
.attr("y1", function(d) {
|
||||||
|
return d.source.y;
|
||||||
|
})
|
||||||
|
.attr("x2", function(d) {
|
||||||
|
return d.target.x;
|
||||||
|
})
|
||||||
|
.attr("y2", function(d) {
|
||||||
|
return d.target.y;
|
||||||
|
});
|
||||||
|
|
||||||
|
node.attr("cx", function(d) {
|
||||||
|
return d.x;
|
||||||
|
})
|
||||||
|
.attr("cy", function(d) {
|
||||||
|
return d.y;
|
||||||
|
});
|
||||||
|
|
||||||
|
labels.attr("transform", function(d) {
|
||||||
|
return "translate(" + d.x + "," + d.y + ")";
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.on("end", function(){
|
||||||
|
force.stop();
|
||||||
|
// onEnd callback
|
||||||
|
opts.onEnd(url, opts);
|
||||||
|
});
|
||||||
|
|
||||||
|
return force;
|
||||||
|
};
|
||||||
|
|
||||||
|
if(typeof(url) === "object") {
|
||||||
|
processJson(url);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
/**
|
||||||
|
* Parse the provided json file
|
||||||
|
* and call processJson() function
|
||||||
|
*
|
||||||
|
* @param {string} url The provided json file
|
||||||
|
* @param {function} error
|
||||||
|
*/
|
||||||
|
d3.json(url, function(error, graph) {
|
||||||
|
if(error) { throw error; }
|
||||||
|
/**
|
||||||
|
* Check if the json contains a NetworkCollection
|
||||||
|
*/
|
||||||
|
if(graph.type === "NetworkCollection") {
|
||||||
|
var selectGroup = body.append("div").attr("id", "njg-select-group"),
|
||||||
|
select = selectGroup.append("select")
|
||||||
|
.attr("id", "select");
|
||||||
|
str = graph;
|
||||||
|
select.append("option")
|
||||||
|
.attr({
|
||||||
|
"value": "",
|
||||||
|
"selected": "selected",
|
||||||
|
"name": "default",
|
||||||
|
"disabled": "disabled"
|
||||||
|
})
|
||||||
|
.html("Choose the network to display");
|
||||||
|
graph.collection.forEach(function(structure) {
|
||||||
|
select.append("option").attr("value", structure.type).html(structure.type);
|
||||||
|
// Collect each network json structure
|
||||||
|
selected[structure.type] = structure;
|
||||||
|
});
|
||||||
|
select.on("change", function() {
|
||||||
|
selectGroup.attr("class", "njg-hidden");
|
||||||
|
// Call selected json structure
|
||||||
|
processJson(selected[this.options[this.selectedIndex].value]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
processJson(graph);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
@ -41,35 +41,41 @@
|
||||||
In the code st is the data obtained from the json call
|
In the code st is the data obtained from the json call
|
||||||
*/
|
*/
|
||||||
|
|
||||||
function TablePooler (time, jsonurl, getparams, table_id, callback) {
|
function TablePooler (time, jsonurl, getparams, div_id, callback) {
|
||||||
this.table = document.getElementById(table_id);
|
this.div_id = div_id;
|
||||||
|
this.div = document.getElementById(div_id);
|
||||||
this.callback = callback;
|
this.callback = callback;
|
||||||
this.jsonurl = jsonurl;
|
this.jsonurl = jsonurl;
|
||||||
this.getparams = getparams;
|
this.getparams = getparams;
|
||||||
this.time = time;
|
this.time = time;
|
||||||
|
|
||||||
/* clear all rows */
|
|
||||||
this.clear = function(){
|
|
||||||
while( this.table.rows.length > 1 ) this.table.deleteRow(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.start = function(){
|
this.start = function(){
|
||||||
XHR.poll(this.time, this.jsonurl, this.getparams, function(x, st){
|
XHR.poll(this.time, this.jsonurl, this.getparams, function(x, st){
|
||||||
var data = this.callback(st);
|
var data = this.callback(st);
|
||||||
var content, tr, td;
|
var content;
|
||||||
this.clear();
|
|
||||||
for (var i = 0; i < data.length; i++){
|
for (var i = 0; i < data.length; i++){
|
||||||
tr = this.table.insertRow(-1);
|
rowId = "trDiv_" + this.div_id + i;
|
||||||
tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
|
rowDiv = document.getElementById(rowId);
|
||||||
|
if (rowDiv === null) {
|
||||||
|
rowDiv = document.createElement("div");
|
||||||
|
rowDiv.id = rowId;
|
||||||
|
rowDiv.className = "tr";
|
||||||
|
this.div.appendChild(rowDiv);
|
||||||
|
}
|
||||||
for (var j = 0; j < data[i].length; j++){
|
for (var j = 0; j < data[i].length; j++){
|
||||||
td = tr.insertCell(-1);
|
cellId = "tdDiv_" + this.div_id + i + j;
|
||||||
if (data[i][j].length == 2) {
|
cellDiv = document.getElementById(cellId);
|
||||||
td.colSpan = data[i][j][1];
|
if (cellDiv === null) {
|
||||||
content = data[i][j][0];
|
cellDiv = document.createElement("div");
|
||||||
|
cellDiv.id = cellId;
|
||||||
|
cellDiv.className = "td";
|
||||||
|
rowDiv.appendChild(cellDiv);
|
||||||
|
}
|
||||||
|
if (typeof data[i][j] !== 'undefined' && data[i][j].length == 2) {
|
||||||
|
content = data[i][j][0] + "/" + data[i][j][1];
|
||||||
}
|
}
|
||||||
else content = data[i][j];
|
else content = data[i][j];
|
||||||
td.innerHTML = content;
|
cellDiv.innerHTML = content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue