(network insight) work in progress, ui parts

src/opnsense/mvc/app/views/OPNsense/Diagnostics/networkinsight.volt

@@ -55,10 +55,17 @@ POSSIBILITY OF SUCH DAMAGE.
       // collect all chars for resize update
       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();
 
-        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){
             nv.addGraph(function() {
               var chart = nv.models.stackedAreaChart()
@@ -70,22 +77,53 @@ POSSIBILITY OF SUCH DAMAGE.
                   .clipEdge(true)
                   ;
 
-              chart.xAxis.tickFormat(function(d) {
-                  if (resolution < 60) {
-                      return d3.time.format('%b %e %H:%M:%S')(new Date(d));
-                  } else if (resolution < 3600) {
-                      return d3.time.format('%b %e %H:%M')(new Date(d));
-                  } else if (resolution < 86400) {
-                      return d3.time.format('%b %e %H h')(new Date(d));
+              if (resolution < 60) {
+                  chart.xAxis.tickSize(8).tickFormat(function(d) {
+                    return d3.time.format('%b %e %H:%M:%S')(new Date(d));
+                  });
+              } else if (resolution < 3600) {
+                  chart.xAxis.tickSize(16).tickFormat(function(d) {
+                    return d3.time.format('%b %e %H:%M')(new Date(d));
+                  });
+              } else if (resolution < 86400) {
+                  chart.xAxis.tickSize(16).tickFormat(function(d) {
+                    return d3.time.format('%b %e %H h')(new Date(d));
+                  });
+              } else {
+                  chart.xAxis.tickFormat(function(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 {
-                      return d3.time.format('%b %e')(new Date(d));
+                      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")
-                  .datum(data)
+                  .datum(chart_data)
                   .call(chart);
 
               pageCharts.push(chart);
@@ -106,84 +144,99 @@ POSSIBILITY OF SUCH DAMAGE.
           });
       });
 
+      // 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
+            var svg = d3.select("svg");
+            svg.selectAll("*").remove();
+            pageCharts = [];
+            // fetch interface names
+            ajaxGet('/api/diagnostics/networkinsight/getInterfaces',{},function(intf_names,status){
+                interface_names = intf_names;
+                interface_totals('chart_intf_in', timestamp_now - duration, timestamp_now, resolution, 'in');
+                interface_totals('chart_intf_out', timestamp_now - duration, timestamp_now, resolution, 'out');
+            });
+        }
+      });
+
       $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-          // remove all charts
-          var svg = d3.select("svg");
-          svg.selectAll("*").remove();
-          pageCharts = [];
-          // current time stamp
-          var timestamp_now = Math.round((new Date()).getTime() / 1000);
           // load charts for selected tab
-          if (e.target.id == 'current_tab'){
-              interface_totals('chart_intf_2h', timestamp_now - (60*60*2), timestamp_now, 30).done(function(){
-                interface_totals('chart_intf_8h', timestamp_now - (60*60*8), timestamp_now, 300);
-              });
+          if (e.target.id == 'totals_tab'){
+              $("#total_time_select").change();
           } 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"]').trigger('shown.bs.tab');
-      $("#test").click(function(){
-          $(".panel-body").show();
-      });
+      // trigger initial tab load
+      $("#total_time_select").change();
+
     });
 </script>
 
 <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>
 </ul>
 <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/>
       <div class="panel panel-primary">
         <div class="panel-heading panel-heading-sm">
-          {{ lang._('Last 2 hours, 30 second average') }}
+          {{ lang._('Interface totals') }}
         </div>
         <div class="panel-body">
-          <div id="chart_intf_2h">
-            <svg style="height:300px;"></svg>
+          <div id="chart_intf_in">
+            <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 class="panel panel-primary">
         <div class="panel-heading panel-heading-sm">
-          {{ lang._('Last 8 hours, 5 minute average') }}
+          {{ lang._('') }}
         </div>
         <div class="panel-body">
-          <div id="chart_intf_8h">
-            <svg style="height:300px;"></svg>
-          </div>
         </div>
       </div>
     </div>
     <div id="history" class="tab-pane fade in">
       <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>
-<button id="test" class='btn btn-primary'>test</button>