Fix broken sort and filter. Not everything has

been migrated to data tables and still needs to be
able to sort and filtered.

puppetboard/static/jquery-tablesort-v.0.0.7/jquery.tablesort.min.js

@@ -0,0 +1,6 @@
+/*
+	A simple, lightweight jQuery plugin for creating sortable tables.
+	https://github.com/kylefox/jquery-tablesort
+	Version 0.0.7
+*/
+!function(t){t.tablesort=function(e,s){var i=this;this.$table=e,this.$thead=this.$table.find("thead"),this.settings=t.extend({},t.tablesort.defaults,s),this.$sortCells=this.$thead.length>0?this.$thead.find("th:not(.no-sort)"):this.$table.find("th:not(.no-sort)"),this.$sortCells.bind("click.tablesort",function(){i.sort(t(this))}),this.index=null,this.$th=null,this.direction=null},t.tablesort.prototype={sort:function(e,s){var i=new Date,n=this,o=this.$table,l=this.$thead.length>0?o.find("tbody tr"):o.find("tr").has("td"),a=o.find("tr td:nth-of-type("+(e.index()+1)+")"),r=e.data().sortBy,d=[],h=a.map(function(s,i){return r?"function"==typeof r?r(t(e),t(i),n):r:null!=t(this).data().sortValue?t(this).data().sortValue:t(this).text()});0!==h.length&&("asc"!==s&&"desc"!==s?this.direction="asc"===this.direction?"desc":"asc":this.direction=s,s="asc"==this.direction?1:-1,n.$table.trigger("tablesort:start",[n]),n.log("Sorting by "+this.index+" "+this.direction),n.$table.css("display"),setTimeout(function(){n.$sortCells.removeClass(n.settings.asc+" "+n.settings.desc);for(var r=0,c=h.length;c>r;r++)d.push({index:r,cell:a[r],row:l[r],value:h[r]});d.sort(function(t,e){return t.value>e.value?1*s:t.value<e.value?-1*s:0}),t.each(d,function(t,e){o.append(e.row)}),e.addClass(n.settings[n.direction]),n.log("Sort finished in "+((new Date).getTime()-i.getTime())+"ms"),n.$table.trigger("tablesort:complete",[n]),n.$table.css("display")},h.length>2e3?200:10))},log:function(e){(t.tablesort.DEBUG||this.settings.debug)&&console&&console.log&&console.log("[tablesort] "+e)},destroy:function(){return this.$sortCells.unbind("click.tablesort"),this.$table.data("tablesort",null),null}},t.tablesort.DEBUG=!1,t.tablesort.defaults={debug:t.tablesort.DEBUG,asc:"sorted ascending",desc:"sorted descending"},t.fn.tablesort=function(e){var s,i;return this.each(function(){s=t(this),i=s.data("tablesort"),i&&i.destroy(),s.data("tablesort",new t.tablesort(s,e))})}}(window.Zepto||window.jQuery);

puppetboard/static/js/tables.js

@@ -0,0 +1,35 @@
+// Generated by CoffeeScript 1.4.0
+(function() {
+  var $;
+
+  $ = jQuery;
+
+  $(function() {});
+
+  if ($('th.default-sort').data()) {
+    $('table.sortable').tablesort().data('tablesort').sort($("th.default-sort"), "desc");
+  }
+
+  $('thead th.date').data('sortBy', function(th, td, tablesort) {
+    return moment.utc(td.text()).unix();
+  });
+
+  $('input.filter-table').parent('div').removeClass('hide');
+
+  $("input.filter-table").on("keyup", function(e) {
+    var ev, rex;
+    rex = new RegExp($(this).val(), "i");
+    $(".searchable tr").hide();
+    $(".searchable tr").filter(function() {
+      return rex.test($(this).text());
+    }).show();
+    if (e.keyCode === 27) {
+      $(e.currentTarget).val("");
+      ev = $.Event("keyup");
+      ev.keyCode = 13;
+      $(e.currentTarget).trigger(ev);
+      return e.currentTarget.blur();
+    }
+  });
+
+}).call(this);

puppetboard/templates/_macros.html

@@ -46,39 +46,6 @@
 </table>
 {%- endmacro %}
 
-{% macro facts_graph(facts, autofocus=False, condensed=False, show_node=False, margin_top=20, margin_bottom=20) -%}
-<script src="{{url_for('static', filename='js/d3.min.js')}}"></script>
-<script src="{{url_for('static', filename='js/c3.min.js')}}"></script>
-<div id="factChart" width="300" height="300"></div>
-<script type="text/javascript">
-  var data = [
-{% for fact in facts|groupby('value') %}
-    {
-    label: '{{ fact.grouper.replace("\n", " ") }}',
-    value: {{ fact.list|length }}
-    },
-{% endfor %}
-    {
-    value: 0,
-    }
-  ]
-  var fact_values = data.map(function(item) { return [item.label, item.value]; }).filter(function(item){return item[0];}).sort(function(a,b){return b[1] - a[1];});
-  var realdata = fact_values.slice(0, 15);
-  var otherdata = fact_values.slice(15);
-  if (otherdata.length > 0) {
-    realdata.push(["other", otherdata.reduce(function(a,b){return a + b[1];},0)]);
-  }
-  var chart = c3.generate({
-      bindto: '#factChart',
-      data: {
-          columns: realdata,
-          type : 'pie',
-      }
-  });
-
-</script>
-{%- endmacro %}
-
 {% macro status_counts(caller, status, node_name, events, current_env, unreported_time=False, report_hash=False) -%}
   <a class="ui {{status}} label status" href="{{url_for('report', env=current_env, node_name=node_name, report_id=report_hash)}}">{{ status|upper }}</a>
   {% if status == 'unreported' %}

puppetboard/templates/fact.html

@@ -1,10 +1,46 @@
 {% extends 'layout.html' %}
 {% import '_macros.html' as macros %}
-{% block content %}
-<h1>{{name}}{% if value %}/{{value}}{% endif %} ({{facts|length}})</h1>
+
 {% if render_graph %}
-{{macros.facts_graph(facts, autofocus=True, show_node=True, margin_bottom=10)}}
+
+{% block javascript %}
+var chart = null;
+var data = [
+{% for fact in facts|groupby('value') %}
+  {
+  label: '{{ fact.grouper.replace("\n", " ") }}',
+  value: {{ fact.list|length }}
+  },
+{% endfor %}
+  {
+  value: 0,
+}
+]
+var fact_values = data.map(function(item) { return [item.label, item.value]; }).filter(function(item){return item[0];}).sort(function(a,b){return b[1] - a[1];});
+var realdata = fact_values.slice(0, 15);
+var otherdata = fact_values.slice(15);
+if (otherdata.length > 0) {
+  realdata.push(["other", otherdata.reduce(function(a,b){return a + b[1];},0)]);
+}
+{% endblock javascript %}
+
+{% block onload_script %}
+    $('table').tablesort();
+    chart = c3.generate({
+    bindto: '#factChart',
+    data: {
+        columns: realdata,
+        type : 'donut',
+    }
+});
+{% endblock onload_script %}
 {% endif %}
+
+{% block content %}
+<div id="factChart" width="300" height="300"></div>
+<h1>{{name}}{% if value %}/{{value}}{% endif %} ({{facts|length}})</h1>
+
+
 {% if value %}
 {{macros.facts_table(facts, current_env=current_env, autofocus=True, show_node=True, show_value=False, margin_bottom=10)}}
 {% else %}

puppetboard/templates/index.html

@@ -12,6 +12,7 @@
 {% endblock script %}
 {% endif %}
 {% endblock head %}
+
 {% block content %}
 {% if config.REFRESH_RATE > 0 %}
 <meta http-equiv="refresh" content="{{config.REFRESH_RATE}}">

puppetboard/templates/layout.html

@@ -41,14 +41,20 @@
     <script src="{{ url_for('static', filename='Semantic-UI-2.1.8/semantic.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/lists.js') }}"></script>
     <script src="{{ url_for('static', filename='js/scroll.top.js') }}"></script>
+    <script src="{{url_for('static', filename='js/d3.min.js')}}"></script>
+    <script src="{{url_for('static', filename='js/c3.min.js')}}"></script>
+    <script src="{{url_for('static',
+                  filename='jquery-tablesort-v.0.0.7/jquery.tablesort.min.js')}}"></script>
+    {% block script %} {% endblock script %}
     <script type="text/javascript">
+    {% block javascript %} {% endblock javascript %}
       $(document).ready(function(){
           $(".ui.dropdown").dropdown();
+          $.getScript('{{url_for('static', filename='js/lists.js')}}')
+          $.getScript('{{url_for('static', filename='js/tables.js')}}')
           {% block onload_script %} {% endblock onload_script %}
-
         })
     </script>
-    {% block script %} {% endblock script %}
     {% block head %} {% endblock head %}
   </head>