'use strict';
'require uci';
'require view';
'require poll';
'require ui';
'require rpc';
function renderTableXRoutes(ubus_data, target_div) {
const data = ubus_data;
for (let protocol in data) {
const target = target_div;
const title = document.createElement('h3');
title.appendChild(document.createTextNode('X-Routes ' + protocol));
target.appendChild(title);
const table = document.createElement('table');
table.setAttribute('class', 'table');
table.setAttribute('id', 'babel_overview_xroutes_' + protocol);
const headerRow = document.createElement('tr');
headerRow.setAttribute('class', 'tr table-titles');
const headerContent = '| ' + '%h'.format(protocol) + ' Prefix | \
Metric | \
Source-Prefix | ';
headerRow.innerHTML = headerContent;
table.appendChild(headerRow);
for (let prefix in data[protocol]) {
const prefixRow = document.createElement('tr');
prefixRow.setAttribute('class', 'tr');
const prefixContent = '' + '%h'.format(data[protocol][prefix]["address"]) + ' | \
' + '%d'.format(data[protocol][prefix]["metric"]) + ' | \
' + '%h'.format(data[protocol][prefix]["src_prefix"]) + ' | ';
prefixRow.innerHTML = prefixContent;
table.appendChild(prefixRow);
}
target.appendChild(table);
}
}
function renderTableRoutes(ubus_data, target_div) {
const data = ubus_data;
for (let protocol in data) {
const target = target_div;
const title = document.createElement('h3');
title.appendChild(document.createTextNode('Routes ' + protocol));
target.appendChild(title);
const table = document.createElement('table');
table.setAttribute('class', 'table');
table.setAttribute('id', 'babel_overview_routes_' + protocol);
const headerRow = document.createElement('tr');
headerRow.setAttribute('class', 'tr table-titles');
const headerContent = '' + '%h'.format(protocol) + ' Prefix | \
Source-Prefix | \
Route-Metric | \
Route Smoothed Metric | \
Refmetric | \
ID | \
Seq. No. | \
Age | \
Via | \
Nexthop | \
Installed | \
Feasible | ';
headerRow.innerHTML = headerContent;
table.appendChild(headerRow);
for (let prefix in data[protocol]) {
const prefixRow = document.createElement('tr');
prefixRow.setAttribute('class', 'tr');
const prefixContent = '' + '%h'.format(data[protocol][prefix]["address"]) + ' | \
' + '%h'.format(data[protocol][prefix]["src_prefix"]) + ' | \
' + '%d'.format(data[protocol][prefix]["route_metric"]) + ' | \
' + '%d'.format(data[protocol][prefix]["route_smoothed_metric"]) + ' | \
' + '%d'.format(data[protocol][prefix]["refmetric"]) + ' | \
' + '%h'.format(data[protocol][prefix]["id"]) + ' | \
' + '%d'.format(data[protocol][prefix]["seqno"]) + ' | \
' + '%d'.format(data[protocol][prefix]["age"]) + ' | \
' + '%h'.format(data[protocol][prefix]["via"]) + ' | \
' + '%h'.format(data[protocol][prefix]["nexthop"]) + ' | \
' + '%b'.format(data[protocol][prefix]["installed"]) + ' | \
' + '%b'.format(data[protocol][prefix]["feasible"]) + ' | ';
prefixRow.innerHTML = prefixContent;
table.appendChild(prefixRow);
}
target.appendChild(table);
}
}
function renderTableNeighbours(ubus_data, target_div) {
const data = ubus_data;
for (let protocol in data) {
const target = target_div;
const title = document.createElement('h3');
title.appendChild(document.createTextNode('Neighbours ' + protocol));
target.appendChild(title);
const table = document.createElement('table');
table.setAttribute('class', 'table');
table.setAttribute('id', 'babel_overview_neighbours_' + protocol);
const headerRow = document.createElement('tr');
headerRow.setAttribute('class', 'tr table-titles');
const headerContent = '' + '%h'.format(protocol) + ' Neighbour | \
Device | \
Multicast Hellos | \
Unicast Hellos | \
RX cost | \
TX cost | \
RTT | \
Interface up | ';
headerRow.innerHTML = headerContent;
table.appendChild(headerRow);
for (let neighbour in data[protocol]) {
const neighbourRow = document.createElement('tr');
neighbourRow.setAttribute('class', 'tr');
const neighbourContent = '' + '%h'.format(data[protocol][neighbour]["address"]) + ' | \
' + '%h'.format(data[protocol][neighbour]["dev"]) + ' | \
' + '%d'.format(data[protocol][neighbour]["hello_reach"]) + ' | \
' + '%d'.format(data[protocol][neighbour]["uhello_reach"]) + ' | \
' + '%d'.format(data[protocol][neighbour]["rxcost"]) + ' | \
' + '%d'.format(data[protocol][neighbour]["txcost"]) + ' | \
' + '%d'.format(data[protocol][neighbour]["rtt"]) + ' | \
' + '%b'.format(data[protocol][neighbour]["if_up"]) + ' | ';
neighbourRow.innerHTML = neighbourContent;
table.appendChild(neighbourRow);
}
target.appendChild(table);
}
}
function renderTableInfo(ubus_data, target_div) {
const data = ubus_data;
const target = target_div;
const title = document.createElement('h3');
title.appendChild(document.createTextNode('Info'));
target.appendChild(title);
const table = document.createElement('table');
table.setAttribute('class', 'table');
table.setAttribute('id', 'babel_overview_info');
const headerRow = document.createElement('tr');
headerRow.setAttribute('class', 'tr table-titles');
const headerContent = 'Babeld Version | \
My-ID | \
Host | ';
headerRow.innerHTML = headerContent;
table.appendChild(headerRow);
const neighbourRow = document.createElement('tr');
neighbourRow.setAttribute('class', 'tr');
const neighbourContent = '' + '%h'.format(data["babeld_version"]) + ' | \
' + '%h'.format(data["my_id"]) + ' | \
' + '%h'.format(data["host"]) + ' | ';
neighbourRow.innerHTML = neighbourContent;
table.appendChild(neighbourRow);
target.appendChild(table);
}
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() {
let data;
let 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() {
let 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() {
return new Promise(function (resolve, reject) {
const script = E('script', { 'type': 'text/javascript' });
script.onload = resolve;
script.onerror = reject;
script.src = L.resource('babeld.js');
document.querySelector('head').appendChild(script);
});
},
render() {
return this.action_babeld()
.then(function (result) {
const mainDiv = E('div', {
'id': 'babeld'
}, []);
renderTableInfo(result.info, mainDiv);
renderTableXRoutes(result.xroutes, mainDiv);
renderTableRoutes(result.routes, mainDiv);
renderTableNeighbours(result.neighbours, mainDiv);
const fresult = E([], {}, mainDiv);
return fresult;
})
.catch(function (error) {
console.error(error);
});
},
handleSaveApply: null,
handleSave: null,
handleReset: null,
});