render-counter directive (#9206)

* [docTable/row] delay first render until watchers initialize

* [docTable/row] emit a renderComplete event, count in table directive

* [renderCounter] unify render counting login into directive

* [docTable] remove unused var

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/components/table_row.js

@@ -40,10 +40,6 @@ module.directive('kbnTableRow', function ($compile) {
       $el.after('<tr>');
       $el.empty();
 
-      let init = function () {
-        createSummaryRow($scope.row, $scope.row._id);
-      };
-
       // when we compile the details, we use this $scope
       let $detailsScope;
 
@@ -79,11 +75,11 @@ module.directive('kbnTableRow', function ($compile) {
         $compile($detailsTr)($detailsScope);
       };
 
-      $scope.$watchCollection('columns', function () {
-        createSummaryRow($scope.row, $scope.row._id);
-      });
-
-      $scope.$watchMulti(['indexPattern.timeFieldName', 'row.highlight'], function () {
+      $scope.$watchMulti([
+        'indexPattern.timeFieldName',
+        'row.highlight',
+        '[]columns'
+      ], function () {
         createSummaryRow($scope.row, $scope.row._id);
       });
 
@@ -144,6 +140,7 @@ module.directive('kbnTableRow', function ($compile) {
 
         // trim off cells that were not used rest of the cells
         $cells.filter(':gt(' + (newHtmls.length - 1) + ')').remove();
+        $el.trigger('renderComplete');
       }
 
       /**
@@ -161,8 +158,6 @@ module.directive('kbnTableRow', function ($compile) {
 
         return text;
       }
-
-      init();
     }
   };
 });

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/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 = {};