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=eae17ef1340d86cb5ba7a4b3da39ea612447e188;hp=eb483985278aaad2913364aadd9d9278c7a7c928;hb=7b402d19642d94458f89ddd51222069bbb25ca5e;hpb=143131ea77822c3fa84a093f796aae1ee46120dc diff --git a/modules/admin-full/luasrc/view/admin_status/connections.htm b/modules/admin-full/luasrc/view/admin_status/connections.htm index eb4839852..eae17ef13 100644 --- a/modules/admin-full/luasrc/view/admin_status/connections.htm +++ b/modules/admin-full/luasrc/view/admin_status/connections.htm @@ -57,127 +57,14 @@ $Id$ var label_scale; + var conn_table; - function update_graph() - { - bwxhr.get('<%=build_url("admin/status/connections_status")%>', null, - function(x, data) - { - 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( function() { var svg = document.getElementById('bwsvg'); - + try { G = svg.getSVGDocument ? svg.getSVGDocument() : svg.contentDocument; @@ -226,7 +113,9 @@ $Id$ label_otr_avg = document.getElementById('lb_otr_avg'); label_otr_peak = document.getElementById('lb_otr_peak'); - label_scale = document.getElementById('scale'); + label_scale = document.getElementById('scale'); + + conn_table = document.getElementById('connections'); /* plot horizontal time interval lines */ @@ -249,10 +138,137 @@ $Id$ 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); + + 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); + } + + + 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 ); @@ -260,41 +276,61 @@ $Id$

<%:Realtime Connections%>

- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<%:UDP:%>0<%:Average:%>0<%:Peak:%>0
<%:TCP:%>0<%:Average:%>0<%:Peak:%>0
<%:Other:%>0<%:Average:%>0<%:Peak:%>0
+
<%:This page gives an overview over currently active network connections.%>
+ +
+ <%:Active Connections%> + + +
-
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
<%:UDP:%>0<%:Average:%>0<%:Peak:%>0
<%:TCP:%>0<%:Average:%>0<%:Peak:%>0
<%:Other:%>0<%:Average:%>0<%:Peak:%>0
+
+ +
+ + + + + + + + + +
<%:Network%><%:Protocol%><%:Source%><%:Destination%>
<%:Collecting data...%>
+
+
<%+footer%>