Improve performance in the table. Re #719 and #732

src/app/app.js

@@ -11,7 +11,8 @@ define([
   'angular-sanitize',
   'angular-strap',
   'angular-dragdrop',
-  'extend-jquery'
+  'extend-jquery',
+  'bindonce'
 ],
 function (angular, $, _, appLevelRequire) {
   "use strict";
@@ -84,7 +85,8 @@ function (angular, $, _, appLevelRequire) {
     '$strap.directives',
     'ngSanitize',
     'ngDragDrop',
-    'kibana'
+    'kibana',
+    'pasvaz.bindonce'
   ];
 
   _.each('controllers directives factories services filters'.split(' '),

src/app/components/require.config.js

@@ -20,6 +20,7 @@ require.config({
     'angular-sanitize':       '../vendor/angular/angular-sanitize',
     timepicker:               '../vendor/angular/timepicker',
     datepicker:               '../vendor/angular/datepicker',
+    bindonce:                 '../vendor/angular/bindonce',
 
     underscore:               'components/underscore.extended',
     'underscore-src':         '../vendor/underscore',
@@ -84,7 +85,7 @@ require.config({
     'angular-resource':     ['angular'],
     'angular-route':        ['angular'],
     'angular-touch':        ['angular'],
-
+    'bindonce':             ['angular'],
     'angular-strap':        ['angular', 'bootstrap','timepicker', 'datepicker'],
 
     timepicker:             ['jquery', 'bootstrap'],

src/app/panels/table/editor.html

@@ -42,7 +42,7 @@ <h6>Sort</h6>
       <select class="input-small" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
     </div>
     <div class="span2">
-      <h6>Trim Factor <tip>Trim fields to this long divided by # of rows</tip></h6>
-      <input type="number" class="input-small" ng-model="panel.trimFactor">
+      <h6>Trim Factor <tip>Trim fields to this long divided by # of rows. Requires data refresh.</tip></h6>
+      <input type="number" class="input-small" ng-model="panel.trimFactor" ng-change="set_refresh(true)">
     </div>
   </div>

src/app/panels/table/module.html

@@ -8,7 +8,7 @@
   </style>
 
   <div class="row-fluid">
-    <div ng-class="{'span3':panel.field_list}" ng-show="panel.field_list">
+    <div ng-class="{'span3':panel.field_list}" ng-if="panel.field_list">
       <div class="sidebar-nav">
         <strong>Fields <i class=" icon-chevron-sign-left pointer " ng-click="panel.field_list = !panel.field_list" bs-tooltip="'Hide field list'" ng-show="panel.field_list"></i></strong><p>
         <div class="small">
@@ -17,13 +17,15 @@
         </div>
         <div><input type="text" class="input-medium" placeholder="Type to filter..." ng-model="fieldFilter"></div>
 
-
-        <ul class="unstyled" style="{{panel.overflow}}:{{panel.height || row.height}};overflow-y:auto;overflow-x:hidden;">
-          <li ng-style="panel.style" ng-repeat="field in fields.list|filter:fieldFilter|orderBy:identity" ng-show="panel.all_fields">
+        <ul class="unstyled" style="{{panel.overflow}}:{{panel.height || row.height}};overflow-y:auto;overflow-x:hidden;" ng-if="panel.all_fields">
+          <li ng-style="panel.style" ng-repeat="field in fields.list|filter:fieldFilter|orderBy:identity">
             <i class="pointer" ng-class="{'icon-check': _.contains(panel.fields,field),'icon-check-empty': !_.contains(panel.fields,field)}" ng-click="toggle_field(field)"></i>
             <a class="pointer" data-unique="1" bs-popover="'app/panels/table/micropanel.html'" data-placement="rightTop" ng-click="toggle_micropanel(field,true)" ng-class="{label: _.contains(panel.fields,field)}">{{field}}</a>
           </li>
-          <li ng-style="panel.style" ng-repeat="field in current_fields|filter:fieldFilter|orderBy:identity" ng-hide="panel.all_fields">
+        </ul>
+
+        <ul class="unstyled" style="{{panel.overflow}}:{{panel.height || row.height}};overflow-y:auto;overflow-x:hidden;" ng-if="!panel.all_fields">
+          <li ng-style="panel.style" ng-repeat="field in current_fields|filter:fieldFilter|orderBy:identity">
             <i class="pointer" ng-class="{'icon-check': _.contains(panel.fields,field),'icon-check-empty': !_.contains(panel.fields,field)}" ng-click="toggle_field(field)"></i>
             <a class="pointer" data-unique="1" bs-popover="'app/panels/table/micropanel.html'" data-placement="rightTop" ng-click="toggle_micropanel(field,true)" ng-class="{label: _.contains(panel.fields,field)}">{{field}}</a>
           </li>
@@ -61,12 +63,12 @@
           </th>
 
         </thead>
-        <tbody ng-repeat="event in data| slice:panel.offset:panel.offset+panel.size" ng-class-odd="'odd'">
+        <tbody bindonce ng-repeat="event in data| slice:panel.offset:panel.offset+panel.size" ng-class-odd="'odd'">
           <tr ng-click="toggle_details(event)" class="pointer">
-            <td ng-show="panel.fields.length<1">{{event._source|stringify|tableTruncate:panel.trimFactor:1}}</td>
-            <td ng-show="panel.fields.length>0" ng-repeat="field in panel.fields" ng-bind-html-unsafe="(event.kibana.highlight[field]||event.kibana._source[field]) |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length"></td>
+            <td ng-if="panel.fields.length<1" bo-text="event._source|stringify|tableTruncate:panel.trimFactor:1"></td>
+            <td ng-show="panel.fields.length>0" ng-repeat="field in panel.fields" bo-html="(event.kibana.highlight[field]||event.kibana._source[field]) |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length"></td>
           </tr>
-          <tr ng-show="event.kibana.details">
+          <tr ng-if="event.kibana.details">
             <td colspan={{panel.fields.length}} ng-switch="event.kibana.view">
               <span>
                 View:

src/vendor/angular/bindonce.js

@@ -0,0 +1,270 @@
+'use strict';
+/**
+ * Bindonce - Zero watches binding for AngularJs
+ * @version v0.2.1 - 2013-05-07
+ * @link https://github.com/Pasvaz/bindonce
+ * @author Pasquale Vazzana <pasqualevazzana@gmail.com>
+ * @license MIT License, http://www.opensource.org/licenses/MIT
+ */
+
+ angular.module('pasvaz.bindonce', [])
+
+ .directive('bindonce', function()
+ {
+  console.log('called');
+  var toBoolean = function(value)
+  {
+    if (value && value.length !== 0)
+    {
+      var v = angular.lowercase("" + value);
+      value = !(v == 'f' || v == '0' || v == 'false' || v == 'no' || v == 'n' || v == '[]');
+    }
+    else
+    {
+      value = false;
+    }
+    return value;
+  }
+
+  var msie = parseInt((/msie (\d+)/.exec(angular.lowercase(navigator.userAgent)) || [])[1], 10);
+  if (isNaN(msie))
+  {
+    msie = parseInt((/trident\/.*; rv:(\d+)/.exec(angular.lowercase(navigator.userAgent)) || [])[1], 10);
+  }
+
+  var bindonceDirective =
+  {
+    restrict: "AM",
+    controller: ['$scope', '$element', '$attrs', '$interpolate', function($scope, $element, $attrs, $interpolate)
+    {
+      var showHideBinder = function(elm, attr, value)
+      {
+        var show = (attr == 'show') ? '' : 'none';
+        var hide = (attr == 'hide') ? '' : 'none';
+        elm.css('display', toBoolean(value) ? show : hide);
+      }
+      var classBinder = function(elm, value)
+      {
+        if (angular.isObject(value) && !angular.isArray(value))
+        {
+          var results = [];
+          angular.forEach(value, function(value, index)
+          {
+            if (value) results.push(index);
+          });
+          value = results;
+        }
+        if (value)
+        {
+          elm.addClass(angular.isArray(value) ? value.join(' ') : value);
+        }
+      }
+
+      var ctrl =
+      {
+        watcherRemover : undefined,
+        binders : [],
+        group : $attrs.boName,
+        element : $element,
+        ran : false,
+
+        addBinder : function(binder)
+        {
+          this.binders.push(binder);
+
+          // In case of late binding (when using the directive bo-name/bo-parent)
+          // it happens only when you use nested bindonce, if the bo-children
+          // are not dom children the linking can follow another order
+          if (this.ran)
+          {
+            this.runBinders();
+          }
+        },
+
+        setupWatcher : function(bindonceValue)
+        {
+          var that = this;
+          this.watcherRemover = $scope.$watch(bindonceValue, function(newValue)
+          {
+            if (newValue == undefined) return;
+            that.removeWatcher();
+            that.runBinders();
+          }, true);
+        },
+
+        removeWatcher : function()
+        {
+          if (this.watcherRemover != undefined)
+          {
+            this.watcherRemover();
+            this.watcherRemover = undefined;
+          }
+        },
+
+        runBinders : function()
+        {
+          var i, max;
+          for (i = 0, max = this.binders.length; i < max; i ++)
+          {
+            var binder = this.binders[i];
+            if (this.group && this.group != binder.group ) continue;
+            var value = binder.scope.$eval((binder.interpolate) ? $interpolate(binder.value) : binder.value);
+            switch(binder.attr)
+            {
+              case 'if':
+                if (toBoolean(value))
+                {
+                  binder.transclude(binder.scope.$new(), function (clone)
+                  {
+                    var parent = binder.element.parent();
+                    var afterNode = binder.element && binder.element[binder.element.length - 1];
+                    var parentNode = parent && parent[0] || afterNode && afterNode.parentNode;
+                    var afterNextSibling = (afterNode && afterNode.nextSibling) || null;
+                    angular.forEach(clone, function(node)
+                    {
+                      parentNode.insertBefore(node, afterNextSibling);
+                    });
+                  });
+                }
+                break;
+              case 'hide':
+              case 'show':
+                showHideBinder(binder.element, binder.attr, value);
+                break;
+              case 'class':
+                classBinder(binder.element, value);
+                break;
+              case 'text':
+                binder.element.text(value);
+                break;
+              case 'html':
+                binder.element.html(value);
+                break;
+              case 'style':
+                binder.element.css(value);
+                break;
+              case 'src':
+                binder.element.attr(binder.attr, value);
+                if (msie) binder.element.prop('src', value);
+              case 'attr':
+                angular.forEach(binder.attrs, function(attrValue, attrKey)
+                {
+                  var newAttr, newValue;
+                  if (attrKey.match(/^boAttr./) && binder.attrs[attrKey])
+                  {
+                    newAttr = attrKey.replace(/^boAttr/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+                    newValue = binder.scope.$eval(binder.attrs[attrKey]);
+                    binder.element.attr(newAttr, newValue);
+                  }
+                });
+                break;
+              case 'href':
+              case 'alt':
+              case 'title':
+              case 'id':
+              case 'value':
+                binder.element.attr(binder.attr, value);
+                break;
+            }
+          }
+          this.ran = true;
+          this.binders = [];
+        }
+      }
+
+      return ctrl;
+    }],
+
+    link: function(scope, elm, attrs, bindonceController)
+    {
+      var value = (attrs.bindonce) ? scope.$eval(attrs.bindonce) : true;
+      if (value != undefined)
+      {
+        bindonceController.runBinders();
+      }
+      else
+      {
+        bindonceController.setupWatcher(attrs.bindonce);
+        elm.bind("$destroy", bindonceController.removeWatcher);
+      }
+    }
+  };
+
+  return bindonceDirective;
+});
+
+angular.forEach(
+[
+  {directiveName:'boShow', attribute: 'show'},
+  {directiveName:'boIf', attribute: 'if', transclude: 'element', terminal: true, priority:1000},
+  {directiveName:'boHide', attribute:'hide'},
+  {directiveName:'boClass', attribute:'class'},
+  {directiveName:'boText', attribute:'text'},
+  {directiveName:'boHtml', attribute:'html'},
+  {directiveName:'boSrcI', attribute:'src', interpolate:true},
+  {directiveName:'boSrc', attribute:'src'},
+  {directiveName:'boHrefI', attribute:'href', interpolate:true},
+  {directiveName:'boHref', attribute:'href'},
+  {directiveName:'boAlt', attribute:'alt'},
+  {directiveName:'boTitle', attribute:'title'},
+  {directiveName:'boId', attribute:'id'},
+  {directiveName:'boStyle', attribute:'style'},
+  {directiveName:'boValue', attribute:'value'},
+  {directiveName:'boAttr', attribute:'attr'}
+],
+function(boDirective)
+{
+  var childPriority = 200;
+  return angular.module('pasvaz.bindonce').directive(boDirective.directiveName, function()
+  {
+    var bindonceDirective =
+    {
+      priority: boDirective.priority || childPriority,
+      transclude: boDirective.transclude || false,
+      terminal: boDirective.terminal || false,
+      require: '^bindonce',
+      compile: function (tElement, tAttrs, transclude)
+      {
+        return function(scope, elm, attrs, bindonceController)
+        {
+          var name = attrs.boParent;
+          if (name && bindonceController.group != name)
+          {
+            var element = bindonceController.element.parent();
+            bindonceController = undefined;
+            var parentValue;
+
+            while (element[0].nodeType != 9 && element.length)
+            {
+              if ((parentValue = element.data('$bindonceController'))
+                && parentValue.group == name)
+              {
+                bindonceController = parentValue
+                break;
+              }
+              element = element.parent();
+            }
+            if (!bindonceController)
+            {
+              throw Error("No bindonce controller: " + name);
+            }
+          }
+
+          bindonceController.addBinder(
+          {
+            element   :   elm,
+            attr    :   boDirective.attribute,
+            attrs     :   attrs,
+            value   :   attrs[boDirective.directiveName],
+            interpolate :   boDirective.interpolate,
+            group   :   name,
+            transclude  :   transclude,
+            scope   :   scope
+          });
+        }
+      }
+    }
+
+    return bindonceDirective;
+  });
+});