You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by at...@apache.org on 2015/08/13 18:48:14 UTC
ambari git commit: AMBARI-12733 FE: Alert-Definition-Groups and
Config-Groups dropdowns are too long. (atkach)
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 <at...@hortonworks.com>
Authored: Thu Aug 13 19:47:29 2015 +0300
Committer: Andrii Tkach <at...@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}}
- <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}}
<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}}
- <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}}
<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: </span>' +
- '<span>{{view.selected.label}} <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'),