luci-app-babeld: migrate to js
Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> [fixup commit message, resolve merge conflict] Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Ayushman Tripathi
Jo-Philipp Wich
parent
08fbceecd9
commit
0c3f396b2f
7 changed files with 287 additions and 224 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
include $(TOPDIR)/rules.mk
|
include $(TOPDIR)/rules.mk
|
||||||
|
|
||||||
LUCI_TITLE:=LuCI support for babeld
|
LUCI_TITLE:=LuCI support for babeld
|
||||||
LUCI_DEPENDS:=+luci-base +babeld +luci-compat
|
LUCI_DEPENDS:=+luci-base +babeld
|
||||||
|
|
||||||
include ../../luci.mk
|
include ../../luci.mk
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,171 @@
|
||||||
|
function renderTableXRoutes(ubus_data, target_div) {
|
||||||
|
var data = ubus_data;
|
||||||
|
for (var protocol in data) {
|
||||||
|
var target = target_div;
|
||||||
|
|
||||||
|
var title = document.createElement('h3');
|
||||||
|
title.appendChild(document.createTextNode('X-Routes ' + protocol));
|
||||||
|
target.appendChild(title);
|
||||||
|
|
||||||
|
var table = document.createElement('table');
|
||||||
|
table.setAttribute('class', 'table');
|
||||||
|
table.setAttribute('id', 'babel_overview_xroutes_' + protocol);
|
||||||
|
|
||||||
|
var headerRow = document.createElement('tr');
|
||||||
|
headerRow.setAttribute('class', 'tr table-titles');
|
||||||
|
var headerContent = '<th class="th" style="font-weight: 700;">' + '%h'.format(protocol) + ' Prefix</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Metric</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Source-Prefix</th>';
|
||||||
|
|
||||||
|
headerRow.innerHTML = headerContent;
|
||||||
|
table.appendChild(headerRow);
|
||||||
|
|
||||||
|
|
||||||
|
for (var prefix in data[protocol]) {
|
||||||
|
var prefixRow = document.createElement('tr');
|
||||||
|
prefixRow.setAttribute('class', 'tr');
|
||||||
|
var prefixContent = '<td class="td" data-title="xroutes_' + '%h'.format(protocol) + '_prefix">' + '%h'.format(prefix) + '</td>\
|
||||||
|
<td class="td" data-title="xroutes_' + '%h'.format(protocol) + '_metric">' + '%h'.format(data[protocol][prefix]["metric"]) + '</td>\
|
||||||
|
<td class="td" data-title="xroutes_' + '%h'.format(protocol) + '_src-prefix">' + '%h'.format(data[protocol][prefix]["src-prefix"]) + '</td>';
|
||||||
|
|
||||||
|
prefixRow.innerHTML = prefixContent;
|
||||||
|
table.appendChild(prefixRow);
|
||||||
|
}
|
||||||
|
target.appendChild(table);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTableRoutes(ubus_data, target_div) {
|
||||||
|
var data = ubus_data;
|
||||||
|
for (var protocol in data) {
|
||||||
|
var target = target_div;
|
||||||
|
|
||||||
|
var title = document.createElement('h3');
|
||||||
|
title.appendChild(document.createTextNode('Routes ' + protocol));
|
||||||
|
target.appendChild(title);
|
||||||
|
|
||||||
|
var table = document.createElement('table');
|
||||||
|
table.setAttribute('class', 'table');
|
||||||
|
table.setAttribute('id', 'babel_overview_routes_' + protocol);
|
||||||
|
|
||||||
|
var headerRow = document.createElement('tr');
|
||||||
|
headerRow.setAttribute('class', 'tr table-titles');
|
||||||
|
var headerContent = '<th class="th" style="font-weight: 700;">' + '%h'.format(protocol) + ' Prefix</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Source-Prefix</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Route-Metric</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Route Smoothed Metric</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Refmetric</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">ID</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Seq. No.</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Channes</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Age</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Via</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Nexthop</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Installed</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Feasible</th>';
|
||||||
|
|
||||||
|
headerRow.innerHTML = headerContent;
|
||||||
|
table.appendChild(headerRow);
|
||||||
|
|
||||||
|
for (var prefix in data[protocol]) {
|
||||||
|
var prefixRow = document.createElement('tr');
|
||||||
|
prefixRow.setAttribute('class', 'tr');
|
||||||
|
var prefixContent = '<td class="td" data-title="routes_' + '%h'.format(protocol) + '_prefix">' + '%h'.format(prefix) + '</td>\
|
||||||
|
<td class="td" data-title="routes_' + '%h'.format(protocol) + '_src-prefix">' + '%h'.format(data[protocol][prefix]["src-prefix"]) + '</td>\
|
||||||
|
<td class="td" data-title="routes_' + '%h'.format(protocol) + '_metric">' + '%h'.format(data[protocol][prefix]["route_metric"]) + '</td>\
|
||||||
|
<td class="td" data-title="routes_' + '%h'.format(protocol) + '_rout-smoothed-metric">' + '%h'.format(data[protocol][prefix]["route_smoothed_metric"]) + '</td>\
|
||||||
|
<td class="td" data-title="routes_' + '%h'.format(protocol) + '_refmetric">' + '%h'.format(data[protocol][prefix]["refmetric"]) + '</td>\
|
||||||
|
<td class="td" data-title="routes_' + '%h'.format(protocol) + '_id">' + '%h'.format(data[protocol][prefix]["id"]) + '</td>\
|
||||||
|
<td class="td" data-title="routes_' + '%h'.format(protocol) + '_seqno">' + '%h'.format(data[protocol][prefix]["seqno"]) + '</td>\
|
||||||
|
<td class="td" data-title="routes_' + '%h'.format(protocol) + '_channels">' + '%h'.format(data[protocol][prefix]["channels"]) + '</td>\
|
||||||
|
<td class="td" data-title="routes_' + '%h'.format(protocol) + '_age">' + '%h'.format(data[protocol][prefix]["age"]) + '</td>\
|
||||||
|
<td class="td" data-title="routes_' + '%h'.format(protocol) + '_via">' + '%h'.format(data[protocol][prefix]["via"]) + '</td>\
|
||||||
|
<td class="td" data-title="routes_' + '%h'.format(protocol) + '_nexthop">' + '%h'.format(data[protocol][prefix]["nexthop"]) + '</td>\
|
||||||
|
<td class="td" data-title="routes_' + '%h'.format(protocol) + '_installed">' + '%h'.format(data[protocol][prefix]["installed"]) + '</td>\
|
||||||
|
<td class="td" data-title="routes_' + '%h'.format(protocol) + '_feasible">' + '%h'.format(data[protocol][prefix]["feasible"]) + '</td>';
|
||||||
|
|
||||||
|
prefixRow.innerHTML = prefixContent;
|
||||||
|
table.appendChild(prefixRow);
|
||||||
|
}
|
||||||
|
target.appendChild(table);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTableNeighbours(ubus_data, target_div) {
|
||||||
|
var data = ubus_data;
|
||||||
|
for (var protocol in data) {
|
||||||
|
var target = target_div;
|
||||||
|
|
||||||
|
var title = document.createElement('h3');
|
||||||
|
title.appendChild(document.createTextNode('Neighbours ' + protocol));
|
||||||
|
target.appendChild(title);
|
||||||
|
|
||||||
|
var table = document.createElement('table');
|
||||||
|
table.setAttribute('class', 'table');
|
||||||
|
table.setAttribute('id', 'babel_overview_neighbours_' + protocol);
|
||||||
|
|
||||||
|
var headerRow = document.createElement('tr');
|
||||||
|
headerRow.setAttribute('class', 'tr table-titles');
|
||||||
|
var headerContent = '<th class="th" style="font-weight: 700;">' + '%h'.format(protocol) + ' Neighbour</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Device</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Hello-Reach</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">RX cost</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">TX cost</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">RTT</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Channel</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Interface up</th>';
|
||||||
|
|
||||||
|
headerRow.innerHTML = headerContent;
|
||||||
|
table.appendChild(headerRow);
|
||||||
|
|
||||||
|
for (var neighbour in data[protocol]) {
|
||||||
|
var neighbourRow = document.createElement('tr');
|
||||||
|
neighbourRow.setAttribute('class', 'tr');
|
||||||
|
var neighbourContent = '<td class="td" data-title="' + '%h'.format(protocol) + '_neighbour">' + '%h'.format(neighbour) + '</td>\
|
||||||
|
<td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_dev">' + '%h'.format(data[protocol][neighbour]["dev"]) + '</td>\
|
||||||
|
<td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_hello-reach">' + '%h'.format(data[protocol][neighbour]["hello-reach"]) + '</td>\
|
||||||
|
<td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_rxcost">' + '%h'.format(data[protocol][neighbour]["rxcost"]) + '</td>\
|
||||||
|
<td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_txcost">' + '%h'.format(data[protocol][neighbour]["txcost"]) + '</td>\
|
||||||
|
<td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_rtt">' + '%h'.format(data[protocol][neighbour]["rtt"]) + '</td>\
|
||||||
|
<td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_channel">' + '%h'.format(data[protocol][neighbour]["channel"]) + '</td>\
|
||||||
|
<td class="td" data-title="neighbours_' + '%h'.format(protocol) + '_if_up">' + '%h'.format(data[protocol][neighbour]["if_up"]) + '</td>';
|
||||||
|
|
||||||
|
neighbourRow.innerHTML = neighbourContent;
|
||||||
|
table.appendChild(neighbourRow);
|
||||||
|
}
|
||||||
|
target.appendChild(table);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTableInfo(ubus_data, target_div) {
|
||||||
|
var data = ubus_data;
|
||||||
|
var target = target_div;
|
||||||
|
|
||||||
|
var title = document.createElement('h3');
|
||||||
|
title.appendChild(document.createTextNode('Info'));
|
||||||
|
target.appendChild(title);
|
||||||
|
|
||||||
|
var table = document.createElement('table');
|
||||||
|
table.setAttribute('class', 'table');
|
||||||
|
table.setAttribute('id', 'babel_overview_info');
|
||||||
|
|
||||||
|
|
||||||
|
var headerRow = document.createElement('tr');
|
||||||
|
headerRow.setAttribute('class', 'tr table-titles');
|
||||||
|
var headerContent = '<th class="th" style="font-weight: 700;">Babeld Version</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">My-ID</th>\
|
||||||
|
<th class="th" style="font-weight: 700;">Host</th>';
|
||||||
|
|
||||||
|
headerRow.innerHTML = headerContent;
|
||||||
|
table.appendChild(headerRow);
|
||||||
|
|
||||||
|
var neighbourRow = document.createElement('tr');
|
||||||
|
neighbourRow.setAttribute('class', 'tr');
|
||||||
|
var neighbourContent = '<td class="td" data-title="info_babeld-version">' + '%h'.format(data["babeld-version"]) + '</td>\
|
||||||
|
<td class="td" data-title="info_dev">' + '%h'.format(data["my-id"]) + '</td>\
|
||||||
|
<td class="td" data-title="info_hello-reach">' + '%h'.format(data["host"]) + '</td>';
|
||||||
|
|
||||||
|
neighbourRow.innerHTML = neighbourContent;
|
||||||
|
table.appendChild(neighbourRow);
|
||||||
|
target.appendChild(table);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
'use strict';
|
||||||
|
'require uci';
|
||||||
|
'require view';
|
||||||
|
'require poll';
|
||||||
|
'require ui';
|
||||||
|
'require rpc';
|
||||||
|
|
||||||
|
return view.extend({
|
||||||
|
callGetInfo: rpc.declare({
|
||||||
|
object: 'babeld',
|
||||||
|
method: 'get_info'
|
||||||
|
}),
|
||||||
|
callGetXroutes: rpc.declare({
|
||||||
|
object: 'babeld',
|
||||||
|
method: 'get_xroutes'
|
||||||
|
}),
|
||||||
|
callGetRoutes: rpc.declare({
|
||||||
|
object: 'babeld',
|
||||||
|
method: 'get_routes'
|
||||||
|
}),
|
||||||
|
callGetNeighbours: rpc.declare({
|
||||||
|
object: 'babeld',
|
||||||
|
method: 'get_neighbours'
|
||||||
|
}),
|
||||||
|
|
||||||
|
fetch_babeld: function () {
|
||||||
|
var data;
|
||||||
|
var self = this;
|
||||||
|
return new Promise(function (resolve, reject) {
|
||||||
|
Promise.all([self.callGetInfo(), self.callGetXroutes(), self.callGetRoutes(), self.callGetNeighbours()])
|
||||||
|
.then(function (res) {
|
||||||
|
data = res;
|
||||||
|
resolve([data]);
|
||||||
|
})
|
||||||
|
.catch(function (err) {
|
||||||
|
console.error(err);
|
||||||
|
reject([null]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
action_babeld: function () {
|
||||||
|
var self = this;
|
||||||
|
return new Promise(function (resolve, reject) {
|
||||||
|
self
|
||||||
|
.fetch_babeld()
|
||||||
|
.then(function ([data]) {
|
||||||
|
var info = data[0];
|
||||||
|
var xroutes = data[1];
|
||||||
|
var routes = data[2];
|
||||||
|
var neighbours = data[3];
|
||||||
|
var result = { info, xroutes, routes, neighbours };
|
||||||
|
resolve(result);
|
||||||
|
})
|
||||||
|
.catch(function (err) {
|
||||||
|
reject(err);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
load: function () {
|
||||||
|
var self = this;
|
||||||
|
return new Promise(function (resolve, reject) {
|
||||||
|
var script = E('script', { 'type': 'text/javascript' });
|
||||||
|
script.onload = resolve;
|
||||||
|
script.onerror = reject;
|
||||||
|
script.src = L.resource('babeld.js');
|
||||||
|
document.querySelector('head').appendChild(script);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
render: function () {
|
||||||
|
var self = this;
|
||||||
|
return this.action_babeld()
|
||||||
|
.then(function (result) {
|
||||||
|
|
||||||
|
var mainDiv = E('div', {
|
||||||
|
'id': 'babeld'
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
renderTableInfo(result.info, mainDiv);
|
||||||
|
renderTableXRoutes(result.xroutes, mainDiv);
|
||||||
|
renderTableRoutes(result.routes, mainDiv);
|
||||||
|
renderTableNeighbours(result.neighbours, mainDiv);
|
||||||
|
|
||||||
|
var result = E([], {}, mainDiv);
|
||||||
|
return result;
|
||||||
|
})
|
||||||
|
.catch(function (error) {
|
||||||
|
console.error(error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleSaveApply: null,
|
||||||
|
handleSave: null,
|
||||||
|
handleReset: null,
|
||||||
|
});
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
<%+header%>
|
|
||||||
<script type="text/javascript" src="<%=resource%>/babeld.js"></script>
|
|
||||||
|
|
||||||
<div id="babeld"></div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
data = {};
|
|
||||||
data["ubus_rpc_session"] = "<%=luci.dispatcher.context.authsession%>"
|
|
||||||
origin = document.location.href.replace(location.pathname, "")
|
|
||||||
ubus_url = origin + "/ubus/"
|
|
||||||
|
|
||||||
var info = ubus_call("babeld", "get_info", {});
|
|
||||||
var xroutes = ubus_call("babeld", "get_xroutes", {});
|
|
||||||
var routes = ubus_call("babeld", "get_routes", {});
|
|
||||||
var neighbours = ubus_call("babeld", "get_neighbours", {});
|
|
||||||
|
|
||||||
renderTableInfo(info, 'babeld');
|
|
||||||
renderTableXRoutes(xroutes, 'babeld');
|
|
||||||
renderTableRoutes(routes, 'babeld');
|
|
||||||
renderTableNeighbours(neighbours, 'babeld');
|
|
||||||
</script>
|
|
||||||
<%+footer%>
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
|
|
||||||
"admin/status/babeld": {
|
"admin/status/babeld": {
|
||||||
"title": "Babeld",
|
"title": "Babeld",
|
||||||
|
"order": 5,
|
||||||
"action": {
|
"action": {
|
||||||
"type": "template",
|
"type": "view",
|
||||||
"path": "babeld"
|
"path": "babeld/babeld-view"
|
||||||
},
|
|
||||||
"depends": {
|
|
||||||
"acl": [ "luci-app-babeld" ]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,25 @@
|
||||||
{
|
{
|
||||||
"luci-app-babeld": {
|
"luci-app-babeld": {
|
||||||
"description": "Grant UCI access for babeld",
|
"description": "Grant UCI access for luci-app-babeld",
|
||||||
"read": {
|
"read": {
|
||||||
"uci": [ "babeld" ],
|
"uci": [
|
||||||
|
"babeld"
|
||||||
|
],
|
||||||
"ubus": {
|
"ubus": {
|
||||||
"babeld": [ "*" ]
|
"babeld": [
|
||||||
}
|
"*"
|
||||||
|
]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"write": {
|
"write": {
|
||||||
"uci": [ "babeld" ],
|
"uci": [
|
||||||
|
"babeld"
|
||||||
|
],
|
||||||
"ubus": {
|
"ubus": {
|
||||||
"babeld": [ "*" ]
|
"babeld": [
|
||||||
|
"*"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,189 +0,0 @@
|
||||||
function ubus_call(command, argument, params) {
|
|
||||||
var request_data = {};
|
|
||||||
request_data.jsonrpc = "2.0";
|
|
||||||
request_data.method = "call";
|
|
||||||
request_data.params = [data.ubus_rpc_session, command, argument, params]
|
|
||||||
var request_json = JSON.stringify(request_data);
|
|
||||||
var request = new XMLHttpRequest();
|
|
||||||
request.open("POST", ubus_url, false);
|
|
||||||
request.setRequestHeader("Content-type", "application/json");
|
|
||||||
request.send(request_json);
|
|
||||||
if (request.status === 200) {
|
|
||||||
var response = JSON.parse(request.responseText)
|
|
||||||
if (!("error" in response) && "result" in response) {
|
|
||||||
if (response.result.length === 2) {
|
|
||||||
return response.result[1];
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.err("Failed query ubus!");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderTableXRoutes(data, target_id) {
|
|
||||||
for (var protocol in data) {
|
|
||||||
var target = document.getElementById(target_id);
|
|
||||||
|
|
||||||
var title = document.createElement('h3');
|
|
||||||
title.appendChild(document.createTextNode('X-Routes ' + protocol));
|
|
||||||
target.appendChild(title);
|
|
||||||
|
|
||||||
var table = document.createElement('table');
|
|
||||||
table.setAttribute('class', 'table');
|
|
||||||
table.setAttribute('id', 'babel_overview_xroutes_' + protocol);
|
|
||||||
|
|
||||||
var headerRow = document.createElement('tr');
|
|
||||||
headerRow.setAttribute('class', 'tr table-titles');
|
|
||||||
var headerContent = '<th class="th" style="font-weight: 700;">' + protocol + ' Prefix</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Metric</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Source-Prefix</th>';
|
|
||||||
|
|
||||||
headerRow.innerHTML = headerContent;
|
|
||||||
table.appendChild(headerRow);
|
|
||||||
|
|
||||||
|
|
||||||
for (var prefix in data[protocol]) {
|
|
||||||
var prefixRow = document.createElement('tr');
|
|
||||||
prefixRow.setAttribute('class', 'tr');
|
|
||||||
var prefixContent = '<td class="td" data-title="xroutes_' + protocol + '_prefix">' + prefix + '</td>\
|
|
||||||
<td class="td" data-title="xroutes_' + protocol + '_metric">' + data[protocol][prefix]["metric"] + '</td>\
|
|
||||||
<td class="td" data-title="xroutes_' + protocol + '_src-prefix">' + data[protocol][prefix]["src-prefix"] + '</td>';
|
|
||||||
|
|
||||||
prefixRow.innerHTML = prefixContent;
|
|
||||||
table.appendChild(prefixRow);
|
|
||||||
}
|
|
||||||
target.appendChild(table);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderTableRoutes(data, target_id) {
|
|
||||||
for (var protocol in data) {
|
|
||||||
var target = document.getElementById(target_id);
|
|
||||||
|
|
||||||
var title = document.createElement('h3');
|
|
||||||
title.appendChild(document.createTextNode('Routes ' + protocol));
|
|
||||||
target.appendChild(title);
|
|
||||||
|
|
||||||
var table = document.createElement('table');
|
|
||||||
table.setAttribute('class', 'table');
|
|
||||||
table.setAttribute('id', 'babel_overview_routes_' + protocol);
|
|
||||||
|
|
||||||
var headerRow = document.createElement('tr');
|
|
||||||
headerRow.setAttribute('class', 'tr table-titles');
|
|
||||||
var headerContent = '<th class="th" style="font-weight: 700;">' + protocol + ' Prefix</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Source-Prefix</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Route-Metric</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Route Smoothed Metric</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Refmetric</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">ID</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Seq. No.</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Channes</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Age</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Via</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Nexthop</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Installed</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Feasible</th>';
|
|
||||||
|
|
||||||
headerRow.innerHTML = headerContent;
|
|
||||||
table.appendChild(headerRow);
|
|
||||||
|
|
||||||
for (var prefix in data[protocol]) {
|
|
||||||
var prefixRow = document.createElement('tr');
|
|
||||||
prefixRow.setAttribute('class', 'tr');
|
|
||||||
var prefixContent = '<td class="td" data-title="routes_' + protocol + '_prefix">' + prefix + '</td>\
|
|
||||||
<td class="td" data-title="routes_' + protocol + '_src-prefix">' + data[protocol][prefix]["src-prefix"] + '</td>\
|
|
||||||
<td class="td" data-title="routes_' + protocol + '_metric">' + data[protocol][prefix]["route_metric"] + '</td>\
|
|
||||||
<td class="td" data-title="routes_' + protocol + '_rout-smoothed-metric">' + data[protocol][prefix]["route_smoothed_metric"] + '</td>\
|
|
||||||
<td class="td" data-title="routes_' + protocol + '_refmetric">' + data[protocol][prefix]["refmetric"] + '</td>\
|
|
||||||
<td class="td" data-title="routes_' + protocol + '_id">' + data[protocol][prefix]["id"] + '</td>\
|
|
||||||
<td class="td" data-title="routes_' + protocol + '_seqno">' + data[protocol][prefix]["seqno"] + '</td>\
|
|
||||||
<td class="td" data-title="routes_' + protocol + '_channels">' + data[protocol][prefix]["channels"] + '</td>\
|
|
||||||
<td class="td" data-title="routes_' + protocol + '_age">' + data[protocol][prefix]["age"] + '</td>\
|
|
||||||
<td class="td" data-title="routes_' + protocol + '_via">' + data[protocol][prefix]["via"] + '</td>\
|
|
||||||
<td class="td" data-title="routes_' + protocol + '_nexthop">' + data[protocol][prefix]["nexthop"] + '</td>\
|
|
||||||
<td class="td" data-title="routes_' + protocol + '_installed">' + data[protocol][prefix]["installed"] + '</td>\
|
|
||||||
<td class="td" data-title="routes_' + protocol + '_feasible">' + data[protocol][prefix]["feasible"] + '</td>';
|
|
||||||
|
|
||||||
prefixRow.innerHTML = prefixContent;
|
|
||||||
table.appendChild(prefixRow);
|
|
||||||
}
|
|
||||||
target.appendChild(table);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderTableNeighbours(data, target_id) {
|
|
||||||
for (var protocol in data) {
|
|
||||||
var target = document.getElementById(target_id);
|
|
||||||
|
|
||||||
var title = document.createElement('h3');
|
|
||||||
title.appendChild(document.createTextNode('Neighbours ' + protocol));
|
|
||||||
target.appendChild(title);
|
|
||||||
|
|
||||||
var table = document.createElement('table');
|
|
||||||
table.setAttribute('class', 'table');
|
|
||||||
table.setAttribute('id', 'babel_overview_neighbours_' + protocol);
|
|
||||||
|
|
||||||
var headerRow = document.createElement('tr');
|
|
||||||
headerRow.setAttribute('class', 'tr table-titles');
|
|
||||||
var headerContent = '<th class="th" style="font-weight: 700;">' + protocol + ' Neighbour</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Device</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Hello-Reach</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">RX cost</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">TX cost</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">RTT</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Channel</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Interface up</th>';
|
|
||||||
|
|
||||||
headerRow.innerHTML = headerContent;
|
|
||||||
table.appendChild(headerRow);
|
|
||||||
|
|
||||||
for (var neighbour in data[protocol]) {
|
|
||||||
var neighbourRow = document.createElement('tr');
|
|
||||||
neighbourRow.setAttribute('class', 'tr');
|
|
||||||
var neighbourContent = '<td class="td" data-title="' + protocol + '_neighbour">' + neighbour + '</td>\
|
|
||||||
<td class="td" data-title="neighbours_' + protocol + '_dev">' + data[protocol][neighbour]["dev"] + '</td>\
|
|
||||||
<td class="td" data-title="neighbours_' + protocol + '_hello-reach">' + data[protocol][neighbour]["hello-reach"] + '</td>\
|
|
||||||
<td class="td" data-title="neighbours_' + protocol + '_rxcost">' + data[protocol][neighbour]["rxcost"] + '</td>\
|
|
||||||
<td class="td" data-title="neighbours_' + protocol + '_txcost">' + data[protocol][neighbour]["txcost"] + '</td>\
|
|
||||||
<td class="td" data-title="neighbours_' + protocol + '_rtt">' + data[protocol][neighbour]["rtt"] + '</td>\
|
|
||||||
<td class="td" data-title="neighbours_' + protocol + '_channel">' + data[protocol][neighbour]["channel"] + '</td>\
|
|
||||||
<td class="td" data-title="neighbours_' + protocol + '_if_up">' + data[protocol][neighbour]["if_up"] + '</td>';
|
|
||||||
|
|
||||||
neighbourRow.innerHTML = neighbourContent;
|
|
||||||
table.appendChild(neighbourRow);
|
|
||||||
}
|
|
||||||
target.appendChild(table);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderTableInfo(data, target_id) {
|
|
||||||
var target = document.getElementById(target_id);
|
|
||||||
|
|
||||||
var title = document.createElement('h3');
|
|
||||||
title.appendChild(document.createTextNode('Info'));
|
|
||||||
target.appendChild(title);
|
|
||||||
|
|
||||||
var table = document.createElement('table');
|
|
||||||
table.setAttribute('class', 'table');
|
|
||||||
table.setAttribute('id', 'babel_overview_info');
|
|
||||||
|
|
||||||
|
|
||||||
var headerRow = document.createElement('tr');
|
|
||||||
headerRow.setAttribute('class', 'tr table-titles');
|
|
||||||
var headerContent = '<th class="th" style="font-weight: 700;">Babeld Version</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">My-ID</th>\
|
|
||||||
<th class="th" style="font-weight: 700;">Host</th>';
|
|
||||||
|
|
||||||
headerRow.innerHTML = headerContent;
|
|
||||||
table.appendChild(headerRow);
|
|
||||||
|
|
||||||
var neighbourRow = document.createElement('tr');
|
|
||||||
neighbourRow.setAttribute('class', 'tr');
|
|
||||||
var neighbourContent = '<td class="td" data-title="info_babeld-version">' + data["babeld-version"] + '</td>\
|
|
||||||
<td class="td" data-title="info_dev">' + data["my-id"] + '</td>\
|
|
||||||
<td class="td" data-title="info_hello-reach">' + data["host"] + '</td>';
|
|
||||||
|
|
||||||
neighbourRow.innerHTML = neighbourContent;
|
|
||||||
table.appendChild(neighbourRow);
|
|
||||||
target.appendChild(table);
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue