ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From atk...@apache.org
Subject ambari git commit: AMBARI-12733 FE: Alert-Definition-Groups and Config-Groups dropdowns are too long. (atkach)
Date Thu, 13 Aug 2015 16:48:14 GMT
Repository: ambari
Updated Branches:
  refs/heads/trunk 5ea12f064 -> d1adaa293


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


Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/d1adaa29
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/d1adaa29
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/d1adaa29

Branch: refs/heads/trunk
Commit: d1adaa293d83fbcd4731ad5f2d2f310190ccf2da
Parents: 5ea12f0
Author: Andrii Tkach <atkach@hortonworks.com>
Authored: Thu Aug 13 19:47:29 2015 +0300
Committer: Andrii Tkach <atkach@hortonworks.com>
Committed: Thu Aug 13 19:48:04 2015 +0300

----------------------------------------------------------------------
 ambari-web/app/messages.js                      |  2 +
 ambari-web/app/styles/application.less          | 12 ++++
 .../templates/common/configs/service_config.hbs | 21 ++-----
 .../common/configs/service_config_wizard.hbs    | 19 +-----
 .../views/common/configs/service_config_view.js | 65 ++++++++++++++++++++
 .../app/views/main/alert_definitions_view.js    | 63 +++++++++++++++----
 6 files changed, 136 insertions(+), 46 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/d1adaa29/ambari-web/app/messages.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js
index 7e24391..a990bcd 100644
--- a/ambari-web/app/messages.js
+++ b/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',

http://git-wip-us.apache.org/repos/asf/ambari/blob/d1adaa29/ambari-web/app/styles/application.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less
index 1586370..18ce87d 100644
--- a/ambari-web/app/styles/application.less
+++ b/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;
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/d1adaa29/ambari-web/app/templates/common/configs/service_config.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/configs/service_config.hbs b/ambari-web/app/templates/common/configs/service_config.hbs
index b87596b..888be9e 100644
--- a/ambari-web/app/templates/common/configs/service_config.hbs
+++ b/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>

http://git-wip-us.apache.org/repos/asf/ambari/blob/d1adaa29/ambari-web/app/templates/common/configs/service_config_wizard.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/configs/service_config_wizard.hbs b/ambari-web/app/templates/common/configs/service_config_wizard.hbs
index cd970e7..a66eeb7 100644
--- a/ambari-web/app/templates/common/configs/service_config_wizard.hbs
+++ b/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>

http://git-wip-us.apache.org/repos/asf/ambari/blob/d1adaa29/ambari-web/app/views/common/configs/service_config_view.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/common/configs/service_config_view.js b/ambari-web/app/views/common/configs/service_config_view.js
index 47349c6..232eca1 100644
--- a/ambari-web/app/views/common/configs/service_config_view.js
+++ b/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')
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/d1adaa29/ambari-web/app/views/main/alert_definitions_view.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/alert_definitions_view.js b/ambari-web/app/views/main/alert_definitions_view.js
index e93a45e..19de504 100644
--- a/ambari-web/app/views/main/alert_definitions_view.js
+++ b/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'),
 


Mime
View raw message