From edcd682af8f793b6ca8d6fbbc50ded9768bf6176 Mon Sep 17 00:00:00 2001 From: Jo-Philipp Wich Date: Sat, 29 Apr 2023 00:23:56 +0200 Subject: [PATCH] luci-app-babeld: use table markup for overview tables Fixes: #6337 Signed-off-by: Jo-Philipp Wich (cherry picked from commit 70fb460c00d6c641a39f0cf97eb7eb846bee51e2) --- .../root/www/luci-static/resources/babeld.js | 132 +++++++++--------- 1 file changed, 66 insertions(+), 66 deletions(-) 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 index 864010ef6c..b2468dfbea 100644 --- a/applications/luci-app-babeld/root/www/luci-static/resources/babeld.js +++ b/applications/luci-app-babeld/root/www/luci-static/resources/babeld.js @@ -28,26 +28,26 @@ function renderTableXRoutes(data, target_id) { title.appendChild(document.createTextNode('X-Routes ' + protocol)); target.appendChild(title); - var table = document.createElement('div'); + var table = document.createElement('table'); table.setAttribute('class', 'table'); table.setAttribute('id', 'babel_overview_xroutes_' + protocol); - var headerRow = document.createElement('div'); + var headerRow = document.createElement('tr'); headerRow.setAttribute('class', 'tr table-titles'); - var headerContent = '
' + protocol + ' Prefix
\ -
Metric
\ -
Source-Prefix
'; + var headerContent = '' + protocol + ' Prefix\ + Metric\ + Source-Prefix'; headerRow.innerHTML = headerContent; table.appendChild(headerRow); for (var prefix in data[protocol]) { - var prefixRow = document.createElement('div'); + var prefixRow = document.createElement('tr'); prefixRow.setAttribute('class', 'tr'); - var prefixContent = '
' + prefix + '
\ -
' + data[protocol][prefix]["metric"] + '
\ -
' + data[protocol][prefix]["src-prefix"] + '
'; + var prefixContent = '' + prefix + '\ + ' + data[protocol][prefix]["metric"] + '\ + ' + data[protocol][prefix]["src-prefix"] + ''; prefixRow.innerHTML = prefixContent; table.appendChild(prefixRow); @@ -64,45 +64,45 @@ function renderTableRoutes(data, target_id) { title.appendChild(document.createTextNode('Routes ' + protocol)); target.appendChild(title); - var table = document.createElement('div'); + var table = document.createElement('table'); table.setAttribute('class', 'table'); table.setAttribute('id', 'babel_overview_routes_' + protocol); - var headerRow = document.createElement('div'); + var headerRow = document.createElement('tr'); 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
'; + 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'); + var prefixRow = document.createElement('tr'); 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"] + '
'; + 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); @@ -119,35 +119,35 @@ function renderTableNeighbours(data, target_id) { title.appendChild(document.createTextNode('Neighbours ' + protocol)); target.appendChild(title); - var table = document.createElement('div'); + var table = document.createElement('table'); table.setAttribute('class', 'table'); table.setAttribute('id', 'babel_overview_neighbours_' + protocol); - var headerRow = document.createElement('div'); + var headerRow = document.createElement('tr'); headerRow.setAttribute('class', 'tr table-titles'); - var headerContent = '
' + protocol + ' Neighbour
\ -
Device
\ -
Hello-Reach
\ -
RX cost
\ -
TX cost
\ -
RTT
\ -
Channel
\ -
Interface up
'; + 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'); + var neighbourRow = document.createElement('tr'); 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"] + '
'; + 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); @@ -163,25 +163,25 @@ function renderTableInfo(data, target_id) { title.appendChild(document.createTextNode('Info')); target.appendChild(title); - var table = document.createElement('div'); + var table = document.createElement('table'); table.setAttribute('class', 'table'); table.setAttribute('id', 'babel_overview_info'); - var headerRow = document.createElement('div'); + var headerRow = document.createElement('tr'); headerRow.setAttribute('class', 'tr table-titles'); - var headerContent = '
Babeld Version
\ -
My-ID
\ -
Host
'; + var headerContent = 'Babeld Version\ + My-ID\ + Host'; headerRow.innerHTML = headerContent; table.appendChild(headerRow); - var neighbourRow = document.createElement('div'); + var neighbourRow = document.createElement('tr'); neighbourRow.setAttribute('class', 'tr'); - var neighbourContent = '
' + data["babeld-version"] + '
\ -
' + data["my-id"] + '
\ -
' + data["host"] + '
'; + var neighbourContent = '' + data["babeld-version"] + '\ + ' + data["my-id"] + '\ + ' + data["host"] + ''; neighbourRow.innerHTML = neighbourContent; table.appendChild(neighbourRow); -- 2.30.2