From e415f27419700d3259f367d73d0afcba1593b66c Mon Sep 17 00:00:00 2001 From: Jo-Philipp Wich Date: Mon, 26 Sep 2011 00:48:02 +0000 Subject: [PATCH] modules/admin-full: switch live stats to XHR.poll(), lower update frequency to 3 seconds --- .../luasrc/view/admin_status/bandwidth.htm | 202 +++++++------- .../luasrc/view/admin_status/connections.htm | 268 +++++++++---------- .../admin-full/luasrc/view/admin_status/load.htm | 229 ++++++++-------- .../luasrc/view/admin_status/wireless.htm | 290 ++++++++++----------- 4 files changed, 480 insertions(+), 509 deletions(-) diff --git a/modules/admin-full/luasrc/view/admin_status/bandwidth.htm b/modules/admin-full/luasrc/view/admin_status/bandwidth.htm index d898cb1c1..da6837370 100644 --- a/modules/admin-full/luasrc/view/admin_status/bandwidth.htm +++ b/modules/admin-full/luasrc/view/admin_status/bandwidth.htm @@ -96,109 +96,6 @@ $Id$ ); } - function update_graph() - { - bwxhr.get('<%=build_url("admin/status/bandwidth_status", curdev)%>', null, - function(x, data) - { - var data_max = 0; - var data_scale = 0; - - var data_rx_avg = 0; - var data_tx_avg = 0; - - var data_rx_peak = 0; - var data_tx_peak = 0; - - for (var i = data_stamp ? 0 : 1; i < data.length; i++) - { - /* skip overlapping entries */ - if (data[i][TIME] <= data_stamp) - continue; - - /* normalize difference against time interval */ - var time_delta = data[i][TIME] - data[i-1][TIME]; - if (time_delta) - { - data_rx.push((data[i][RXB] - data[i-1][RXB]) / time_delta); - data_tx.push((data[i][TXB] - data[i-1][TXB]) / time_delta); - } - } - - /* cut off outdated entries */ - data_rx = data_rx.slice(data_rx.length - data_wanted, data_rx.length); - data_tx = data_tx.slice(data_tx.length - data_wanted, data_tx.length); - - /* find peak */ - for (var i = 0; i < data_rx.length; i++) - { - data_max = Math.max(data_max, data_rx[i]); - data_max = Math.max(data_max, data_tx[i]); - - data_rx_peak = Math.max(data_rx_peak, data_rx[i]); - data_tx_peak = Math.max(data_tx_peak, data_tx[i]); - - if (i > 0) - { - data_rx_avg = (data_rx_avg + data_rx[i]) / 2; - data_tx_avg = (data_tx_avg + data_tx[i]) / 2; - } - else - { - data_rx_avg = data_rx[i]; - data_tx_avg = data_tx[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_rx = '0,' + height; - var pt_tx = '0,' + height; - - var y_rx = 0; - var y_tx = 0; - - for (var i = 0; i < data_rx.length; i++) - { - var x = i * step; - - y_rx = height - Math.floor(data_rx[i] * data_scale); - y_tx = height - Math.floor(data_tx[i] * data_scale); - - pt_rx += ' ' + x + ',' + y_rx; - pt_tx += ' ' + x + ',' + y_tx; - } - - pt_rx += ' ' + width + ',' + y_rx + ' ' + width + ',' + height; - pt_tx += ' ' + width + ',' + y_tx + ' ' + width + ',' + height; - - - line_rx.setAttribute('points', pt_rx); - line_tx.setAttribute('points', pt_tx); - - label_25.firstChild.data = bandwidth_label(1.1 * 0.25 * data_max); - label_50.firstChild.data = bandwidth_label(1.1 * 0.50 * data_max); - label_75.firstChild.data = bandwidth_label(1.1 * 0.75 * data_max); - - label_rx_cur.innerHTML = bandwidth_label(data_rx[data_rx.length-1], true); - label_tx_cur.innerHTML = bandwidth_label(data_tx[data_tx.length-1], true); - - label_rx_avg.innerHTML = bandwidth_label(data_rx_avg, true); - label_tx_avg.innerHTML = bandwidth_label(data_tx_avg, true); - - label_rx_peak.innerHTML = bandwidth_label(data_rx_peak, true); - label_tx_peak.innerHTML = bandwidth_label(data_tx_peak, true); - - /* reset timer */ - window.setTimeout(update_graph, 1000); - } - ) - } - /* wait for SVG */ window.setTimeout( function() { @@ -269,10 +166,105 @@ $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/bandwidth_status", curdev)%>', null, + function(x, data) + { + var data_max = 0; + var data_scale = 0; + + var data_rx_avg = 0; + var data_tx_avg = 0; + + var data_rx_peak = 0; + var data_tx_peak = 0; + + for (var i = data_stamp ? 0 : 1; i < data.length; i++) + { + /* skip overlapping entries */ + if (data[i][TIME] <= data_stamp) + continue; + + /* normalize difference against time interval */ + var time_delta = data[i][TIME] - data[i-1][TIME]; + if (time_delta) + { + data_rx.push((data[i][RXB] - data[i-1][RXB]) / time_delta); + data_tx.push((data[i][TXB] - data[i-1][TXB]) / time_delta); + } + } + + /* cut off outdated entries */ + data_rx = data_rx.slice(data_rx.length - data_wanted, data_rx.length); + data_tx = data_tx.slice(data_tx.length - data_wanted, data_tx.length); + + /* find peak */ + for (var i = 0; i < data_rx.length; i++) + { + data_max = Math.max(data_max, data_rx[i]); + data_max = Math.max(data_max, data_tx[i]); + + data_rx_peak = Math.max(data_rx_peak, data_rx[i]); + data_tx_peak = Math.max(data_tx_peak, data_tx[i]); + + if (i > 0) + { + data_rx_avg = (data_rx_avg + data_rx[i]) / 2; + data_tx_avg = (data_tx_avg + data_tx[i]) / 2; + } + else + { + data_rx_avg = data_rx[i]; + data_tx_avg = data_tx[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_rx = '0,' + height; + var pt_tx = '0,' + height; + + var y_rx = 0; + var y_tx = 0; + + for (var i = 0; i < data_rx.length; i++) + { + var x = i * step; + + y_rx = height - Math.floor(data_rx[i] * data_scale); + y_tx = height - Math.floor(data_tx[i] * data_scale); + + pt_rx += ' ' + x + ',' + y_rx; + pt_tx += ' ' + x + ',' + y_tx; + } + + pt_rx += ' ' + width + ',' + y_rx + ' ' + width + ',' + height; + pt_tx += ' ' + width + ',' + y_tx + ' ' + width + ',' + height; + + + line_rx.setAttribute('points', pt_rx); + line_tx.setAttribute('points', pt_tx); + + label_25.firstChild.data = bandwidth_label(1.1 * 0.25 * data_max); + label_50.firstChild.data = bandwidth_label(1.1 * 0.50 * data_max); + label_75.firstChild.data = bandwidth_label(1.1 * 0.75 * data_max); + + label_rx_cur.innerHTML = bandwidth_label(data_rx[data_rx.length-1], true); + label_tx_cur.innerHTML = bandwidth_label(data_tx[data_tx.length-1], true); + + label_rx_avg.innerHTML = bandwidth_label(data_rx_avg, true); + label_tx_avg.innerHTML = bandwidth_label(data_tx_avg, true); + + label_rx_peak.innerHTML = bandwidth_label(data_rx_peak, true); + label_tx_peak.innerHTML = bandwidth_label(data_tx_peak, true); + } + ); } }, 1000 ); diff --git a/modules/admin-full/luasrc/view/admin_status/connections.htm b/modules/admin-full/luasrc/view/admin_status/connections.htm index 7ce791ba9..dfd12f071 100644 --- a/modules/admin-full/luasrc/view/admin_status/connections.htm +++ b/modules/admin-full/luasrc/view/admin_status/connections.htm @@ -60,142 +60,6 @@ $Id$ var conn_table; - 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( function() { @@ -274,10 +138,138 @@ $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/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); + } + ); } }, 1000 ); diff --git a/modules/admin-full/luasrc/view/admin_status/load.htm b/modules/admin-full/luasrc/view/admin_status/load.htm index d1b602cf6..e1e163c70 100644 --- a/modules/admin-full/luasrc/view/admin_status/load.htm +++ b/modules/admin-full/luasrc/view/admin_status/load.htm @@ -59,121 +59,6 @@ $Id$ var label_scale; - function update_graph() - { - bwxhr.get('<%=build_url("admin/status/load_status")%>', null, - function(x, data) - { - var data_max = 0; - var data_scale = 0; - - var data_01_avg = 0; - var data_05_avg = 0; - var data_15_avg = 0; - - var data_01_peak = 0; - var data_05_peak = 0; - var data_15_peak = 0; - - for (var i = data_stamp ? 0 : 1; i < data.length; i++) - { - /* skip overlapping entries */ - if (data[i][TIME] <= data_stamp) - continue; - - data_01.push(data[i][L01]); - data_05.push(data[i][L05]); - data_15.push(data[i][L15]); - } - - /* cut off outdated entries */ - data_01 = data_01.slice(data_01.length - data_wanted, data_01.length); - data_05 = data_05.slice(data_05.length - data_wanted, data_05.length); - data_15 = data_15.slice(data_15.length - data_wanted, data_15.length); - - /* find peak */ - for (var i = 0; i < data_01.length; i++) - { - data_max = Math.max(data_max, data_01[i]); - data_max = Math.max(data_max, data_05[i]); - data_max = Math.max(data_max, data_15[i]); - - data_01_peak = Math.max(data_01_peak, data_01[i]); - data_05_peak = Math.max(data_05_peak, data_05[i]); - data_15_peak = Math.max(data_15_peak, data_15[i]); - - if (i > 0) - { - data_01_avg = (data_01_avg + data_01[i]) / 2; - data_05_avg = (data_05_avg + data_05[i]) / 2; - data_15_avg = (data_15_avg + data_15[i]) / 2; - } - else - { - data_01_avg = data_01[i]; - data_05_avg = data_05[i]; - data_15_avg = data_15[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_01 = '0,' + height; - var pt_05 = '0,' + height; - var pt_15 = '0,' + height; - - var y_01 = 0; - var y_05 = 0; - var y_15 = 0; - - for (var i = 0; i < data_01.length; i++) - { - var x = i * step; - - y_01 = height - Math.floor(data_01[i] * data_scale); - y_05 = height - Math.floor(data_05[i] * data_scale); - y_15 = height - Math.floor(data_15[i] * data_scale); - - pt_01 += ' ' + x + ',' + y_01; - pt_05 += ' ' + x + ',' + y_05; - pt_15 += ' ' + x + ',' + y_15; - } - - pt_01 += ' ' + width + ',' + y_01 + ' ' + width + ',' + height; - pt_05 += ' ' + width + ',' + y_05 + ' ' + width + ',' + height; - pt_15 += ' ' + width + ',' + y_15 + ' ' + width + ',' + height; - - - line_01.setAttribute('points', pt_01); - line_05.setAttribute('points', pt_05); - line_15.setAttribute('points', pt_15); - - label_25.firstChild.data = (1.1 * 0.25 * data_max / 100).toFixed(2); - label_50.firstChild.data = (1.1 * 0.50 * data_max / 100).toFixed(2); - label_75.firstChild.data = (1.1 * 0.75 * data_max / 100).toFixed(2); - - label_01_cur.innerHTML = (data_01[data_01.length-1] / 100).toFixed(2); - label_05_cur.innerHTML = (data_05[data_05.length-1] / 100).toFixed(2); - label_15_cur.innerHTML = (data_01[data_15.length-1] / 100).toFixed(2); - - label_01_avg.innerHTML = (data_01_avg / 100).toFixed(2); - label_05_avg.innerHTML = (data_05_avg / 100).toFixed(2); - label_15_avg.innerHTML = (data_15_avg / 100).toFixed(2); - - label_01_peak.innerHTML = (data_01_peak / 100).toFixed(2); - label_05_peak.innerHTML = (data_05_peak / 100).toFixed(2); - label_15_peak.innerHTML = (data_15_peak / 100).toFixed(2); - - /* reset timer */ - window.setTimeout(update_graph, 1000); - } - ) - } - /* wait for SVG */ window.setTimeout( function() { @@ -250,10 +135,120 @@ $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/load_status")%>', null, + function(x, data) + { + var data_max = 0; + var data_scale = 0; + + var data_01_avg = 0; + var data_05_avg = 0; + var data_15_avg = 0; + + var data_01_peak = 0; + var data_05_peak = 0; + var data_15_peak = 0; + + for (var i = data_stamp ? 0 : 1; i < data.length; i++) + { + /* skip overlapping entries */ + if (data[i][TIME] <= data_stamp) + continue; + + data_01.push(data[i][L01]); + data_05.push(data[i][L05]); + data_15.push(data[i][L15]); + } + + /* cut off outdated entries */ + data_01 = data_01.slice(data_01.length - data_wanted, data_01.length); + data_05 = data_05.slice(data_05.length - data_wanted, data_05.length); + data_15 = data_15.slice(data_15.length - data_wanted, data_15.length); + + /* find peak */ + for (var i = 0; i < data_01.length; i++) + { + data_max = Math.max(data_max, data_01[i]); + data_max = Math.max(data_max, data_05[i]); + data_max = Math.max(data_max, data_15[i]); + + data_01_peak = Math.max(data_01_peak, data_01[i]); + data_05_peak = Math.max(data_05_peak, data_05[i]); + data_15_peak = Math.max(data_15_peak, data_15[i]); + + if (i > 0) + { + data_01_avg = (data_01_avg + data_01[i]) / 2; + data_05_avg = (data_05_avg + data_05[i]) / 2; + data_15_avg = (data_15_avg + data_15[i]) / 2; + } + else + { + data_01_avg = data_01[i]; + data_05_avg = data_05[i]; + data_15_avg = data_15[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_01 = '0,' + height; + var pt_05 = '0,' + height; + var pt_15 = '0,' + height; + + var y_01 = 0; + var y_05 = 0; + var y_15 = 0; + + for (var i = 0; i < data_01.length; i++) + { + var x = i * step; + + y_01 = height - Math.floor(data_01[i] * data_scale); + y_05 = height - Math.floor(data_05[i] * data_scale); + y_15 = height - Math.floor(data_15[i] * data_scale); + + pt_01 += ' ' + x + ',' + y_01; + pt_05 += ' ' + x + ',' + y_05; + pt_15 += ' ' + x + ',' + y_15; + } + + pt_01 += ' ' + width + ',' + y_01 + ' ' + width + ',' + height; + pt_05 += ' ' + width + ',' + y_05 + ' ' + width + ',' + height; + pt_15 += ' ' + width + ',' + y_15 + ' ' + width + ',' + height; + + + line_01.setAttribute('points', pt_01); + line_05.setAttribute('points', pt_05); + line_15.setAttribute('points', pt_15); + + label_25.firstChild.data = (1.1 * 0.25 * data_max / 100).toFixed(2); + label_50.firstChild.data = (1.1 * 0.50 * data_max / 100).toFixed(2); + label_75.firstChild.data = (1.1 * 0.75 * data_max / 100).toFixed(2); + + label_01_cur.innerHTML = (data_01[data_01.length-1] / 100).toFixed(2); + label_05_cur.innerHTML = (data_05[data_05.length-1] / 100).toFixed(2); + label_15_cur.innerHTML = (data_01[data_15.length-1] / 100).toFixed(2); + + label_01_avg.innerHTML = (data_01_avg / 100).toFixed(2); + label_05_avg.innerHTML = (data_05_avg / 100).toFixed(2); + label_15_avg.innerHTML = (data_15_avg / 100).toFixed(2); + + label_01_peak.innerHTML = (data_01_peak / 100).toFixed(2); + label_05_peak.innerHTML = (data_05_peak / 100).toFixed(2); + label_15_peak.innerHTML = (data_15_peak / 100).toFixed(2); + + /* reset timer */ + window.setTimeout(update_graph, 1000); + } + ); } }, 1000 ); diff --git a/modules/admin-full/luasrc/view/admin_status/wireless.htm b/modules/admin-full/luasrc/view/admin_status/wireless.htm index 77b21f77b..eb91ae649 100644 --- a/modules/admin-full/luasrc/view/admin_status/wireless.htm +++ b/modules/admin-full/luasrc/view/admin_status/wireless.htm @@ -74,152 +74,6 @@ $Id$ var label_scale; - function update_graph() - { - bwxhr.get('<%=build_url("admin/status/wireless_status", curdev)%>', null, - function(x, data) - { - var noise_floor = 255; - var rate_floor = 60000; - - for (var i = 0; i < data.length; i++) { - noise_floor = Math.min(noise_floor, data[i][NOISE]); - rate_floor = Math.min(rate_floor, data[i][RATE]); - } - - noise_floor -= 5; - - var data_max = 0; - var data_scale = 0; - var data_max_2 = 0; - var data_scale_2 = 0; - - var data_rssi_avg = 0; - var data_noise_avg = 0; - var data_rate_avg = 0; - - var data_rssi_peak = 0; - var data_noise_peak = 0; - var data_rate_peak = 0; - - for (var i = data_stamp ? 0 : 1; i < data.length; i++) - { - /* skip overlapping entries */ - if (data[i][TIME] <= data_stamp) - continue; - - data_rssi.push(data[i][RSSI] - noise_floor); - data_noise.push(data[i][NOISE] - noise_floor); - data_rate.push(Math.floor(data[i][RATE] / 100)); - } - - /* cut off outdated entries */ - data_rssi = data_rssi.slice(data_rssi.length - data_wanted, data_rssi.length); - data_noise = data_noise.slice(data_noise.length - data_wanted, data_noise.length); - data_rate = data_rate.slice(data_rate.length - data_wanted, data_rate.length); - - /* find peak */ - for (var i = 0; i < data_rssi.length; i++) - { - data_max = Math.max(data_max, data_rssi[i]); - data_max_2 = Math.max(data_max_2, data_rate[i]); - - data_rssi_peak = Math.max(data_rssi_peak, data_rssi[i]); - data_noise_peak = Math.max(data_noise_peak, data_noise[i]); - data_rate_peak = Math.max(data_rate_peak, data_rate[i]); - - if (i > 0) - { - data_rssi_avg = (data_rssi_avg + data_rssi[i]) / 2; - data_noise_avg = (data_noise_avg + data_noise[i]) / 2; - data_rate_avg = (data_rate_avg + data_rate[i]) / 2; - } - else - { - data_rssi_avg = data_rssi[i]; - data_noise_avg = data_noise[i]; - data_rate_avg = data_rate[i]; - } - } - - /* remember current timestamp, calculate horizontal scale */ - data_stamp = data[data.length-1][TIME]; - data_scale = (height / (data_max * 1.1)).toFixed(1); - data_scale_2 = (height / (data_max_2 * 1.1)).toFixed(1); - - /* plot data */ - var pt_rssi = '0,' + height; - var pt_noise = '0,' + height; - var pt_rate = '0,' + height; - - var y_rssi = 0; - var y_noise = 0; - var y_rate = 0; - - for (var i = 0; i < data_rssi.length; i++) - { - var x = i * step; - - y_rssi = height - Math.floor(data_rssi[i] * data_scale); - y_noise = height - Math.floor(data_noise[i] * data_scale); - y_rate = height - Math.floor(data_rate[i] * data_scale_2); - - y_rssi -= Math.floor(y_rssi % (1/data_scale)); - y_noise -= Math.floor(y_noise % (1/data_scale)); - - pt_rssi += ' ' + x + ',' + y_rssi; - pt_noise += ' ' + x + ',' + y_noise; - pt_rate += ' ' + x + ',' + y_rate; - } - - pt_rssi += ' ' + width + ',' + y_rssi + ' ' + width + ',' + height; - pt_noise += ' ' + width + ',' + y_noise + ' ' + width + ',' + height; - pt_rate += ' ' + width + ',' + y_rate + ' ' + width + ',' + height; - - line_rssi.setAttribute('points', pt_rssi); - line_noise.setAttribute('points', pt_noise); - line_rate.setAttribute('points', pt_rate); - - function wireless_label(dbm, noise) - { - if (noise) - return String.format("%d dBm (SNR %d dBm)", noise_floor + dbm - 255, dbm - noise); - else - return String.format("%d dBm", noise_floor + dbm - 255); - } - - function rate_label(mbit) - { - return String.format("%d MBit/s", mbit); - } - - label_25.firstChild.data = wireless_label(1.1 * 0.25 * data_max); - label_50.firstChild.data = wireless_label(1.1 * 0.50 * data_max); - label_75.firstChild.data = wireless_label(1.1 * 0.75 * data_max); - - label_25_2.firstChild.data = rate_label(1.1 * 0.25 * data_max_2); - label_50_2.firstChild.data = rate_label(1.1 * 0.50 * data_max_2); - label_75_2.firstChild.data = rate_label(1.1 * 0.75 * data_max_2); - - label_rssi_cur.innerHTML = wireless_label(data_rssi[data_rssi.length-1], data_noise[data_noise.length-1]); - label_noise_cur.innerHTML = wireless_label(data_noise[data_noise.length-1]); - - label_rssi_avg.innerHTML = wireless_label(data_rssi_avg, data_noise_avg); - label_noise_avg.innerHTML = wireless_label(data_noise_avg); - - label_rssi_peak.innerHTML = wireless_label(data_rssi_peak, data_noise_peak); - label_noise_peak.innerHTML = wireless_label(data_noise_peak); - - label_rate_cur.innerHTML = rate_label(data_rate[data_rate.length-1]); - label_rate_avg.innerHTML = rate_label(data_rate_avg); - label_rate_peak.innerHTML = rate_label(data_rate_peak); - - /* reset timer */ - window.setTimeout(update_graph, 1000); - } - ) - } - /* wait for SVG */ window.setTimeout( function() { @@ -321,11 +175,149 @@ $Id$ label_25_2.parentNode.appendChild(text2); } - label_scale.innerHTML = String.format('<%:(%d minute window, %d second interval)%>', data_wanted / 60, 1); - label_scale_2.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); + label_scale_2.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/wireless_status", curdev)%>', null, + function(x, data) + { + var noise_floor = 255; + var rate_floor = 60000; + + for (var i = 0; i < data.length; i++) { + noise_floor = Math.min(noise_floor, data[i][NOISE]); + rate_floor = Math.min(rate_floor, data[i][RATE]); + } + + noise_floor -= 5; + + var data_max = 0; + var data_scale = 0; + var data_max_2 = 0; + var data_scale_2 = 0; + + var data_rssi_avg = 0; + var data_noise_avg = 0; + var data_rate_avg = 0; + + var data_rssi_peak = 0; + var data_noise_peak = 0; + var data_rate_peak = 0; + + for (var i = data_stamp ? 0 : 1; i < data.length; i++) + { + /* skip overlapping entries */ + if (data[i][TIME] <= data_stamp) + continue; + + data_rssi.push(data[i][RSSI] - noise_floor); + data_noise.push(data[i][NOISE] - noise_floor); + data_rate.push(Math.floor(data[i][RATE] / 100)); + } + + /* cut off outdated entries */ + data_rssi = data_rssi.slice(data_rssi.length - data_wanted, data_rssi.length); + data_noise = data_noise.slice(data_noise.length - data_wanted, data_noise.length); + data_rate = data_rate.slice(data_rate.length - data_wanted, data_rate.length); + + /* find peak */ + for (var i = 0; i < data_rssi.length; i++) + { + data_max = Math.max(data_max, data_rssi[i]); + data_max_2 = Math.max(data_max_2, data_rate[i]); + + data_rssi_peak = Math.max(data_rssi_peak, data_rssi[i]); + data_noise_peak = Math.max(data_noise_peak, data_noise[i]); + data_rate_peak = Math.max(data_rate_peak, data_rate[i]); + + if (i > 0) + { + data_rssi_avg = (data_rssi_avg + data_rssi[i]) / 2; + data_noise_avg = (data_noise_avg + data_noise[i]) / 2; + data_rate_avg = (data_rate_avg + data_rate[i]) / 2; + } + else + { + data_rssi_avg = data_rssi[i]; + data_noise_avg = data_noise[i]; + data_rate_avg = data_rate[i]; + } + } + + /* remember current timestamp, calculate horizontal scale */ + data_stamp = data[data.length-1][TIME]; + data_scale = (height / (data_max * 1.1)).toFixed(1); + data_scale_2 = (height / (data_max_2 * 1.1)).toFixed(1); + + /* plot data */ + var pt_rssi = '0,' + height; + var pt_noise = '0,' + height; + var pt_rate = '0,' + height; + + var y_rssi = 0; + var y_noise = 0; + var y_rate = 0; + + for (var i = 0; i < data_rssi.length; i++) + { + var x = i * step; + + y_rssi = height - Math.floor(data_rssi[i] * data_scale); + y_noise = height - Math.floor(data_noise[i] * data_scale); + y_rate = height - Math.floor(data_rate[i] * data_scale_2); + + y_rssi -= Math.floor(y_rssi % (1/data_scale)); + y_noise -= Math.floor(y_noise % (1/data_scale)); + + pt_rssi += ' ' + x + ',' + y_rssi; + pt_noise += ' ' + x + ',' + y_noise; + pt_rate += ' ' + x + ',' + y_rate; + } + + pt_rssi += ' ' + width + ',' + y_rssi + ' ' + width + ',' + height; + pt_noise += ' ' + width + ',' + y_noise + ' ' + width + ',' + height; + pt_rate += ' ' + width + ',' + y_rate + ' ' + width + ',' + height; + + line_rssi.setAttribute('points', pt_rssi); + line_noise.setAttribute('points', pt_noise); + line_rate.setAttribute('points', pt_rate); + + function wireless_label(dbm, noise) + { + if (noise) + return String.format("%d dBm (SNR %d dBm)", noise_floor + dbm - 255, dbm - noise); + else + return String.format("%d dBm", noise_floor + dbm - 255); + } + + function rate_label(mbit) + { + return String.format("%d MBit/s", mbit); + } + + label_25.firstChild.data = wireless_label(1.1 * 0.25 * data_max); + label_50.firstChild.data = wireless_label(1.1 * 0.50 * data_max); + label_75.firstChild.data = wireless_label(1.1 * 0.75 * data_max); + + label_25_2.firstChild.data = rate_label(1.1 * 0.25 * data_max_2); + label_50_2.firstChild.data = rate_label(1.1 * 0.50 * data_max_2); + label_75_2.firstChild.data = rate_label(1.1 * 0.75 * data_max_2); + + label_rssi_cur.innerHTML = wireless_label(data_rssi[data_rssi.length-1], data_noise[data_noise.length-1]); + label_noise_cur.innerHTML = wireless_label(data_noise[data_noise.length-1]); + + label_rssi_avg.innerHTML = wireless_label(data_rssi_avg, data_noise_avg); + label_noise_avg.innerHTML = wireless_label(data_noise_avg); + + label_rssi_peak.innerHTML = wireless_label(data_rssi_peak, data_noise_peak); + label_noise_peak.innerHTML = wireless_label(data_noise_peak); + + label_rate_cur.innerHTML = rate_label(data_rate[data_rate.length-1]); + label_rate_avg.innerHTML = rate_label(data_rate_avg); + label_rate_peak.innerHTML = rate_label(data_rate_peak); + } + ); } }, 1000 ); -- 2.11.0