Skip to content

O
OpnSense
Commit 825920a1 authored by Ad Schellevis's avatar Ad Schellevis
Browse files
Options

(network insight) updated template

parent 02a40e55
Hide whitespace changes
Inline Side-by-side
Showing with 193 additions and 6 deletions
src/opnsense/mvc/app/views/OPNsense/Diagnostics/networkinsight.volt
View file @ 825920a1
......@@ -149,8 +149,7 @@ POSSIBILITY OF SUCH DAMAGE.
.useInteractiveGuideline(true)
.interactive(true)
.showControls(true)
.clipEdge(true)
;
.clipEdge(true);
if (selected_time.resolution < 60) {
chart.xAxis.tickSize(8).tickFormat(function(d) {
......@@ -250,6 +249,19 @@ POSSIBILITY OF SUCH DAMAGE.
.transition().duration(350)
.call(chart);
pageCharts["chart_top_ports"] = chart;
// copy selection to detail page and query results
chart.pie.dispatch.on('elementClick', function(e){
if (data[e.index].dst_port != "") {
$("#interface_select_detail").val($("#interface_select").val());
$('#interface_select_detail').selectpicker('refresh');
$("#service_port_detail").val(data[e.index].dst_port);
$("#address_detail").val("");
$("#details_tab").click();
grid_details();
}
});
return chart;
});
}
......@@ -297,12 +309,106 @@ POSSIBILITY OF SUCH DAMAGE.
.transition().duration(350)
.call(chart);
pageCharts["chart_top_sources"] = chart;
// copy selection to detail tab and query results
chart.pie.dispatch.on('elementClick', function(e){
if (data[e.index].src_addr != "") {
$("#interface_select_detail").val($("#interface_select").val());
$('#interface_select_detail').selectpicker('refresh');
$("#service_port_detail").val("");
$("#address_detail").val(data[e.index].src_addr);
$("#details_tab").click();
grid_details();
}
});
return chart;
});
}
});
}
/**
* collect netflow details
*/
function grid_details()
{
var filters = {'filter_field': [], 'filter_value': []};
if ($("#interface_select_detail").val() != "") {
filters['filter_field'].push('if');
filters['filter_value'].push($("#interface_select_detail").val());
}
if ($("#service_port_detail").val() != "") {
filters['filter_field'].push('service_port');
filters['filter_value'].push($("#service_port_detail").val());
}
if ($("#address_detail").val() != "") {
filters['filter_field'].push('src_addr');
filters['filter_value'].push($("#address_detail").val());
}
var time_url = $("#date_detail").val().replace('-', '/');
console.log(service_names);
ajaxGet('/api/diagnostics/networkinsight/top/FlowSourceAddrDetails/'+time_url+'/service_port,protocol,if,src_addr,dst_addr/octets/100/',
{'filter_field': filters['filter_field'].join(','), 'filter_value': filters['filter_value'].join(',')}, function(data, status){
if (status == 'success'){
var html = []
// count total traffic
grand_total = 0;
data.map(function(item){
grand_total += item['total'];
});
// dump rows
data.map(function(item){
if (item.protocol in protocol_names) {
proto = ' (' + protocol_names[item.protocol] + ')';
} else {
proto = ''
}
if (item.service_port in service_names) {
service_port = service_names[item.service_port];
} else {
service_port = item.service_port
}
tr_str = '<tr>';
if (service_port != "") {
tr_str += '<td> <span data-toggle="tooltip" title="'+proto+'/'+item.service_port+'">'+service_port+' </span> '+proto+'</td>';
} else {
tr_str += "<td>{{ lang._('(other)') }}</td>";
}
tr_str += '<td>' + item['src_addr'] + '</td>';
tr_str += '<td>' + item['dst_addr'] + '</td>';
tr_str += '<td>' + byteFormat(item['total']) + ' ' + '</td>';
if (item['last_seen'] != "") {
tr_str += '<td>' + d3.time.format('%b %e %H:%M:%S')(new Date(item['last_seen']*1000)) + '</td>';
} else {
tr_str += '<td></td>'
}
percentage = parseInt((item['total'] /grand_total) * 100);
perc_text = ((item['total'] /grand_total) * 100).toFixed(2);
tr_str += '<td>';
tr_str += '<div class="progress">';
tr_str += '<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" ';
tr_str += 'aria-valuenow="'+percentage+'" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width:' ;
tr_str += percentage+'%;">'+perc_text+'%</div></div>';
tr_str += '</td>';
tr_str += '</tr>';
html.push(tr_str);
});
$("#netflow_details > tbody").html(html.join(''));
if (grand_total > 0) {
$("#netflow_details_total").html(byteFormat(grand_total));
} else {
$("#netflow_details_total").html("");
}
// link tooltips
$('[data-toggle="tooltip"]').tooltip();
}
});
}
// hide heading
$(".page-content-head").addClass("hidden");
......@@ -331,28 +437,61 @@ POSSIBILITY OF SUCH DAMAGE.
// load charts for selected tab
if (e.target.id == 'totals_tab'){
$("#total_time_select").change();
} else if (e.target.id == 'history_tab'){
} else if (e.target.id == 'details_tab'){
}
});
// detail page, search on <enter>
$("#service_port_detail").keypress(function (e) {
if (e.which == 13) {
grid_details();
}
});
$("#address_detail").keypress(function (e) {
if (e.which == 13) {
grid_details();
}
});
// trigger initial tab load
get_metadata().done(function(){
// known interfaces
for (var key in interface_names) {
$('#interface_select').append($("<option></option>").attr("value",key).text(interface_names[key]));
$('#interface_select_detail').append($("<option></option>").attr("value",key).text(interface_names[key]));
}
$('#interface_select').selectpicker('refresh');
$('#interface_select_detail').selectpicker('refresh');
// generate date selection (utc start, end times)
var now = new Date;
var date_begin = Date.UTC(now.getUTCFullYear(),now.getUTCMonth(), now.getUTCDate(), 0, 0, 0, 0);
var date_end = Date.UTC(now.getUTCFullYear(),now.getUTCMonth(), now.getUTCDate(), 23, 59, 59, 0);
var tmp_date = new Date();
for (i=0; i < 200; i++) {
from_date_ts = (date_begin - (24*60*60*1000 * i)) / 1000;
to_date_ts = parseInt((date_end - (24*60*60*1000 * i)) / 1000);
tmp_date = new Date(from_date_ts*1000);
tmp = tmp_date.getDate() + '/' + (tmp_date.getMonth()+1) + '/' + tmp_date.getFullYear();
$("#date_detail").append($("<option/>").val(from_date_ts+'-'+to_date_ts).text(tmp));
}
$("#date_detail").selectpicker('refresh');
chart_interface_totals();
chart_top_dst_port_usage();
chart_top_src_addr_usage();
});
$("#refresh_details").click(grid_details);
});
</script>
<ul class="nav nav-tabs" data-tabs="tabs" id="maintabs">
<li class="active"><a data-toggle="tab" id="totals_tab" href="#totals">{{ lang._('Totals') }}</a></li>
<li><a data-toggle="tab" id="history_tab" href="#history">{{ lang._('History') }}</a></li>
<li><a data-toggle="tab" id="details_tab" href="#details">{{ lang._('Details') }}</a></li>
</ul>
<div class="tab-content content-box tab-content" style="padding: 10px;">
<div id="totals" class="tab-pane fade in active">
......@@ -403,11 +542,59 @@ POSSIBILITY OF SUCH DAMAGE.
</div>
</div>
</div>
<div class="col-xs-12">
<small>{{ lang._('click on pie for details') }}</small>
</div>
</div>
</div>
</div>
<div id="history" class="tab-pane fade in">
<div id="details" class="tab-pane fade in">
<table class="table table-condensed">
<thead>
<tr>
<th>{{ lang._('Date') }}</th>
<th>{{ lang._('Interface') }}</th>
<th>{{ lang._('(dst) Port') }}</th>
<th>{{ lang._('(src) Address') }}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="selectpicker" id="date_detail" data-live-search="true" data-size="10">
</select>
</td>
<td>
<select class="selectpicker" id="interface_select_detail">
</select>
</td>
<td><input type="text" id="service_port_detail"></td>
<td><input type="text" id="address_detail"></td>
<td><button id="refresh_details" type="button" class="btn glyphicon glyphicon-refresh"></button></td>
</tr>
</tbody>
</table>
<br/>
<table class="table table-condensed table-striped" id="netflow_details">
<thead>
<tr>
<th>{{ lang._('Service') }}</th>
<th>{{ lang._('Source') }}</th>
<th>{{ lang._('Destination') }}</th>
<th>{{ lang._('Bytes') }}</th>
<th>{{ lang._('Last seen') }}</th>
<th>%</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="3">{{ lang._('Total (selection)') }}</td>
<td id="netflow_details_total"></td>
</tr>
</tfoot>
</table>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023