DataTables for port SSID and SSID inventory reports

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

@@ -44,26 +44,34 @@ get '/ajax/content/report/portssid' => require_login sub {
 
     if ( defined $ssid ) {
 
-        $rs
+        $rs = $rs->search(
-            = $rs->search( { ssid => $ssid } )
+            { ssid => $ssid },
-            ->prefetch( [qw/ device port /] )
+            {   '+columns' => [
-            ->order_by( [qw/ port.ip port.port /] )->hri;
+                    qw/ device.dns device.name device.model device.vendor port.port/
+                ],
+                join     => [qw/ device port /],
+                collapse => 1,
+            }
+        )->order_by( [qw/ port.ip port.port /] )->hri;
     }
     else {
         $rs = $rs->get_ssids->hri;
 
     }
 
-    return unless $rs->has_rows;
+    my @results = $rs->all;
+    return unless scalar @results;
 
     if ( request->is_ajax ) {
-        template 'ajax/report/portssid.tt', { results => $rs, opt => $ssid },
+        my $json = to_json( \@results );
+        template 'ajax/report/portssid.tt',
+            { results => $json, opt => $ssid },
             { layout => undef };
     }
     else {
         header( 'Content-Type' => 'text/comma-separated-values' );
         template 'ajax/report/portssid_csv.tt',
-            { results => $rs, opt => $ssid },
+            { results => \@results, opt => $ssid },
             { layout => undef };
     }
 };

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

@@ -15,16 +15,19 @@ register_report(
 );
 
 get '/ajax/content/report/ssidinventory' => require_login sub {
-    my $rs = schema('netdisco')->resultset('DevicePortSsid')->get_ssids->hri;
+    my @results = schema('netdisco')->resultset('DevicePortSsid')
-    return unless $rs->has_rows;
+        ->get_ssids->hri->all;
+
+    return unless scalar @results;
 
     if ( request->is_ajax ) {
-        template 'ajax/report/portssid.tt', { results => $rs, },
+        my $json = to_json( \@results );
+        template 'ajax/report/portssid.tt', { results => $json },
             { layout => undef };
     }
     else {
         header( 'Content-Type' => 'text/comma-separated-values' );
-        template 'ajax/report/portssid_csv.tt', { results => $rs, },
+        template 'ajax/report/portssid_csv.tt', { results => \@results },
             { layout => undef };
     }
 };

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

@@ -1,6 +1,6 @@
 [% 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>Device (Port)</th>
@@ -10,24 +10,9 @@
         <th>Vendor</th>
       </tr>
     </thead>
-    </tbody>
-      [% WHILE (row = results.next) %]
-      <tr>
-        <td>
-          <a class="nd_linkcell"
-            href="[% device_ports %]&q=[% row.port.ip | uri %]&f=[% row.port.port | uri %]&c_nodes=on&n_ssid=on">
-              [% row.device.dns || row.device.name || row.device.ip | html_entity %] ( [% row.port.port | html_entity %] )</a>
-        </td>
-        <td>[% row.broadcast ? 'Yes' : 'No' %]</td>
-        <td>[% row.device.model | html_entity %]</td>
-        <td>[% row.ssid | html_entity %]</td>
-        <td>[% row.device.vendor | html_entity %]</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">SSID</th>
@@ -35,18 +20,67 @@
       <th class="nd_center-cell">Count</th>
       </tr>
     </thead>
-    </tbody>  
-    [% WHILE (row = results.next) %]
-      <tr>
-        <td>
-          <a class="nd_linkcell"
-             href="[% uri_for('/report/portssid') %]?ssid=[% row.ssid | uri %]">
-            [% row.ssid | html_entity %]</a>
-        </td>
-        <td class="nd_center-cell">[% row.broadcast ? 'Yes' : 'No' %]</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": 'ip',
+      "render": function(data, type, row, meta) {
+        return '<a href="[% device_ports %]&q=' + encodeURIComponent(data) + '&f=' + encodeURIComponent(row.port.port) + '&c_nodes=on&n_ssid=on">' + he.encode(row.device.dns || row.device.name || row.ip) + '(' + he.encode(row.port.port) + ')</a>';
+        }
+      }, {
+        "data": 'broadcast',
+        "render": function(data, type, full, meta) {
+          return (data ? 'Yes' : 'No');
+        }
+      }, {
+        "data": 'device.model',
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }, {
+        "data": 'ssid',
+        "searchable": false,
+        "orderable": false,
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }, {
+        "data": 'device.vendor',
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }
+    ]
+    [% ELSE %]
+    "columns": [
+      {
+        "data": 'ssid',
+        "render": function(data, type, full, meta) {
+          return '<a href="[% uri_for('/report/portssid') %]?ssid=' + encodeURIComponent(data) + '">' + he.encode(data) + '</a>';
+        }
+      }, {
+        "data": 'broadcast',
+        "render": function(data, type, full, meta) {
+          return (data ? 'Yes' : 'No');
+        }
+      }, {
+        "data": 'count',
+        "searchable": false,
+        "render": function(data, type, full, meta) {
+          return data.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        }
+      },
+    ],
+    "order": [[ 2, "desc" ]],
+  [% END %]  
+  });
+});
+</script>

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

@@ -2,7 +2,7 @@
 [% IF opt %]
   [% CSV.dump(['Device' 'Port' 'Name' 'Broadcast' 'Model' 'SSID' 'Vendor']) %]
 
-  [% WHILE (row = results.next) %]
+  [% FOREACH row IN results %]
     [% mylist = [] %]
     [% device = row.device.dns || row.device.name || row.device.ip %]
     [% broadcast = row.broadcast ? 'Yes' : 'No' %]
@@ -15,7 +15,7 @@
 [% ELSE %]
   [% CSV.dump(['SSID' 'Count']) %]
 
-  [% WHILE (row = results.next) %]
+  [% FOREACH row IN results %]
     [% mylist = [] %]
     [% FOREACH col IN [ row.ssid row.count ] %]
       [% mylist.push(col) %]