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>

2 files changed, 266 insertions, 0 deletions

diff --git a/applications/luci-app-babeld/htdocs/luci-static/resources/babeld.js b/applications/luci-app-babeld/htdocs/luci-static/resources/babeld.js
new file mode 100644
index 0000000000..6bcbdf0e29
--- /dev/null
+++ b/applications/luci-app-babeld/htdocs/luci-static/resources/babeld.js
@@ -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);
+}
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
new file mode 100644
index 0000000000..1714866d0f
--- /dev/null
+++ b/applications/luci-app-babeld/htdocs/luci-static/resources/view/babeld/babeld-view.js
@@ -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,
+});