From c4d4b186a4013a14d5b539285caeb227f445a291 Mon Sep 17 00:00:00 2001 From: Jonathan Budzenski Date: Fri, 30 Oct 2015 15:01:13 -0500 Subject: [PATCH 1/4] [filter bar] Add aliasing. Closes #5194 --- .../filter_bar/__tests__/_updateFilters.js | 33 +++++++++++++++-- .../public/filter_bar/__tests__/filter_bar.js | 8 +++- src/ui/public/filter_bar/filter_bar.html | 5 ++- src/ui/public/filter_bar/filter_bar.js | 37 +++++++++++-------- src/ui/public/filter_bar/lib/mapFilter.js | 1 + src/ui/public/filter_bar/query_filter.js | 3 ++ 6 files changed, 64 insertions(+), 23 deletions(-) diff --git a/src/ui/public/filter_bar/__tests__/_updateFilters.js b/src/ui/public/filter_bar/__tests__/_updateFilters.js index 91b93c3cf287..308eb0237433 100644 --- a/src/ui/public/filter_bar/__tests__/_updateFilters.js +++ b/src/ui/public/filter_bar/__tests__/_updateFilters.js @@ -39,26 +39,51 @@ describe('update filters', function () { describe('updating', function () { var currentFilter; + var newFilter; beforeEach(function () { - currentFilter = {query: { match: { extension: { query: 'jpg', type: 'phrase' } } } }; + newFilter = _.cloneDeep({ + query: { + match: { + extension: { + query: 'jpg', + type: 'phrase' + } + } + } + }); + currentFilter = _.assign(_.cloneDeep(newFilter), { + meta: {} + }); }); it('should be able to update a filter', function () { - var newFilter = _.cloneDeep(currentFilter); newFilter.query.match.extension.query = 'png'; expect(currentFilter.query.match.extension.query).to.be('jpg'); queryFilter.updateFilter({ source: currentFilter, - model: newFilter + model: newFilter, + type: 'query' }); $rootScope.$digest(); expect(currentFilter.query.match.extension.query).to.be('png'); }); + it('should set an alias in the meta object', function () { + newFilter.alias = 'foo'; + + queryFilter.updateFilter({ + source: currentFilter, + model: newFilter, + type: 'query' + }); + $rootScope.$digest(); + expect(currentFilter.meta.alias).to.be('foo'); + }); + it('should replace the filter type if it is changed', function () { - var newFilter = { + newFilter = { 'range': { 'bytes': { 'gte': 0, diff --git a/src/ui/public/filter_bar/__tests__/filter_bar.js b/src/ui/public/filter_bar/__tests__/filter_bar.js index 33f68558e646..5b102de7043f 100644 --- a/src/ui/public/filter_bar/__tests__/filter_bar.js +++ b/src/ui/public/filter_bar/__tests__/filter_bar.js @@ -55,6 +55,7 @@ describe('Filter Bar Directive', function () { { meta: { index: 'logstash-*' }, query: { match: { '_type': { query: 'nginx' } } } }, { meta: { index: 'logstash-*' }, exists: { field: '@timestamp' } }, { meta: { index: 'logstash-*' }, missing: { field: 'host' }, disabled: true }, + { meta: { index: 'logstash-*', alias: 'foo' }, query: { match: { '_type': { query: 'nginx' } } } }, ]; Promise.map(filters, mapFilter).then(function (filters) { @@ -75,7 +76,7 @@ describe('Filter Bar Directive', function () { it('should render all the filters in state', function () { var filters = $el.find('.filter'); - expect(filters).to.have.length(4); + expect(filters).to.have.length(5); expect($(filters[0]).find('span')[0].innerHTML).to.equal('_type:'); expect($(filters[0]).find('span')[1].innerHTML).to.equal('"apache"'); expect($(filters[1]).find('span')[0].innerHTML).to.equal('_type:'); @@ -86,6 +87,11 @@ describe('Filter Bar Directive', function () { expect($(filters[3]).find('span')[1].innerHTML).to.equal('"host"'); }); + it('should be able to set an alias', function () { + var filter = $el.find('.filter')[4]; + expect($(filter).find('span')[0].innerHTML).to.equal('foo'); + }); + describe('editing filters', function () { beforeEach(function () { $scope.startEditingFilter(appState.filters[3]); diff --git a/src/ui/public/filter_bar/filter_bar.html b/src/ui/public/filter_bar/filter_bar.html index 2bace4ce2470..70f307240ac0 100644 --- a/src/ui/public/filter_bar/filter_bar.html +++ b/src/ui/public/filter_bar/filter_bar.html @@ -13,8 +13,9 @@
- {{ filter.meta.key }}: - "{{ filter.meta.value }}" + {{ filter.meta.alias }} + {{ filter.meta.key }}: + "{{ filter.meta.value }}"
diff --git a/src/ui/public/filter_bar/filter_bar.js b/src/ui/public/filter_bar/filter_bar.js index 7b66acf0c4d0..e8863d4bba81 100644 --- a/src/ui/public/filter_bar/filter_bar.js +++ b/src/ui/public/filter_bar/filter_bar.js @@ -15,6 +15,7 @@ define(function (require) { var filterAppliedAndUnwrap = require('ui/filter_bar/lib/filterAppliedAndUnwrap'); var changeTimeFilter = Private(require('ui/filter_bar/lib/changeTimeFilter')); var queryFilter = Private(require('ui/filter_bar/query_filter')); + var privateFilterFieldRegex = /(^\$|meta)/; return { restrict: 'E', @@ -57,24 +58,13 @@ define(function (require) { } }; - var privateFieldRegexp = /(^\$|meta)/; $scope.startEditingFilter = function (source) { - var model = _.cloneDeep(source); - var filterType; - - //Hide private properties and figure out what type of filter this is - _.each(model, function (value, key) { - if (key.match(privateFieldRegexp)) { - delete model[key]; - } else { - filterType = key; - } - }); - - $scope.editingFilter = { + return $scope.editingFilter = { source: source, - type: filterType, - model: model + type: _.first(_.filter(_.keys(source), function (key) { + return !key.match(privateFilterFieldRegex); + })), + model: convertToEditableFilter(source) }; }; @@ -137,6 +127,21 @@ define(function (require) { } }); + function convertToEditableFilter(filter) { + var model = _.cloneDeep(filter); + model.alias = filter.meta.alias; + + var filterType; + //Hide private properties + _.each(model, function (value, key) { + if (key.match(privateFilterFieldRegex)) { + delete model[key]; + } + }); + + return model; + } + function updateFilters() { var filters = queryFilter.getFilters(); mapAndFlattenFilters(filters).then(function (results) { diff --git a/src/ui/public/filter_bar/lib/mapFilter.js b/src/ui/public/filter_bar/lib/mapFilter.js index ebf6bb31ae11..8261909ed67a 100644 --- a/src/ui/public/filter_bar/lib/mapFilter.js +++ b/src/ui/public/filter_bar/lib/mapFilter.js @@ -57,6 +57,7 @@ define(function (require) { filter.meta.value = result.value; filter.meta.disabled = !!(filter.meta.disabled); filter.meta.negate = !!(filter.meta.negate); + filter.meta.alias = filter.meta.alias || null; return filter; }); }; diff --git a/src/ui/public/filter_bar/query_filter.js b/src/ui/public/filter_bar/query_filter.js index cc79b4c62334..148d3d2bb12a 100644 --- a/src/ui/public/filter_bar/query_filter.js +++ b/src/ui/public/filter_bar/query_filter.js @@ -91,6 +91,9 @@ define(function (require) { * @returns {object} Promise that resolves to the new filter on a successful merge */ queryFilter.updateFilter = function (filter) { + filter.source.meta.alias = filter.model.alias; + delete filter.model.alias; + var mergedFilter = _.assign({}, filter.source, filter.model); //If the filter type is changed we want to discard the old type From b7550826810a7b9b24131cbcc511122ac6e936b3 Mon Sep 17 00:00:00 2001 From: Jonathan Budzenski Date: Mon, 2 Nov 2015 16:58:32 -0600 Subject: [PATCH 2/4] [filter bar] Move alias to a separate input field --- src/ui/public/filter_bar/__tests__/_updateFilters.js | 4 ++-- src/ui/public/filter_bar/filter_bar.html | 9 +++++++++ src/ui/public/filter_bar/filter_bar.js | 4 ++-- src/ui/public/filter_bar/filter_bar.less | 4 ++++ src/ui/public/filter_bar/query_filter.js | 5 +---- 5 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/ui/public/filter_bar/__tests__/_updateFilters.js b/src/ui/public/filter_bar/__tests__/_updateFilters.js index 308eb0237433..d7bec6538963 100644 --- a/src/ui/public/filter_bar/__tests__/_updateFilters.js +++ b/src/ui/public/filter_bar/__tests__/_updateFilters.js @@ -71,12 +71,12 @@ describe('update filters', function () { }); it('should set an alias in the meta object', function () { - newFilter.alias = 'foo'; queryFilter.updateFilter({ source: currentFilter, model: newFilter, - type: 'query' + type: 'query', + alias: 'foo' }); $rootScope.$digest(); expect(currentFilter.meta.alias).to.be('foo'); diff --git a/src/ui/public/filter_bar/filter_bar.html b/src/ui/public/filter_bar/filter_bar.html index 70f307240ac0..f6f696e5650b 100644 --- a/src/ui/public/filter_bar/filter_bar.html +++ b/src/ui/public/filter_bar/filter_bar.html @@ -41,6 +41,15 @@
+
+ + +
Date: Wed, 4 Nov 2015 10:38:17 -0600 Subject: [PATCH 3/4] [filter bar] Cleanup --- src/ui/public/filter_bar/filter_bar.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/src/ui/public/filter_bar/filter_bar.js b/src/ui/public/filter_bar/filter_bar.js index e7db6ff640e8..9d6fd4be6ddf 100644 --- a/src/ui/public/filter_bar/filter_bar.js +++ b/src/ui/public/filter_bar/filter_bar.js @@ -61,9 +61,9 @@ define(function (require) { $scope.startEditingFilter = function (source) { return $scope.editingFilter = { source: source, - type: _.first(_.filter(_.keys(source), function (key) { + type: _.findKey(source, function (val, key) { return !key.match(privateFilterFieldRegex); - })), + }), model: convertToEditableFilter(source), alias: source.meta.alias }; @@ -129,17 +129,9 @@ define(function (require) { }); function convertToEditableFilter(filter) { - var model = _.cloneDeep(filter); - - var filterType; - //Hide private properties - _.each(model, function (value, key) { - if (key.match(privateFilterFieldRegex)) { - delete model[key]; - } + return _.omit(_.cloneDeep(filter), function (val, key) { + return key.match(privateFilterFieldRegex); }); - - return model; } function updateFilters() { From 485d873087081f43fc86da0639797fe1a28a777e Mon Sep 17 00:00:00 2001 From: Jonathan Budzenski Date: Wed, 4 Nov 2015 14:36:23 -0600 Subject: [PATCH 4/4] [filter bar] Scale filter min width as ems change --- src/ui/public/filter_bar/filter_bar.less | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/ui/public/filter_bar/filter_bar.less b/src/ui/public/filter_bar/filter_bar.less index 3126f075f173..e68afae45e95 100644 --- a/src/ui/public/filter_bar/filter_bar.less +++ b/src/ui/public/filter_bar/filter_bar.less @@ -28,7 +28,10 @@ filter-bar .confirm { position: relative; display: inline-block; text-align: center; - min-width: 140px; + // Number of filter icons multiplied by icon width + // Escaped to prevent less math + min-width: ~"calc(5*(1.414em + 13px))"; + font-size: @font-size-small; background-color: @filter-bar-confirm-filter-bg; @@ -81,8 +84,9 @@ filter-bar .bar { position: relative; display: inline-block; text-align: center; - min-width: 140px; - + // Number of filter icons multiplied by icon width + // Escaped to prevent less math + min-width: ~"calc(5*(1.414em + 13px))"; font-size: @font-size-small; background-color: @filter-bar-bar-filter-bg; color: @filter-bar-bar-filter-color;