luci-mod-admin-full: rework connection status table handling

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm
index ea919a8d34b69708bc028d8266757067734cdc3e..19f8284298052659c3c3b6ff101925be6e9fb732 100644 (file)
--- a/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm
+++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/connections.htm
@@ -136,12 +136,9 @@
                                XHR.poll(3, '<%=build_url("admin/status/realtime/connections_status")%>', null,
                                        function(x, json)
                                        {
+                                               var rows = [];
                                                var conn = json.connections;
 
-                                               while (conn_table.firstElementChild !== conn_table.lastElementChild)
-                                                       conn_table.removeChild(conn_table.lastElementChild);
-
-
                                                var lookup_queue = [ ];
 
                                                conn.sort(function(a, b) {
@@ -165,15 +162,17 @@
                                                        var src = dns_cache[c.src] || (c.layer3 == 'ipv6' ? '[' + c.src + ']' : c.src);
                                                        var dst = dns_cache[c.dst] || (c.layer3 == 'ipv6' ? '[' + c.dst + ']' : c.dst);
 
-                                                       conn_table.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format(1 + (i % 2)), [
-                                                               E('<div class="td">', c.layer3.toUpperCase()),
-                                                               E('<div class="td">', c.layer4.toUpperCase()),
-                                                               E('<div class="td">', [ src, ':', c.sport ]),
-                                                               E('<div class="td">', [ dst, ':', c.dport ]),
-                                                               E('<div class="td" style="white-space:nowrap">', '%1024.2mB (%d <%:Pkts.%>)'.format(c.bytes, c.packets)),
-                                                       ]));
+                                                       rows.push([
+                                                               c.layer3.toUpperCase(),
+                                                               c.layer4.toUpperCase(),
+                                                               src + ':' + c.sport,
+                                                               dst + ':' + c.dport,
+                                                               '%1024.2mB (%d <%:Pkts.%>)'.format(c.bytes, c.packets)
+                                                       ]);
                                                }
 
+                                               cbi_update_table(conn_table, rows, '<em><%:No information available%></em>');
+
                                                if (lookup_queue.length > 0)
                                                        XHR.get('<%=build_url("admin/status/nameinfo")%>/' + lookup_queue.slice(0, 100).join('/'), null,
                                                                function(x, json)
@@ -321,7 +320,7 @@
        <div style="text-align:right"><small id="scale">-</small></div>
        <br />
 
-       <div class="table" style="width:100%; table-layout:fixed" cellspacing="5">
+       <div class="table">
                <div class="tr">
                        <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:UDP:%></strong></div>
                        <div class="td" id="lb_udp_cur">0</div>
@@ -356,16 +355,20 @@
        <br />
 
        <div class="cbi-section-node">
-               <div class="table cbi-section-table" id="connections">
-                       <div class="tr cbi-section-table-titles">
-                               <div class="th cbi-section-table-cell"><%:Network%></div>
-                               <div class="th cbi-section-table-cell"><%:Protocol%></div>
-                               <div class="th cbi-section-table-cell"><%:Source%></div>
-                               <div class="th cbi-section-table-cell"><%:Destination%></div>
-                               <div class="th cbi-section-table-cell"><%:Transfer%></div>
+               <div class="table" id="connections">
+                       <div class="tr table-titles">
+                               <div class="th col-2 hide-xs"><%:Network%></div>
+                               <div class="th col-2"><%:Protocol%></div>
+                               <div class="th col-7"><%:Source%></div>
+                               <div class="th col-7"><%:Destination%></div>
+                               <div class="th col-4"><%:Transfer%></div>
                        </div>
 
-                       <div class="tr"><div class="td" colspan="5"><em><%:Collecting data...%></em></div></div>
+                       <div class="tr placeholder">
+                               <div class="td">
+                                       <em><%:Collecting data...%></em>
+                               </div>
+                       </div>
                </div>
        </div>
 </fieldset>