X-Git-Url: https://git.archive.openwrt.org/?p=project%2Fluci.git;a=blobdiff_plain;f=modules%2Fadmin-full%2Fluasrc%2Fview%2Fadmin_status%2Fconnections.htm;h=6525391aad97fbc6f5d52f777a9290652b7f5009;hp=7ce791ba9e31f0ca54cb1dfa6968bd07447b4cf9;hb=e689fa8900784d57eb17f4af59ada39ab0823d4c;hpb=6ea0204a554536367dd762b8b96b5de57171afa9 diff --git a/modules/admin-full/luasrc/view/admin_status/connections.htm b/modules/admin-full/luasrc/view/admin_status/connections.htm index 7ce791ba9..6525391aa 100644 --- 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,142 +57,8 @@ $Id$ var conn_table; + var dns_cache = { }; - function update_graph() - { - bwxhr.get('<%=build_url("admin/status/connections_status")%>', null, - function(x, json) - { - var conn = json.connections; - - while (conn_table.rows.length > 1) - conn_table.rows[0].parentNode.deleteRow(-1); - - for (var i = 0; i < conn.length; i++) - { - var c = conn[i]; - var tr = conn_table.rows[0].parentNode.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + (1 + (i % 2)); - - 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('%1024.2mB (%d <%:Pkts.%>)', c.bytes, c.packets); - } - - - var data = json.statistics; - - var data_max = 0; - var data_scale = 0; - - var data_udp_avg = 0; - var data_tcp_avg = 0; - var data_otr_avg = 0; - - var data_udp_peak = 0; - var data_tcp_peak = 0; - var data_otr_peak = 0; - - for (var i = data_stamp ? 0 : 1; i < data.length; i++) - { - /* skip overlapping entries */ - if (data[i][TIME] <= data_stamp) - continue; - - data_udp.push(data[i][UDP]); - data_tcp.push(data[i][TCP]); - data_otr.push(data[i][OTHER]); - } - - /* cut off outdated entries */ - data_udp = data_udp.slice(data_udp.length - data_wanted, data_udp.length); - data_tcp = data_tcp.slice(data_tcp.length - data_wanted, data_tcp.length); - data_otr = data_otr.slice(data_otr.length - data_wanted, data_otr.length); - - /* find peak */ - for (var i = 0; i < data_udp.length; i++) - { - data_max = Math.max(data_max, data_udp[i]); - data_max = Math.max(data_max, data_tcp[i]); - data_max = Math.max(data_max, data_otr[i]); - - data_udp_peak = Math.max(data_udp_peak, data_udp[i]); - data_tcp_peak = Math.max(data_tcp_peak, data_tcp[i]); - data_otr_peak = Math.max(data_otr_peak, data_otr[i]); - - if (i > 0) - { - data_udp_avg = (data_udp_avg + data_udp[i]) / 2; - data_tcp_avg = (data_tcp_avg + data_tcp[i]) / 2; - data_otr_avg = (data_otr_avg + data_otr[i]) / 2; - } - else - { - data_udp_avg = data_udp[i]; - data_tcp_avg = data_tcp[i]; - data_otr_avg = data_otr[i]; - } - } - - /* remember current timestamp, calculate horizontal scale */ - data_stamp = data[data.length-1][TIME]; - data_scale = height / (data_max * 1.1); - - - /* plot data */ - var pt_udp = '0,' + height; - var pt_tcp = '0,' + height; - var pt_otr = '0,' + height; - - var y_udp = 0; - var y_tcp = 0; - var y_otr = 0; - - for (var i = 0; i < data_udp.length; i++) - { - var x = i * step; - - y_udp = height - Math.floor(data_udp[i] * data_scale); - y_tcp = height - Math.floor(data_tcp[i] * data_scale); - y_otr = height - Math.floor(data_otr[i] * data_scale); - - pt_udp += ' ' + x + ',' + y_udp; - pt_tcp += ' ' + x + ',' + y_tcp; - pt_otr += ' ' + x + ',' + y_otr; - } - - pt_udp += ' ' + width + ',' + y_udp + ' ' + width + ',' + height; - pt_tcp += ' ' + width + ',' + y_tcp + ' ' + width + ',' + height; - pt_otr += ' ' + width + ',' + y_otr + ' ' + width + ',' + height; - - - line_udp.setAttribute('points', pt_udp); - line_tcp.setAttribute('points', pt_tcp); - line_otr.setAttribute('points', pt_otr); - - label_25.firstChild.data = Math.floor(1.1 * 0.25 * data_max); - label_50.firstChild.data = Math.floor(1.1 * 0.50 * data_max); - label_75.firstChild.data = Math.floor(1.1 * 0.75 * data_max); - - label_udp_cur.innerHTML = Math.floor(data_udp[data_udp.length-1]); - label_tcp_cur.innerHTML = Math.floor(data_tcp[data_tcp.length-1]); - label_otr_cur.innerHTML = Math.floor(data_otr[data_otr.length-1]); - - label_udp_avg.innerHTML = Math.floor(data_udp_avg); - label_tcp_avg.innerHTML = Math.floor(data_tcp_avg); - label_otr_avg.innerHTML = Math.floor(data_otr_avg); - - label_udp_peak.innerHTML = Math.floor(data_udp_peak); - label_tcp_peak.innerHTML = Math.floor(data_tcp_peak); - label_otr_peak.innerHTML = Math.floor(data_otr_peak); - - /* reset timer */ - window.setTimeout(update_graph, 1000); - } - ) - } /* wait for SVG */ window.setTimeout( @@ -255,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); @@ -268,16 +132,176 @@ $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); } - label_scale.innerHTML = String.format('<%:(%d minute window, %d second interval)%>', data_wanted / 60, 1); + label_scale.innerHTML = String.format('<%:(%d minute window, %d second interval)%>', data_wanted / 60, 3); /* render datasets, start update interval */ - update_graph(); + XHR.poll(3, '<%=build_url("admin/status/realtime/connections_status")%>', null, + function(x, json) + { + var conn = json.connections; + + 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)); + + 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('%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; + + var data_max = 0; + var data_scale = 0; + + var data_udp_avg = 0; + var data_tcp_avg = 0; + var data_otr_avg = 0; + + var data_udp_peak = 0; + var data_tcp_peak = 0; + var data_otr_peak = 0; + + for (var i = data_stamp ? 0 : 1; i < data.length; i++) + { + /* skip overlapping entries */ + if (data[i][TIME] <= data_stamp) + continue; + + data_udp.push(data[i][UDP]); + data_tcp.push(data[i][TCP]); + data_otr.push(data[i][OTHER]); + } + + /* cut off outdated entries */ + data_udp = data_udp.slice(data_udp.length - data_wanted, data_udp.length); + data_tcp = data_tcp.slice(data_tcp.length - data_wanted, data_tcp.length); + data_otr = data_otr.slice(data_otr.length - data_wanted, data_otr.length); + + /* find peak */ + for (var i = 0; i < data_udp.length; i++) + { + data_max = Math.max(data_max, data_udp[i]); + data_max = Math.max(data_max, data_tcp[i]); + data_max = Math.max(data_max, data_otr[i]); + + data_udp_peak = Math.max(data_udp_peak, data_udp[i]); + data_tcp_peak = Math.max(data_tcp_peak, data_tcp[i]); + data_otr_peak = Math.max(data_otr_peak, data_otr[i]); + + if (i > 0) + { + data_udp_avg = (data_udp_avg + data_udp[i]) / 2; + data_tcp_avg = (data_tcp_avg + data_tcp[i]) / 2; + data_otr_avg = (data_otr_avg + data_otr[i]) / 2; + } + else + { + data_udp_avg = data_udp[i]; + data_tcp_avg = data_tcp[i]; + data_otr_avg = data_otr[i]; + } + } + + /* remember current timestamp, calculate horizontal scale */ + data_stamp = data[data.length-1][TIME]; + data_scale = height / (data_max * 1.1); + + + /* plot data */ + var pt_udp = '0,' + height; + var pt_tcp = '0,' + height; + var pt_otr = '0,' + height; + + var y_udp = 0; + var y_tcp = 0; + var y_otr = 0; + + for (var i = 0; i < data_udp.length; i++) + { + var x = i * step; + + y_udp = height - Math.floor(data_udp[i] * data_scale); + y_tcp = height - Math.floor(data_tcp[i] * data_scale); + y_otr = height - Math.floor(data_otr[i] * data_scale); + + pt_udp += ' ' + x + ',' + y_udp; + pt_tcp += ' ' + x + ',' + y_tcp; + pt_otr += ' ' + x + ',' + y_otr; + } + + pt_udp += ' ' + width + ',' + y_udp + ' ' + width + ',' + height; + pt_tcp += ' ' + width + ',' + y_tcp + ' ' + width + ',' + height; + pt_otr += ' ' + width + ',' + y_otr + ' ' + width + ',' + height; + + + line_udp.setAttribute('points', pt_udp); + line_tcp.setAttribute('points', pt_tcp); + line_otr.setAttribute('points', pt_otr); + + label_25.firstChild.data = Math.floor(1.1 * 0.25 * data_max); + label_50.firstChild.data = Math.floor(1.1 * 0.50 * data_max); + label_75.firstChild.data = Math.floor(1.1 * 0.75 * data_max); + + label_udp_cur.innerHTML = Math.floor(data_udp[data_udp.length-1]); + label_tcp_cur.innerHTML = Math.floor(data_tcp[data_tcp.length-1]); + label_otr_cur.innerHTML = Math.floor(data_otr[data_otr.length-1]); + + label_udp_avg.innerHTML = Math.floor(data_udp_avg); + label_tcp_avg.innerHTML = Math.floor(data_tcp_avg); + label_otr_avg.innerHTML = Math.floor(data_otr_avg); + + label_udp_peak.innerHTML = Math.floor(data_udp_peak); + label_tcp_peak.innerHTML = Math.floor(data_tcp_peak); + label_otr_peak.innerHTML = Math.floor(data_otr_peak); + } + ); } }, 1000 );