Skip to content

O
OpnSense
Commit 63a2615e authored by Ad Schellevis's avatar Ad Schellevis
Browse files
Options

(network insight) work in progress, ui parts

parent 97b3dc1f
Show whitespace changes
Inline Side-by-side
Showing with 113 additions and 60 deletions
src/opnsense/mvc/app/views/OPNsense/Diagnostics/networkinsight.volt
View file @ 63a2615e
...@@ -55,10 +55,17 @@ POSSIBILITY OF SUCH DAMAGE. ...@@ -55,10 +55,17 @@ POSSIBILITY OF SUCH DAMAGE.
// collect all chars for resize update // collect all chars for resize update
var pageCharts = []; var pageCharts = [];
function interface_totals(target, from_date, to_date, resolution) { // human readable interface names
var interface_names = [];
function interface_totals(target, from_date, to_date, resolution, direction) {
var dfObj = new $.Deferred(); var dfObj = new $.Deferred();
fetch_params = from_date + '/' + to_date + '/' + resolution + '/if_in' ; if (direction != 'in' && direction != 'out') {
fetch_params = from_date + '/' + to_date + '/' + resolution + '/if' ;
} else {
fetch_params = from_date + '/' + to_date + '/' + resolution + '/if,direction' ;
}
ajaxGet('/api/diagnostics/networkinsight/timeserie/FlowInterfaceTotals/octets_ps/' + fetch_params,{},function(data,status){ ajaxGet('/api/diagnostics/networkinsight/timeserie/FlowInterfaceTotals/octets_ps/' + fetch_params,{},function(data,status){
nv.addGraph(function() { nv.addGraph(function() {
var chart = nv.models.stackedAreaChart() var chart = nv.models.stackedAreaChart()
...@@ -70,22 +77,53 @@ POSSIBILITY OF SUCH DAMAGE. ...@@ -70,22 +77,53 @@ POSSIBILITY OF SUCH DAMAGE.
.clipEdge(true) .clipEdge(true)
; ;
chart.xAxis.tickFormat(function(d) {
if (resolution < 60) { if (resolution < 60) {
chart.xAxis.tickSize(8).tickFormat(function(d) {
return d3.time.format('%b %e %H:%M:%S')(new Date(d)); return d3.time.format('%b %e %H:%M:%S')(new Date(d));
});
} else if (resolution < 3600) { } else if (resolution < 3600) {
chart.xAxis.tickSize(16).tickFormat(function(d) {
return d3.time.format('%b %e %H:%M')(new Date(d)); return d3.time.format('%b %e %H:%M')(new Date(d));
});
} else if (resolution < 86400) { } else if (resolution < 86400) {
chart.xAxis.tickSize(16).tickFormat(function(d) {
return d3.time.format('%b %e %H h')(new Date(d)); return d3.time.format('%b %e %H h')(new Date(d));
});
} else { } else {
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%b %e')(new Date(d)); return d3.time.format('%b %e')(new Date(d));
});
}
chart.yAxis.tickFormat(d3.format(',.2s'));
chart_data = [];
data.map(function(item){
if (direction != undefined) {
item_dir = item.key.split(',').pop();
item_intf = item.key.split(',')[0];
if (item_intf != '0' && item_intf != 'lo0' ) {
if (direction == item_dir) {
if (interface_names[item_intf] != undefined) {
item.key = interface_names[item_intf];
} else {
item.key = item_intf;
} }
chart_data.push(item);
}
}
} else {
if (item.key != '0' && item.key != 'lo0' ) {
chart_data.push(item);
}
}
});
chart_data.sort(function(a, b) {
return a.key > b.key;
}); });
chart.yAxis.tickFormat(d3.format(',.2s'));
d3.select("#" + target + " svg") d3.select("#" + target + " svg")
.datum(data) .datum(chart_data)
.call(chart); .call(chart);
pageCharts.push(chart); pageCharts.push(chart);
...@@ -106,84 +144,99 @@ POSSIBILITY OF SUCH DAMAGE. ...@@ -106,84 +144,99 @@ POSSIBILITY OF SUCH DAMAGE.
}); });
}); });
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { // change time select
$("#total_time_select").change(function(){
// current time stamp
var timestamp_now = Math.round((new Date()).getTime() / 1000);
var duration = 0;
var resolution = 0;
switch ($(this).val()) {
case "2h":
duration = 60*60*2;
resolution = 30;
break;
case "8h":
duration = 60*60*8;
resolution = 300;
break;
case "1w":
duration = 60*60*24*7;
resolution = 3600;
break;
case "1y":
duration = 60*60*24*365;
resolution = 86400;
break;
}
if (resolution != 0) {
// remove all charts // remove all charts
var svg = d3.select("svg"); var svg = d3.select("svg");
svg.selectAll("*").remove(); svg.selectAll("*").remove();
pageCharts = []; pageCharts = [];
// current time stamp // fetch interface names
var timestamp_now = Math.round((new Date()).getTime() / 1000); ajaxGet('/api/diagnostics/networkinsight/getInterfaces',{},function(intf_names,status){
// load charts for selected tab interface_names = intf_names;
if (e.target.id == 'current_tab'){ interface_totals('chart_intf_in', timestamp_now - duration, timestamp_now, resolution, 'in');
interface_totals('chart_intf_2h', timestamp_now - (60*60*2), timestamp_now, 30).done(function(){ interface_totals('chart_intf_out', timestamp_now - duration, timestamp_now, resolution, 'out');
interface_totals('chart_intf_8h', timestamp_now - (60*60*8), timestamp_now, 300);
}); });
} else if (e.target.id == 'history_tab'){ }
interface_totals('chart_intf_1yr', timestamp_now - (60*60*24*365), timestamp_now, 86400).done(function(){
interface_totals('chart_intf_7d', timestamp_now - (60*60*24*7), timestamp_now, 3600);
}); });
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// load charts for selected tab
if (e.target.id == 'totals_tab'){
$("#total_time_select").change();
} else if (e.target.id == 'history_tab'){
} }
}); });
$('a[data-toggle="tab"]').trigger('shown.bs.tab'); // trigger initial tab load
$("#test").click(function(){ $("#total_time_select").change();
$(".panel-body").show();
});
}); });
</script> </script>
<ul class="nav nav-tabs" data-tabs="tabs" id="maintabs"> <ul class="nav nav-tabs" data-tabs="tabs" id="maintabs">
<li class="active"><a data-toggle="tab" id="current_tab" href="#current">{{ lang._('Current') }}</a></li> <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="history_tab" href="#history">{{ lang._('History') }}</a></li>
</ul> </ul>
<div class="tab-content content-box tab-content" style="padding: 10px;"> <div class="tab-content content-box tab-content" style="padding: 10px;">
<div id="current" class="tab-pane fade in active"> <div id="totals" class="tab-pane fade in active">
<div class="pull-right">
<select class="selectpicker" id="total_time_select">
<option value="2h">{{ lang._('Last 2 hours, 30 second average') }}</option>
<option value="8h">{{ lang._('Last 8 hours, 5 minute average') }}</option>
<option value="1w"> {{ lang._('Last week, 1 hour average') }}</option>
<option value="1y"> {{ lang._('Last year, 24 hour average') }}</option>
</select>
</div>
<br/>
<br/> <br/>
<div class="panel panel-primary"> <div class="panel panel-primary">
<div class="panel-heading panel-heading-sm"> <div class="panel-heading panel-heading-sm">
{{ lang._('Last 2 hours, 30 second average') }} {{ lang._('Interface totals') }}
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div id="chart_intf_2h"> <div id="chart_intf_in">
<svg style="height:300px;"></svg> <small>{{ lang._('IN') }}</small>
<svg style="height:150px;"></svg>
</div>
<div id="chart_intf_out">
<small>{{ lang._('OUT') }}</small>
<svg style="height:150px;"></svg>
</div> </div>
</div> </div>
</div> </div>
<div class="panel panel-primary"> <div class="panel panel-primary">
<div class="panel-heading panel-heading-sm"> <div class="panel-heading panel-heading-sm">
{{ lang._('Last 8 hours, 5 minute average') }} {{ lang._('') }}
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div id="chart_intf_8h">
<svg style="height:300px;"></svg>
</div>
</div> </div>
</div> </div>
</div> </div>
<div id="history" class="tab-pane fade in"> <div id="history" class="tab-pane fade in">
<br/> <br/>
<div class="panel panel-primary">
<div class="panel-heading panel-heading-sm">
{{ lang._('Last week, 1 hour average') }}
</div>
<div class="panel-body">
<div id="chart_intf_7d">
<svg style="height:300px;"></svg>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading panel-heading-sm">
{{ lang._('Last year, 8 hour average') }}
</div>
<div class="panel-body">
<div id="chart_intf_1yr">
<svg style="height:300px;"></svg>
</div>
</div>
</div>
</div> </div>
</div> </div>
<button id="test" class='btn btn-primary'>test</button>
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