projects / project / luci.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
treewide: always include cbi.js
[project/luci.git] / modules / luci-mod-admin-full / luasrc / view / admin_status / connections.htm
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 b7ebc41451f5e21da0aee34bae89a278ad657bdb..ea919a8d34b69708bc028d8266757067734cdc3e 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
@@ -5,7 +5,6 @@
 
 <%+header%>
 
-<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
 <script type="text/javascript">//<![CDATA[
        var bwxhr = new XHR();
 
@@ -124,7 +123,7 @@
                                        var text = G.createElementNS('http://www.w3.org/2000/svg', 'text');
                                                text.setAttribute('x', i + 5);
                                                text.setAttribute('y', 15);
-                                               text.setAttribute('style', 'fill:#999999; font-size:9pt');
+                                               text.setAttribute('style', 'fill:#999999; font-size:9pt; font-family:sans-serif');
                                                text.appendChild(G.createTextNode(Math.round((width - i) / step / 60) + 'm'));
 
                                        label_25.parentNode.appendChild(line);
@@ -139,8 +138,8 @@
                                        {
                                                var conn = json.connections;
 
-                                               while (conn_table.rows.length > 1)
-                                                       conn_table.rows[0].parentNode.deleteRow(-1);
+                                               while (conn_table.firstElementChild !== conn_table.lastElementChild)
+                                                       conn_table.removeChild(conn_table.lastElementChild);
 
 
                                                var lookup_queue = [ ];
@@ -153,13 +152,10 @@
                                                {
                                                        var c  = conn[i];
 
-                                                       if ((c.src == '127.0.0.1' && c.dst == '127.0.0.1')
-                                                       || (c.src == '::1' && c.dst == '::1'))
+                                                       if ((c.src == '127.0.0.1' && c.dst == '127.0.0.1') ||
+                                                           (c.src == '::1'       && c.dst == '::1'))
                                                                continue;
 
-                                                       var tr = conn_table.rows[0].parentNode.insertRow(-1);
-                                                           tr.className = 'cbi-section-table-row cbi-rowstyle-' + (1 + (i % 2));
-
                                                        if (!dns_cache[c.src])
                                                                lookup_queue.push(c.src);
 
@@ -169,14 +165,13 @@
                                                        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);
 
-                                                       tr.insertCell(-1).innerHTML = c.layer3.toUpperCase();
-                                                       tr.insertCell(-1).innerHTML = c.layer4.toUpperCase();
-                                                       tr.insertCell(-1).innerHTML = String.format('%s:%d', src, c.sport);
-                                                       tr.insertCell(-1).innerHTML = String.format('%s:%d', dst, c.dport);
-
-                                                       var traf = tr.insertCell(-1);
-                                                           traf.style.whiteSpace = 'nowrap';
-                                                           traf.innerHTML = String.format('%1024.2mB (%d <%:Pkts.%>)', c.bytes, c.packets);
+                                                       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)),
+                                                       ]));
                                                }
 
                                                if (lookup_queue.length > 0)
@@ -308,6 +303,8 @@
                                                label_otr_peak.innerHTML = Math.floor(data_otr_peak);
                                        }
                                );
+
+                               XHR.run();
                        }
                }, 1000
        );
@@ -324,52 +321,52 @@
        <div style="text-align:right"><small id="scale">-</small></div>
        <br />
 
-       <table style="width:100%; table-layout:fixed" cellspacing="5">
-               <tr>
-                       <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid blue"><%:UDP:%></strong></td>
-                       <td id="lb_udp_cur">0</td>
-
-                       <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
-                       <td id="lb_udp_avg">0</td>
-
-                       <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
-                       <td id="lb_udp_peak">0</td>
-               </tr>
-               <tr>
-                       <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:TCP:%></strong></td>
-                       <td id="lb_tcp_cur">0</td>
-
-                       <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
-                       <td id="lb_tcp_avg">0</td>
-
-                       <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
-                       <td id="lb_tcp_peak">0</td>
-               </tr>
-               <tr>
-                       <td style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Other:%></strong></td>
-                       <td id="lb_otr_cur">0</td>
-
-                       <td style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></td>
-                       <td id="lb_otr_avg">0</td>
-
-                       <td style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></td>
-                       <td id="lb_otr_peak">0</td>
-               </tr>
-       </table>
+       <div class="table" style="width:100%; table-layout:fixed" cellspacing="5">
+               <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>
+
+                       <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
+                       <div class="td" id="lb_udp_avg">0</div>
+
+                       <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
+                       <div class="td" id="lb_udp_peak">0</div>
+               </div>
+               <div class="tr">
+                       <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid green"><%:TCP:%></strong></div>
+                       <div class="td" id="lb_tcp_cur">0</div>
+
+                       <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
+                       <div class="td" id="lb_tcp_avg">0</div>
+
+                       <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
+                       <div class="td" id="lb_tcp_peak">0</div>
+               </div>
+               <div class="tr">
+                       <div class="td" style="text-align:right; vertical-align:top"><strong style="border-bottom:2px solid red"><%:Other:%></strong></div>
+                       <div class="td" id="lb_otr_cur">0</div>
+
+                       <div class="td" style="text-align:right; vertical-align:top"><strong><%:Average:%></strong></div>
+                       <div class="td" id="lb_otr_avg">0</div>
+
+                       <div class="td" style="text-align:right; vertical-align:top"><strong><%:Peak:%></strong></div>
+                       <div class="td" id="lb_otr_peak">0</div>
+               </div>
+       </div>
        <br />
 
        <div class="cbi-section-node">
-               <table class="cbi-section-table" id="connections">
-                       <tr class="cbi-section-table-titles">
-                               <th class="cbi-section-table-cell"><%:Network%></th>
-                               <th class="cbi-section-table-cell"><%:Protocol%></th>
-                               <th class="cbi-section-table-cell"><%:Source%></th>
-                               <th class="cbi-section-table-cell"><%:Destination%></th>
-                               <th class="cbi-section-table-cell"><%:Transfer%></th>
-                       </tr>
-
-                       <tr><td colspan="5"><em><%:Collecting data...%></em></td></tr>
-               </table>
+               <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>
+
+                       <div class="tr"><div class="td" colspan="5"><em><%:Collecting data...%></em></div></div>
+               </div>
        </div>
 </fieldset>
 
Lua Configuration Interface (mirror)