DataTables for node vendor inventory report

Netdisco/lib/App/Netdisco/Web/Plugin/Report/NodeVendor.pm

@@ -14,20 +14,6 @@ register_report(
     }
 );
 
-hook 'before' => sub {
-
-    return
-        unless (
-        request->path eq uri_for('/report/nodevendor')->path
-        or index( request->path,
-            uri_for('/ajax/content/report/nodevendor')->path ) == 0
-        );
-
-    params->{'limit'} ||= 1024;
-    params->{'order'} ||= 'MAC';
-
-};
-
 hook 'before_template' => sub {
     my $tokens = shift;
 
@@ -59,21 +45,15 @@ get '/ajax/content/report/nodevendor' => require_login sub {
 
         my $match = $vendor eq 'blank' ? undef : $vendor;
 
-        my $order = {
+        $rs = $rs->search( { 'oui.abbrev' => $match },
-            MAC    => 'me.mac',
+            {   '+columns' => [qw/ device.dns device.name oui.abbrev /],
-            Device => 'me.switch',
+                join       => [qw/ oui device /],
-            Vendor => 'oui.company'
+                collapse   => 1,
-        };
+            });
-
-        $rs = $rs->search( { 'oui.abbrev' => $match } )
-            ->prefetch( [qw/ oui device /] );
 
         unless ( param('archived') ) {
             $rs = $rs->search( { -bool => 'me.active' } );
         }
-
-        $rs = $rs->order_by( $order->{ param('order') } )
-            ->limit( param('limit') )->hri;
     }
     else {
         $rs = $rs->search(
@@ -83,20 +63,22 @@ get '/ajax/content/report/nodevendor' => require_login sub {
                 as       => [qw/ vendor count /],
                 group_by => [qw/ oui.abbrev /]
             }
-        )->order_by( { -desc => 'count' } )->hri;
+        )->order_by( { -desc => 'count' } );
     }
 
-    return unless $rs->has_rows;
+    my @results = $rs->hri->all;
+    return unless scalar @results;
 
     if ( request->is_ajax ) {
+        my $json = to_json( \@results );
         template 'ajax/report/nodevendor.tt',
-            { results => $rs, opt => $vendor },
+            { results => $json, opt => $vendor },
             { layout => undef };
     }
     else {
         header( 'Content-Type' => 'text/comma-separated-values' );
         template 'ajax/report/nodevendor_csv.tt',
-            { results => $rs, opt => $vendor },
+            { results => \@results, opt => $vendor },
             { layout => undef };
     }
 };

Netdisco/share/views/ajax/report/nodevendor.tt

@@ -1,6 +1,5 @@
-[% USE Number.Format %]
 [% IF opt %]
-  <table class="table table-bordered table-condensed table-striped nd_floatinghead">
+  <table id="data-table" class="table table-striped table-bordered" width="100%" cellspacing="0">
     <thead>
       <tr>
         <th>MAC</th>
@@ -8,52 +7,62 @@
         <th>Device (Port)</th>
       </tr>
     </thead>
-    </tbody>
-      [% WHILE (row = results.next) %]
-      <tr>
-        <td>
-          <a class="nd_linkcell"
-            href="[% search_node %]&q=[% row.mac | uri %]">
-              [% row.mac.upper | html_entity %][% '&nbsp;&nbsp;<i class="icon-book"></i> ' IF NOT row.active %]</a>
-        </td>
-        <td>
-          <a class="nd_linkcell"
-          [% IF row.oui.abbrev %]
-            href="[% uri_for('/report/nodevendor') %]?vendor=[% row.oui.abbrev | uri %]">
-                [% row.oui.abbrev | html_entity %] ( [% row.oui.company | html_entity %] )</a>
-          [% ELSE %]
-            href="[% uri_for('/report/nodevendor') %]?vendor=blank">
-                (Unknown Vendor)</a>
-          [% END %]
-        </td>
-        <td>
-          <a class="nd_linkcell"
-            href="[% device_ports %]&q=[% row.switch | uri %]&f=[% row.port | uri %]&c_nodes=on&n_ssid=on">
-              [% row.device.dns || row.device.name || row.switch | html_entity %] ( [% row.port | html_entity %] )</a>
-        </td>
-      </tr>
-      [% END %]
-    </tbody>
   </table>
 [% ELSE %]
-  <table class="table table-bordered table-condensed table-striped nd_floatinghead">
+  <table id="data-table" class="table table-striped table-bordered" width="100%" cellspacing="0">
     <thead>
       <tr>
       <th class="nd_center-cell">Vendor</th>
       <th class="nd_center-cell">Count</th>
       </tr>
     </thead>
-    </tbody>  
-    [% WHILE (row = results.next) %]
-      <tr>
-        <td>
-          <a class="nd_linkcell"
-             href="[% uri_for('/report/nodevendor') %]?vendor=[% row.vendor || 'blank' | uri %]">
-            [% row.vendor || '(Unknown Vendor)' | html_entity %]</a>
-        </td>
-        <td class="nd_center-cell">[% row.count | format_number %]</td>
-      </tr>
-    [% END %]
-    </tbody>
   </table>
 [% END %]
+
+<script type="text/javascript">
+$(document).ready(function() {
+  var table = $('#data-table').dataTable({
+    "deferRender": true,
+    "data": [% results %],
+    [% IF opt %]
+    "columns": [
+      {
+        "data": 'mac',
+        "render": function(data, type, row, meta) {
+          var icon = '&nbsp;&nbsp;<i class="icon-book text-warning"></i> ';
+          if (row.active) {
+            icon = '';
+          }
+          return '<a href="[% search_node %]&q=' + encodeURIComponent(data) + '">' + he.encode(data.toUpperCase()) + icon + '</a>';
+        }
+      }, {
+        "data": 'oui.abbrev',
+        "render": function(data, type, row, meta) {
+          return '<a href="[% uri_for('/report/nodevendor') %]?vendor=' + encodeURIComponent(data || 'blank') + '">' + he.encode(data ||'(Unknown Vendor)') + '</a>';
+        }
+      }, {
+        "data": 'port',
+        "render": function(data, type, row, meta) {
+          return '<a href="[% device_ports %]&q=' + encodeURIComponent(row.switch) + '&f=' + encodeURIComponent(data) + '&c_nodes=on&n_ssid=on">' + he.encode(row.device.dns || row.device.name || row.switch) + '(' + he.encode(data) + ')</a>';
+        }
+      }
+    ]
+    [% ELSE %]
+    "columns": [    
+      {
+        "data": 'vendor',
+        "render": function(data, type, row, meta) {
+          return '<a href="[% uri_for('/report/nodevendor') %]?vendor=' + encodeURIComponent(data || 'blank') + '">' + he.encode(data ||'(Unknown Vendor)') + '</a>';
+        }
+      }, {
+        "data": 'count',
+        "render": function(data, type, row, meta) {
+          return data.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        }
+      }
+    ],
+    "order": [[1, "desc"]]
+    [% END %]
+  });
+});
+</script>

Netdisco/share/views/ajax/report/nodevendor_csv.tt

@@ -2,7 +2,7 @@
 [% IF opt %]
   [% CSV.dump(['MAC' 'Vendor' 'Company' 'Device' 'Port']) %]
 
-  [% WHILE (row = results.next) %]
+  [% FOREACH row IN results %]
     [% mylist = [] %]
     [% device = row.device.dns || row.device.name || row.switch %]
     [% FOREACH col IN [ row.mac.upper row.oui.abbrev row.oui.company device row.port ] %]
@@ -14,7 +14,7 @@
 [% ELSE %]
   [% CSV.dump(['Vendor' 'Count']) %]
 
-  [% WHILE (row = results.next) %]
+  [% FOREACH row IN results %]
     [% mylist = [] %]
     [% vendor = row.vendor || '(Unknown Vendor)' %]
     [% FOREACH col IN [ vendor row.count ] %]

Netdisco/share/views/sidebar/report/nodevendor.tt

@@ -23,25 +23,6 @@
               <legend class="nd_sidebar-legend">
                 <label><em><strong>Options</strong></em></label>
               </legend>
-              <div class="clearfix">
-                <ul class="unstyled">
-                  <li>
-                    <em class="muted">Limit:</em><br/>
-                    <select id="nd_mac-format" class="nd_side-select" name="limit">
-                      [% FOREACH size IN [ '128', '256', '1024', '2048', '4096', '8192' ] %]
-                      <option[% ' selected="selected"' IF params.limit == size %]>[% size %]</option>
-                      [% END %]
-                    </select>
-                  </li>
-                  <li>
-                    <em class="muted">Order By:</em><br/>
-                    <select id="nd_mac-format" class="nd_side-select" name="order">
-                      [% FOREACH item IN [ 'Device', 'MAC', 'Vendor' ] %]
-                      <option[% ' selected="selected"' IF params.order == item %]>[% item %]</option>
-                      [% END %]
-                    </select>
-                  </li>
-                </ul>
                 <div class="clearfix input-prepend"
                     rel="tooltip" data-placement="left" data-offset="5" data-title="Include Archived Data">
                   <label class="add-on">
@@ -52,7 +33,6 @@
                     <span class="nd_searchcheckbox uneditable-input">Archived Data</span>
                   </label>
                 </div>
-              </div>
             </fieldset>
 
             <button id="[% report.tag %]_submit" type="submit" class="btn btn-info">