Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-babeld: migrate to js fix makefile Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-babeld: migrate to js luci-app-babeld: migrate to js fix app name Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-babeld: migrate to js luci-app-babeld: migrate to js Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-babeld: migrate to js
- Loading branch information
1 parent
467aca5
commit 1325edf
Showing
7 changed files
with
287 additions
and
224 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
171 changes: 171 additions & 0 deletions
171
applications/luci-app-babeld/htdocs/luci-static/resources/babeld.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} |
95 changes: 95 additions & 0 deletions
95
applications/luci-app-babeld/htdocs/luci-static/resources/view/babeld/babeld-view.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
}); |
This file was deleted.
Oops, something went wrong.
10 changes: 5 additions & 5 deletions
10
applications/luci-app-babeld/root/usr/share/luci/menu.d/luci-app-babeld.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,12 @@ | ||
{ | ||
|
||
"admin/status/babeld": { | ||
"title": "Babeld", | ||
"order": 5, | ||
"action": { | ||
"type": "template", | ||
"path": "babeld" | ||
}, | ||
"depends": { | ||
"acl": [ "luci-app-babeld" ] | ||
"type": "view", | ||
"path": "babeld/babeld-view" | ||
} | ||
} | ||
|
||
} |
22 changes: 15 additions & 7 deletions
22
applications/luci-app-babeld/root/usr/share/rpcd/acl.d/luci-app-babeld.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,25 @@ | ||
{ | ||
"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": [ | ||
"*" | ||
] | ||
} | ||
} | ||
} | ||
} | ||
} |
Oops, something went wrong.