Make node table sortable

2 files changed, 31 insertions, 23 deletions

diff --git a/lib/oxidized/api/web/views/head.haml b/lib/oxidized/api/web/views/head.haml
index 55fdb7c..f8c41f8 100644
--- a/lib/oxidized/api/web/views/head.haml
+++ b/lib/oxidized/api/web/views/head.haml
@@ -1,3 +1,5 @@
 %head
   %title oxidized
+  %script{:src=>'//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'}
+  %script{:src=>'//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.13.3/jquery.tablesorter.min.js'}
   %link{:rel=>'stylesheet', :href=>'/stylesheets/oxidized.css'}
diff --git a/lib/oxidized/api/web/views/nodes.haml b/lib/oxidized/api/web/views/nodes.haml
index 87549cc..336a4c2 100644
--- a/lib/oxidized/api/web/views/nodes.haml
+++ b/lib/oxidized/api/web/views/nodes.haml
@@ -1,28 +1,34 @@
 %html
   !=haml :head
   %body
-    %table{:class=>'center'}
-      %tr
-        %th Name
-        %th IP
-        %th Group
-        %th Last Status
-        %th Last Time
-        %th Config
-        %th Update
-      -trclass = %w(even odd)
-      -@data.sort_by{|e|e[:name]}.each do |node|
-        -klass = trclass.rotate!.first
-        %tr{:class=>klass}
-          %td
-            %a(href="/node/show/#{node[:name]}") #{node[:name]}
-          %td= node[:ip]
-          %td= node[:group]
-          %td= node[:status]
-          %td= node[:time]
-          %td
-            %a(href="/node/fetch/#{node[:full_name]}") config
-          %td
-            %a(href="/node/next/#{node[:full_name]}") update
+    %table{:id=>'nodesTable', :class=>'center tablesorter'}
+      %thead
+        %tr
+          %th Name
+          %th IP
+          %th Group
+          %th Last Status
+          %th Last Time
+          %th Config
+          %th Update
+      %tbody
+        -trclass = %w(even odd)
+        -@data.sort_by{|e|e[:name]}.each do |node|
+          -klass = trclass.rotate!.first
+          %tr{:class=>klass}
+            %td
+              %a(href="/node/show/#{node[:name]}") #{node[:name]}
+            %td= node[:ip]
+            %td= node[:group]
+            %td= node[:status]
+            %td= node[:time]
+            %td
+              %a(href="/node/fetch/#{node[:full_name]}") config
+            %td
+              %a(href="/node/next/#{node[:full_name]}") update
     %p{:class=>'center'}
       %a(href="/reload") reload list of nodes
+    :javascript
+      $(function(){
+        $("#nodesTable").tablesorter();
+      });