Merge pull request #2457 from MyIgel/statuspage-fix-tables

gluon-status-page: explicitly add tbody element to fix table manipulation
This commit is contained in:
Matthias Schiffer 2022-04-27 17:20:24 +02:00 committed by GitHub
commit 1992383134
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 48 additions and 37 deletions

View File

@ -209,41 +209,50 @@
<div class="frame"> <div class="frame">
<h2><%:Monitoring%></h2> <h2><%:Monitoring%></h2>
<table> <table>
<tr><th><%:Uptime%></th><td><%= statistics('uptime', 'time') %></td></tr> <tbody>
<tr><th><%:Load average%></th><td><%= statistics('loadavg', 'decimal') %></td></tr> <tr><th><%:Uptime%></th><td><%= statistics('uptime', 'time') %></td></tr>
<tr><th><%:RAM%></th><td><%= statistics('memory', 'memory') %></td></tr> <tr><th><%:Load average%></th><td><%= statistics('loadavg', 'decimal') %></td></tr>
<tr><th><%:Filesystem%></th><td><%= statistics('rootfs_usage', 'percent') %></td></tr> <tr><th><%:RAM%></th><td><%= statistics('memory', 'memory') %></td></tr>
<tr><th><%:Gateway%></th><td><%= statistics('gateway') %><br><%= statistics('gateway_nexthop', 'neighbour') %></td></tr> <tr><th><%:Filesystem%></th><td><%= statistics('rootfs_usage', 'percent') %></td></tr>
<tr><th><%:Gateway%></th><td><%= statistics('gateway') %><br><%= statistics('gateway_nexthop', 'neighbour') %></td></tr>
</tbody>
</table> </table>
<h3><%:Clients%></h3> <h3><%:Clients%></h3>
<table> <table>
<tr><th><%:Total%></th><td><%= statistics('clients/total') %></td></tr> <tbody>
<tr><th><%:Wireless 2.4 GHz%></th><td><%= statistics('clients/wifi24') %></td></tr> <tr><th><%:Total%></th><td><%= statistics('clients/total') %></td></tr>
<tr><th><%:Wireless 5 GHz%></th><td><%= statistics('clients/wifi5') %></td></tr> <tr><th><%:Wireless 2.4 GHz%></th><td><%= statistics('clients/wifi24') %></td></tr>
<tr><th><%:Wireless 5 GHz%></th><td><%= statistics('clients/wifi5') %></td></tr>
</tbody>
</table> </table>
<% if radios[1] then -%> <% if radios[1] then -%>
<h3><%:Radios%></h3> <h3><%:Radios%></h3>
<table> <table>
<% for _, radio in ipairs(radios) do -%> <tbody>
<tr> <% for _, radio in ipairs(radios) do -%>
<th><%| radio.name %></th> <tr>
<td><%| translatef('Channel %u', radio.channel) %></td> <th><%| radio.name %></th>
</tr> <td><%| translatef('Channel %u', radio.channel) %></td>
<%- end %> </tr>
<%- end %>
</tbody>
</table> </table>
<%- end %> <%- end %>
<h3><%:Traffic%></h3> <h3><%:Traffic%></h3>
<table> <table>
<tr><th><%:Transmitted%></th><td><%= statisticsTraffic('traffic/tx') %></td></tr> <tbody>
<tr><th><%:Received%></th><td><%= statisticsTraffic('traffic/rx') %></td></tr> <tr><th><%:Transmitted%></th><td><%= statisticsTraffic('traffic/tx') %></td></tr>
<tr><th><%:Forwarded%></th><td><%= statisticsTraffic('traffic/forward') %></td></tr> <tr><th><%:Received%></th><td><%= statisticsTraffic('traffic/rx') %></td></tr>
<tr><th><%:Forwarded%></th><td><%= statisticsTraffic('traffic/forward') %></td></tr>
</tbody>
</table> </table>
<div id="mesh-vpn" style="display: none"> <div id="mesh-vpn" style="display: none">
<h3><%:Mesh VPN%></h3> <h3><%:Mesh VPN%></h3>
<table id="mesh-vpn-peers"> <table>
<tbody id="mesh-vpn-peers"></tbody>
</table> </table>
</div> </div>
</div> </div>
@ -259,17 +268,19 @@
<h3><%| iface %></h3> <h3><%| iface %></h3>
<div data-interface="<%| iface %>" data-interface-address="<%| util.trim(address) %>"<%= attr('data-interface-wireless', wireless) %>> <div data-interface="<%| iface %>" data-interface-address="<%| util.trim(address) %>"<%= attr('data-interface-wireless', wireless) %>>
<table class="datatable"> <table class="datatable">
<tr> <tbody>
<th><%:Node%></th> <tr>
<% for i, v in ipairs(mesh.attrs or {}) do %> <th><%:Node%></th>
<th<%= attr('class', 'row-' .. v[1] ) .. attr('data-key', v[1]) .. attr('data-suffix', v[3]) %>><%| v[2] %></th> <% for i, v in ipairs(mesh.attrs or {}) do %>
<% end %> <th<%= attr('class', 'row-' .. v[1] ) .. attr('data-key', v[1]) .. attr('data-suffix', v[3]) %>><%| v[2] %></th>
<% if wireless then %> <% end %>
<th class="row-signal">dBm</th> <% if wireless then %>
<th class="row-distance"><%:Distance%></th> <th class="row-signal">dBm</th>
<th class="row-inactive"><%:Last seen%></th> <th class="row-distance"><%:Distance%></th>
<% end %> <th class="row-inactive"><%:Last seen%></th>
</tr> <% end %>
</tr>
</tbody>
</table> </table>
</div> </div>
<% <%

File diff suppressed because one or more lines are too long

View File

@ -191,9 +191,9 @@
} }
div.style.display = ''; div.style.display = '';
var table = document.getElementById('mesh-vpn-peers'); var tbody = document.getElementById('mesh-vpn-peers');
while (table.lastChild) while (tbody.lastChild)
table.removeChild(table.lastChild); tbody.removeChild(tbody.lastChild);
var peers = add_group([], data); var peers = add_group([], data);
peers.sort(); peers.sort();
@ -212,7 +212,7 @@
td.textContent = _['not connected']; td.textContent = _['not connected'];
tr.appendChild(td); tr.appendChild(td);
table.appendChild(tr); tbody.appendChild(tr);
}); });
} }
@ -444,8 +444,8 @@
} }
function Neighbour(iface, addr, color, destroy) { function Neighbour(iface, addr, color, destroy) {
var th = iface.table.firstElementChild; var th = iface.tbody.querySelector('tr');
var el = iface.table.insertRow(); var el = iface.tbody.insertRow();
var tdHostname = el.insertCell(); var tdHostname = el.insertCell();
tdHostname.setAttribute('data-label', th.children[0].textContent); tdHostname.setAttribute('data-label', th.children[0].textContent);
@ -692,7 +692,7 @@
} }
var info = { var info = {
'table': el.firstElementChild, 'tbody': el.querySelector('tbody'),
'signalgraph': signalgraph, 'signalgraph': signalgraph,
'ifname': ifname, 'ifname': ifname,
'wireless': wireless, 'wireless': wireless,