(network insight) updated template

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

@@ -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>