include $(TOPDIR)/rules.mk
LUCI_TITLE:=LuCI support for babeld
-LUCI_DEPENDS:=+luci-base +babeld +luci-compat
+LUCI_DEPENDS:=+luci-base +babeld
include ../../luci.mk
--- /dev/null
+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);
+}
--- /dev/null
+'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,
+});
+++ /dev/null
-<%+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%>
{
+
"admin/status/babeld": {
"title": "Babeld",
+ "order": 5,
"action": {
- "type": "template",
- "path": "babeld"
- },
- "depends": {
- "acl": [ "luci-app-babeld" ]
+ "type": "view",
+ "path": "babeld/babeld-view"
}
}
+
}
{
"luci-app-babeld": {
- "description": "Grant UCI access for babeld",
+ "description": "Grant UCI access for luci-app-babeld",
"read": {
- "uci": [ "babeld" ],
+ "uci": [
+ "babeld"
+ ],
"ubus": {
- "babeld": [ "*" ]
- }
+ "babeld": [
+ "*"
+ ]
+ }
},
"write": {
- "uci": [ "babeld" ],
+ "uci": [
+ "babeld"
+ ],
"ubus": {
- "babeld": [ "*" ]
+ "babeld": [
+ "*"
+ ]
}
}
}
-}
+}
\ No newline at end of file
+++ /dev/null
-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);
-}
projects / project / luci.git / commitdiff