DataTables for port utilization report

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

@@ -16,17 +16,18 @@ register_report(
 
 get '/ajax/content/report/portutilization' => require_login sub {
     return unless schema('netdisco')->resultset('Device')->count;
-    my $set = schema('netdisco')->resultset('Virtual::PortUtilization');
+    my @results = schema('netdisco')->resultset('Virtual::PortUtilization')->hri->all;
 
     if (request->is_ajax) {
-        template 'ajax/report/portutilization.tt', { results => $set, },
+        my $results = to_json (\@results);
+        template 'ajax/report/portutilization.tt', { results => $results, },
             { layout => undef };
     }
     else {
         header( 'Content-Type' => 'text/comma-separated-values' );
-        template 'ajax/report/portutilization_csv.tt', { results => $set, },
+        template 'ajax/report/portutilization_csv.tt', { results => \@results, },
             { layout => undef };
     }
 };
 
-true;
+1;

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

@@ -1,4 +1,4 @@
-<table class="table table-bordered table-condensed table-hover nd_floatinghead">
+<table id="data-table" class="table table-striped table-bordered nd_floatinghead" width="100%" cellspacing="0">
   <thead>
     <tr>
       <th>Device</th>
@@ -8,16 +8,43 @@
       <th class="nd_center-cell">Free</th>
     </tr>
   </thead>
-  </tbody>
-    [% WHILE (row = results.next) %]
-    <tr>
-      <td><a href="[% device_ports %]&q=[% row.ip | uri %]">[% row.dns || row.ip | html_entity %]</a></td>
-      <td class="nd_center-cell">[% row.port_count %]</td>
-      <td class="nd_center-cell">[% row.ports_in_use %]</td>
-      <td class="nd_center-cell">[% row.ports_shutdown %]</td>
-      <td class="nd_center-cell">[% row.ports_free %]</td>
-    </tr>
-    [% END %]
-  </tbody>
 </table>
 
+<script type="text/javascript">
+$(document).ready(function() {
+    var table = $('#data-table').dataTable({
+        "deferRender": true,
+        "data": [% results %],
+        "columns": [
+           {
+                data: 'ip',
+                render: function(data, type, row, meta) {
+                    return '<a href="[% device_ports %]&q=' + data + '">' + (row.dns || row.ip) + '</a>';
+                }
+            }, {
+                data: 'port_count',
+                render: function(data, type, full, meta) {
+                    return data.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+                }
+            }, {
+                data: 'ports_in_use',
+                render: function(data, type, full, meta) {
+                    return data.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+                }
+            }, {
+                data: 'ports_shutdown',
+                render: function(data, type, full, meta) {
+                    return data.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+                }
+            }, {
+                data: 'ports_free',
+                render: function(data, type, full, meta) {
+                    return data.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+                }
+            }
+        ]
+    });
+
+});
+</script>
+

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

@@ -1,7 +1,7 @@
 [% USE CSV -%]
 [% CSV.dump([ 'Device' 'Total Ports' 'In Use' 'Shutdown' 'Free' ]) %]
 
-[% WHILE (row = results.next) %]
+[% FOREACH row IN results %]
   [% mylist = [] %]
   [% device = row.dns || row.ip %]
   [% FOREACH col IN [ device row.port_count row.ports_in_use row.ports_shutdown row.ports_free ] %]