AMBARI-8654. Alerts UI: Manage Notifications popup changes. (onechiporenko)

ambari-web/app/assets/data/alerts/alertNotifications.json

@@ -12,6 +12,7 @@
         ],
         "description" : "123",
         "id" : 1,
+        "global": true,
         "name" : "123",
         "notification_type" : "EMAIL",
         "properties" : {

ambari-web/app/controllers/main/alerts/manage_alert_notifications_controller.js

@@ -57,6 +57,14 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
       defaultValue: false,
       disabled: false
     },
+    allGroups: Em.Object.create({
+      value: '',
+      defaultValue: 'custom',
+      disabled: false,
+      isAll: function () {
+        return this.get('value') == 'all';
+      }.property('value')
+    }),
     method: {
       label: Em.I18n.t('alerts.actions.manage_alert_notifications_popup.method'),
       value: '',
@@ -246,10 +254,14 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
    */
   addAlertNotification: function () {
     var inputFields = this.get('inputFields');
-    inputFields.set('global.disabled', false);
+    inputFields.setProperties({
+      'global.disabled': false,
+      'allGroups.disabled': false
+    });
     Em.keys(inputFields).forEach(function (key) {
       inputFields.set(key + '.value', inputFields.get(key + '.defaultValue'));
     });
+    inputFields.set('severityFilter.value', ['OK', 'WARNING', 'CRITICAL', 'UNKNOWN']);
     this.showCreateEditPopup(false);
   },
 
@@ -273,7 +285,7 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
     inputFields.set('name.value', (addCopyToName ? 'Copy of ' : '') + selectedAlertNotification.get('name'));
     inputFields.set('groups.value', selectedAlertNotification.get('groups').toArray());
     inputFields.set('email.value', selectedAlertNotification.get('properties')['ambari.dispatch.recipients'] ?
-        selectedAlertNotification.get('properties')['ambari.dispatch.recipients'].join(', ') : '');
+      selectedAlertNotification.get('properties')['ambari.dispatch.recipients'].join(', ') : '');
     inputFields.set('SMTPServer.value', selectedAlertNotification.get('properties')['mail.smtp.host']);
     inputFields.set('SMTPPort.value', selectedAlertNotification.get('properties')['mail.smtp.port']);
     inputFields.set('SMTPUseAuthentication.value', selectedAlertNotification.get('properties')['mail.smtp.auth']);
@@ -287,6 +299,8 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
     inputFields.set('port.value', selectedAlertNotification.get('properties')['ambari.dispatch.snmp.port']);
     inputFields.set('severityFilter.value', selectedAlertNotification.get('alertStates'));
     inputFields.set('global.value', selectedAlertNotification.get('global'));
+    inputFields.set('allGroups.value', selectedAlertNotification.get('global') ? 'all' : 'custom');
+    inputFields.set('allGroups.disabled', true);
     // not allow to edit global field
     inputFields.set('global.disabled', true);
     inputFields.set('description.value', selectedAlertNotification.get('description'));
@@ -319,13 +333,6 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
         controller: this,
         templateName: require('templates/main/alerts/create_alert_notification'),
 
-        /**
-         * @type {string}
-         */
-        tooltipForGlobalCheckbox: function () {
-          return isEdit ? '' : Em.I18n.t('alerts.actions.manage_alert_notifications_popup.global.tooltip');
-        }.property(),
-
         didInsertElement: function () {
           App.tooltip($('.checkbox-tooltip'));
           this.nameValidation();
@@ -349,14 +356,22 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
 
         groupSelect: null,
 
+        /**
+         * Select all alert-groups if <code>allGroups.value</code> is 'custom'
+         * @method selectAllGroups
+         */
         selectAllGroups: function () {
-          if (!this.get('controller.inputFields.global.value')) {
+          if (this.get('controller.inputFields.allGroups.value') == 'custom') {
             this.set('groupSelect.selection', this.get('groupSelect.content').slice());
           }
         },
 
+        /**
+         * Deselect all alert-groups if <code>allGroups.value</code> is 'custom'
+         * @method clearAllGroups
+         */
         clearAllGroups: function () {
-          if (!this.get('controller.inputFields.global.value')) {
+          if (this.get('controller.inputFields.allGroups.value') == 'custom') {
             this.set('groupSelect.selection', []);
           }
         },
@@ -370,10 +385,50 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
 
         severitySelect: null,
 
+        /**
+         * Determines if all alert-groups are selected
+         * @type {boolean}
+         */
+        allGroupsSelected: function () {
+          return this.get('groupSelect.selection.length') === this.get('groupSelect.content.length');
+        }.property('groupSelect.selection.length', 'groupSelect.content.length', 'groupSelect.disabled'),
+
+        /**
+         * Determines if no one alert-group is selected
+         * @type {boolean}
+         */
+        noneGroupsSelected: function () {
+          return this.get('groupSelect.selection.length') === 0;
+        }.property('groupSelect.selection.length', 'groupSelect.content.length', 'groupSelect.disabled'),
+
+        /**
+         * Determines if all severities are selected
+         * @type {boolean}
+         */
+        allSeveritySelected: function () {
+          return this.get('severitySelect.selection.length') === this.get('severitySelect.content.length');
+        }.property('severitySelect.selection.length', 'severitySelect.content.length'),
+
+        /**
+         * Determines if no one severity is selected
+         * @type {boolean}
+         */
+        noneSeveritySelected: function () {
+          return this.get('severitySelect.selection.length') === 0;
+        }.property('severitySelect.selection.length', 'severitySelect.content.length'),
+
+        /**
+         * Select all severities
+         * @method selectAllSeverity
+         */
         selectAllSeverity: function () {
           this.set('severitySelect.selection', this.get('severitySelect.content').slice());
         },
 
+        /**
+         * Deselect all severities
+         * @method clearAllSeverity
+         */
         clearAllSeverity: function () {
           this.set('severitySelect.selection', []);
         }
@@ -435,13 +490,13 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
       AlertTarget: {
         name: inputFields.get('name.value'),
         description: inputFields.get('description.value'),
-        global: inputFields.get('global.value'),
+        global: inputFields.get('allGroups.value') === 'all',
         notification_type: inputFields.get('method.value'),
         alert_states: inputFields.get('severityFilter.value'),
         properties: properties
       }
     };
-    if (!inputFields.get('global.value')) {
+    if (inputFields.get('allGroups.value') == 'custom') {
       apiObject.AlertTarget.groups = inputFields.get('groups.value').mapProperty('id');
     }
     return apiObject;
@@ -524,16 +579,16 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
   deleteAlertNotification: function () {
     var self = this;
     return App.showConfirmationPopup(function () {
-          App.ajax.send({
-            name: 'alerts.delete_alert_notification',
-            sender: self,
-            data: {
-              id: self.get('selectedAlertNotification.id')
-            },
-            success: 'deleteAlertNotificationSuccessCallback'
-          });
-        }, Em.I18n.t('alerts.actions.manage_alert_notifications_popup.confirmDeleteBody').format(this.get('selectedAlertNotification.name')),
-        null, Em.I18n.t('alerts.actions.manage_alert_notifications_popup.confirmDeleteHeader'), Em.I18n.t('common.delete'));
+        App.ajax.send({
+          name: 'alerts.delete_alert_notification',
+          sender: self,
+          data: {
+            id: self.get('selectedAlertNotification.id')
+          },
+          success: 'deleteAlertNotificationSuccessCallback'
+        });
+      }, Em.I18n.t('alerts.actions.manage_alert_notifications_popup.confirmDeleteBody').format(this.get('selectedAlertNotification.name')),
+      null, Em.I18n.t('alerts.actions.manage_alert_notifications_popup.confirmDeleteHeader'), Em.I18n.t('common.delete'));
   },
 
   /**
@@ -595,7 +650,7 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
           var flag = validator.isValidConfigKey(name);
           if (flag) {
             if (this.get('controller.inputFields.customProperties').mapProperty('name').contains(name) ||
-                this.get('controller.ignoredCustomProperties').contains(name)) {
+              this.get('controller.ignoredCustomProperties').contains(name)) {
               this.set('errorMessage', Em.I18n.t('alerts.notifications.addCustomPropertyPopup.error.propertyExists'));
               flag = false;
             }

ambari-web/app/messages.js

@@ -1886,6 +1886,7 @@ Em.I18n.translations = {
   'alerts.actions.manage_alert_groups_popup.selectDefsDialog.message.warning': 'At least one alert definition needs to be selected.',
 
   'alerts.actions.manage_alert_notifications_popup.header':'Manage Alert Notifications',
+  'alerts.actions.manage_alert_notifications_popup.noAlertNotification':'No alert notifications defined',
   'alerts.actions.manage_alert_notifications_popup.addButton':'Create new Alert Notification',
   'alerts.actions.manage_alert_notifications_popup.addHeader':'Create Alert Notification',
   'alerts.actions.manage_alert_notifications_popup.removeButton':'Delete Alert Notification',
@@ -1906,8 +1907,7 @@ Em.I18n.translations = {
   'alerts.actions.manage_alert_notifications_popup.community':'Community',
   'alerts.actions.manage_alert_notifications_popup.port':'Port',
   'alerts.actions.manage_alert_notifications_popup.global':'Global',
-  'alerts.actions.manage_alert_notifications_popup.global.tooltip':'Check this checkbox to make the notification apply globally to all groups defined in Ambari',
-  'alerts.actions.manage_alert_notifications_popup.severityFilter':'Severity Filter',
+  'alerts.actions.manage_alert_notifications_popup.severityFilter':'Severity',
   'alerts.actions.manage_alert_notifications_popup.clearAll':'Clear All',
   'alerts.actions.manage_alert_notifications_popup.selectAll':'Select All',
   'alerts.actions.manage_alert_notifications_popup.confirmDeleteHeader':'Confirm Delete',

ambari-web/app/templates/main/alerts/create_alert_notification.hbs

@@ -31,31 +31,26 @@
     </div>
     {{! alert-notification name end }}
 
-    {{! alert-notification is global }}
-    <div class="control-group">
-      <label class="control-label" for="inputGlobal">{{controller.inputFields.global.label}}</label>
-
-      <div class="controls">
-        <span class="checkbox-tooltip" {{bindAttr data-original-title="view.tooltipForGlobalCheckbox"}}>
-          {{view Em.Checkbox checkedBinding="controller.inputFields.global.value" disabledBinding="controller.inputFields.global.disabled" id="inputGlobal" class="input-xlarge"}}
-        </span>
-      </div>
-    </div>
-    {{! alert-notification is global end }}
-
     {{! alert-notification groups }}
     <div class="control-group">
       <label class="control-label" for="inputGroups">{{controller.inputFields.groups.label}}</label>
 
       <div class="controls">
-        {{view view.groupsSelectView multiple="true" id="inputGroups" class="input-large"
-          disabledBinding="controller.inputFields.global.value"
-          selectionBinding="controller.inputFields.groups.value"
-          contentBinding="controller.allAlertGroups"
-          optionLabelPath="content.displayName"
-        }}
-        <a href="#" {{action selectAllGroups target="view"}} {{bindAttr class="controller.inputFields.global.value:disabled"}}>{{t alerts.actions.manage_alert_notifications_popup.selectAll}}</a> |
-        <a href="#" {{action clearAllGroups target="view"}} {{bindAttr class="controller.inputFields.global.value:disabled"}}>{{t alerts.actions.manage_alert_notifications_popup.clearAll}}</a>
+
+        <div>
+          {{view Ember.RadioButton name="allGroups" selectionBinding="controller.inputFields.allGroups.value" disabledBinding="controller.inputFields.allGroups.disabled" value="all"}} {{t common.all}}
+        </div>
+        <div>
+          {{view Ember.RadioButton name="allGroups" selectionBinding="controller.inputFields.allGroups.value" disabledBinding="controller.inputFields.allGroups.disabled" value="custom"}} {{t common.custom}}
+        </div>
+          {{view view.groupsSelectView multiple="true" id="inputGroups" class="input-large"
+            disabledBinding="controller.inputFields.allGroups.isAll"
+            selectionBinding="controller.inputFields.groups.value"
+            contentBinding="controller.allAlertGroups"
+            optionLabelPath="content.displayName"
+          }}
+          <a href="#" {{action selectAllGroups target="view"}} {{bindAttr class="controller.inputFields.allGroups.isAll:disabled view.allGroupsSelected:disabled"}}>{{t alerts.actions.manage_alert_notifications_popup.selectAll}}</a> |
+          <a href="#" {{action clearAllGroups target="view"}} {{bindAttr class="controller.inputFields.allGroups.isAll:disabled view.noneGroupsSelected:disabled"}}>{{t alerts.actions.manage_alert_notifications_popup.clearAll}}</a>
       </div>
     </div>
     {{! alert-notification groups end }}
@@ -69,8 +64,8 @@
         selectionBinding="controller.inputFields.severityFilter.value"
         contentBinding="controller.severities"
         }}
-        <a href="#" {{action selectAllSeverity target="view"}}>{{t alerts.actions.manage_alert_notifications_popup.selectAll}}</a> |
-        <a href="#" {{action clearAllSeverity target="view"}}>{{t alerts.actions.manage_alert_notifications_popup.clearAll}}</a>
+        <a href="#" {{action selectAllSeverity target="view"}} {{bindAttr class="view.allSeveritySelected:disabled"}}>{{t alerts.actions.manage_alert_notifications_popup.selectAll}}</a> |
+        <a href="#" {{action clearAllSeverity target="view"}} {{bindAttr class="view.noneSeveritySelected:disabled"}}>{{t alerts.actions.manage_alert_notifications_popup.clearAll}}</a>
       </div>
     </div>
     {{! alert-notification severity end }}

ambari-web/app/templates/main/alerts/manage_alert_notifications_popup.hbs

@@ -61,38 +61,46 @@
 
           <div class="row-fluid">
             <div class="span12 pull-right">
-              {{#if selectedAlertNotification}}
-                <div class="row-fluid">
-                  <div class="span3 input-label">{{t common.name}}</div>
-                  <div class="span9">{{selectedAlertNotification.name}}</div>
-                </div>
-                <div class="row-fluid">
-                  <div class="span3 input-label">{{t common.groups}}</div>
-                  <div class="span9">{{view.selectedAlertNotificationGroups}}</div>
-                </div>
-                <div class="row-fluid">
-                  <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 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 input-label">{{t alerts.actions.manage_alert_notifications_popup.method}}</div>
-                  <div class="span9">{{selectedAlertNotification.type}}</div>
-                </div>
-                {{#if view.showEmailDetails}}
+              {{#if alertNotifications.length}}
+                {{#if selectedAlertNotification}}
                   <div class="row-fluid">
-                    <div class="span3 input-label">{{t alerts.actions.manage_alert_notifications_popup.email}}</div>
-                    <div class="span9">{{view.email}}</div>
+                    <div class="span3 input-label">{{t common.name}}</div>
+                    <div class="span9">{{selectedAlertNotification.name}}</div>
+                  </div>
+                  <div class="row-fluid">
+                    <div class="span3 input-label">{{t common.groups}}</div>
+                    <div class="span9">
+                      {{#if selectedAlertNotification.global}}
+                        {{t common.all}}
+                      {{else}}
+                        {{view.selectedAlertNotificationGroups}}
+                      {{/if}}
+                    </div>
+                  </div>
+                  <div class="row-fluid">
+                    <div class="span3 input-label">{{t common.severity}}</div>
+                    <div class="span9">{{view.severities}}</div>
+                  </div>
+                  <div class="row-fluid">
+                    <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 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 input-label">{{t common.description}}</div>
+                    <div class="span9 notification-description">{{selectedAlertNotification.description}}</div>
                   </div>
                 {{/if}}
-                {{#if view.showSNMPDetails}}
-                {{/if}}
-                <div class="row-fluid">
-                  <div class="span3 input-label">{{t common.description}}</div>
-                  <div class="span9 notification-description">{{selectedAlertNotification.description}}</div>
+              {{else}}
+                <div class="alert alert-info">
+                  {{t alerts.actions.manage_alert_notifications_popup.noAlertNotification}}
                 </div>
               {{/if}}
             </div>

ambari-web/app/utils/ember_reopen.js

@@ -118,16 +118,16 @@ Ember.isBlank = function(obj) {
  *
  */
 Ember.RadioButton = Ember.Checkbox.extend({
-  tagName : "input",
-  type : "radio",
-  attributeBindings : [ "type", "name", "value", "checked", "style" ],
-  style: "vertical-align: middle; margin: 0px;" ,
-  click : function() {
+  tagName: "input",
+  type: "radio",
+  attributeBindings: [ "type", "name", "value", "checked", "style", "disabled" ],
+  style: "vertical-align: middle; margin: 0px;",
+  click: function () {
     this.set("selection", this.$().val())
   },
-  checked : function() {
+  checked: function () {
     return this.get("value") == this.get("selection");
-  }.property('value','selection')
+  }.property('value', 'selection')
 });
 
 /**

ambari-web/test/controllers/main/alerts/manage_alert_notifications_controller_test.js

@@ -130,12 +130,15 @@ describe('App.ManageAlertNotificationsController', function () {
         },
         global: {
           value: false
-        }
+        },
+        allGroups: Em.Object.create({
+          value: 'custom'
+        })
       }));
       controller.addAlertNotification();
 
       Em.keys(controller.get('inputFields')).forEach(function (key) {
-        expect(controller.get('inputFields.' + key + '.value')).to.equal(controller.get('inputFields.' + key + '.defaultValue'));
+        expect(controller.get('inputFields.' + key + '.value')).to.eql(controller.get('inputFields.' + key + '.defaultValue'));
       });
       expect(controller.showCreateEditPopup.calledOnce).to.be.true;
     });
@@ -201,6 +204,9 @@ describe('App.ManageAlertNotificationsController', function () {
         global: {
           value: false
         },
+        allGroups: {
+          value: false
+        },
         method: {
           value: ''
         },
@@ -265,6 +271,10 @@ describe('App.ManageAlertNotificationsController', function () {
           value: true,
           disabled: true
         },
+        allGroups: {
+          value: 'all',
+          disabled: true
+        },
         method: {
           value: 'EMAIL'
         },
@@ -337,7 +347,8 @@ describe('App.ManageAlertNotificationsController', function () {
         view = controller.showCreateEditPopup().get('bodyClass').create({
           controller: Em.Object.create({
             inputFields: {
-              global: {}
+              global: {},
+              allGroups: {}
             }
           }),
           groupSelect: Em.Object.create({
@@ -350,13 +361,13 @@ describe('App.ManageAlertNotificationsController', function () {
 
       describe('#selectAllGroups', function () {
 
-        it('should check inputFields.global.value', function () {
+        it('should check inputFields.allGroups.value', function () {
 
-          view.set('controller.inputFields.global.value', true);
+          view.set('controller.inputFields.allGroups.value', 'all');
           view.selectAllGroups();
           expect(view.get('groupSelect.selection')).to.eql([]);
 
-          view.set('controller.inputFields.global.value', false);
+          view.set('controller.inputFields.allGroups.value', 'custom');
           view.selectAllGroups();
           expect(view.get('groupSelect.selection')).to.eql([{}, {}]);
 
@@ -366,16 +377,16 @@ describe('App.ManageAlertNotificationsController', function () {
 
       describe('#clearAllGroups', function () {
 
-        it('should check inputFields.global.value', function () {
+        it('should check inputFields.allGroups.value', function () {
 
-          view.set('controller.inputFields.global.value', false);
+          view.set('controller.inputFields.allGroups.value', 'custom');
           view.selectAllGroups();
 
-          view.set('controller.inputFields.global.value', true);
+          view.set('controller.inputFields.allGroups.value', 'all');
           view.clearAllGroups();
           expect(view.get('groupSelect.selection')).to.eql([{}, {}]);
 
-          view.set('controller.inputFields.global.value', false);
+          view.set('controller.inputFields.allGroups.value', 'custom');
           view.clearAllGroups();
           expect(view.get('groupSelect.selection')).to.eql([]);
 
@@ -396,6 +407,9 @@ describe('App.ManageAlertNotificationsController', function () {
       groups: {
         value: [{id: 1}, {id: 2}, {id: 3}]
       },
+      allGroups: {
+        value: 'custom'
+      },
       global: {
         value: false
       },
@@ -476,7 +490,7 @@ describe('App.ManageAlertNotificationsController', function () {
     it('should ignore groups if global is true', function () {
 
       controller.set('inputFields', inputFields);
-      controller.set('inputFields.global.value', true);
+      controller.set('inputFields.allGroups.value', 'all');
 
       var result = controller.formatNotificationAPIObject();
       expect(Em.keys(result.AlertTarget)).to.not.contain('groups');