[renderCounter] unify render counting login into directive

src/core_plugins/kibana/public/dashboard/components/panel/panel.html

@@ -28,13 +28,16 @@
     search-source="savedObj.searchSource"
     show-spy-panel="chrome.getVisible()"
     ui-state="uiState"
+    render-counter
     class="panel-content">
   </visualize>
 
-  <doc-table ng-switch-when="search"
+  <doc-table
+    ng-switch-when="search"
     search-source="savedObj.searchSource"
     sorting="panel.sort"
     columns="panel.columns"
+    render-counter
     class="panel-content"
     filter="filter">
   </doc-table>

src/core_plugins/kibana/public/discover/index.html

@@ -125,7 +125,8 @@ <h2>Searching</h2>
                 sorting="state.sort"
                 columns="state.columns"
                 infinite-scroll="true"
-                filter="filterQuery">
+                filter="filterQuery"
+                render-counter>
               </doc-table>
 
               <div ng-if="rows.length == opts.sampleSize" class="discover-table-footer">

src/core_plugins/kibana/public/visualize/editor/editor.html

@@ -80,6 +80,7 @@
     <div class="vis-editor-canvas" ng-class="{ embedded: !chrome.getVisible() }">
       <visualize
         vis="vis"
+        render-counter
         ui-state="uiState"
         show-spy-panel="chrome.getVisible()"
         editable-vis="editableVis"

src/ui/public/directives/render_counter.js

@@ -0,0 +1,31 @@
+import uiModules from 'ui/modules';
+
+uiModules
+  .get('kibana')
+  .directive('renderCounter', () => ({
+    controller($scope, $element) {
+      let counter = 0;
+
+      const increment = () => {
+        counter += 1;
+        $element.attr('render-counter', counter);
+      };
+
+      const teardown = () => {
+        $element.off('renderComplete', increment);
+      };
+
+      const setup = () => {
+        $element.attr('render-counter', counter);
+        $element.on('renderComplete', increment);
+        $scope.$on('$destroy', teardown);
+      };
+
+      this.disable = () => {
+        $element.attr('render-counter', 'disabled');
+        teardown();
+      };
+
+      setup();
+    }
+  }));

src/ui/public/doc_table/doc_table.html

@@ -43,4 +43,4 @@
 <div ng-if="hits != null && !hits.length" class="table-vis-error">
   <h2><i class="fa fa-meh-o"></i></h2>
   <h4>No results found</h4>
-</div>
+</div>

src/ui/public/doc_table/doc_table.js

@@ -55,12 +55,6 @@ uiModules.get('kibana')
         $scope.limit += 50;
       };
 
-      $el.attr('has-render-count', 'true');
-      $el.attr('render-count', '0');
-      $el.on('renderComplete', () => {
-        $el.attr('render-count', parseInt($el.attr('render-count'), 10) + 1);
-      });
-
       // This exists to fix the problem of an empty initial column list not playing nice with watchCollection.
       $scope.$watch('columns', function (columns) {
         if (columns.length !== 0) return;

src/ui/public/visualize/visualize.js

@@ -25,6 +25,7 @@ uiModules
 
   return {
     restrict: 'E',
+    require: '?renderCounter',
     scope : {
       showSpyPanel: '=?',
       vis: '=',
@@ -34,7 +35,7 @@ uiModules
       esResp: '=?',
     },
     template: visualizeTemplate,
-    link: function ($scope, $el, attr) {
+    link: function ($scope, $el, attr, renderCounter) {
       const minVisChartHeight = 180;
 
       if (_.isUndefined($scope.showSpyPanel)) {
@@ -72,14 +73,8 @@ uiModules
         return legendPositionToVisContainerClassMap[$scope.vis.params.legendPosition];
       };
 
-      if ($scope.vis.implementsRenderComplete()) {
-        $el.attr('has-render-count', 'true');
-        let renderCount = 0;
-        $el.on('renderComplete', () => {
-          $el.attr('render-count', ++renderCount);
-        });
-      } else {
-        $el.attr('has-render-count', 'false');
+      if (renderCounter && !$scope.vis.implementsRenderComplete()) {
+        renderCounter.disable();
       }
 
       $scope.spy = {};