Compliance Check : add FooTable, sort, paginate, filter tables

3 files changed, 139 insertions, 114 deletions

diff --git a/app/assets/javascripts/compliance_checks/report.js.coffee b/app/assets/javascripts/compliance_checks/report.js.coffee
index cd09cbd5d..f9cce87a6 100644
--- a/app/assets/javascripts/compliance_checks/report.js.coffee
+++ b/app/assets/javascripts/compliance_checks/report.js.coffee
@@ -1,39 +1,29 @@
-$(".compliance_checks.report, .imports.compliance_check").ready ->
+$(".compliance_checks.report, .imports.compliance_check, #sidebar.compliance_checks_sidebar").ready ->
 
-  get_compliance_check_results = (html_container, css_class) ->
-    html_container.each ->
-      if( $( this ).hasClass(css_class) )
-        $( this ).show()
-      else
-        $( this ).hide()
+  showSeverityDonut = (severity) ->
+    $("##{severity}").empty()
+    console.log $("##{severity}").val()
+    Morris.Donut({
+      element: severity,
+      data: [
+        { label: $(".table").data('title-nok'), value: $("tr.nok_#{severity}").size() },
+        { label: $(".table").data('title-uncheck'), value: $("tr.uncheck_#{severity}").size() },
+        { label: $(".table").data('title-ok'), value: $("tr.ok_#{severity}").size() }
+      ],
+      colors: [ "#e22b1b", "#898e7f", "#8fc861" ]
+    }).on('click', update = (i, row) ->
+      switch i
+        when 0 then $('.table').trigger 'footable_filter', filter: "nok_#{severity}"
+        when 1 then $('.table').trigger 'footable_filter', filter: "uncheck_#{severity}"
+        when 2 then $('.table').trigger 'footable_filter', filter: "ok_#{severity}"
+    )
 
-  Morris.Donut({
-    element: 'error',
-    data: [
-      { label: $(".table").data('title-nok'), value: $("tr.nok_error").size() },
-      { label: $(".table").data('title-uncheck'), value: $("tr.uncheck_error").size() },
-      { label: $(".table").data('title-ok'), value: $("tr.ok_error").size() }
-    ],
-    colors: [ "#e22b1b", "#898e7f", "#8fc861" ]
-  }).on('click', update = (i, row) ->
-    switch i
-      when 0 then get_compliance_check_results( $(".report tbody tr"), "nok_error")
-      when 1 then get_compliance_check_results( $(".report tbody tr"), "uncheck_error")
-      when 2 then get_compliance_check_results( $(".report tbody tr"), "ok_error") )
+  $('table').footable().trigger 'footable_filter', filter: 'severity-error'
+  $('a.severities_warning').on 'click', (e) ->
+    $('table').footable().trigger 'footable_filter', filter: 'severity-warning'
 
-  Morris.Donut({
-    element: 'warning',
-    data: [
-      { label: $(".table").data('title-nok'), value: $("tr.nok_warning").size() },
-      { label: $(".table").data('title-uncheck'), value: $("tr.uncheck_warning").size() },
-      { label: $(".table").data('title-ok'), value: $("tr.ok_warning").size() }
-    ],
-    colors: [ "#ffbd2b", "#898e7f", "#8fc861" ]
-  }).on('click', update = (i, row) ->
-    switch i
-      when 0 then get_compliance_check_results( $(".report tbody tr"), "nok_warning")
-      when 1 then get_compliance_check_results( $(".report tbody tr"), "uncheck_warning")
-      when 2 then get_compliance_check_results( $(".report tbody tr"), "ok_warning") )
+  $('a.severities_error').on 'click', (e) ->
+    $('table').footable().trigger 'footable_filter', filter: 'severity-error'
 
   $(".notice").popover({ container: "body", html: false, trigger: "focus", placement: "bottom" })
   # Hide and show error details
@@ -46,3 +36,18 @@ $(".compliance_checks.report, .imports.compliance_check").ready ->
   if refreshInterval > 0
     reloadPage = () -> window.location.reload()
     setInterval(reloadPage,refreshInterval * 1000)
+
+  footableFilter = (parent, el) ->
+    $(parent).footable().bind 'footable_filtering', (e) ->
+      selected =  $("select#{el} option:selected").val()
+      if selected and selected.length > 0
+        e.filter += if e.filter and e.filter.length > 0 then ' ' + selected else selected
+        e.clear = !e.filter
+      return
+    $("select#{el}").change (e) ->
+      e.preventDefault()
+      $(parent).trigger 'footable_filter', filter: $("select#{el} option:selected").val()
+      return
+
+  footableFilter('table', '.filter-status')
+  footableFilter('table', '.filter-severity')
diff --git a/app/views/compliance_checks/_compliance_check_results.erb b/app/views/compliance_checks/_compliance_check_results.erb
index 80efe9be4..62986a75b 100644
--- a/app/views/compliance_checks/_compliance_check_results.erb
+++ b/app/views/compliance_checks/_compliance_check_results.erb
@@ -1,78 +1,90 @@
-<table class="table table-hover" data-title-nok="<%= t 'nok', :scope => 'compliance_check_result.statuses' %>", data-title-uncheck="<%= t 'uncheck', :scope => 'compliance_check_result.statuses' %>", data-title-ok="<%= t 'ok', :scope => 'compliance_check_result.statuses' %>" >
+<p>
+<form class="form-inline">
+  <div class="form-group">
+    <label><%= t("shared.ie_report.html.search") %></label>
+    <input id="filter" type="text" class="form-control">
+  </div>
+  <div class="form-group">
+    <label><%=ComplianceCheckResult.human_attribute_name(:status)%></label>
+    <select class="filter-status form-control">
+      <option></option>
+      <option value="status-ok"><%= t("compliance_check_result.statuses.ok") %></option>
+      <option value="status-nok"><%= t("compliance_check_result.statuses.nok") %></option>
+      <option value="status-uncheck"><%= t("compliance_check_result.statuses.uncheck") %></option>
+    </select>
+  </div>
+</form>
+</p>
+<table class="table table-hover"
+       data-filter="#filter"
+       data-page-size="20"
+       data-title-nok="<%=t('nok', scope: 'compliance_check_result.statuses') %>"
+       data-title-uncheck="<%=t('uncheck', scope: 'compliance_check_result.statuses') %>"
+       data-title-ok="<%=t('ok', scope: 'compliance_check_result.statuses') %>">
   <thead>
     <tr>
       <th><%= ComplianceCheckResult.human_attribute_name(:status) %></th>
       <th><%= ComplianceCheckResult.human_attribute_name(:severity) %></th>
       <th><%= ComplianceCheckResult.human_attribute_name(:rule_code) %></th>
-      <th><%= ComplianceCheckResult.human_attribute_name(:detail) %></th>
+      <th data-sort-ignore="true"><%= ComplianceCheckResult.human_attribute_name(:detail) %></th>
     </tr>
   </thead>
   <tbody>
     <% compliance_check_validation_report.tests.each_with_index do |test, index| %>
     <tr class='<%= "#{test.result}_#{test.severity}" %>'>
-      <td><%= status_icon( test.result, test.severity ) %> </td>
-      <td><%= t("compliance_check_result.severities." + test.severity + "_txt") %></td>
-      <td>
-	<% data_content = t ( "activemodel.attributes.compliance_check_result." + test.test_id ) %>
-	<% data_title = t ( "activemodel.attributes.compliance_check_result.title" ) %>
-        <button data-content='<%= data_content %>' data-title='<%= data_title %>' rel="popover" data-toggle="popover" class="notice btn btn-info btn-xs" ><i class="fa fa-info"></i></button>
-        <%= link_to test.test_id, test_definition(test.test_id), :title => ComplianceCheckResult.human_attribute_name(test.test_id), :target => "compliance_check" %></td>
+      <td data-value="<%="status-#{test.result}"%>"><%= status_icon( test.result, test.severity ) %> </td>
+      <td data-value="<%="severity-#{test.severity}"%>"><%= t("compliance_check_result.severities.#{test.severity}_txt") %></td>
+      <td data-value="<%= "#{test.result}_#{test.severity}" %>">
+        <button data-content='<%=t("activemodel.attributes.compliance_check_result.#{test.test_id}")%>'
+                data-title='<%=t("activemodel.attributes.compliance_check_result.title")%>'
+                rel="popover"
+                data-toggle="popover"
+                class="notice btn btn-info btn-xs">
+          <i class="fa fa-info"></i>
+        </button>
+        <%= link_to test.test_id, test_definition(test.test_id), title: ComplianceCheckResult.human_attribute_name(test.test_id), target: "compliance_check" %>
+      </td>
       <td class="td_error">
         <% if test.errors.present? %>
-        <span class="title_error">
-          <i class="fa fa-plus-square"></i><%= test.error_count.to_s + " " + ComplianceCheckResult.human_attribute_name(:violation_count) %>
-        </span>
-
-
-<!-- error : 1    error_id (string) 
-             0..1 source :
-                  0..1 file :
-                       1    filename (string)
-                       0..1 line_number (int)
-                       0..1 column_number (int)
-                  0..1 objectid (string)
-                  0..1 label (string)
-                  0..  object_path :
-                       1 type : {"network", "company", etc...}
-                       1 id (long)
-             0..  target : (same as source)
-             0..1 error_value (string)
-             0..1 reference_value (striung) -->
-        <div class="details_error">
-          <% test.errors.first(10).each do |error| %>
-            <p class="detail_error">
-	      <% if error["source"].present? %>		
-	        <% data_content = t("activemodel.attributes.compliance_check_result." + test.test_id) + " " + t("compliance_check_result.details.detail_" + error[:error_id], object_labels_hash(error) ) %>
-	        <% data_title = t("activemodel.attributes.compliance_check_result.detail") %>
-                |- <button data-content='<%= data_content %>' data-title='<%= data_title %>' data-toggle="popover" class="notice btn btn-info btn-xs"><i class="fa fa-info"></i></button>
-		  
-		<% if error[:source].object_path.present? %>
-		  <% if error[:source].label.present? %>
-	            <%= link_to error[:source].label, object_url(@referential.id, error) %>
-		  <% else %>
-	            <%= link_to "#{error[:source].object_path.type} (#{error[:source].object_path.id})", object_url(@referential.id, error) %>
-		  <% end %>
-		<% end %>
-		<% if error[:source].file.present? %>
-		  <% if error[:source].objectid.present? %>
-		    <%= "#{error[:source].objectid}" %>		    
-		  <% end %>
-		  <p class="file_error">
-		  <%= error[:source].file.filename  %>
-		  <% if error[:source].file.line_number.present?  %>
-		    <%= ", li: #{error[:source].file.line_number}" %>
-		  <% end %>
-		  <% if error[:source].file.column_number.present?  %>
-		    <%= ", co: #{error[:source].file.column_number}" %>
-		  <% end %>
-		  </p> 
-		<% end %>		  
-	      <% end %>              
-          <% end %>             
-        </div>
+          <span class="title_error">
+            <i class="fa fa-plus-square"></i><%="#{test.error_count} #{ComplianceCheckResult.human_attribute_name(:violation_count)}" %>
+          </span>
+          <div class="details_error">
+            <% test.errors.first(10).each do |error| %>
+              <p class="detail_error">
+	              <% if error["source"].present? %>
+                  |- <button data-content='<%=t("activemodel.attributes.compliance_check_result.#{test.test_id}") + " "+ t("compliance_check_result.details.detail_#{error[:error_id]}", object_labels_hash(error)) %>'
+                             data-title='<%=t("activemodel.attributes.compliance_check_result.detail")%>'
+                             data-toggle="popover"
+                             class="notice btn btn-info btn-xs">
+                       <i class="fa fa-info"></i>
+                     </button>
+		              <% if error[:source].object_path.present? %>
+		                <% if error[:source].label.present? %>
+	                    <%= link_to error[:source].label, object_url(@referential.id, error) %>
+		                <% else %>
+	                    <%= link_to "#{error[:source].object_path.type} (#{error[:source].object_path.id})", object_url(@referential.id, error) %>
+		                <% end %>
+		              <% end %>
+		              <% if error[:source].file.present? %>
+                    <%= "#{error[:source].objectid}" if error[:source].objectid.present? %>
+		                <p class="file_error">
+                      <%= error[:source].file.filename  %>
+                        <%= ", li: #{error[:source].file.line_number}" if error[:source].file.line_number.present?  %>
+                        <%= ", co: #{error[:source].file.column_number}" if error[:source].file.column_number.present?  %>
+		                </p>
+		              <% end %>
+	            <% end %>
+            <% end %>
+          </div>
         <% end %>
       </td>
     </tr>
-  <% end %>
+    <% end %>
   </tbody>
+  <tfoot class="hide-if-no-paging">
+    <tr>
+      <td colspan="5"><ul class="pagination pagination-centered"></ul></td>
+    </tr>
+  </tfoot>
 </table>
diff --git a/app/views/compliance_checks/report.html.erb b/app/views/compliance_checks/report.html.erb
index 33bea4ffd..70a1f4d69 100644
--- a/app/views/compliance_checks/report.html.erb
+++ b/app/views/compliance_checks/report.html.erb
@@ -24,31 +24,39 @@
      </div>
    </div>
 
-   <div class="resume">
-     <div class="col1">
-       <div class="caption"><%= t "error", :scope => "compliance_check_result.severities" %></div>
-       <div class="graph" id="error"></div>
-     </div>
-     <div class="col2">
-       <div class="caption"><%= t "warning", :scope => "compliance_check_result.severities" %></div>
-       <div class="graph" id="warning"></div>
-     </div>
-   </div>
-
+   <ul class="nav nav-tabs" role="tablist">
+     <li role="presentation" class="active">
+       <a href="#severities_error" class="severities_error"  aria-controls="severities_error" role="tab" data-toggle="tab">
+         <%=t("compliance_check_result.severities.error")%>
+       </a>
+     </li>
+     <li role="presentation">
+       <a href="#severities_warning" class="severities_warning" aria-controls="severities_warning" role="tab" data-toggle="tab">
+         <%=t("compliance_check_result.severities.warning")%>
+       </a>
+     </li>
+   </ul>
    <div class="report" data-refresh-interval="<%= job_refresh_interval(@compliance_check) %>">
      <%= render :partial => "compliance_checks/compliance_check_results", :locals => { :compliance_check_validation_report => @compliance_check.compliance_check_validation_report } %>
    </div>
 </div>
 
 <% content_for :sidebar do %>
-<ul class="actions">
-  <li>
-    <% if @compliance_check.class != Import %>
-      <%= link_to  t('compliance_checks.actions.destroy'), referential_compliance_check_path(@referential, @compliance_check.id), :method => :delete,  :data => {:confirm =>  t('compliance_checks.actions.destroy_confirm')}, :class => "remove" %>
-    <% end %>
-  </li>
-</ul>
-
-<%= history_tag(@compliance_check) %>
+  <ul class="actions">
+    <li>
+      <% if @compliance_check.class != Import %>
+        <%= link_to  t('compliance_checks.actions.destroy'), referential_compliance_check_path(@referential, @compliance_check.id), :method => :delete,  :data => {:confirm =>  t('compliance_checks.actions.destroy_confirm')}, :class => "remove" %>
+      <% end %>
+    </li>
+  </ul>
+  <%= history_tag(@compliance_check) %>
+  <div class="tab-content compliance_checks_sidebar">
+    <div role="tabpanel" class="tab-pane active" id="severities_error">
+      <div class="graph" id="error"></div>
+    </div>
+    <div role="tabpanel" class="tab-pane" id="severities_warning">
+      <div class="graph" id="warning"></div>
+    </div>
+  </div>
 
 <% end %>