diff --git a/applications/luci-app-babeld/htdocs/luci-static/resources/babeld.js b/applications/luci-app-babeld/htdocs/luci-static/resources/babeld.js
deleted file mode 100644
index 24df941535..0000000000
--- a/applications/luci-app-babeld/htdocs/luci-static/resources/babeld.js
+++ /dev/null
@@ -1,169 +0,0 @@
-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 = '| ' + '%h'.format(protocol) + ' Prefix | \
- Metric | \
- Source-Prefix | ';
-
- headerRow.innerHTML = headerContent;
- table.appendChild(headerRow);
-
-
- for (var prefix in data[protocol]) {
- var prefixRow = document.createElement('tr');
- prefixRow.setAttribute('class', 'tr');
- var 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) {
- 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 = '' + '%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 (var prefix in data[protocol]) {
- var prefixRow = document.createElement('tr');
- prefixRow.setAttribute('class', 'tr');
- var 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) {
- 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 = '' + '%h'.format(protocol) + ' Neighbour | \
- Device | \
- Multicast Hellos | \
- Unicast Hellos | \
- RX cost | \
- TX cost | \
- RTT | \
- Interface up | ';
-
- headerRow.innerHTML = headerContent;
- table.appendChild(headerRow);
-
- for (var neighbour in data[protocol]) {
- var neighbourRow = document.createElement('tr');
- neighbourRow.setAttribute('class', 'tr');
- var 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) {
- 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 = 'Babeld Version | \
- My-ID | \
- Host | ';
-
- headerRow.innerHTML = headerContent;
- table.appendChild(headerRow);
-
- var neighbourRow = document.createElement('tr');
- neighbourRow.setAttribute('class', 'tr');
- var neighbourContent = '' + '%h'.format(data["babeld_version"]) + ' | \
- ' + '%h'.format(data["my_id"]) + ' | \
- ' + '%h'.format(data["host"]) + ' | ';
-
- neighbourRow.innerHTML = neighbourContent;
- table.appendChild(neighbourRow);
- target.appendChild(table);
-}
diff --git a/applications/luci-app-babeld/htdocs/luci-static/resources/view/babeld/babeld-view.js b/applications/luci-app-babeld/htdocs/luci-static/resources/view/babeld/babeld-view.js
index 1714866d0f..4c1c6325df 100644
--- a/applications/luci-app-babeld/htdocs/luci-static/resources/view/babeld/babeld-view.js
+++ b/applications/luci-app-babeld/htdocs/luci-static/resources/view/babeld/babeld-view.js
@@ -5,6 +5,177 @@
'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',
@@ -23,9 +194,9 @@ return view.extend({
method: 'get_neighbours'
}),
- fetch_babeld: function () {
- var data;
- var self = this;
+ 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) {
@@ -39,8 +210,8 @@ return view.extend({
});
},
- action_babeld: function () {
- var self = this;
+ action_babeld() {
+ let self = this;
return new Promise(function (resolve, reject) {
self
.fetch_babeld()
@@ -58,22 +229,20 @@ return view.extend({
});
},
- load: function () {
- var self = this;
+ load() {
return new Promise(function (resolve, reject) {
- var script = E('script', { 'type': 'text/javascript' });
+ 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: function () {
- var self = this;
+ render() {
return this.action_babeld()
.then(function (result) {
- var mainDiv = E('div', {
+ const mainDiv = E('div', {
'id': 'babeld'
}, []);
@@ -82,8 +251,8 @@ return view.extend({
renderTableRoutes(result.routes, mainDiv);
renderTableNeighbours(result.neighbours, mainDiv);
- var result = E([], {}, mainDiv);
- return result;
+ const fresult = E([], {}, mainDiv);
+ return fresult;
})
.catch(function (error) {
console.error(error);