modules/admin-full: dynamically order lines in connection live status

[project/luci.git] / modules / admin-full / luasrc / view / admin_status / connections.htm

diff --git a/modules/admin-full/luasrc/view/admin_status/connections.htm b/modules/admin-full/luasrc/view/admin_status/connections.htm
index eae17ef..80c8b70 100644 (file)
--- a/modules/admin-full/luasrc/view/admin_status/connections.htm
+++ b/modules/admin-full/luasrc/view/admin_status/connections.htm
@@ -8,8 +8,6 @@ You may obtain a copy of the License at
 
        http://www.apache.org/licenses/LICENSE-2.0
 
-$Id$
-
 -%>
 
 <%+header%>
@@ -59,6 +57,8 @@ $Id$
 
        var conn_table;
 
+       var dns_cache = { };
+
 
        /* wait for SVG */
        window.setTimeout(
@@ -119,7 +119,7 @@ $Id$
 
 
                                /* plot horizontal time interval lines */
-                               for (var i = step * 60; i < width; i += step * 60)
+                               for (var i = width % (step * 60); i < width; i += step * 60)
                                {
                                        var line = G.createElementNS('http://www.w3.org/2000/svg', 'line');
                                                line.setAttribute('x1', i);
@@ -132,7 +132,7 @@ $Id$
                                                text.setAttribute('x', i + 5);
                                                text.setAttribute('y', 15);
                                                text.setAttribute('style', 'fill:#999999; font-size:9pt');
-                                               text.appendChild(G.createTextNode(Math.round(i / step / 60) + 'm'));
+                                               text.appendChild(G.createTextNode(Math.round((width - i) / step / 60) + 'm'));
 
                                        label_25.parentNode.appendChild(line);
                                        label_25.parentNode.appendChild(text);
@@ -149,18 +149,51 @@ $Id$
                                                while (conn_table.rows.length > 1)
                                                        conn_table.rows[0].parentNode.deleteRow(-1);
 
+
+                                               var lookup_queue = [ ];
+
+                                               conn.sort(function(a, b) {
+                                                       return b.bytes - a.bytes;
+                                               });
+
                                                for (var i = 0; i < conn.length; i++)
                                                {
                                                        var c  = conn[i];
+
+                                                       if (c.src == '127.0.0.1' && c.dst == '127.0.0.1')
+                                                               continue;
+
                                                        var tr = conn_table.rows[0].parentNode.insertRow(-1);
-                                                               tr.className = 'cbi-section-table-row cbi-rowstyle-' + (1 + (i % 2));
+                                                           tr.className = 'cbi-section-table-row cbi-rowstyle-' + (1 + (i % 2));
+
+                                                       if (!dns_cache[c.src])
+                                                               lookup_queue.push(c.src);
+
+                                                       if (!dns_cache[c.dst])
+                                                               lookup_queue.push(c.dst);
+
+                                                       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(c.layer3 == 'ipv6' ? '[%s]:%d' : '%s:%d', c.src, c.sport);
-                                                       tr.insertCell(-1).innerHTML = String.format(c.layer3 == 'ipv6' ? '[%s]:%d' : '%s:%d', c.dst, c.dport);
+                                                       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);
                                                }
 
+                                               if (lookup_queue.length > 0)
+                                                       XHR.get('<%=build_url("admin/status/nameinfo")%>/' + lookup_queue.slice(0, 100).join('/'), null,
+                                                               function(x, json)
+                                                               {
+                                                                       for (var addr in json)
+                                                                               dns_cache[addr] = json[addr];
+                                                               }
+                                                       );
+
 
                                                var data = json.statistics;
 
@@ -248,6 +281,18 @@ $Id$
                                                pt_otr += ' ' + width + ',' + y_otr + ' ' + width + ',' + height;
 
 
+                                               var order = [
+                                                       [ line_udp, data_udp[data_udp.length-1] ],
+                                                       [ line_tcp, data_tcp[data_tcp.length-1] ],
+                                                       [ line_otr, data_otr[data_otr.length-1] ]
+                                               ];
+
+                                               order.sort(function(a, b) { return b[1] - a[1] });
+
+                                               for (var i = 0; i < order.length; i++)
+                                                       order[i][0].parentNode.appendChild(order[i][0]);
+
+
                                                line_udp.setAttribute('points', pt_udp);
                                                line_tcp.setAttribute('points', pt_tcp);
                                                line_otr.setAttribute('points', pt_otr);
@@ -326,9 +371,10 @@ $Id$
                                <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="4"><em><%:Collecting data...%></em></td></tr>
+                       <tr><td colspan="5"><em><%:Collecting data...%></em></td></tr>
                </table>
        </div>
 </fieldset>