mirror of
https://github.com/Ysurac/openmptcprouter-feeds.git
synced 2025-03-09 15:40:03 +00:00
405 lines
12 KiB
HTML
405 lines
12 KiB
HTML
<%#
|
|
Copyright 2010-2018 Jo-Philipp Wich <jo@mein.io>
|
|
Licensed to the public under the Apache License 2.0.
|
|
-%>
|
|
|
|
<%+header%>
|
|
|
|
<script type="text/javascript">//<![CDATA[
|
|
var bwxhr = new XHR();
|
|
|
|
var G;
|
|
var TIME = 0;
|
|
var UDP = 1;
|
|
var TCP = 2;
|
|
var OTHER = 3;
|
|
|
|
var width = 760;
|
|
var height = 300;
|
|
var step = 5;
|
|
|
|
var data_wanted = Math.floor(width / step);
|
|
var data_fill = 1;
|
|
var data_stamp = 0;
|
|
|
|
var data_udp = [ ];
|
|
var data_tcp = [ ];
|
|
var data_otr = [ ];
|
|
|
|
var line_udp;
|
|
var line_tcp;
|
|
|
|
var label_25;
|
|
var label_50;
|
|
var label_75;
|
|
|
|
var label_udp_cur;
|
|
var label_udp_avg;
|
|
var label_udp_peak;
|
|
|
|
var label_tcp_cur;
|
|
var label_tcp_avg;
|
|
var label_tcp_peak;
|
|
|
|
var label_otr_cur;
|
|
var label_otr_avg;
|
|
var label_otr_peak;
|
|
|
|
var label_scale;
|
|
|
|
var conn_table;
|
|
|
|
var dns_cache = { };
|
|
|
|
|
|
/* wait for SVG */
|
|
window.setTimeout(
|
|
function() {
|
|
var svg = document.getElementById('bwsvg');
|
|
|
|
try {
|
|
G = svg.getSVGDocument
|
|
? svg.getSVGDocument() : svg.contentDocument;
|
|
}
|
|
catch(e) {
|
|
G = document.embeds['bwsvg'].getSVGDocument();
|
|
}
|
|
|
|
if (!G)
|
|
{
|
|
window.setTimeout(arguments.callee, 1000);
|
|
}
|
|
else
|
|
{
|
|
/* find sizes */
|
|
width = svg.offsetWidth - 2;
|
|
height = svg.offsetHeight - 2;
|
|
data_wanted = Math.ceil(width / step);
|
|
|
|
/* prefill datasets */
|
|
for (var i = 0; i < data_wanted; i++)
|
|
{
|
|
data_udp[i] = 0;
|
|
data_tcp[i] = 0;
|
|
data_otr[i] = 0;
|
|
}
|
|
|
|
/* find svg elements */
|
|
line_udp = G.getElementById('udp');
|
|
line_tcp = G.getElementById('tcp');
|
|
line_otr = G.getElementById('other');
|
|
|
|
label_25 = G.getElementById('label_25');
|
|
label_50 = G.getElementById('label_50');
|
|
label_75 = G.getElementById('label_75');
|
|
|
|
label_udp_cur = document.getElementById('lb_udp_cur');
|
|
label_udp_avg = document.getElementById('lb_udp_avg');
|
|
label_udp_peak = document.getElementById('lb_udp_peak');
|
|
|
|
label_tcp_cur = document.getElementById('lb_tcp_cur');
|
|
label_tcp_avg = document.getElementById('lb_tcp_avg');
|
|
label_tcp_peak = document.getElementById('lb_tcp_peak');
|
|
|
|
label_otr_cur = document.getElementById('lb_otr_cur');
|
|
label_otr_avg = document.getElementById('lb_otr_avg');
|
|
label_otr_peak = document.getElementById('lb_otr_peak');
|
|
|
|
label_scale = document.getElementById('scale');
|
|
|
|
conn_table = document.getElementById('connections');
|
|
|
|
|
|
/* plot horizontal time interval lines */
|
|
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);
|
|
line.setAttribute('y1', 0);
|
|
line.setAttribute('x2', i);
|
|
line.setAttribute('y2', '100%');
|
|
line.setAttribute('style', 'stroke:black;stroke-width:0.1');
|
|
|
|
var text = G.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
text.setAttribute('x', i + 5);
|
|
text.setAttribute('y', 15);
|
|
text.setAttribute('style', 'fill:#eee; font-size:9pt; font-family:sans-serif; text-shadow:1px 1px 1px #000');
|
|
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, 3);
|
|
|
|
var recheck_lookup_queue = {};
|
|
|
|
/* render datasets, start update interval */
|
|
XHR.poll(3, '<%=build_url("admin/status/realtime/connections_status")%>', null,
|
|
function(x, json)
|
|
{
|
|
|
|
if (!json.connections)
|
|
return;
|
|
|
|
var conn = json.connections;
|
|
|
|
var lookup_queue = [ ];
|
|
var rows = [];
|
|
|
|
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') ||
|
|
(c.src == '::1' && c.dst == '::1'))
|
|
continue;
|
|
|
|
if (!dns_cache[c.src] && lookup_queue.indexOf(c.src) == -1)
|
|
lookup_queue.push(c.src);
|
|
|
|
if (!dns_cache[c.dst] && lookup_queue.indexOf(c.dst) == -1)
|
|
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);
|
|
|
|
rows.push([
|
|
c.layer3.toUpperCase(),
|
|
c.layer4.toUpperCase(),
|
|
c.hasOwnProperty('sport') ? (src + ':' + c.sport) : src,
|
|
c.hasOwnProperty('dport') ? (dst + ':' + c.dport) : dst,
|
|
'%1024.2mB (%d <%:Pkts.%>)'.format(c.bytes, c.packets)
|
|
]);
|
|
}
|
|
|
|
cbi_update_table(conn_table, rows, '<em><%:No information available%></em>');
|
|
|
|
if (lookup_queue.length > 0) {
|
|
var reduced_lookup_queue = lookup_queue;
|
|
|
|
if (lookup_queue.length > 100)
|
|
reduced_lookup_queue = lookup_queue.slice(0, 100);
|
|
|
|
XHR.get('<%=build_url("admin/status/nameinfo")%>/' + reduced_lookup_queue.join('/'), null,
|
|
function(x, json) {
|
|
if (!json)
|
|
return;
|
|
|
|
for (var index in reduced_lookup_queue) {
|
|
var address = reduced_lookup_queue[index];
|
|
|
|
if (!address)
|
|
continue;
|
|
|
|
if (json[address]) {
|
|
dns_cache[address] = json[address];
|
|
lookup_queue.splice(reduced_lookup_queue.indexOf(address),1);
|
|
continue;
|
|
}
|
|
|
|
if(recheck_lookup_queue[address] > 2) {
|
|
dns_cache[address] = (address.match(/:/)) ? '[' + address + ']' : address;
|
|
lookup_queue.splice(index,1);
|
|
} else {
|
|
recheck_lookup_queue[address] != null ? recheck_lookup_queue[address]++ : recheck_lookup_queue[address] = 0;
|
|
}
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
|
|
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_fill++;
|
|
|
|
data_udp.push(data[i][UDP]);
|
|
data_tcp.push(data[i][TCP]);
|
|
data_otr.push(data[i][OTHER]);
|
|
}
|
|
|
|
/* cut off outdated entries */
|
|
data_fill = Math.min(data_fill, data_wanted);
|
|
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]);
|
|
|
|
data_udp_avg += data_udp[i];
|
|
data_tcp_avg += data_tcp[i];
|
|
data_otr_avg += data_otr[i];
|
|
}
|
|
|
|
data_udp_avg = data_udp_avg / data_fill;
|
|
data_tcp_avg = data_tcp_avg / data_fill;
|
|
data_otr_avg = data_otr_avg / data_fill;
|
|
|
|
/* 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;
|
|
|
|
|
|
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);
|
|
|
|
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);
|
|
}
|
|
);
|
|
|
|
XHR.run();
|
|
}
|
|
}, 1000
|
|
);
|
|
//]]></script>
|
|
|
|
<h2 name="content"><%:Realtime Connections%></h2>
|
|
|
|
<div class="cbi-map-descr"><%:This page gives an overview over currently active network connections.%></div>
|
|
|
|
<fieldset class="cbi-section" id="cbi-table-table">
|
|
<legend><%:Active Connections%></legend>
|
|
|
|
<embed id="bwsvg" style="width:100%; height:300px; border:1px solid #000000; background-color:#FFFFFF" src="<%=resource%>/connections.svg" />
|
|
<div style="text-align:right"><small id="scale">-</small></div>
|
|
<br />
|
|
|
|
<div class="table">
|
|
<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">
|
|
<div class="table" id="connections">
|
|
<div class="tr table-titles">
|
|
<div class="th col-2 hide-xs"><%:Network%></div>
|
|
<div class="th col-2"><%:Protocol%></div>
|
|
<div class="th col-7"><%:Source%></div>
|
|
<div class="th col-7"><%:Destination%></div>
|
|
<div class="th col-4"><%:Transfer%></div>
|
|
</div>
|
|
|
|
<div class="tr placeholder">
|
|
<div class="td">
|
|
<em><%:Collecting data...%></em>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<%+footer%>
|