Merge pull request #2481 from simianhacker/fix/2183

Closes #2183 - Add filters to table visualization
elastic · Jan 5, 2015 · 96c4de8 · 96c4de8
2 parents 6691a0b + 038743c
commit 96c4de8
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 22 deletions.
diff --git a/src/kibana/components/agg_table/agg_table.html b/src/kibana/components/agg_table/agg_table.html
@@ -1,6 +1,6 @@
 <paginated-table
-  ng-if="formattedRows.length"
-  rows="formattedRows"
+  ng-if="rows.length"
+  rows="rows"
   columns="formattedColumns"
   per-page="perPage">
 

diff --git a/src/kibana/components/agg_table/agg_table.js b/src/kibana/components/agg_table/agg_table.js
@@ -82,11 +82,13 @@ define(function (require) {
 
         function setFormattedColumns(table) {
           $scope.formattedColumns = table.columns.map(function (col, i) {
+            var agg = $scope.table.aggConfig(col);
+            var field = agg.field();
             var formattedColumn = {
-              title: col.title
+              title: col.title,
+              filterable: field && field.filterable && agg.schema.group === 'buckets'
             };
 
-            var agg = $scope.table.aggConfig(col);
             var last = i === (table.columns.length - 1);
 
             if (last || (agg.schema.group === 'metrics')) {
@@ -98,16 +100,7 @@ define(function (require) {
         }
 
         function setFormattedRows(table) {
-          var formatters = table.columns.map(function (col) {
-            return table.fieldFormatter(col);
-          });
-
-          // format all row values
-          $scope.formattedRows = (table.rows).map(function (row) {
-            return row.map(function (cell, i) {
-              return formatters[i](cell);
-            });
-          });
+          $scope.rows = table.rows;
 
           // update the csv file's title
           self.csv.filename = (table.title() || 'table') + '.csv';

diff --git a/src/kibana/components/index_patterns/_field_formats.js b/src/kibana/components/index_patterns/_field_formats.js
@@ -171,4 +171,4 @@ define(function (require) {
 
     return formats;
   };
-});
+});
diff --git a/src/kibana/components/paginated_table/paginated_table.html b/src/kibana/components/paginated_table/paginated_table.html
@@ -22,6 +22,7 @@
                 'fa-sort': paginatedTable.sort.direction === null || paginatedTable.sort.columnName !== col.title
               }">
             </i>
+            <i ng-if="col.filterable" class="fa fa-search" ng-click="$event.stopPropagation()" tooltip="Click on a cell to filter"></i>
           </th>
         </tr>
       </thead>
@@ -33,4 +34,4 @@
   <!-- <paginate-controls></paginate-controls> -->
   <div class="pagination-container" ng-transclude></div>
 
-</paginate>
+</paginate>
diff --git a/src/kibana/components/state_management/app_state.js b/src/kibana/components/state_management/app_state.js
@@ -2,25 +2,42 @@ define(function (require) {
   var _ = require('lodash');
   var modules = require('modules');
 
-  function AppStateProvider(Private, $rootScope) {
+  function AppStateProvider(Private, $rootScope, getAppState) {
     var State = Private(require('components/state_management/state'));
 
     _(AppState).inherits(State);
     function AppState(defaults) {
       AppState.Super.call(this, '_a', defaults);
+      getAppState._set(this);
     }
 
     // if the url param is missing, write it back
     AppState.prototype._persistAcrossApps = false;
 
-    // expose this as a factory as well
+    AppState.prototype.destroy = function () {
+      AppState.Super.prototype.destroy.call(this);
+      getAppState._set(null);
+    };
 
     return AppState;
   }
 
   modules.get('kibana/global_state')
   .factory('AppState', function (Private) {
     return Private(AppStateProvider);
+  })
+  .service('getAppState', function () {
+    var currentAppState;
+
+    function get() {
+      return currentAppState;
+    }
+
+    get._set = function (current) {
+      currentAppState = current;
+    };
+
+    return get;
   });
 
   return AppStateProvider;

diff --git a/src/kibana/components/vis/_agg_config_result.js b/src/kibana/components/vis/_agg_config_result.js
@@ -32,5 +32,9 @@ define(function (require) {
     return this.aggConfig.createFilter(this.key);
   };
 
+  AggConfigResult.prototype.toString = function () {
+    return this.aggConfig.fieldFormatter()(this.value);
+  };
+
   return AggConfigResult;
 });
diff --git a/src/kibana/directives/rows.js b/src/kibana/directives/rows.js
@@ -2,8 +2,10 @@ define(function (require) {
   var $ = require('jquery');
   var _ = require('lodash');
   var module = require('modules').get('kibana');
+  var AggConfigResult = require('components/vis/_agg_config_result');
 
-  module.directive('kbnRows', function ($compile) {
+  module.directive('kbnRows', function ($compile, $rootScope, getAppState, Private) {
+    var filterBarClickHandler = Private(require('components/filter_bar/filter_bar_click_handler'));
     return {
       restrict: 'A',
       link: function ($scope, $el, attr) {
@@ -14,6 +16,27 @@ define(function (require) {
           // access to it here. This may become a problem with the switch to BigNumber
           if (_.isNumeric(contents)) $cell.addClass('numeric-value');
 
+          var createAggConfigResultCell = function (aggConfigResult) {
+            var $cell = $(document.createElement('td'));
+            var $state = getAppState();
+            var clickHandler = filterBarClickHandler($state);
+            $cell.scope = $scope.$new();
+            $cell.addClass('cell-hover');
+            $cell.attr('ng-click', 'clickHandler()');
+            $cell.scope.clickHandler = function (negate) {
+              clickHandler({ point: { aggConfigResult: aggConfigResult } });
+            };
+            return $compile($cell)($cell.scope);
+          };
+
+
+          if (contents instanceof AggConfigResult) {
+            if (contents.type === 'bucket' && contents.aggConfig.field().filterable) {
+              $cell = createAggConfigResultCell(contents);
+            }
+            contents = contents.toString();
+          }
+
           if (_.isObject(contents)) {
             if (contents.scope) {
               $cell.html($compile(contents.markup)(contents.scope));
@@ -68,4 +91,4 @@ define(function (require) {
       }
     };
   });
-});
+});
diff --git a/src/kibana/plugins/table_vis/table_vis_controller.js b/src/kibana/plugins/table_vis/table_vis_controller.js
@@ -18,7 +18,8 @@ define(function (require) {
 
         tableGroups = tabifyAggResponse(vis, resp, {
           partialRows: params.showPartialRows,
-          minimalColumns: vis.isHierarchical() && !params.showMeticsAtAllLevels
+          minimalColumns: vis.isHierarchical() && !params.showMeticsAtAllLevels,
+          asAggConfigResults: true
         });
 
         hasSomeRows = tableGroups.tables.some(function haveRows(table) {
@@ -35,4 +36,4 @@ define(function (require) {
     });
   });
 
-});
+});
diff --git a/src/kibana/styles/main.less b/src/kibana/styles/main.less
@@ -436,3 +436,8 @@ style-compile {
 }
 
 @import '../components/filter_bar/filter_bar.less';
+
+.cell-hover:hover {
+  background-color: @gray-lighter;
+}
+