mirror of https://github.com/openwrt/luci.git
luci-app-babeld: rewrite javascript without CDN includes
Rewrite luci app in javascript without external sources CC-Signed-off-by: Nick Hainke <vincent@systemli.org> Signed-off-by: Jonathan Pagel <jonny_tischbein@systemli.org>pull/4818/head
Jonathan Pagel
Paul Spooren
parent
e8415ff64e
commit
17ee61c601
|
|
@ -7,4 +7,3 @@ LUCI_PKGARCH:=all
|
|||
include ../../luci.mk
|
||||
|
||||
# call BuildPackage - OpenWrt buildroot signature
|
||||
|
||||
|
|
|
|||
|
|
@ -1,127 +0,0 @@
|
|||
m = Map("babeld", translate("Babeld Overview"))
|
||||
m.pageaction = false
|
||||
|
||||
s = m:section(NamedSection, "__babeldoverview__")
|
||||
|
||||
function s.render(self, sid)
|
||||
local tpl = require "luci.template"
|
||||
|
||||
tpl.render_string([[
|
||||
<%
|
||||
local utl = require "luci.util"
|
||||
local v6_port = 33123
|
||||
-- FIXME: check if call is correct
|
||||
local dump = utl.exec("(echo dump | nc ::1 %d)" % v6_port)
|
||||
local t = {}
|
||||
|
||||
for strline in string.gmatch(dump, "[^\n]+") do
|
||||
t[#t+1] = strline;
|
||||
end
|
||||
|
||||
local babel_version = t[1]
|
||||
local babeld_version = t[2]
|
||||
local babeld_host = string.split(t[3], " ")[2]
|
||||
local babeld_id = string.split(t[4], " ")[2]
|
||||
local babeld_status = t[5]
|
||||
|
||||
%>
|
||||
<div class="cbi-section-node">
|
||||
<h3>Babel-Info</h3>
|
||||
<div class="table" id=babel_status_main">
|
||||
<div class="tr table-titles">
|
||||
<div class="th">Version</div>
|
||||
<div class="th">Version-Daemon</div>
|
||||
<div class="th">Host</div>
|
||||
<div class="th">ID</div>
|
||||
<div class="th">Status</div>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div class="td"><%= babel_version %></div>
|
||||
<div class="td"><%= babeld_version %></div>
|
||||
<div class="td"><%= babeld_host %></div>
|
||||
<div class="td"><%= babeld_id %></div>
|
||||
<div class="td"><%= babeld_status %></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%
|
||||
local xroutes = {}
|
||||
for key,value in ipairs(t) do
|
||||
if string.match(value, "xroute") then
|
||||
xroutes[#xroutes+1] = value
|
||||
end
|
||||
end
|
||||
%>
|
||||
|
||||
<div class="cbi-section-node">
|
||||
<h3>X-Routes</h3>
|
||||
<div class="table" id=babel_overview_xroute">
|
||||
<div class="tr table-titles">
|
||||
<div class="th">Route</div>
|
||||
<div class="th">Prefix</div>
|
||||
<div class="th">From</div>
|
||||
<div class="th">Metric</div>
|
||||
</div>
|
||||
<%
|
||||
for key,route in ipairs(xroutes) do
|
||||
local route_sep = string.split(route," ")
|
||||
%>
|
||||
<div class="tr">
|
||||
<div class="td"><%= route_sep[3] %></div>
|
||||
<div class="td"><%= route_sep[5] %></div>
|
||||
<div class="td"><%= route_sep[7] %></div>
|
||||
<div class="td"><%= route_sep[9] %></div>
|
||||
</div>
|
||||
<%
|
||||
end
|
||||
%>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%
|
||||
local routes = {}
|
||||
for key,value in ipairs(t) do
|
||||
if string.match(value, "add route") then
|
||||
routes[#routes+1] = value
|
||||
end
|
||||
end
|
||||
%>
|
||||
|
||||
<div class="cbi-section-node">
|
||||
<h3>Routes</h3>
|
||||
<div class="table" id=babel_overview_route">
|
||||
<div class="tr table-titles">
|
||||
<div class="th">Prefix</div>
|
||||
<div class="th">From</div>
|
||||
<div class="th">Installed</div>
|
||||
<div class="th">ID</div>
|
||||
<div class="th">Metric</div>
|
||||
<div class="th">Ref-Metric</div>
|
||||
<div class="th">Via</div>
|
||||
<div class="th">Interface</div>
|
||||
</div>
|
||||
<%
|
||||
for key,route in ipairs(routes) do
|
||||
local route_sep = string.split(route," ")
|
||||
%>
|
||||
|
||||
<div class="tr">
|
||||
<div class="td"><%= route_sep[5] %></div>
|
||||
<div class="td"><%= route_sep[7] %></div>
|
||||
<div class="td"><%= route_sep[9] %></div>
|
||||
<div class="td"><%= route_sep[11] %></div>
|
||||
<div class="td"><%= route_sep[13] %></div>
|
||||
<div class="td"><%= route_sep[15] %></div>
|
||||
<div class="td"><%= route_sep[17] %></div>
|
||||
<div class="td"><%= route_sep[19] %></div>
|
||||
</div>
|
||||
<%
|
||||
end
|
||||
%>
|
||||
</div>
|
||||
</div>
|
||||
]])
|
||||
end
|
||||
|
||||
return m
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<%+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%>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
#!/bin/sh
|
||||
|
||||
uci set babeld.@general[0].ubus_bindings='true'
|
||||
|
||||
return 0
|
||||
|
|
@ -2,9 +2,8 @@
|
|||
"admin/status/babeld": {
|
||||
"title": "Babeld",
|
||||
"action": {
|
||||
"type": "cbi",
|
||||
"path": "babeld",
|
||||
"post": { "cbi.submit": true }
|
||||
"type": "template",
|
||||
"path": "babeld"
|
||||
},
|
||||
"depends": {
|
||||
"acl": [ "luci-app-babeld" ]
|
||||
|
|
|
|||
|
|
@ -2,10 +2,16 @@
|
|||
"luci-app-babeld": {
|
||||
"description": "Grant UCI access for babeld",
|
||||
"read": {
|
||||
"uci": [ "babeld" ]
|
||||
"uci": [ "babeld" ],
|
||||
"ubus": {
|
||||
"babeld": [ "*" ]
|
||||
}
|
||||
},
|
||||
"write": {
|
||||
"uci": [ "babeld" ]
|
||||
"uci": [ "babeld" ],
|
||||
"ubus": {
|
||||
"babeld": [ "*" ]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,189 @@
|
|||
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('div');
|
||||
table.setAttribute('class', 'table');
|
||||
table.setAttribute('id', 'babel_overview_xroutes_' + protocol);
|
||||
|
||||
var headerRow = document.createElement('div');
|
||||
headerRow.setAttribute('class', 'tr table-titles');
|
||||
var headerContent = '<div class="th" style="font-weight: 700;">' + protocol + ' Prefix</div>\
|
||||
<div class="th" style="font-weight: 700;">Metric</div>\
|
||||
<div class="th" style="font-weight: 700;">Source-Prefix</div>';
|
||||
|
||||
headerRow.innerHTML = headerContent;
|
||||
table.appendChild(headerRow);
|
||||
|
||||
|
||||
for (var prefix in data[protocol]) {
|
||||
var prefixRow = document.createElement('div');
|
||||
prefixRow.setAttribute('class', 'tr');
|
||||
var prefixContent = '<div class="td" data-title="xroutes_' + protocol + '_prefix">' + prefix + '</div>\
|
||||
<div class="td" data-title="xroutes_' + protocol + '_metric">' + data[protocol][prefix]["metric"] + '</div>\
|
||||
<div class="td" data-title="xroutes_' + protocol + '_src-prefix">' + data[protocol][prefix]["src-prefix"] + '</div>';
|
||||
|
||||
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('div');
|
||||
table.setAttribute('class', 'table');
|
||||
table.setAttribute('id', 'babel_overview_routes_' + protocol);
|
||||
|
||||
var headerRow = document.createElement('div');
|
||||
headerRow.setAttribute('class', 'tr table-titles');
|
||||
var headerContent = '<div class="th" style="font-weight: 700;">' + protocol + ' Prefix</div>\
|
||||
<div class="th" style="font-weight: 700;">Source-Prefix</div>\
|
||||
<div class="th" style="font-weight: 700;">Route-Metric</div>\
|
||||
<div class="th" style="font-weight: 700;">Route Smoothed Metric</div>\
|
||||
<div class="th" style="font-weight: 700;">Refmetric</div>\
|
||||
<div class="th" style="font-weight: 700;">ID</div>\
|
||||
<div class="th" style="font-weight: 700;">Seq. No.</div>\
|
||||
<div class="th" style="font-weight: 700;">Channes</div>\
|
||||
<div class="th" style="font-weight: 700;">Age</div>\
|
||||
<div class="th" style="font-weight: 700;">Via</div>\
|
||||
<div class="th" style="font-weight: 700;">Nexthop</div>\
|
||||
<div class="th" style="font-weight: 700;">Installed</div>\
|
||||
<div class="th" style="font-weight: 700;">Feasible</div>';
|
||||
|
||||
headerRow.innerHTML = headerContent;
|
||||
table.appendChild(headerRow);
|
||||
|
||||
for (var prefix in data[protocol]) {
|
||||
var prefixRow = document.createElement('div');
|
||||
prefixRow.setAttribute('class', 'tr');
|
||||
var prefixContent = '<div class="td" data-title="routes_' + protocol + '_prefix">' + prefix + '</div>\
|
||||
<div class="td" data-title="routes_' + protocol + '_src-prefix">' + data[protocol][prefix]["src-prefix"] + '</div>\
|
||||
<div class="td" data-title="routes_' + protocol + '_metric">' + data[protocol][prefix]["route_metric"] + '</div>\
|
||||
<div class="td" data-title="routes_' + protocol + '_rout-smoothed-metric">' + data[protocol][prefix]["route_smoothed_metric"] + '</div>\
|
||||
<div class="td" data-title="routes_' + protocol + '_refmetric">' + data[protocol][prefix]["refmetric"] + '</div>\
|
||||
<div class="td" data-title="routes_' + protocol + '_id">' + data[protocol][prefix]["id"] + '</div>\
|
||||
<div class="td" data-title="routes_' + protocol + '_seqno">' + data[protocol][prefix]["seqno"] + '</div>\
|
||||
<div class="td" data-title="routes_' + protocol + '_channels">' + data[protocol][prefix]["channels"] + '</div>\
|
||||
<div class="td" data-title="routes_' + protocol + '_age">' + data[protocol][prefix]["age"] + '</div>\
|
||||
<div class="td" data-title="routes_' + protocol + '_via">' + data[protocol][prefix]["via"] + '</div>\
|
||||
<div class="td" data-title="routes_' + protocol + '_nexthop">' + data[protocol][prefix]["nexthop"] + '</div>\
|
||||
<div class="td" data-title="routes_' + protocol + '_installed">' + data[protocol][prefix]["installed"] + '</div>\
|
||||
<div class="td" data-title="routes_' + protocol + '_feasible">' + data[protocol][prefix]["feasible"] + '</div>';
|
||||
|
||||
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('div');
|
||||
table.setAttribute('class', 'table');
|
||||
table.setAttribute('id', 'babel_overview_neighbours_' + protocol);
|
||||
|
||||
var headerRow = document.createElement('div');
|
||||
headerRow.setAttribute('class', 'tr table-titles');
|
||||
var headerContent = '<div class="th" style="font-weight: 700;">' + protocol + ' Neighbour</div>\
|
||||
<div class="th" style="font-weight: 700;">Device</div>\
|
||||
<div class="th" style="font-weight: 700;">Hello-Reach</div>\
|
||||
<div class="th" style="font-weight: 700;">RX cost</div>\
|
||||
<div class="th" style="font-weight: 700;">TX cost</div>\
|
||||
<div class="th" style="font-weight: 700;">RTT</div>\
|
||||
<div class="th" style="font-weight: 700;">Channel</div>\
|
||||
<div class="th" style="font-weight: 700;">Interface up</div>';
|
||||
|
||||
headerRow.innerHTML = headerContent;
|
||||
table.appendChild(headerRow);
|
||||
|
||||
for (var neighbour in data[protocol]) {
|
||||
var neighbourRow = document.createElement('div');
|
||||
neighbourRow.setAttribute('class', 'tr');
|
||||
var neighbourContent = '<div class="td" data-title="' + protocol + '_neighbour">' + neighbour + '</div>\
|
||||
<div class="td" data-title="neighbours_' + protocol + '_dev">' + data[protocol][neighbour]["dev"] + '</div>\
|
||||
<div class="td" data-title="neighbours_' + protocol + '_hello-reach">' + data[protocol][neighbour]["hello-reach"] + '</div>\
|
||||
<div class="td" data-title="neighbours_' + protocol + '_rxcost">' + data[protocol][neighbour]["rxcost"] + '</div>\
|
||||
<div class="td" data-title="neighbours_' + protocol + '_txcost">' + data[protocol][neighbour]["txcost"] + '</div>\
|
||||
<div class="td" data-title="neighbours_' + protocol + '_rtt">' + data[protocol][neighbour]["rtt"] + '</div>\
|
||||
<div class="td" data-title="neighbours_' + protocol + '_channel">' + data[protocol][neighbour]["channel"] + '</div>\
|
||||
<div class="td" data-title="neighbours_' + protocol + '_if_up">' + data[protocol][neighbour]["if_up"] + '</div>';
|
||||
|
||||
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('div');
|
||||
table.setAttribute('class', 'table');
|
||||
table.setAttribute('id', 'babel_overview_info');
|
||||
|
||||
|
||||
var headerRow = document.createElement('div');
|
||||
headerRow.setAttribute('class', 'tr table-titles');
|
||||
var headerContent = '<div class="th" style="font-weight: 700;">Babeld Version</div>\
|
||||
<div class="th" style="font-weight: 700;">My-ID</div>\
|
||||
<div class="th" style="font-weight: 700;">Host</div>';
|
||||
|
||||
headerRow.innerHTML = headerContent;
|
||||
table.appendChild(headerRow);
|
||||
|
||||
var neighbourRow = document.createElement('div');
|
||||
neighbourRow.setAttribute('class', 'tr');
|
||||
var neighbourContent = '<div class="td" data-title="info_babeld-version">' + data["babeld-version"] + '</div>\
|
||||
<div class="td" data-title="info_dev">' + data["my-id"] + '</div>\
|
||||
<div class="td" data-title="info_hello-reach">' + data["host"] + '</div>';
|
||||
|
||||
neighbourRow.innerHTML = neighbourContent;
|
||||
table.appendChild(neighbourRow);
|
||||
target.appendChild(table);
|
||||
}
|
||||
Loading…
Reference in New Issue