diff --git a/src/ui/public/doc_table/components/table_row.js b/src/ui/public/doc_table/components/table_row.js index 24dc6d0120fa03..855d4e81cfe060 100644 --- a/src/ui/public/doc_table/components/table_row.js +++ b/src/ui/public/doc_table/components/table_row.js @@ -9,6 +9,7 @@ import noWhiteSpace from 'ui/utils/no_white_space'; import openRowHtml from 'ui/doc_table/components/table_row/open.html'; import detailsHtml from 'ui/doc_table/components/table_row/details.html'; import uiModules from 'ui/modules'; +import FilterManagerProvider from 'ui/filter_manager'; const module = uiModules.get('app/discover'); @@ -24,9 +25,10 @@ const MIN_LINE_LENGTH = 20; * * ``` */ -module.directive('kbnTableRow', function ($compile) { +module.directive('kbnTableRow', ['$compile', 'Private', function ($compile, Private) { const cellTemplate = _.template(noWhiteSpace(require('ui/doc_table/components/table_row/cell.html'))); const truncateByHeightTemplate = _.template(noWhiteSpace(require('ui/partials/truncate_by_height.html'))); + const filterManager = Private(FilterManagerProvider); return { restrict: 'A', @@ -83,27 +85,46 @@ module.directive('kbnTableRow', function ($compile) { createSummaryRow($scope.row, $scope.row._id); }); + $scope.inlineFilter = function inlineFilter($event, type) { + const column = $($event.target).data().column; + const field = $scope.indexPattern.fields.byName[column]; + $scope.indexPattern.popularizeField(field, 1); + filterManager.add(field, $scope.flattenedRow[column], type, $scope.indexPattern.id); + }; + // create a tr element that lists the value for each *column* function createSummaryRow(row) { const indexPattern = $scope.indexPattern; + $scope.flattenedRow = indexPattern.flattenHit(row); // We just create a string here because its faster. const newHtmls = [ openRowHtml ]; + const mapping = indexPattern.fields.byName; if (indexPattern.timeFieldName) { newHtmls.push(cellTemplate({ timefield: true, - formatted: _displayField(row, indexPattern.timeFieldName) + formatted: _displayField(row, indexPattern.timeFieldName), + filterable: mapping[indexPattern.timeFieldName].filterable, + column: indexPattern.timeFieldName })); } $scope.columns.forEach(function (column) { + const isFilterable = + $scope.flattenedRow[column] === undefined + ? false + : !mapping[column] + ? false + : mapping[column].filterable; newHtmls.push(cellTemplate({ timefield: false, sourcefield: (column === '_source'), - formatted: _displayField(row, column, true) + formatted: _displayField(row, column, true), + filterable: isFilterable, + column: column })); }); @@ -128,7 +149,7 @@ module.directive('kbnTableRow', function ($compile) { // rebuild cells since we modified the children $cells = $el.children(); - if (i === 0 && !reuse) { + if (!reuse) { $toggleScope = $scope.$new(); $compile($target)($toggleScope); } @@ -160,4 +181,4 @@ module.directive('kbnTableRow', function ($compile) { } } }; -}); +}]); diff --git a/src/ui/public/doc_table/components/table_row/cell.html b/src/ui/public/doc_table/components/table_row/cell.html index 55f1e17f0cde59..ce8be42f6e3cf5 100644 --- a/src/ui/public/doc_table/components/table_row/cell.html +++ b/src/ui/public/doc_table/components/table_row/cell.html @@ -10,4 +10,23 @@ %> > <%= formatted %> + + <% if (filterable) { %> + + + + <% } %> + diff --git a/src/ui/public/doc_table/doc_table.less b/src/ui/public/doc_table/doc_table.less index 4f7b42eb4ff7d1..6b60fcca6bc5e5 100644 --- a/src/ui/public/doc_table/doc_table.less +++ b/src/ui/public/doc_table/doc_table.less @@ -18,6 +18,26 @@ doc-table { word-break: break-word; } + .discover-table-row { + td { + position: relative; + + .table-cell-filter { + position: absolute; + background-color: rgba(255, 255, 255, 0.75); + white-space: nowrap; + right: 0; + visibility: hidden; + } + + &:hover { + .table-cell-filter { + visibility: visible; + } + } + } + } + .loading { opacity: @loading-opacity; } @@ -31,3 +51,15 @@ doc-table { opacity: @loading-opacity; } } + +/** + * 1. Align icon with text in cell. + */ +.docTableRowFilterIcon { + font-size: 14px; + line-height: 1; /* 1 */ + + & + & { + margin-left: 5px; + } +} diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less index 5d3685b2ee5c57..e3f0d53520761c 100644 --- a/src/ui/public/styles/base.less +++ b/src/ui/public/styles/base.less @@ -253,7 +253,6 @@ kbn-table, .kbn-table { visibility: visible; } } - } //== Generic Table