Repository: ambari Updated Branches: refs/heads/trunk 74f9ddcf8 -> 0d6e0c57f
AMBARI-8590. Alerts UI: Alert Groups and Notifications dialogs have multiple issues. (akovalenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/0d6e0c57 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/0d6e0c57 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/0d6e0c57 Branch: refs/heads/trunk Commit: 0d6e0c57f654c6bcefdd85b5e0fe0f8b6759ba7c Parents: 74f9ddc Author: Aleksandr Kovalenko <akovale...@hortonworks.com> Authored: Mon Dec 8 20:56:56 2014 +0200 Committer: Aleksandr Kovalenko <akovale...@hortonworks.com> Committed: Mon Dec 8 21:18:14 2014 +0200 ---------------------------------------------------------------------- .../alert_definitions_actions_controller.js | 2 +- .../alerts/manage_alert_groups_controller.js | 38 ++++++++++-- .../manage_alert_notifications_controller.js | 1 + ambari-web/app/messages.js | 6 +- ambari-web/app/styles/alerts.less | 23 ++++++++ ...ustom_config_to_alert_notification_popup.hbs | 4 +- .../main/alerts/create_alert_notification.hbs | 4 +- .../main/alerts/manage_alert_groups_popup.hbs | 8 +-- .../alerts/manage_alert_notifications_popup.hbs | 14 ++--- .../main/alerts/manage_alert_groups_view.js | 61 +++++++++----------- 10 files changed, 106 insertions(+), 55 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/0d6e0c57/ambari-web/app/controllers/main/alerts/alert_definitions_actions_controller.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/controllers/main/alerts/alert_definitions_actions_controller.js b/ambari-web/app/controllers/main/alerts/alert_definitions_actions_controller.js index 6d7a568..33a8b8b 100644 --- a/ambari-web/app/controllers/main/alerts/alert_definitions_actions_controller.js +++ b/ambari-web/app/controllers/main/alerts/alert_definitions_actions_controller.js @@ -183,7 +183,7 @@ App.MainAlertDefinitionActionsController = Em.ArrayController.extend({ primary: Em.I18n.t('common.close'), - didInsertElement: Em.K + autoHeight: false }); } http://git-wip-us.apache.org/repos/asf/ambari/blob/0d6e0c57/ambari-web/app/controllers/main/alerts/manage_alert_groups_controller.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/controllers/main/alerts/manage_alert_groups_controller.js b/ambari-web/app/controllers/main/alerts/manage_alert_groups_controller.js index 7e3a2e3..d69c9e2 100644 --- a/ambari-web/app/controllers/main/alerts/manage_alert_groups_controller.js +++ b/ambari-web/app/controllers/main/alerts/manage_alert_groups_controller.js @@ -110,8 +110,8 @@ App.ManageAlertGroupsController = Em.Controller.extend({ loadAlertGroups: function () { this.set('isLoaded', false); - this.set('alertGroups.length', 0); - this.set('originalAlertGroups.length', 0); + this.set('alertGroups', []); + this.set('originalAlertGroups', []); App.ajax.send({ name: 'alerts.load_alert_groups', sender: this, @@ -141,7 +141,7 @@ App.ManageAlertGroupsController = Em.Controller.extend({ onLoadAlertGroupSuccess: function (data) { var alertGroups = this.get('alertGroups'); if (data && data.AlertGroup) { - alertGroups.pushObject ( App.AlertGroupComplex.create({ + alertGroups.pushObject (App.AlertGroupComplex.create({ name: data.AlertGroup.name, default: data.AlertGroup.default, id: data.AlertGroup.id, @@ -152,6 +152,7 @@ App.ManageAlertGroupsController = Em.Controller.extend({ if (this.get('alertGroupsCount') == alertGroups.length) { this.set('isLoaded', true); this.set('originalAlertGroups', this.copyAlertGroups(alertGroups)); + this.set('selectedAlertGroup', alertGroups[0]) } }, @@ -163,6 +164,33 @@ App.ManageAlertGroupsController = Em.Controller.extend({ console.error('Unable to load an alert group.'); }, + /** + * @type {boolean} + */ + isRemoveButtonDisabled: true, + + /** + * @type {boolean} + */ + isRenameButtonDisabled: true, + + /** + * @type {boolean} + */ + isDuplicateButtonDisabled: true, + + /** + * Enable/disable "Remove"/"Rename"/"Duplicate" buttons basing on <code>controller.selectedAlertGroup</code> + * @method buttonObserver + */ + buttonObserver: function () { + var selectedAlertGroup = this.get('selectedAlertGroup'); + var flag = selectedAlertGroup && selectedAlertGroup.get('default'); + this.set('isRemoveButtonDisabled', flag); + this.set('isRenameButtonDisabled', flag); + this.set('isDuplicateButtonDisabled', false); + }.observes('selectedAlertGroup'), + resortAlertGroup: function() { var alertGroups = Ember.copy(this.get('alertGroups')); if(alertGroups.length < 2){ @@ -172,7 +200,7 @@ App.ManageAlertGroupsController = Em.Controller.extend({ defaultGroups.forEach( function(defaultGroup) { alertGroups.removeObject(defaultGroup); }); - var sorted = defaultGroups.concat(alertGroups.sortProperty('name')); + var sorted = defaultGroups.sortProperty('name').concat(alertGroups.sortProperty('name')); // var sorted = alertGroups.sortProperty('name'); this.removeObserver('alertgrou...@each.name', this, 'resortAlertGroup'); @@ -542,6 +570,7 @@ App.ManageAlertGroupsController = Em.Controller.extend({ * confirm delete alert group */ confirmDelete : function () { + if (this.get('isRemoveButtonDisabled')) return; var self = this; App.showConfirmationPopup(function() { self.deleteAlertGroup(); @@ -640,6 +669,7 @@ App.ManageAlertGroupsController = Em.Controller.extend({ notifications: [] }); self.get('alertGroups').pushObject(newAlertGroup); + self.set('selectedAlertGroup', newAlertGroup); this.hide(); } }); http://git-wip-us.apache.org/repos/asf/ambari/blob/0d6e0c57/ambari-web/app/controllers/main/alerts/manage_alert_notifications_controller.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/controllers/main/alerts/manage_alert_notifications_controller.js b/ambari-web/app/controllers/main/alerts/manage_alert_notifications_controller.js index 101c055..d53b816 100644 --- a/ambari-web/app/controllers/main/alerts/manage_alert_notifications_controller.js +++ b/ambari-web/app/controllers/main/alerts/manage_alert_notifications_controller.js @@ -273,6 +273,7 @@ App.ManageAlertNotificationsController = Em.Controller.extend({ var self = this; var createEditPopup = App.ModalPopup.show({ header: isEdit ? Em.I18n.t('alerts.actions.manage_alert_notifications_popup.editHeader') : Em.I18n.t('alerts.actions.manage_alert_notifications_popup.addHeader'), + classNames: ['create-edit-alert-notification-popup'], bodyClass: Em.View.extend({ controller: this, templateName: require('templates/main/alerts/create_alert_notification'), http://git-wip-us.apache.org/repos/asf/ambari/blob/0d6e0c57/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index 42abd0f..de6b78a 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -893,9 +893,9 @@ Em.I18n.translations = { 'alerts.definition.details.notification': 'Notification', 'alerts.definition.details.noAlerts': 'No alert instances to show', - 'alerts.notifications.addCustomPropertyPopup.header': 'Add Custom Property', + 'alerts.notifications.addCustomPropertyPopup.header': 'Add Property', 'alerts.notifications.addCustomPropertyPopup.error.propertyExists': 'Custom Property with current name already exists', - 'alerts.notifications.addCustomPropertyPopup.error.invalidPropertyName': 'Custom Property name is invalid', + 'alerts.notifications.addCustomPropertyPopup.error.invalidPropertyName': 'Property name can only contain letters, numbers or . -_* characters', 'wizard.progressPage.notice.completed':'Please proceed to the next step.', @@ -1857,12 +1857,14 @@ Em.I18n.translations = { 'alerts.actions.manage_alert_groups_popup.addButton':'Create Alert Group', 'alerts.actions.manage_alert_groups_popup.addGroup.exist': 'Alert Group with given name already exists', 'alerts.actions.manage_alert_groups_popup.removeButton':'Delete Alert Group', + 'alerts.actions.manage_alert_groups_popup.removeButtonDisabled':'Cannot delete default alert group', 'alerts.actions.manage_alert_groups_popup.renameButton':'Rename Alert Group', 'alerts.actions.manage_alert_groups_popup.duplicateButton':'Duplicate Alert Group', 'alerts.actions.manage_alert_groups_popup.addDefinition':'Add alert definitions to selected Alert Group', 'alerts.actions.manage_alert_groups_popup.addDefinitionDisabled':'There are no available alert definitions to add', 'alerts.actions.manage_alert_groups_popup.addDefinitionToDefault': 'You cannot add alert definition to a default group', 'alerts.actions.manage_alert_groups_popup.removeDefinition':'Remove alert definitions from selected Alert Group', + 'alerts.actions.manage_alert_groups_popup.removeDefinitionDisabled':'Cannot modify default alert group', 'alerts.actions.manage_alert_groups_popup.selectDefsDialog.title': 'Select Alert Group Definitions', 'alerts.actions.manage_alert_groups_popup.selectDefsDialog.message': 'Select alert definitions to be added to this "{0}" Alert Group.', 'alerts.actions.manage_alert_groups_popup.selectDefsDialog.filter.placeHolder': 'All', http://git-wip-us.apache.org/repos/asf/ambari/blob/0d6e0c57/ambari-web/app/styles/alerts.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/alerts.less b/ambari-web/app/styles/alerts.less index 953f77b..feee82b 100644 --- a/ambari-web/app/styles/alerts.less +++ b/ambari-web/app/styles/alerts.less @@ -376,6 +376,9 @@ .notification-info .global-info .global-checkbox { margin: 0px; } + .input-label { + font-weight: bold; + } } #manage-alert-notifications-error { @@ -391,6 +394,9 @@ .controls { margin-left: 140px; } + .control-label { + font-weight: bold; + } } label { width: 115px; @@ -402,6 +408,18 @@ .icon-minus-sign { color: #FF4B4B; } + + .add-custom-property { + margin-left: 140px; + } +} + +.create-edit-alert-notification-popup { + .modal { + margin-top: 0px; + top: 5%; + width: 600px; + } } /*****start styles for manage alerts popup*****/ @@ -427,6 +445,11 @@ font-weight: bold; } } + a { + i { + cursor: inherit; + } + } } http://git-wip-us.apache.org/repos/asf/ambari/blob/0d6e0c57/ambari-web/app/templates/main/alerts/add_custom_config_to_alert_notification_popup.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/alerts/add_custom_config_to_alert_notification_popup.hbs b/ambari-web/app/templates/main/alerts/add_custom_config_to_alert_notification_popup.hbs index 8f86d5e..0033eac 100644 --- a/ambari-web/app/templates/main/alerts/add_custom_config_to_alert_notification_popup.hbs +++ b/ambari-web/app/templates/main/alerts/add_custom_config_to_alert_notification_popup.hbs @@ -18,7 +18,7 @@ <form class="form-horizontal alert-configs"> <div {{bindAttr class="view.isError:error :control-group"}}> - <label class="control-label">{{t common.name}}: </label> + <label class="control-label">{{t common.name}} </label> <div class="controls"> {{view Em.TextField valueBinding="controller.newCustomProperty.name"}} @@ -26,7 +26,7 @@ </div> <div class="control-group"> - <label class="control-label">{{t common.value}}: </label> + <label class="control-label">{{t common.value}} </label> <div class="controls"> {{view Em.TextField valueBinding="controller.newCustomProperty.value"}} http://git-wip-us.apache.org/repos/asf/ambari/blob/0d6e0c57/ambari-web/app/templates/main/alerts/create_alert_notification.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/alerts/create_alert_notification.hbs b/ambari-web/app/templates/main/alerts/create_alert_notification.hbs index ceeaf8e..5c264ca 100644 --- a/ambari-web/app/templates/main/alerts/create_alert_notification.hbs +++ b/ambari-web/app/templates/main/alerts/create_alert_notification.hbs @@ -35,7 +35,7 @@ {{view view.groupsSelectView multiple="true" id="inputGroups" class="input-large" selectionBinding="controller.inputFields.groups.value" contentBinding="controller.allAlertGroups" - optionLabelPath="content.name" + optionLabelPath="content.displayName" }} <a href="#" {{action selectAllGroups target="view"}}>{{t alerts.actions.manage_alert_notifications_popup.selectAll}}</a> | <a href="#" {{action clearAllGroups target="view"}}>{{t alerts.actions.manage_alert_notifications_popup.clearAll}}</a> @@ -150,7 +150,7 @@ </div> {{/each}} - <a href="#" {{action addCustomPropertyHandler target="controller"}}>{{t installer.step7.config.addProperty}} ...</a> + <a href="#" class="add-custom-property" {{action addCustomPropertyHandler target="controller"}}>{{t installer.step7.config.addProperty}} ...</a> </form> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/0d6e0c57/ambari-web/app/templates/main/alerts/manage_alert_groups_popup.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/alerts/manage_alert_groups_popup.hbs b/ambari-web/app/templates/main/alerts/manage_alert_groups_popup.hbs index 97d7d76..81d86a4 100644 --- a/ambari-web/app/templates/main/alerts/manage_alert_groups_popup.hbs +++ b/ambari-web/app/templates/main/alerts/manage_alert_groups_popup.hbs @@ -32,17 +32,17 @@ <div class="btn-toolbar pull-right"> <button rel="button-info" class="btn" {{bindAttr data-original-title="view.addButtonTooltip"}} {{action addAlertGroup target="controller"}}><i class="icon-plus"></i></button> - <button rel="button-info" class="btn" {{bindAttr data-original-title="view.removeButtonTooltip" disabled="view.isRemoveButtonDisabled"}} - {{action confirmDelete target="controller"}}><i class="icon-minus"></i></button> + <a rel="button-info" class="btn" {{bindAttr data-original-title="view.removeButtonTooltip" disabled="controller.isRemoveButtonDisabled"}} + {{action confirmDelete target="controller"}}><i class="icon-minus"></i></a> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> <i class="icon-cog"></i> <span class="caret"></span> </button> <ul class="dropdown-menu"> - <li {{bindAttr class="view.isRenameButtonDisabled:disabled"}}> + <li {{bindAttr class="controller.isRenameButtonDisabled:disabled"}}> <a href="" rel="button-info-dropdown" {{bindAttr data-original-title="view.renameButtonTooltip"}} {{action renameAlertGroup target="controller"}}>{{t alerts.actions.manage_alert_groups_popup.rename}}</a> </li> - <li {{bindAttr class="view.isDuplicateButtonDisabled:disabled"}}> + <li {{bindAttr class="controller.isDuplicateButtonDisabled:disabled"}}> <a href="" rel="button-info-dropdown" {{bindAttr data-original-title="view.duplicateButtonTooltip"}} {{action duplicateAlertGroup target="controller"}}>{{t alerts.actions.manage_alert_groups_popup.duplicate}}</a> </li> </ul> http://git-wip-us.apache.org/repos/asf/ambari/blob/0d6e0c57/ambari-web/app/templates/main/alerts/manage_alert_notifications_popup.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/alerts/manage_alert_notifications_popup.hbs b/ambari-web/app/templates/main/alerts/manage_alert_notifications_popup.hbs index 749b86b..e778360 100644 --- a/ambari-web/app/templates/main/alerts/manage_alert_notifications_popup.hbs +++ b/ambari-web/app/templates/main/alerts/manage_alert_notifications_popup.hbs @@ -63,35 +63,35 @@ <div class="span12 pull-right"> {{#if selectedAlertNotification}} <div class="row-fluid"> - <div class="span3">{{t common.name}}</div> + <div class="span3 input-label">{{t common.name}}</div> <div class="span9">{{selectedAlertNotification.name}}</div> </div> <div class="row-fluid"> - <div class="span3">{{t common.groups}}</div> + <div class="span3 input-label">{{t common.groups}}</div> <div class="span9">{{view.selectedAlertNotificationGroups}}</div> </div> <div class="row-fluid"> - <div class="span3">{{t common.severity}}</div> + <div class="span3 input-label">{{t common.severity}}</div> <div class="span9">{{view.severities}}</div> </div> <div class="row-fluid global-info"> - <div class="span3">{{t alerts.actions.manage_alert_notifications_popup.global}}</div> + <div class="span3 input-label">{{t alerts.actions.manage_alert_notifications_popup.global}}</div> <div class="span9">{{view Em.Checkbox checkedBinding="selectedAlertNotification.global" disabled="disabled" class="global-checkbox"}}</div> </div> <div class="row-fluid"> - <div class="span3">{{t alerts.actions.manage_alert_notifications_popup.method}}</div> + <div class="span3 input-label">{{t alerts.actions.manage_alert_notifications_popup.method}}</div> <div class="span9">{{selectedAlertNotification.type}}</div> </div> {{#if view.showEmailDetails}} <div class="row-fluid"> - <div class="span3">{{t alerts.actions.manage_alert_notifications_popup.email}}</div> + <div class="span3 input-label">{{t alerts.actions.manage_alert_notifications_popup.email}}</div> <div class="span9">{{view.email}}</div> </div> {{/if}} {{#if view.showSNMPDetails}} {{/if}} <div class="row-fluid"> - <div class="span3">{{t common.description}}</div> + <div class="span3 input-label">{{t common.description}}</div> <div class="span9 notification-description">{{selectedAlertNotification.description}}</div> </div> {{/if}} http://git-wip-us.apache.org/repos/asf/ambari/blob/0d6e0c57/ambari-web/app/views/main/alerts/manage_alert_groups_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/alerts/manage_alert_groups_view.js b/ambari-web/app/views/main/alerts/manage_alert_groups_view.js index bebb615..ab62b9c 100644 --- a/ambari-web/app/views/main/alerts/manage_alert_groups_view.js +++ b/ambari-web/app/views/main/alerts/manage_alert_groups_view.js @@ -28,33 +28,6 @@ App.MainAlertsManageAlertGroupView = Em.View.extend({ selectedAlertGroup: null, /** - * @type {boolean} - */ - isRemoveButtonDisabled: true, - - /** - * @type {boolean} - */ - isRenameButtonDisabled: true, - - /** - * @type {boolean} - */ - isDuplicateButtonDisabled: true, - - /** - * Enable/disable "Remove"/"Rename"/"Duplicate" buttons basing on <code>controller.selectedAlertGroup</code> - * @method buttonObserver - */ - buttonObserver: function () { - var selectedAlertGroup = this.get('controller.selectedAlertGroup'); - var flag = selectedAlertGroup && selectedAlertGroup.default; - this.set('isRemoveButtonDisabled', flag); - this.set('isRenameButtonDisabled', flag); - this.set('isDuplicateButtonDisabled', false); - }.observes('controller.selectedAlertGroup'), - - /** * Observer to prevent user select more than 1 alert group * @method onGroupSelect */ @@ -71,14 +44,22 @@ App.MainAlertsManageAlertGroupView = Em.View.extend({ }.observes('selectedAlertGroup'), /** + * Observer to provide two-way binding for group selection + */ + setGroupInController: function () { + if (!this.get('controller.isLoaded')) return; + this.set('selectedAlertGroup', [this.get('controller.selectedAlertGroup')]); + }.observes('controller.selectedAlertGroup'), + + /** * Select first alert group when all groups are loaded * @method onLoad */ onLoad: function () { if (this.get('controller.isLoaded')) { - this.set('selectedAlertGroup', this.get('controller.alertGroups')[0]); + this.setTooltips(); } - }.observes('controller.isLoaded', 'controller.alertGroups'), + }.observes('controller.isLoaded'), /** * Load alert groups, definitions and notification to have all new data @@ -97,8 +78,16 @@ App.MainAlertsManageAlertGroupView = Em.View.extend({ */ didInsertElement: function () { this.onLoad(); - App.tooltip($("[rel='button-info']")); - App.tooltip($("[rel='button-info-dropdown']"), {placement: 'left'}); + }, + + /** + * Setup tooltips for view elements + */ + setTooltips: function () { + Em.run.next(function(){ + App.tooltip($("[rel='button-info']")); + App.tooltip($("[rel='button-info-dropdown']"), {placement: 'left'}); + }); }, /** @@ -111,7 +100,10 @@ App.MainAlertsManageAlertGroupView = Em.View.extend({ * Tooltip for "Remove group"-button * @type {string} */ - removeButtonTooltip: Em.I18n.t('alerts.actions.manage_alert_groups_popup.removeButton'), + removeButtonTooltip: function () { + return this.get('controller.isRemoveButtonDisabled') ? Em.I18n.t('alerts.actions.manage_alert_groups_popup.removeButtonDisabled') : + Em.I18n.t('alerts.actions.manage_alert_groups_popup.removeButton'); + }.property('controller.isRemoveButtonDisabled'), /** * Tooltip for "Rename"-button @@ -146,6 +138,9 @@ App.MainAlertsManageAlertGroupView = Em.View.extend({ * Tooltip for "Remove definition from group"-button * @type {string} */ - removeDefinitionTooltip: Em.I18n.t('alerts.actions.manage_alert_groups_popup.removeDefinition') + removeDefinitionTooltip: function () { + return this.get('controller.isDeleteDefinitionsDisabled') ? Em.I18n.t('alerts.actions.manage_alert_groups_popup.removeDefinitionDisabled') : + Em.I18n.t('alerts.actions.manage_alert_groups_popup.removeDefinition'); + }.property('controller.isDeleteDefinitionsDisabled') });
