AMBARI-8590. Alerts UI: Alert Groups and Notifications dialogs have multiple issues. (akovalenko)

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

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('alertGroups.@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();
       }
     });

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'),

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',

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

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"}}

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>

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>&nbsp;<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>

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

ambari-web/app/views/main/alerts/manage_alert_groups_view.js

@@ -27,33 +27,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
@@ -70,15 +43,23 @@ App.MainAlertsManageAlertGroupView = Em.View.extend({
     this.set('controller.selectedDefinitions', []);
   }.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')
 
 });