AMBARI-8915. Alerts UI: Maint Mode status display and general cleanup #6. (akovalenko)

ambari-web/app/controllers/global/update_controller.js

@@ -464,7 +464,7 @@ App.UpdateController = Em.Controller.extend({
 
   updateUnhealthyAlertInstances: function (callback) {
     var testUrl = '/data/alerts/alert_instances.json';
-    var realUrl = '/alerts?fields=*&Alert/state.in(CRITICAL,WARNING)';
+    var realUrl = '/alerts?fields=*&Alert/state.in(CRITICAL,WARNING)&Alert/maintenance_state.in(OFF)';
     var url = this.getUrl(testUrl, realUrl);
 
     App.HttpClient.get(url, App.alertInstanceMapper, {

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

@@ -255,8 +255,7 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
   addAlertNotification: function () {
     var inputFields = this.get('inputFields');
     inputFields.setProperties({
-      'global.disabled': false,
-      'allGroups.disabled': false
+      'global.disabled': false
     });
     Em.keys(inputFields).forEach(function (key) {
       inputFields.set(key + '.value', inputFields.get(key + '.defaultValue'));
@@ -300,7 +299,6 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
     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'));
@@ -354,7 +352,7 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
           var emailTo = this.get('controller.inputFields.email.value');
           if (emailTo && !validator.isValidEmail(emailTo)) {
             this.set('parentView.hasErrors', true);
-            this.set('controller.inputFields.email.errorMsg', 'Must be a valid email address');
+            this.set('controller.inputFields.email.errorMsg', Em.I18n.t('alerts.notifications.error.email'));
           } else {
             this.set('parentView.hasErrors', false);
             this.set('controller.inputFields.email.errorMsg', null);
@@ -365,7 +363,7 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
           var emailFrom = this.get('controller.inputFields.emailFrom.value');
           if (emailFrom && !validator.isValidEmail(emailFrom)) {
             this.set('parentView.hasErrors', true);
-            this.set('controller.inputFields.emailFrom.errorMsg', 'Must be a valid email address');
+            this.set('controller.inputFields.emailFrom.errorMsg', Em.I18n.t('alerts.notifications.error.email'));
           } else {
             this.set('parentView.hasErrors', false);
             this.set('controller.inputFields.emailFrom.errorMsg', null);
@@ -376,7 +374,7 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
           var value = this.get('controller.inputFields.SMTPPort.value');
           if (value && (!validator.isValidInt(value) || value < 0)) {
             this.set('parentView.hasErrors', true);
-            this.set('controller.inputFields.SMTPPort.errorMsg', 'Invalid! Please enter positive integer.');
+            this.set('controller.inputFields.SMTPPort.errorMsg', Em.I18n.t('alerts.notifications.error.integer'));
           } else {
             this.set('parentView.hasErrors', false);
             this.set('controller.inputFields.SMTPPort.errorMsg', null);
@@ -387,7 +385,7 @@ App.ManageAlertNotificationsController = Em.Controller.extend({
           var value = this.get('controller.inputFields.port.value');
           if (value && (!validator.isValidInt(value) || value < 0)) {
             this.set('parentView.hasErrors', true);
-            this.set('controller.inputFields.port.errorMsg', 'Invalid! Please enter positive integer.');
+            this.set('controller.inputFields.port.errorMsg', Em.I18n.t('alerts.notifications.error.integer'));
           } else {
             this.set('parentView.hasErrors', false);
             this.set('controller.inputFields.port.errorMsg', null);

ambari-web/app/messages.js

@@ -884,7 +884,7 @@ Em.I18n.translations = {
   'alerts.table.header.lastTriggered': 'Last Status Changed',
   'alerts.table.header.lastChecked': 'Last Checked',
   'alerts.table.header.lastTrigger': 'Last Changed',
-  'alerts.table.header.check.response': 'Check Response',
+  'alerts.table.header.check.response': 'Response',
   'alerts.table.header.definitionName': 'Alert Definition Name',
   'alerts.table.header.notification': 'Notification',
   'alerts.table.state': 'State',
@@ -910,6 +910,9 @@ Em.I18n.translations = {
   'alerts.definition.details.noAlerts': 'No alert instances to show',
   'alerts.definition.details.configs.thresholdsErrorMsg': 'Critical threshold should be larger than warning threshold',
 
+  'alerts.notifications.error.email': 'Must be a valid email address',
+  'alerts.notifications.error.integer': 'Must be an integer',
+
   'alerts.notifications.addCustomPropertyPopup.header': 'Add Property',
   'alerts.notifications.addCustomPropertyPopup.error.propertyExists': 'Custom Property with current name already exists',
   'alerts.notifications.addCustomPropertyPopup.error.invalidPropertyName': 'Property name can only contain letters, numbers or . -_* characters',
@@ -1943,7 +1946,7 @@ Em.I18n.translations = {
   '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',
-  'alerts.actions.manage_alert_notifications_popup.confirmDeleteBody':'Are you sure you want to delete {0} group?',
+  'alerts.actions.manage_alert_notifications_popup.confirmDeleteBody':'Are you sure you want to delete {0} notification?',
 
   'hosts.host.add':'Add New Hosts',
   'hosts.table.noHosts':'No hosts to display',

ambari-web/app/models/alert_instance.js

@@ -140,6 +140,14 @@ App.AlertInstance = DS.Model.extend({
     return this.get('serviceName') === 'AMBARI';
   }.property('serviceName'),
 
+  /**
+   * Text minified to length 50 or less chars
+   * @type {String}
+   */
+  textMinified: function () {
+    return this.get('text') ? (this.get('text').length > 52 ? this.get('text').substring(0, 50) + '...' : this.get('text')) : '';
+  }.property('text'),
+
   shortState: {
     'CRITICAL': 'CRIT',
     'WARNING': 'WARN',

ambari-web/app/styles/alerts.less

@@ -280,6 +280,11 @@
     cursor: pointer;
   }
 
+  .box .box-header h4 {
+    color: #333;
+    font-size: 16px;
+    font-weight: 500;
+  }
 }
 
 .alert-configs {
@@ -527,6 +532,10 @@
   max-height: 246px;
 }
 
+.instance-text {
+  font-size: 0.8em;
+}
+
 .alerts-popup-wrap {
   .top-wrap {
     width: 100%;

ambari-web/app/templates/common/modal_popups/alerts_popup.hbs

@@ -39,7 +39,14 @@
                       <a {{action "goToHostAlerts" alertInstance.host target="view"}} href="#">{{alertInstance.host.hostName}}</a>
                     {{/if}}
                   </div>
-                  <div class="name-text"><a href="#" {{action "gotoAlertDetails" alertInstance target="view"}}>{{alertInstance.label}}</a></div>
+                  <div class="name-text">
+                    <div>
+                      <a href="#" {{action "gotoAlertDetails" alertInstance target="view"}}>{{alertInstance.label}}</a>
+                    </div>
+                    <div class="instance-text">
+                      {{alertInstance.textMinified}}
+                    </div>
+                  </div>
                   <div class="status-col" rel="alert-status-tooltip" {{bindAttr title="alertInstance.lastTriggered"}}>
                     <span>
                       <span class="status-icon">{{{alertInstance.status}}}</span>

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

@@ -38,10 +38,10 @@
       <div class="controls">
 
         <div>
-          {{view Ember.RadioButton name="allGroups" selectionBinding="controller.inputFields.allGroups.value" disabledBinding="controller.inputFields.allGroups.disabled" value="all"}} {{t common.all}}
+          {{view Ember.RadioButton name="allGroups" selectionBinding="controller.inputFields.allGroups.value" 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}}
+          {{view Ember.RadioButton name="allGroups" selectionBinding="controller.inputFields.allGroups.value" value="custom"}} {{t common.custom}}
         </div>
           {{view view.groupsSelectView multiple="true" id="inputGroups" class="input-large"
             disabledBinding="controller.inputFields.allGroups.isAll"
@@ -125,6 +125,18 @@
 
       </div>
 
+      <div {{bindAttr class=":control-group controller.inputFields.emailFrom.errorMsg:error"}}>
+        <label class="control-label">{{controller.inputFields.emailFrom.label}}</label>
+
+        <div class="controls">
+          {{view Em.TextField valueBinding="controller.inputFields.emailFrom.value" class="input-xlarge"}}
+        </div>
+
+        <div class="controls error-msg">
+          {{controller.inputFields.emailFrom.errorMsg}}
+        </div>
+      </div>
+
       <div class="control-group">
         <label class="control-label" for="inputUseAuthentication">{{controller.inputFields.SMTPUseAuthentication.label}}</label>
 
@@ -145,7 +157,7 @@
         <label class="control-label">{{controller.inputFields.SMTPPassword.label}}</label>
 
         <div class="controls">
-          {{view Em.TextField disabledBinding="controller.inputFields.SMTPUseAuthentication.inversedValue" valueBinding="controller.inputFields.SMTPPassword.value" class="input-xlarge"}}
+          {{view Em.TextField type="password" disabledBinding="controller.inputFields.SMTPUseAuthentication.inversedValue" valueBinding="controller.inputFields.SMTPPassword.value" class="input-xlarge"}}
         </div>
       </div>
 
@@ -156,18 +168,6 @@
           {{view Em.Checkbox disabledBinding="controller.inputFields.SMTPUseAuthentication.inversedValue" checkedBinding="controller.inputFields.SMTPSTARTTLS.value" id="inputSMTPSTARTTLS" class="input-xlarge"}}
         </div>
       </div>
-
-      <div {{bindAttr class=":control-group controller.inputFields.emailFrom.errorMsg:error"}}>
-        <label class="control-label">{{controller.inputFields.emailFrom.label}}</label>
-
-        <div class="controls">
-          {{view Em.TextField valueBinding="controller.inputFields.emailFrom.value" class="input-xlarge"}}
-        </div>
-
-        <div class="controls error-msg">
-          {{controller.inputFields.emailFrom.errorMsg}}
-        </div>
-      </div>
     {{else}}
       <div class="control-group">
         <label class="control-label">{{controller.inputFields.version.label}}</label>

ambari-web/app/templates/main/service/info/summary.hbs

@@ -49,7 +49,9 @@
     <div class="box">
       <div class="box-header summary-box-header">
         <h4>{{controller.content.label}} {{t services.service.info.menu.summary}}</h4>
-        <span {{action "showServiceAlertsPopup" controller.content target="controller"}}{{bindAttr class=":pull-right view.alertsCount:alerts-count-label:no-alerts-label :label"}}>{{view.alertsCountLabel}}</span>
+        {{#if view.alertsCount}}
+          <span {{action "showServiceAlertsPopup" controller.content target="controller"}}{{bindAttr class=":pull-right view.alertsCount:alerts-count-label:no-alerts-label :label"}}>{{view.alertsCountLabel}}</span>
+        {{/if}}
       </div>
       <div class="service-content">
         <table id="summary-info" class="table no-borders table-condensed">

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

@@ -95,7 +95,7 @@ App.ManageAlertNotificationsView = Em.View.extend({
     if (this.get('controller.isLoaded')) {
       var notifications = this.get('controller.alertNotifications');
       if (notifications && notifications.length) {
-        this.set('selectedAlertNotification', notifications[0]);
+        this.set('selectedAlertNotification', this.get('controller.selectedAlertNotification') || notifications[0]);
         this.buttonObserver();
       }  else {
         this.set('selectedAlertNotification', null);

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

@@ -272,8 +272,7 @@ describe('App.ManageAlertNotificationsController', function () {
           disabled: true
         },
         allGroups: {
-          value: 'all',
-          disabled: true
+          value: 'all'
         },
         method: {
           value: 'EMAIL'

ambari-web/test/models/alert_instance_test.js

@@ -56,5 +56,34 @@ describe('App.AlertInstance', function () {
     });
 
   });
+
+  describe('#textMinified', function () {
+
+    var tests = [
+      {
+        m: 'should return empty string',
+        t: undefined,
+        r: ''
+      },
+      {
+        m: 'should return minified string',
+        t: '012345678901234567890123456789012345678901234567890123456789',
+        r: '01234567890123456789012345678901234567890123456789...'
+      },
+      {
+        m: 'should return initial string',
+        t: '01234567890123456789012345678901234567890123456789',
+        r: '01234567890123456789012345678901234567890123456789'
+      }
+    ];
+
+    tests.forEach(function(test){
+      it(test.m, function () {
+        model.set('text', test.t);
+        expect(model.get('textMinified')).to.equal(test.r);
+      });
+    });
+
+  });
   
 });