[agg_table] allow recursive rendering for passed in tableGroups

src/kibana/components/agg_table/agg_table.html

@@ -1,4 +1,36 @@
-<paginate list="formattedRows" per-page="pickPerPage" class="visualize-table">
+<table ng-if="group && rows" class="table">
+  <tr ng-repeat-start="table in rows">
+    <th>
+      <span class="agg-table-table-header">{{ table.title }}</span>
+    </th>
+  </tr>
+  <tr ng-repeat-end>
+    <td>
+      <kbn-agg-table table="table" per-page="getPerPage()" level="nextLevel"></kbn-agg-table>
+    </td>
+  </tr>
+</table>
+
+<table ng-if="group && columns" class="table">
+  <tr>
+    <th ng-repeat="table in columns">
+      <span class="agg-table-table-header">{{ table.title }}</span>
+    </th>
+  </tr>
+  <tr>
+    <td ng-repeat="table in columns">
+      <kbn-agg-table table="table" per-page="getPerPage()" level="nextLevel"></kbn-agg-table>
+    </td>
+  </tr>
+</table>
+
+<paginate
+  ng-if="!group"
+
+  list="formattedRows"
+  per-page="getPerPage()"
+
+  class="agg-table">
   <div class="visualize-table-paginated-table">
     <table class="table table-condensed">
       <thead>
@@ -19,7 +51,7 @@
           </th>
         </tr>
       </thead>
-      <tbody kbn-rows="page" kbn-rows-min="paginate.perPage"></tbody>
+      <tbody kbn-rows="page" kbn-rows-min="getPerPage()"></tbody>
     </table>
   </div>
 

src/kibana/components/agg_table/agg_table.js

@@ -1,7 +1,10 @@
 define(function (require) {
+  require('services/compile_recursive_directive');
+  require('css!components/agg_table/agg_table.css');
+
   require('modules')
   .get('kibana')
-  .directive('kbnAggTable', function ($filter, config, Private) {
+  .directive('kbnAggTable', function ($filter, config, Private, compileRecursiveDirective) {
     var _ = require('lodash');
     var saveAs = require('file_saver');
 
@@ -12,14 +15,22 @@ define(function (require) {
       restrict: 'E',
       template: require('text!components/agg_table/agg_table.html'),
       scope: {
-        rows: '=',
-        columns: '=',
-        perPage: '=?'
+        tableOrGroup: '=table',
+        perPage: '=?',
+        level: '=?'
       },
       controllerAs: 'table',
+      compile: function ($el) {
+        // Use the compile function from the RecursionHelper,
+        // And return the linking function(s) which it returns
+        return compileRecursiveDirective.compile($el);
+      },
       controller: function ($scope) {
         var self = this;
 
+        $scope.level = $scope.level ? $scope.level + 1 : 1;
+        $scope.nextLevel = $scope.level + 1;
+
         self.sort = null;
         self.csv = {
           showOptions: false,
@@ -45,7 +56,7 @@ define(function (require) {
           return agg.params && agg.params.field;
         }
 
-        self.pickPageCount = function () {
+        self.getPerPage = function () {
           return $scope.perPage || Infinity;
         };
 
@@ -116,15 +127,24 @@ define(function (require) {
         };
 
         $scope.$watchMulti([
-          'columns',
-          'rows',
+          'tableOrGroup',
           'table.sort.asc',
           'table.sort.field'
         ], function () {
-          if (!$scope.rows || !$scope.columns) {
+          $scope.rows = $scope.columns = $scope.group = null;
+
+          var tOrG = $scope.tableOrGroup;
+          if (!tOrG) return;
+
+          if (tOrG.tables) {
+            $scope.group = tOrG;
+            $scope[$scope.group.aggConfig.params.row ? 'rows' : 'columns'] = tOrG.tables;
             return;
           }
 
+          $scope.rows = tOrG.rows;
+          $scope.columns = tOrG.columns;
+
           var formatters = $scope.columns.map(function (col) {
             var field = colField(col);
             return field ? field.format.convert : _.identity;

src/kibana/components/agg_table/agg_table.less

@@ -0,0 +1,37 @@
+@import (reference) "lesshat.less";
+@import (reference) "../../styles/theme/_variables.less";
+
+agg-table {
+  .display(flex);
+  .flex(1, 1, auto);
+  .flex-direction(column);
+
+  .agg-table {
+    &-paginated-table {
+      .flex(1, 1, auto);
+      overflow: auto;
+
+      th i.fa-sort {
+        color: @gray-light;
+      }
+
+      .visualize-table-right,
+      td.numeric-value {
+        text-align: right;
+      }
+    }
+
+    &-controls {
+      .flex(0, 0, auto);
+      .display(flex);
+      .align-items(center);
+      margin: 10px 5px;
+
+      > paginate-controls {
+        .flex(1, 0, auto);
+        margin: 0;
+        padding: 0;
+      }
+    }
+  }
+}

src/kibana/components/visualize/spy/_table.html

@@ -1 +1 @@
-<kbn-agg-table rows="rows" columns="columns" per-page="perPage"></kbn-agg-table>
+<kbn-agg-table table="table" per-page="perPage"></kbn-agg-table>

src/kibana/components/visualize/spy/_table.js

@@ -24,13 +24,10 @@ define(function (require) {
           'esResp'
         ], function () {
           if (!$scope.vis || !$scope.esResp) {
-            $scope.rows = $scope.columns = null;
-            return;
+            $scope.table = null;
+          } else {
+            $scope.table = tabifyAggResponse($scope.vis, $scope.esResp, { canSplit: false });
           }
-
-          var tabbed = tabifyAggResponse($scope.vis, $scope.esResp, { canSplit: false });
-          $scope.rows = tabbed.rows;
-          $scope.columns = tabbed.columns;
         });
       }
     };

src/kibana/components/visualize/visualize.less

@@ -17,7 +17,7 @@ visualize {
 
   .visualize-chart {
     .flex(1, 1);
-    overflow: hidden;
+    overflow: auto;
 
     &.spy-visible {
       margin-bottom: 10px;
@@ -93,58 +93,6 @@ visualize-spy {
     height: auto;
   }
 
-  // this is the default, double-arrow sort that is just a hint to the user that they can sort
-  .visualize-table {
-    .display(flex);
-    .flex(1, 1, auto);
-    .flex-direction(column);
-
-    &-paginated-table {
-      .flex(1, 1, auto);
-      overflow: auto;
-
-      th i.fa-sort {
-        color: @gray-light;
-      }
-
-      .visualize-table-right,
-      td.numeric-value {
-        text-align: right;
-      }
-    }
-
-    &-controls {
-      .flex(0, 0, auto);
-      .display(flex);
-      .align-items(center);
-      margin: 10px 5px;
-
-      > paginate-controls {
-        .flex(1, 0, auto);
-        margin: 0;
-        padding: 0;
-      }
-    }
-  }
-
-  .visualize-csv-options {
-    .form-control {
-      padding: 0px 6px;
-      height: auto;
-    }
-    label {
-      margin: 0 10px;
-      padding: 0;
-      font-weight: normal;
-    }
-    .visualize-csv-separator {
-      width: 1.5em;
-    }
-    button[type=submit] {
-      margin-left: 5px;
-    }
-  }
-
   .visualize-spy-nav {
     margin-top: 10px;
     margin-bottom: 10px;

src/kibana/services/compile_recursive_directive.js

@@ -0,0 +1,54 @@
+define(function (require) {
+  var _ = require('lodash');
+
+  /**
+   * Angular can't render directives that render themselves recursively:
+   * http://stackoverflow.com/a/18609594/296172
+   */
+
+  require('modules')
+  .get('kibana')
+  .service('compileRecursiveDirective', function ($compile) {
+    return {
+      /**
+       * Manually compiles the element, fixing the recursion loop.
+       * @param element
+       * @param [link] A post-link function, or an object with function(s) registered via pre and post properties.
+       * @returns An object containing the linking functions.
+       */
+      compile: function (element, link) {
+        // Normalize the link parameter
+        if (_.isFunction(link)) {
+          link = {
+            post: link
+          };
+        }
+
+        // Break the recursion loop by removing the contents
+        var contents = element.contents().remove();
+        var compiledContents;
+        return {
+          pre: (link && link.pre) ? link.pre : null,
+          /**
+           * Compiles and re-adds the contents
+           */
+          post: function (scope, element) {
+            // Compile the contents
+            if (!compiledContents) {
+              compiledContents = $compile(contents);
+            }
+            // Re-add the compiled contents to the element
+            compiledContents(scope, function (clone) {
+              element.append(clone);
+            });
+
+            // Call the post-linking function, if any
+            if (link && link.post) {
+              link.post.apply(null, arguments);
+            }
+          }
+        };
+      }
+    };
+  });
+});

src/kibana/styles/main.less

@@ -25,13 +25,8 @@
 // FontAwesome fills for glyphicons in bootstrap components
 @import "./_glyphicons.less";
 
-// Our CSS spinner
 @import "./_spinner.less";
-
-// Pagniation directive
 @import "./_pagination.less";
-
-// custom control style
 @import "./_navbar.less";
 @import "./_sidebar.less";
 @import "./_truncate.less";
@@ -408,4 +403,4 @@ style-compile {
   display: none;
 }
 
-@import '../components/filter_bar/filter_bar.less';
+@import '../components/filter_bar/filter_bar.less';

tasks/config/less.js

@@ -13,7 +13,7 @@ module.exports = {
       '<%= plugins %>/visualize/styles/main.less',
       '<%= plugins %>/visualize/styles/visualization.less',
       '<%= plugins %>/visualize/styles/main.less',
-      '<%= plugins %>/table_vis/styles/table_vis.less'
+      '<%= plugins %>/table_vis/table_vis.less'
     ],
     expand: true,
     ext: '.css',

tasks/config/watch.js

@@ -10,7 +10,8 @@ module.exports = function (grunt) {
     less: {
       files: [
         '<%= app %>/**/styles/**/*.less',
-        '<%= plugins %>/**/styles/**/*.less',
+        '<%= plugins %>/*/styles/**/*.less',
+        '<%= plugins %>/*/*.less',
         '<%= app %>/**/components/**/*.less',
         '<%= app %>/**/components/vislib/components/styles/**/*.less'
       ],