From: Jonathan Pagel Date: Tue, 9 Feb 2021 21:32:28 +0000 (+0100) Subject: luci-app-babeld: rewrite javascript without CDN includes X-Git-Url: http://git.lede-project.org./?a=commitdiff_plain;h=17ee61c6014329d44f5864f45986dbe626868289;p=project%2Fluci.git luci-app-babeld: rewrite javascript without CDN includes Rewrite luci app in javascript without external sources CC-Signed-off-by: Nick Hainke Signed-off-by: Jonathan Pagel --- diff --git a/applications/luci-app-babeld/Makefile b/applications/luci-app-babeld/Makefile index adfd08ccd8..6af9280261 100644 --- a/applications/luci-app-babeld/Makefile +++ b/applications/luci-app-babeld/Makefile @@ -7,4 +7,3 @@ LUCI_PKGARCH:=all include ../../luci.mk # call BuildPackage - OpenWrt buildroot signature - diff --git a/applications/luci-app-babeld/luasrc/model/cbi/babeld.lua b/applications/luci-app-babeld/luasrc/model/cbi/babeld.lua deleted file mode 100644 index 2169de4731..0000000000 --- a/applications/luci-app-babeld/luasrc/model/cbi/babeld.lua +++ /dev/null @@ -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] - - %> -
-

Babel-Info

-
-
-
Version
-
Version-Daemon
-
Host
-
ID
-
Status
-
-
-
<%= babel_version %>
-
<%= babeld_version %>
-
<%= babeld_host %>
-
<%= babeld_id %>
-
<%= babeld_status %>
-
-
-
- - <% - local xroutes = {} - for key,value in ipairs(t) do - if string.match(value, "xroute") then - xroutes[#xroutes+1] = value - end - end - %> - -
-

X-Routes

-
-
-
Route
-
Prefix
-
From
-
Metric
-
- <% - for key,route in ipairs(xroutes) do - local route_sep = string.split(route," ") - %> -
-
<%= route_sep[3] %>
-
<%= route_sep[5] %>
-
<%= route_sep[7] %>
-
<%= route_sep[9] %>
-
- <% - end - %> -
-
- - <% - local routes = {} - for key,value in ipairs(t) do - if string.match(value, "add route") then - routes[#routes+1] = value - end - end - %> - -
-

Routes

-
-
-
Prefix
-
From
-
Installed
-
ID
-
Metric
-
Ref-Metric
-
Via
-
Interface
-
- <% - for key,route in ipairs(routes) do - local route_sep = string.split(route," ") - %> - -
-
<%= route_sep[5] %>
-
<%= route_sep[7] %>
-
<%= route_sep[9] %>
-
<%= route_sep[11] %>
-
<%= route_sep[13] %>
-
<%= route_sep[15] %>
-
<%= route_sep[17] %>
-
<%= route_sep[19] %>
-
- <% - end - %> -
-
- ]]) -end - -return m diff --git a/applications/luci-app-babeld/luasrc/view/babeld.htm b/applications/luci-app-babeld/luasrc/view/babeld.htm new file mode 100644 index 0000000000..d3436f0e69 --- /dev/null +++ b/applications/luci-app-babeld/luasrc/view/babeld.htm @@ -0,0 +1,22 @@ +<%+header%> + + +
+ + +<%+footer%> diff --git a/applications/luci-app-babeld/root/etc/uci-defaults/40_luci-babeld b/applications/luci-app-babeld/root/etc/uci-defaults/40_luci-babeld new file mode 100644 index 0000000000..c9b223eec9 --- /dev/null +++ b/applications/luci-app-babeld/root/etc/uci-defaults/40_luci-babeld @@ -0,0 +1,5 @@ +#!/bin/sh + +uci set babeld.@general[0].ubus_bindings='true' + +return 0 diff --git a/applications/luci-app-babeld/root/usr/share/luci/menu.d/luci-app-babeld.json b/applications/luci-app-babeld/root/usr/share/luci/menu.d/luci-app-babeld.json index 8d0b010c21..a5f7e9259e 100644 --- a/applications/luci-app-babeld/root/usr/share/luci/menu.d/luci-app-babeld.json +++ b/applications/luci-app-babeld/root/usr/share/luci/menu.d/luci-app-babeld.json @@ -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" ] diff --git a/applications/luci-app-babeld/root/usr/share/rpcd/acl.d/luci-app-babeld.json b/applications/luci-app-babeld/root/usr/share/rpcd/acl.d/luci-app-babeld.json index 51687bad5c..71755b30d4 100644 --- a/applications/luci-app-babeld/root/usr/share/rpcd/acl.d/luci-app-babeld.json +++ b/applications/luci-app-babeld/root/usr/share/rpcd/acl.d/luci-app-babeld.json @@ -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": [ "*" ] + } } } } diff --git a/applications/luci-app-babeld/root/www/luci-static/resources/babeld.js b/applications/luci-app-babeld/root/www/luci-static/resources/babeld.js new file mode 100644 index 0000000000..864010ef6c --- /dev/null +++ b/applications/luci-app-babeld/root/www/luci-static/resources/babeld.js @@ -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 = '
' + protocol + ' Prefix
\ +
Metric
\ +
Source-Prefix
'; + + headerRow.innerHTML = headerContent; + table.appendChild(headerRow); + + + for (var prefix in data[protocol]) { + var prefixRow = document.createElement('div'); + prefixRow.setAttribute('class', 'tr'); + var prefixContent = '
' + prefix + '
\ +
' + data[protocol][prefix]["metric"] + '
\ +
' + data[protocol][prefix]["src-prefix"] + '
'; + + 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 = '
' + protocol + ' Prefix
\ +
Source-Prefix
\ +
Route-Metric
\ +
Route Smoothed Metric
\ +
Refmetric
\ +
ID
\ +
Seq. No.
\ +
Channes
\ +
Age
\ +
Via
\ +
Nexthop
\ +
Installed
\ +
Feasible
'; + + headerRow.innerHTML = headerContent; + table.appendChild(headerRow); + + for (var prefix in data[protocol]) { + var prefixRow = document.createElement('div'); + prefixRow.setAttribute('class', 'tr'); + var prefixContent = '
' + prefix + '
\ +
' + data[protocol][prefix]["src-prefix"] + '
\ +
' + data[protocol][prefix]["route_metric"] + '
\ +
' + data[protocol][prefix]["route_smoothed_metric"] + '
\ +
' + data[protocol][prefix]["refmetric"] + '
\ +
' + data[protocol][prefix]["id"] + '
\ +
' + data[protocol][prefix]["seqno"] + '
\ +
' + data[protocol][prefix]["channels"] + '
\ +
' + data[protocol][prefix]["age"] + '
\ +
' + data[protocol][prefix]["via"] + '
\ +
' + data[protocol][prefix]["nexthop"] + '
\ +
' + data[protocol][prefix]["installed"] + '
\ +
' + data[protocol][prefix]["feasible"] + '
'; + + 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 = '
' + protocol + ' Neighbour
\ +
Device
\ +
Hello-Reach
\ +
RX cost
\ +
TX cost
\ +
RTT
\ +
Channel
\ +
Interface up
'; + + headerRow.innerHTML = headerContent; + table.appendChild(headerRow); + + for (var neighbour in data[protocol]) { + var neighbourRow = document.createElement('div'); + neighbourRow.setAttribute('class', 'tr'); + var neighbourContent = '
' + neighbour + '
\ +
' + data[protocol][neighbour]["dev"] + '
\ +
' + data[protocol][neighbour]["hello-reach"] + '
\ +
' + data[protocol][neighbour]["rxcost"] + '
\ +
' + data[protocol][neighbour]["txcost"] + '
\ +
' + data[protocol][neighbour]["rtt"] + '
\ +
' + data[protocol][neighbour]["channel"] + '
\ +
' + data[protocol][neighbour]["if_up"] + '
'; + + 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 = '
Babeld Version
\ +
My-ID
\ +
Host
'; + + headerRow.innerHTML = headerContent; + table.appendChild(headerRow); + + var neighbourRow = document.createElement('div'); + neighbourRow.setAttribute('class', 'tr'); + var neighbourContent = '
' + data["babeld-version"] + '
\ +
' + data["my-id"] + '
\ +
' + data["host"] + '
'; + + neighbourRow.innerHTML = neighbourContent; + table.appendChild(neighbourRow); + target.appendChild(table); +}