Merge pull request #5268 from jbudz/filter-alias

[filter bar] Add aliasing.  Closes #5194

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 () {
+
+      queryFilter.updateFilter({
+        source: currentFilter,
+        model: newFilter,
+        type: 'query',
+        alias: 'foo'
+      });
+      $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,

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]);

src/ui/public/filter_bar/filter_bar.html

@@ -13,8 +13,9 @@
   <div class="filter" ng-class="{ negate: filter.meta.negate, disabled: filter.meta.disabled }" ng-repeat="filter in filters">
     <div class="filter-description">
       <span ng-if="filter.$state.store == 'globalState'"><i class="fa fa-fw fa-thumb-tack pinned"></i></span>
-      <span>{{ filter.meta.key }}:</span>
-      <span>"{{ filter.meta.value }}"</span>
+      <span ng-if="filter.meta.alias">{{ filter.meta.alias }}</span>
+      <span ng-if="!filter.meta.alias">{{ filter.meta.key }}:</span>
+      <span ng-if="!filter.meta.alias">"{{ filter.meta.value }}"</span>
     </div>
     <div class="filter-actions">
       <a class="action filter-toggle" ng-click="toggleFilter(filter)">
@@ -40,6 +41,15 @@
 
   <div class="filter-edit-container" ng-if="editingFilter">
     <form role="form" name="editFilterForm" ng-submit="editDone()">
+      <div class="form-group filter-edit-alias">
+        <label>Filter Alias
+          <small>(optional)</small>
+        </label>
+        <input
+          ng-model="editingFilter.alias"
+          type="text"
+          class="form-control">
+      </div>
       <div
         json-input
         require-keys="true"

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,14 @@ 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: _.findKey(source, function (val, key) {
+              return !key.match(privateFilterFieldRegex);
+            }),
+            model: convertToEditableFilter(source),
+            alias: source.meta.alias
           };
         };
 
@@ -137,6 +128,12 @@ define(function (require) {
           }
         });
 
+        function convertToEditableFilter(filter) {
+          return _.omit(_.cloneDeep(filter), function (val, key) {
+            return key.match(privateFilterFieldRegex);
+          });
+        }
+
         function updateFilters() {
           var filters = queryFilter.getFilters();
           mapAndFlattenFilters(filters).then(function (results) {

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;
@@ -60,6 +63,10 @@ filter-bar .bar {
     margin: 15px 0;
   }
 
+  .filter-edit-alias {
+    margin-top: 15px;
+  }
+
   .filter-link {
     position: relative;
     display: inline-block;
@@ -77,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;

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;
       });
     };

src/ui/public/filter_bar/query_filter.js

@@ -92,7 +92,7 @@ define(function (require) {
     */
     queryFilter.updateFilter = function (filter) {
       var mergedFilter = _.assign({}, filter.source, filter.model);
-
+      mergedFilter.meta.alias = filter.alias;
       //If the filter type is changed we want to discard the old type
       //when merging changes back in
       var filterTypeReplaced = filter.model[filter.type] !== mergedFilter[filter.type];