DataTables for duplex mismatches between devices report

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

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

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

@@ -1,30 +1,55 @@
-<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">Left Device</th>
+      <th>Left Device</th>
-      <th class="nd_center-cell">Port</th>
+      <th>Port</th>
-      <th class="nd_center-cell">Duplex</th>
+      <th>Duplex</th>
-      <th class="nd_center-cell">Right Device</th>
+      <th>Right Device</th>
-      <th class="nd_center-cell">Port</th>
+      <th>Port</th>
-      <th class="nd_center-cell">Duplex</th>
+      <th>Duplex</th>
     </tr>
   </thead>
-  </tbody>
-    [% WHILE (row = results.next) %]
-    <tr>
-      <td class="nd_center-cell">[% row.left_dns || row.left_ip | html_entity %]</td>
-      <td class="nd_center-cell"><a class="nd_linkcell"
-        href="[% device_ports %]&q=[% row.left_dns || row.left_ip | uri %]&f=[% row.left_port | uri %]&c_duplex=on">
-          [% row.left_port | html_entity %]</a></td>
-      <td class="nd_center-cell">[% row.left_duplex.ucfirst | html_entity %]</td>
-
-      <td class="nd_center-cell">[% row.right_dns || row.right_ip | html_entity %]</a>
-      <td class="nd_center-cell"><a class="nd_linkcell"
-        href="[% device_ports %]&q=[% row.right_dns || row.right_ip | uri %]&f=[% row.right_port | uri %]&c_duplex=on">
-          [% row.right_port | html_entity %]</a></td>
-      <td class="nd_center-cell">[% row.right_duplex.ucfirst | html_entity %]</td>
-    </tr>
-    [% END %]
-  </tbody>
 </table>
 
+<script type="text/javascript">
+$(document).ready(function() {
+  var table = $('#data-table').dataTable({
+    "deferRender": true,
+    "data": [% results %],
+    "columns": [
+      {
+        "data": 'left_ip',
+        "render": function(data, type, row, meta) {
+          return he.encode(row.left_dns || row.left_ip);
+        }
+      }, {
+        "data": 'left_port',
+        "render": function(data, type, row, meta) {
+          return '<a href="[% device_ports %]&q=' + encodeURIComponent(row.left_dns || row.left_ip) + '&f=' + encodeURIComponent(data) + '&c_duplex=on">' + he.encode(data) + '</a>';
+        }
+      }, {
+        "data": 'left_duplex',
+        "render": function(data, type, row, meta) {
+          return he.encode(capitalizeFirstLetter(data || ''));
+        }
+      }, {
+        "data": 'right_ip',
+        "render": function(data, type, row, meta) {
+          return he.encode(row.right_dns || row.right_ip);
+        }
+      }, {
+        "data": 'right_port',
+        "render": function(data, type, row, meta) {
+          return '<a href="[% device_ports %]&q=' + encodeURIComponent(row.right_dns || row.right_ip) + '&f=' + encodeURIComponent(data) + '&c_duplex=on">' + he.encode(data) + '</a>';
+        }
+      }, {
+        "data": 'right_duplex',
+        "render": function(data, type, row, meta) {
+          return he.encode(capitalizeFirstLetter(data || ''));
+        }
+      }
+    ]
+  });
+});
+</script>
+

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

@@ -1,7 +1,7 @@
 [% USE CSV -%]
 [% CSV.dump([ 'Left Device' 'Port' 'Duplex' 'Right Device' 'Port' 'Duplex' ]) %]
 
-[% WHILE (row = results.next) %]
+[% FOREACH row IN results %]
   [% mylist = [] %]
   [% device_left = row.left_dns || row.left_ip %]
   [% device_right = row.right_dns || row.right_ip %]