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);