Merge pull request #1 from redref/mterzo_data_table_format

datatable and list behaviors

puppetboard/static/coffeescript/lists.coffee

@@ -1,21 +1,28 @@
 $ = jQuery
-$ ->
+filter_list = (val) ->
-$('input.filter-list').parent('div').removeClass('hide')
+  rex = new RegExp(val, "i")
-$("input.filter-list").on "keyup", (e) ->
-  rex = new RegExp($(this).val(), "i")
-
   $(".searchable li").hide()
-  $(".searchable li").parent().parent().hide()
+  $(".searchable li").parent().parent('.list_hide_segment').hide()
   $(".searchable li").filter( ->
     rex.test $(this).text()
   ).show()
   $(".searchable li").filter( ->
     rex.test $(this).text()
   ).parent().parent().show()
-
+$("input.filter-list").on "keyup", (e) ->
+  # If key is escape, reset value
   if e.keyCode is 27
     $(e.currentTarget).val ""
     ev = $.Event("keyup")
     ev.keyCode = 13
     $(e.currentTarget).trigger(ev)
     e.currentTarget.blur()
+  else
+    filter_list($(this).val())
+$("input.filter-list").ready ->
+  elem = $("input.filter-list")
+  elem.focus()
+  val = elem.val()
+  filter_list(val)
+  # Force cursor at the end
+  elem.val('').val(val)

puppetboard/static/css/puppetboard.css

@@ -14,7 +14,7 @@ h1.ui.header.no-margin-bottom {
 }
 
 .ui.grid.padding-bottom {
-  padding-bottom: 40px !important;
+  padding-bottom: 4em !important;
 }
 
 .status {

puppetboard/static/js/lists.js

@@ -1,31 +1,42 @@
 // Generated by CoffeeScript 1.9.3
 (function() {
-  var $;
+  var $, filter_list;
 
   $ = jQuery;
 
-  $(function() {});
+  filter_list = function(val) {
-
+    var rex;
-  $('input.filter-list').parent('div').removeClass('hide');
+    rex = new RegExp(val, "i");
-
-  $("input.filter-list").on("keyup", function(e) {
-    var ev, rex;
-    rex = new RegExp($(this).val(), "i");
     $(".searchable li").hide();
-    $(".searchable li").parent().parent().hide();
+    $(".searchable li").parent().parent('.list_hide_segment').hide();
     $(".searchable li").filter(function() {
       return rex.test($(this).text());
     }).show();
-    $(".searchable li").filter(function() {
+    return $(".searchable li").filter(function() {
       return rex.test($(this).text());
     }).parent().parent().show();
+  };
+
+  $("input.filter-list").on("keyup", function(e) {
+    var ev;
     if (e.keyCode === 27) {
       $(e.currentTarget).val("");
       ev = $.Event("keyup");
       ev.keyCode = 13;
       $(e.currentTarget).trigger(ev);
       return e.currentTarget.blur();
+    } else {
+      return filter_list($(this).val());
     }
   });
 
+  $("input.filter-list").ready(function() {
+    var elem, val;
+    elem = $("input.filter-list");
+    elem.focus();
+    val = elem.val();
+    filter_list(val);
+    return elem.val('').val(val);
+  });
+
 }).call(this);

puppetboard/templates/_macros.html

@@ -57,7 +57,7 @@
   {% endif %}
 {%- endmacro %}
 
-{% macro datatable_init(table_html_id, ajax_url, default_length, length_selector, extra_options=None, columns) -%}
+{% macro datatable_init(table_html_id, ajax_url, default_length, length_selector, extra_options=None) -%}
   // Init datatable
   $.fn.dataTable.ext.errMode = 'throw';
   var table = $('#{{ table_html_id }}').DataTable({

puppetboard/templates/fact.html

@@ -1,9 +1,8 @@
 {% extends 'layout.html' %}
 {% import '_macros.html' as macros %}
 
-{% if render_graph %}
-
 {% block javascript %}
+{% if render_graph %}
 var chart = null;
 var data = [
 {% for fact in facts|groupby('value') %}
@@ -22,10 +21,12 @@ var otherdata = fact_values.slice(15);
 if (otherdata.length > 0) {
   realdata.push(["other", otherdata.reduce(function(a,b){return a + b[1];},0)]);
 }
+{% endif %}
 {% endblock javascript %}
 
 {% block onload_script %}
   $('table').tablesort();
+  {% if render_graph %}
   chart = c3.generate({
     bindto: '#factChart',
     data: {
@@ -33,8 +34,8 @@ if (otherdata.length > 0) {
         type : '{{config.GRAPH_TYPE|default('pie')}}',
     }
   });
-{% endblock onload_script %}
   {% endif %}
+{% endblock onload_script %}
 
 {% block content %}
 <div id="factChart" width="300" height="300"></div>

puppetboard/templates/facts.html

@@ -1,6 +1,6 @@
 {% extends 'layout.html' %}
 {% block content %}
-<div class="ui fluid icon input hide" style="margin-bottom:20px">
+<div class="ui fluid icon input" style="margin-bottom:20px">
   <input autofocus="autofocus" class="filter-list" placeholder="Type here to filter...">
 </div>
 <div class="ui searchable stackable doubling four column grid factlist">
@@ -8,7 +8,7 @@
   {%- set facts_count = 0 -%}
   {%- set break = facts_len//4 + 1 -%}
   {%- for key,facts_list in facts_dict %}
-   <div class="ui segment">
+    <div class="ui list_hide_segment segment">
       <a class="ui darkblue ribbon label">{{key}}</a>
       <ul>
         {%- for fact in facts_list %}

puppetboard/templates/metrics.html

@@ -1,19 +1,14 @@
 {% extends 'layout.html' %}
 {% block content %}
 <h1>Metrics</h1>
-<div class="ui fluid icon input hide" style="margin-bottom:20px">
+<div class="ui fluid icon input" style="margin-bottom:20px">
-  <input autofocus="autofocus" class="filter-table" placeholder="Type here to filter...">
+  <input autofocus="autofocus" class="filter-list" placeholder="Type here to filter...">
 </div>
-<table class='ui very compact very basic sortable table'>
+<ul class="ui list searchable">
-<thead>
-  <tr>Metric</tr>
-</thead>
-<tbody class="searchable">
   {% for metric in metrics %}
-  <tr>
+  <li>
-    <td><a href="{{url_for('metric', env=current_env, metric=metric)}}">{{metric}}</a></td>
+    <a href="{{url_for('metric', env=current_env, metric=metric)}}">{{metric}}</a>
-  </tr>
+  </li>
   {% endfor %}
-</tbody>
+</ul>
-</table>
 {% endblock content %}

puppetboard/templates/node.html

@@ -17,7 +17,7 @@
   'pagingType': 'simple',
   "bFilter": false,
 {% endmacro %}
-{{ macros.datatable_init(table_html_id="reports_table", ajax_url=url_for('reports_ajax', env=current_env, node_name=node.name), default_length=config.LITTLE_TABLE_COUNT, length_selector=config.TABLE_COUNT_SELECTOR, columns=columns, extra_options=extra_options) }}
+{{ macros.datatable_init(table_html_id="reports_table", ajax_url=url_for('reports_ajax', env=current_env, node_name=node.name), default_length=config.LITTLE_TABLE_COUNT, length_selector=config.TABLE_COUNT_SELECTOR, extra_options=extra_options) }}
 {% endblock onload_script %}
 
 {% block content %}

puppetboard/templates/reports.html

@@ -33,7 +33,7 @@
   // No initial loading
   "deferLoading": true,
 {% endmacro %}
-  {{ macros.datatable_init(table_html_id="reports_table", ajax_url=url_for('reports_ajax', env=current_env, node_name=node_name), default_length=config.NORMAL_TABLE_COUNT, length_selector=config.TABLE_COUNT_SELECTOR, extra_options=extra_options, columns=columns) }}
+  {{ macros.datatable_init(table_html_id="reports_table", ajax_url=url_for('reports_ajax', env=current_env, node_name=node_name), default_length=config.NORMAL_TABLE_COUNT, length_selector=config.TABLE_COUNT_SELECTOR, extra_options=extra_options) }}
 
   // Event listener for status filters
   function status_filter_change(){