Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-app-babeld: use table markup for overview tables

Browse source 
Fixes: #6337
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2023-04-29 00:23:56 +02:00
parent d9dcf98778
commit 70fb460c00
1 changed files with 66 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

132
applications/luci-app-babeld/root/www/luci-static/resources/babeld.js
View file

@ -28,26 +28,26 @@ function renderTableXRoutes(data, target_id) {
title.appendChild(document.createTextNode('X-Routes ' + protocol)); title.appendChild(document.createTextNode('X-Routes ' + protocol));
target.appendChild(title); target.appendChild(title);
var table = document.createElement('div'); var table = document.createElement('table');
table.setAttribute('class', 'table'); table.setAttribute('class', 'table');
table.setAttribute('id', 'babel_overview_xroutes_' + protocol); table.setAttribute('id', 'babel_overview_xroutes_' + protocol);
var headerRow = document.createElement('div'); var headerRow = document.createElement('tr');
headerRow.setAttribute('class', 'tr table-titles'); headerRow.setAttribute('class', 'tr table-titles');
var headerContent = '<div class="th" style="font-weight: 700;">' + protocol + ' Prefix</div>\ var headerContent = '<th class="th" style="font-weight: 700;">' + protocol + ' Prefix</th>\
<div class="th" style="font-weight: 700;">Metric</div>\ <th class="th" style="font-weight: 700;">Metric</th>\
<div class="th" style="font-weight: 700;">Source-Prefix</div>'; <th class="th" style="font-weight: 700;">Source-Prefix</th>';
headerRow.innerHTML = headerContent; headerRow.innerHTML = headerContent;
table.appendChild(headerRow); table.appendChild(headerRow);
for (var prefix in data[protocol]) { for (var prefix in data[protocol]) {
var prefixRow = document.createElement('div'); var prefixRow = document.createElement('tr');
prefixRow.setAttribute('class', 'tr'); prefixRow.setAttribute('class', 'tr');
var prefixContent = '<div class="td" data-title="xroutes_' + protocol + '_prefix">' + prefix + '</div>\ var prefixContent = '<td class="td" data-title="xroutes_' + protocol + '_prefix">' + prefix + '</td>\
<div class="td" data-title="xroutes_' + protocol + '_metric">' + data[protocol][prefix]["metric"] + '</div>\ <td class="td" data-title="xroutes_' + protocol + '_metric">' + data[protocol][prefix]["metric"] + '</td>\
<div class="td" data-title="xroutes_' + protocol + '_src-prefix">' + data[protocol][prefix]["src-prefix"] + '</div>'; <td class="td" data-title="xroutes_' + protocol + '_src-prefix">' + data[protocol][prefix]["src-prefix"] + '</td>';
prefixRow.innerHTML = prefixContent; prefixRow.innerHTML = prefixContent;
table.appendChild(prefixRow); table.appendChild(prefixRow);
@ -64,45 +64,45 @@ function renderTableRoutes(data, target_id) {
title.appendChild(document.createTextNode('Routes ' + protocol)); title.appendChild(document.createTextNode('Routes ' + protocol));
target.appendChild(title); target.appendChild(title);
var table = document.createElement('div'); var table = document.createElement('table');
table.setAttribute('class', 'table'); table.setAttribute('class', 'table');
table.setAttribute('id', 'babel_overview_routes_' + protocol); table.setAttribute('id', 'babel_overview_routes_' + protocol);
var headerRow = document.createElement('div'); var headerRow = document.createElement('tr');
headerRow.setAttribute('class', 'tr table-titles'); headerRow.setAttribute('class', 'tr table-titles');
var headerContent = '<div class="th" style="font-weight: 700;">' + protocol + ' Prefix</div>\ var headerContent = '<th class="th" style="font-weight: 700;">' + protocol + ' Prefix</th>\
<div class="th" style="font-weight: 700;">Source-Prefix</div>\ <th class="th" style="font-weight: 700;">Source-Prefix</th>\
<div class="th" style="font-weight: 700;">Route-Metric</div>\ <th class="th" style="font-weight: 700;">Route-Metric</th>\
<div class="th" style="font-weight: 700;">Route Smoothed Metric</div>\ <th class="th" style="font-weight: 700;">Route Smoothed Metric</th>\
<div class="th" style="font-weight: 700;">Refmetric</div>\ <th class="th" style="font-weight: 700;">Refmetric</th>\
<div class="th" style="font-weight: 700;">ID</div>\ <th class="th" style="font-weight: 700;">ID</th>\
<div class="th" style="font-weight: 700;">Seq. No.</div>\ <th class="th" style="font-weight: 700;">Seq. No.</th>\
<div class="th" style="font-weight: 700;">Channes</div>\ <th class="th" style="font-weight: 700;">Channes</th>\
<div class="th" style="font-weight: 700;">Age</div>\ <th class="th" style="font-weight: 700;">Age</th>\
<div class="th" style="font-weight: 700;">Via</div>\ <th class="th" style="font-weight: 700;">Via</th>\
<div class="th" style="font-weight: 700;">Nexthop</div>\ <th class="th" style="font-weight: 700;">Nexthop</th>\
<div class="th" style="font-weight: 700;">Installed</div>\ <th class="th" style="font-weight: 700;">Installed</th>\
<div class="th" style="font-weight: 700;">Feasible</div>'; <th class="th" style="font-weight: 700;">Feasible</th>';
headerRow.innerHTML = headerContent; headerRow.innerHTML = headerContent;
table.appendChild(headerRow); table.appendChild(headerRow);
for (var prefix in data[protocol]) { for (var prefix in data[protocol]) {
var prefixRow = document.createElement('div'); var prefixRow = document.createElement('tr');
prefixRow.setAttribute('class', 'tr'); prefixRow.setAttribute('class', 'tr');
var prefixContent = '<div class="td" data-title="routes_' + protocol + '_prefix">' + prefix + '</div>\ var prefixContent = '<td class="td" data-title="routes_' + protocol + '_prefix">' + prefix + '</td>\
<div class="td" data-title="routes_' + protocol + '_src-prefix">' + data[protocol][prefix]["src-prefix"] + '</div>\ <td class="td" data-title="routes_' + protocol + '_src-prefix">' + data[protocol][prefix]["src-prefix"] + '</td>\
<div class="td" data-title="routes_' + protocol + '_metric">' + data[protocol][prefix]["route_metric"] + '</div>\ <td class="td" data-title="routes_' + protocol + '_metric">' + data[protocol][prefix]["route_metric"] + '</td>\
<div class="td" data-title="routes_' + protocol + '_rout-smoothed-metric">' + data[protocol][prefix]["route_smoothed_metric"] + '</div>\ <td class="td" data-title="routes_' + protocol + '_rout-smoothed-metric">' + data[protocol][prefix]["route_smoothed_metric"] + '</td>\
<div class="td" data-title="routes_' + protocol + '_refmetric">' + data[protocol][prefix]["refmetric"] + '</div>\ <td class="td" data-title="routes_' + protocol + '_refmetric">' + data[protocol][prefix]["refmetric"] + '</td>\
<div class="td" data-title="routes_' + protocol + '_id">' + data[protocol][prefix]["id"] + '</div>\ <td class="td" data-title="routes_' + protocol + '_id">' + data[protocol][prefix]["id"] + '</td>\
<div class="td" data-title="routes_' + protocol + '_seqno">' + data[protocol][prefix]["seqno"] + '</div>\ <td class="td" data-title="routes_' + protocol + '_seqno">' + data[protocol][prefix]["seqno"] + '</td>\
<div class="td" data-title="routes_' + protocol + '_channels">' + data[protocol][prefix]["channels"] + '</div>\ <td class="td" data-title="routes_' + protocol + '_channels">' + data[protocol][prefix]["channels"] + '</td>\
<div class="td" data-title="routes_' + protocol + '_age">' + data[protocol][prefix]["age"] + '</div>\ <td class="td" data-title="routes_' + protocol + '_age">' + data[protocol][prefix]["age"] + '</td>\
<div class="td" data-title="routes_' + protocol + '_via">' + data[protocol][prefix]["via"] + '</div>\ <td class="td" data-title="routes_' + protocol + '_via">' + data[protocol][prefix]["via"] + '</td>\
<div class="td" data-title="routes_' + protocol + '_nexthop">' + data[protocol][prefix]["nexthop"] + '</div>\ <td class="td" data-title="routes_' + protocol + '_nexthop">' + data[protocol][prefix]["nexthop"] + '</td>\
<div class="td" data-title="routes_' + protocol + '_installed">' + data[protocol][prefix]["installed"] + '</div>\ <td class="td" data-title="routes_' + protocol + '_installed">' + data[protocol][prefix]["installed"] + '</td>\
<div class="td" data-title="routes_' + protocol + '_feasible">' + data[protocol][prefix]["feasible"] + '</div>'; <td class="td" data-title="routes_' + protocol + '_feasible">' + data[protocol][prefix]["feasible"] + '</td>';
prefixRow.innerHTML = prefixContent; prefixRow.innerHTML = prefixContent;
table.appendChild(prefixRow); table.appendChild(prefixRow);
@ -119,35 +119,35 @@ function renderTableNeighbours(data, target_id) {
title.appendChild(document.createTextNode('Neighbours ' + protocol)); title.appendChild(document.createTextNode('Neighbours ' + protocol));
target.appendChild(title); target.appendChild(title);
var table = document.createElement('div'); var table = document.createElement('table');
table.setAttribute('class', 'table'); table.setAttribute('class', 'table');
table.setAttribute('id', 'babel_overview_neighbours_' + protocol); table.setAttribute('id', 'babel_overview_neighbours_' + protocol);
var headerRow = document.createElement('div'); var headerRow = document.createElement('tr');
headerRow.setAttribute('class', 'tr table-titles'); headerRow.setAttribute('class', 'tr table-titles');
var headerContent = '<div class="th" style="font-weight: 700;">' + protocol + ' Neighbour</div>\ var headerContent = '<th class="th" style="font-weight: 700;">' + protocol + ' Neighbour</th>\
<div class="th" style="font-weight: 700;">Device</div>\ <th class="th" style="font-weight: 700;">Device</th>\
<div class="th" style="font-weight: 700;">Hello-Reach</div>\ <th class="th" style="font-weight: 700;">Hello-Reach</th>\
<div class="th" style="font-weight: 700;">RX cost</div>\ <th class="th" style="font-weight: 700;">RX cost</th>\
<div class="th" style="font-weight: 700;">TX cost</div>\ <th class="th" style="font-weight: 700;">TX cost</th>\
<div class="th" style="font-weight: 700;">RTT</div>\ <th class="th" style="font-weight: 700;">RTT</th>\
<div class="th" style="font-weight: 700;">Channel</div>\ <th class="th" style="font-weight: 700;">Channel</th>\
<div class="th" style="font-weight: 700;">Interface up</div>'; <th class="th" style="font-weight: 700;">Interface up</th>';
headerRow.innerHTML = headerContent; headerRow.innerHTML = headerContent;
table.appendChild(headerRow); table.appendChild(headerRow);
for (var neighbour in data[protocol]) { for (var neighbour in data[protocol]) {
var neighbourRow = document.createElement('div'); var neighbourRow = document.createElement('tr');
neighbourRow.setAttribute('class', 'tr'); neighbourRow.setAttribute('class', 'tr');
var neighbourContent = '<div class="td" data-title="' + protocol + '_neighbour">' + neighbour + '</div>\ var neighbourContent = '<td class="td" data-title="' + protocol + '_neighbour">' + neighbour + '</td>\
<div class="td" data-title="neighbours_' + protocol + '_dev">' + data[protocol][neighbour]["dev"] + '</div>\ <td class="td" data-title="neighbours_' + protocol + '_dev">' + data[protocol][neighbour]["dev"] + '</td>\
<div class="td" data-title="neighbours_' + protocol + '_hello-reach">' + data[protocol][neighbour]["hello-reach"] + '</div>\ <td class="td" data-title="neighbours_' + protocol + '_hello-reach">' + data[protocol][neighbour]["hello-reach"] + '</td>\
<div class="td" data-title="neighbours_' + protocol + '_rxcost">' + data[protocol][neighbour]["rxcost"] + '</div>\ <td class="td" data-title="neighbours_' + protocol + '_rxcost">' + data[protocol][neighbour]["rxcost"] + '</td>\
<div class="td" data-title="neighbours_' + protocol + '_txcost">' + data[protocol][neighbour]["txcost"] + '</div>\ <td class="td" data-title="neighbours_' + protocol + '_txcost">' + data[protocol][neighbour]["txcost"] + '</td>\
<div class="td" data-title="neighbours_' + protocol + '_rtt">' + data[protocol][neighbour]["rtt"] + '</div>\ <td class="td" data-title="neighbours_' + protocol + '_rtt">' + data[protocol][neighbour]["rtt"] + '</td>\
<div class="td" data-title="neighbours_' + protocol + '_channel">' + data[protocol][neighbour]["channel"] + '</div>\ <td class="td" data-title="neighbours_' + protocol + '_channel">' + data[protocol][neighbour]["channel"] + '</td>\
<div class="td" data-title="neighbours_' + protocol + '_if_up">' + data[protocol][neighbour]["if_up"] + '</div>'; <td class="td" data-title="neighbours_' + protocol + '_if_up">' + data[protocol][neighbour]["if_up"] + '</td>';
neighbourRow.innerHTML = neighbourContent; neighbourRow.innerHTML = neighbourContent;
table.appendChild(neighbourRow); table.appendChild(neighbourRow);
@ -163,25 +163,25 @@ function renderTableInfo(data, target_id) {
title.appendChild(document.createTextNode('Info')); title.appendChild(document.createTextNode('Info'));
target.appendChild(title); target.appendChild(title);
var table = document.createElement('div'); var table = document.createElement('table');
table.setAttribute('class', 'table'); table.setAttribute('class', 'table');
table.setAttribute('id', 'babel_overview_info'); table.setAttribute('id', 'babel_overview_info');
var headerRow = document.createElement('div'); var headerRow = document.createElement('tr');
headerRow.setAttribute('class', 'tr table-titles'); headerRow.setAttribute('class', 'tr table-titles');
var headerContent = '<div class="th" style="font-weight: 700;">Babeld Version</div>\ var headerContent = '<th class="th" style="font-weight: 700;">Babeld Version</th>\
<div class="th" style="font-weight: 700;">My-ID</div>\ <th class="th" style="font-weight: 700;">My-ID</th>\
<div class="th" style="font-weight: 700;">Host</div>'; <th class="th" style="font-weight: 700;">Host</th>';
headerRow.innerHTML = headerContent; headerRow.innerHTML = headerContent;
table.appendChild(headerRow); table.appendChild(headerRow);
var neighbourRow = document.createElement('div'); var neighbourRow = document.createElement('tr');
neighbourRow.setAttribute('class', 'tr'); neighbourRow.setAttribute('class', 'tr');
var neighbourContent = '<div class="td" data-title="info_babeld-version">' + data["babeld-version"] + '</div>\ var neighbourContent = '<td class="td" data-title="info_babeld-version">' + data["babeld-version"] + '</td>\
<div class="td" data-title="info_dev">' + data["my-id"] + '</div>\ <td class="td" data-title="info_dev">' + data["my-id"] + '</td>\
<div class="td" data-title="info_hello-reach">' + data["host"] + '</div>'; <td class="td" data-title="info_hello-reach">' + data["host"] + '</td>';
neighbourRow.innerHTML = neighbourContent; neighbourRow.innerHTML = neighbourContent;
table.appendChild(neighbourRow); table.appendChild(neighbourRow);