AMBARI-12733 FE: Alert-Definition-Groups and Config-Groups dropdowns are too long. (atkach)

ambari-web/app/messages.js

@@ -904,6 +904,7 @@ Em.I18n.translations = {
   'form.validator.configKey':'Invalid Key. Only alphanumerics, hyphens, underscores, asterisks and periods are allowed.',
   'form.validator.configGroupName':'Invalid Group Name. Only alphanumerics, hyphens, spaces and underscores are allowed.',
   'form.validator.alertGroupName':'Invalid Alert Group Name. Only alphanumerics, hyphens, spaces and underscores are allowed.',
+  'form.validator.alertGroupPlaceHolder':'Alert Group Name',
   'form.validator.configKey.specific':'"{0}" is invalid Key. Only alphanumerics, hyphens, underscores, asterisks and periods are allowed.',
 
   'alerts.add.header': 'Create Alert Definition',
@@ -1774,6 +1775,7 @@ Em.I18n.translations = {
     'on the Ambari Server host to make the JDBC driver available and to enable testing the database connection.',
 
   'services.service.config.configHistory.configGroup': 'Config Group',
+  'services.service.config.configHistory.configGroup.name': 'Config Group Name',
   'services.service.config.configHistory.rightArrow.tooltip': 'Show earlier versions',
   'services.service.config.configHistory.leftArrow.tooltip': 'Show later versions',
   'services.service.config.configHistory.dismissIcon.tooltip': 'Dismiss',

ambari-web/app/styles/application.less

@@ -5898,3 +5898,15 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
     }
   }
 }
+
+.typeahead.dropdown-menu {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.config-groups-dropdown {
+  display: inline-block;
+  input[type="text"] {
+    margin-bottom: 2px;
+  }
+}

ambari-web/app/templates/common/configs/service_config.hbs

@@ -48,23 +48,10 @@
 {{#if view.supportsHostOverrides}}
   <div class="alert alert-info">
     {{t common.group}}&nbsp;
-	  <span class="btn-group">
-		  <button {{bindAttr disabled="controller.isHostsConfigsPage"}} class="btn dropdown-toggle"
-                                                                    data-toggle="dropdown">{{selectedConfigGroup.displayNameHosts}}</button>
-		  <button {{bindAttr disabled="controller.isHostsConfigsPage"}} class="btn dropdown-toggle" data-toggle="dropdown">
-        <span class="caret"></span>
-      </button>
-		  <ul class="dropdown-menu">
-        <!-- available config group menu links -->
-        {{#each configGroup in configGroups}}
-          <li>
-            <a href="#" {{action "selectConfigGroup" configGroup target="controller"}}>
-              {{configGroup.displayNameHosts}}
-            </a>
-          </li>
-        {{/each}}
-      </ul>
-		</span>
+    <div class="config-groups-dropdown">
+      {{view App.ConfigGroupDropdownView}}
+    </div>
+
     {{#isAccessible ADMIN}}
       {{#if controller.isHostsConfigsPage}}
         &nbsp;<a href="#" {{action "switchHostGroup" target="controller"}}>{{t common.change}}</a>

ambari-web/app/templates/common/configs/service_config_wizard.hbs

@@ -19,22 +19,9 @@
 {{#if view.supportsHostOverrides}}
   <div class="alert alert-info">
     {{t common.group}}&nbsp;
-	  <span class="btn-group">
-		  <button {{bindAttr disabled="controller.isHostsConfigsPage"}} class="btn">{{selectedConfigGroup.displayNameHosts}}</button>
-		  <button {{bindAttr disabled="controller.isHostsConfigsPage"}} class="btn dropdown-toggle" data-toggle="dropdown">
-        <span class="caret"></span>
-      </button>
-		  <ul class="dropdown-menu">
-        <!-- available config group menu links -->
-        {{#each configGroup in configGroups}}
-          <li>
-            <a href="#" {{action "selectConfigGroup" configGroup target="controller"}}>
-              {{configGroup.displayNameHosts}}
-            </a>
-          </li>
-        {{/each}}
-      </ul>
-		</span>
+    <div class="config-groups-dropdown">
+      {{view App.ConfigGroupDropdownView}}
+    </div>
     {{#isAccessible ADMIN}}
       {{#if controller.isHostsConfigsPage}}
         &nbsp;<a href="#" {{action "switchHostGroup" target="controller"}}>{{t common.change}}</a>

ambari-web/app/views/common/configs/service_config_view.js

@@ -298,3 +298,68 @@ App.ServiceConfigView = Em.View.extend({
   }.observes('filter', 'columns.@each.selected', 'tabs.@each.isHiddenByFilter')
 
 });
+
+
+App.ConfigGroupDropdownView = Ember.TextField.extend({
+  classNames: ['typeahead'],
+
+  /**
+   * @type {string}
+   */
+  placeholder: Em.I18n.t('services.service.config.configHistory.configGroup.name'),
+
+  /**
+   * @type {boolean}
+   */
+  disabled: function () {
+    if (this.get('controller.isInstaller')) return false;
+    return !this.get('controller.versionLoaded');
+  }.property('controller.versionLoaded', 'controller.isInstaller'),
+
+  didInsertElement: function() {
+    var self = this;
+    var node = $(this.get('element'));
+    node.typeahead({
+      name: 'config groups',
+      source: self.get('controller.configGroups').mapProperty('displayNameHosts'),
+      updater: function (value) {
+        if (self.get('controller.selectedConfigGroup.displayNameHosts') !==  value
+          && self.get('controller.configGroups').findProperty('displayNameHosts', value)) {
+          self.get('controller').selectConfigGroup({
+            context: self.get('controller.configGroups').findProperty('displayNameHosts', value)
+          });
+          node.trigger('blur');
+        }
+        return value;
+      },
+      items: 9999,
+      minLength: 0,
+      matcher: function (item) {
+        if (this.query === '_SHOW_ALL_') return true;
+        return ~item.toLowerCase().indexOf(this.query.toLowerCase());
+      }
+    });
+    node.val(self.get('controller.selectedConfigGroup.displayNameHosts'));
+    node.on('keyup focus', function (e) {
+      /**
+       * don't update group list on up arrow(38) or down arrow(40) event
+       * since Typeahead ignore filtering by empty query, "_SHOW_ALL_" pseudo key used in order
+       * to force filtering and show all items
+       */
+      if ($(this).val().length === 0 && [40, 38].indexOf(e.keyCode) === -1) {
+        $(this).val('_SHOW_ALL_');
+        $(this).trigger('keyup');
+        $(this).val('');
+      }
+    });
+    node.on('blur', function (e) {
+      $(self.get('element')).val(self.get('controller.selectedConfigGroup.displayNameHosts'));
+    });
+  },
+
+  updateConfigGroupsList: function() {
+    if ($(this.get('element'))) {
+      $(this.get('element')).data('typeahead').source = this.get('controller.configGroups').mapProperty('displayNameHosts');
+    }
+  }.observes('controller.configGroups.length')
+});

ambari-web/app/views/main/alert_definitions_view.js

@@ -366,27 +366,61 @@ App.MainAlertDefinitionsView = App.TableView.extend({
     column: 7,
     fieldType: 'filter-input-width',
     template: Ember.Handlebars.compile(
-      '<div class="btn-group display-inline-block">' +
-        '<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">' +
-          '<span class="filters-label">Groups:&nbsp;&nbsp;</span>' +
-          '<span>{{view.selected.label}}&nbsp;<span class="caret"></span></span>' +
-        '</a>' +
-          '<ul class="dropdown-menu">' +
-            '{{#each category in view.content}}' +
-              '<li {{bindAttr class=":category-item category.selected:active"}}>' +
-                '<a {{action selectCategory category target="view"}} href="#">' +
-                   '<span {{bindAttr class="category.class"}}></span>{{category.label}}</a>' +
-              '</li>'+
-            '{{/each}}' +
-          '</ul>'+
+      '<div class="display-inline-block">' +
+       '<input type="text" class="typeahead" {{bindAttr placeholder="view.alertGroupPlaceholder" }}/>' +
       '</div>'
     ),
     content: [],
 
+    alertGroupPlaceholder: Em.I18n.t('form.validator.alertGroupPlaceHolder'),
+
     didInsertElement: function() {
       this._super();
       this.updateContent();
       this.set('value', '');
+      this.attachAlertGroupDropdown();
+    },
+
+    attachAlertGroupDropdown: function() {
+      var self = this;
+      var node = this.$('.typeahead');
+      this.set('typeahead', node.typeahead({
+        name: 'alert groups',
+        source: self.get('content').mapProperty('label'),
+        updater: function (label) {
+          var current = self.get('content').findProperty('value', self.get('value')).get('label');
+          var entered = self.get('content').findProperty('label', label);
+          if (current !==  label && entered) {
+            self.selectCategory({
+              context: entered
+            });
+            node.trigger('blur');
+          }
+          return label;
+        },
+        items: 9999,
+        minLength: 0,
+        matcher: function (item) {
+          if (this.query === '_SHOW_ALL_') return true;
+          return ~item.toLowerCase().indexOf(this.query.toLowerCase());
+        }
+      }));
+      node.val(self.get('content').findProperty('value', '').get('label'));
+      node.on('keyup focus', function (e) {
+        /**
+         * don't update group list on up arrow(38) or down arrow(40) event
+         * since Typeahead ignore filtering by empty query, "_SHOW_ALL_" pseudo key used in order
+         * to force filtering and show all items
+         */
+        if ($(this).val().length === 0 && [40, 38].indexOf(e.keyCode) === -1) {
+          $(this).val('_SHOW_ALL_');
+          $(this).trigger('keyup');
+          $(this).val('');
+        }
+      });
+      node.on('blur', function (e) {
+        $(self.get('.typeahead')).val(self.get('content').findProperty('value', self.get('value')).get('label'));
+      });
     },
 
     emptyValue: '',
@@ -418,6 +452,9 @@ App.MainAlertDefinitionsView = App.TableView.extend({
           label: Em.I18n.t('common.all') + ' (' + this.get('parentView.controller.content.length') + ')'
         })
       ].concat(defaultGroups, customGroups));
+      if (this.get('typeahead')) {
+        this.get('typeahead').data('typeahead').source = this.get('content').mapProperty('label');
+      }
       this.onValueChange();
     }.observes('App.router.clusterController.isLoaded', 'App.router.manageAlertGroupsController.changeTrigger'),