AMBARI-9310. Alerts: Services badge shows red when there are only warn level alerts

ambari-web/app/controllers/main/alert_definitions_controller.js

@@ -90,15 +90,24 @@ App.MainAlertDefinitionsController = Em.ArrayController.extend({
   },
 
   /**
-   * Calculate critical/warning count for each service, to show up the label on services menu
+   * Calculate critical count for each service, to show up the label on services menu
    * @method getCriticalAlertsCountForService
    * @return {number}
    */
   getCriticalAlertsCountForService: function (service) {
     var alertsForService = this.get('content').filterProperty('service', service);
-    return alertsForService.filterProperty('isCriticalOrWarning').get('length');
+    return alertsForService.filterProperty('isCritical').get('length');
   },
 
+  /**
+   * Calculate critical/warning count for each service, to show up the label on services menu
+   * @method getCriticalOrWarningAlertsCountForService
+   * @return {number}
+   */
+  getCriticalOrWarningAlertsCountForService: function (service) {
+    var alertsForService = this.get('content').filterProperty('service', service);
+    return alertsForService.filterProperty('isCriticalOrWarning').get('length');
+  },
 
   /**
    *  ========================== alerts popup dialog =========================

ambari-web/app/models/service.js

@@ -142,9 +142,14 @@ App.Service = DS.Model.extend({
     return this.t('services.service.config.restartService.TooltipMessage').format(hcCount, hostCount, hostsMsg);
   }.property('restartRequiredHostsAndComponents'),
 
-  criticalAlertsCount: function () {
+  hasCriticalAlerts: function () {
     var controller = App.router.get('mainAlertDefinitionsController');
-    return controller.getCriticalAlertsCountForService(this);
+    return controller.getCriticalAlertsCountForService(this) > 0;
+  }.property('alertsCount'),
+
+  alertsCount: function () {
+    var controller = App.router.get('mainAlertDefinitionsController');
+    return controller.getCriticalOrWarningAlertsCountForService(this);
   }.property('App.router.mainAlertDefinitionsController.content.@each.isCriticalOrWarning')
 });
 

ambari-web/app/styles/alerts.less

@@ -460,15 +460,18 @@
 }
 
 .service-block .summary-box-header {
-  .alerts-count-label,.no-alerts-label {
+  .alerts-crit-count, .alerts-warn-count, .no-alerts-label {
     padding: 4px 5px;
     margin: 4px;
     font-size: 14px;
     cursor: pointer;
   }
-  .alerts-count-label {
+  .alerts-crit-count {
     background: @health-status-red;
   }
+  .alerts-warn-count {
+    background: @health-status-orange;
+  }
   .no-alerts-label {
     background: @health-status-green;
   }

ambari-web/app/styles/application.less

@@ -257,12 +257,17 @@ footer {
         .label {
           padding: 0 0 0 3px;
         }
-        .operations-count {
-          background: @health-status-red;
+        .alerts-count {
           padding: 1px 4px;
           float: right;
           margin-right: 5px;
           margin-top: 3px;
+          &.alerts-crit-count {
+            background: @health-status-red;
+          }
+          &.alerts-warn-count {
+            background: @health-status-orange;
+          }
         }
       }
       .top-nav-dropdown-menu > li{
@@ -2219,12 +2224,18 @@ a:focus {
       .label {
         padding: 0 0 0 3px;
       }
-      .label.operations-count {
+      .label.alerts-count {
         padding: 1px 4px;
         background: @health-status-red;
         float: right;
         margin-right: 5px;
         margin-top: 3px;
+        &.alerts-crit-count {
+          background: @health-status-red;
+        }
+        &.alerts-warn-count {
+          background: @health-status-orange;
+        }
       }
     }
 

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

@@ -50,7 +50,14 @@
       <div class="box-header summary-box-header">
         <h4>{{controller.content.label}} {{t services.service.info.menu.summary}}</h4>
         {{#if view.hasAlertDefinitions}}
-          <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=":label :pull-right view.hasCriticalAlerts:alerts-crit-count:alerts-warn-count"}}>
+              {{view.alertsCount}} {{pluralize view.alertsCount singular="alert" plural="alerts"}}</span>
+          {{else}}
+            <span {{action "showServiceAlertsPopup" controller.content target="controller"}}
+              class="label pull-right no-alerts-label">{{t services.service.summary.alerts.noAlerts}}</span>
+          {{/if}}
         {{/if}}
       </div>
       <div class="service-content">

ambari-web/app/templates/main/service/menu_item.hbs

@@ -18,7 +18,7 @@
 
 <a {{bindAttr href="view.link"}}>
   {{#if view.alertsCount}}
-    <span class="label operations-count">
+    <span {{bindAttr class=":label :alerts-count view.hasCriticalAlerts:alerts-crit-count:alerts-warn-count"}}>
       {{view.alertsCount}}
     </span>
   {{/if}}

ambari-web/app/templates/main/service/services/hive.hbs

@@ -21,9 +21,9 @@
     <i class="pull-left icon-empty"></i>
     {{view App.MainDashboardServiceHealthView serviceBinding="view.service"}}
     <a {{action selectService view.service href=true}}>{{view.service.displayName}}</a>
-    {{#if view.criticalAlertsCount}}
+    {{#if view.alertsCount}}
       <a href="#" class="label label-important" {{action "showAlertsPopup" view.service target="view.parentView"}}>
-        {{view.criticalAlertsCount}}
+        {{view.alertsCount}}
       </a>
     {{/if}}
   </div>

ambari-web/app/templates/main/service/services/mapreduce2.hbs

@@ -22,9 +22,9 @@
     <i class="pull-left icon-empty"></i>
     {{view App.MainDashboardServiceHealthView serviceBinding="view.service"}}
     <a {{action selectService view.service href=true}}>{{view.service.displayName}}</a>
-    {{#if view.criticalAlertsCount}}
+    {{#if view.alertsCount}}
       <a href="#" class="label label-important" {{action "showAlertsPopup" view.service target="view.parentView"}}>
-        {{view.criticalAlertsCount}}
+        {{view.alertsCount}}
       </a>
     {{/if}}
   </div>

ambari-web/app/templates/main/service/services/oozie.hbs

@@ -21,9 +21,9 @@
     <i class="pull-left icon-empty"></i>
     {{view App.MainDashboardServiceHealthView serviceBinding="view.service"}}
     <a {{action selectService view.service href=true}}>{{view.service.displayName}}</a>
-    {{#if view.criticalAlertsCount}}
+    {{#if view.alertsCount}}
       <a href="#" class="label label-important" {{action "showAlertsPopup" view.service target="view.parentView"}}>
-        {{view.criticalAlertsCount}}
+        {{view.alertsCount}}
       </a>
     {{/if}}
   </div>

ambari-web/app/templates/main/service/services/zookeeper.hbs

@@ -21,9 +21,9 @@
     <i class="pull-left icon-empty"></i>
     {{view App.MainDashboardServiceHealthView serviceBinding="view.service"}}
     <a {{action selectService view.service href=true}}>{{view.service.displayName}}</a>
-    {{#if view.criticalAlertsCount}}
+    {{#if view.alertsCount}}
       <a href="#" class="label label-important" {{action "showAlertsPopup" view.service target="view.parentView"}}>
-        {{view.criticalAlertsCount}}
+        {{view.alertsCount}}
       </a>
     {{/if}}
   </div>

ambari-web/app/views/main/service/info/summary.js

@@ -240,17 +240,13 @@ App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, {
   componentsCount: null,
   hostsCount: null,
 
-  /*
-   * alerts label on summary box header. no alerts/ {cnt} alerts
-   */
-  alertsCountLabel: function () {
-    var cnt = this.get('controller.content.criticalAlertsCount');
-    return cnt? Em.I18n.t('services.service.summary.alerts.alertsExist').format(cnt) :
-      Em.I18n.t('services.service.summary.alerts.noAlerts');
-  }.property('controller.content.criticalAlertsCount'),
   alertsCount: function () {
-    return !!this.get('controller.content.criticalAlertsCount');
-  }.property('controller.content.criticalAlertsCount'),
+    return this.get('controller.content.alertsCount');
+  }.property('controller.content.alertsCount'),
+
+  hasCriticalAlerts: function () {
+    return this.get('controller.content.hasCriticalAlerts');
+  }.property('controller.content.alertsCount'),
 
   /**
    * Define if service has alert definitions defined

ambari-web/app/views/main/service/menu.js

@@ -71,8 +71,12 @@ App.MainServiceMenuView = Em.CollectionView.extend({
     }.property('parentView.activeServiceId'),
 
     alertsCount: function () {
-      return this.get('content.criticalAlertsCount');
-    }.property('content.criticalAlertsCount'),
+      return this.get('content.alertsCount');
+    }.property('content.alertsCount'),
+
+    hasCriticalAlerts: function () {
+      return this.get('content.hasCriticalAlerts');
+    }.property('content.hasCriticalAlerts'),
 
     isConfigurable: function () {
       return !App.get('services.noConfigTypes').contains(this.get('content.serviceName'));
@@ -169,8 +173,12 @@ App.TopNavServiceMenuView = Em.CollectionView.extend({
     }.property('parentView.activeServiceId'),
 
     alertsCount: function () {
-      return this.get('content.criticalAlertsCount');
-    }.property('content.criticalAlertsCount'),
+      return this.get('content.alertsCount');
+    }.property('content.alertsCount'),
+
+    hasCriticalAlerts: function () {
+      return this.get('content.hasCriticalAlerts');
+    }.property('content.hasCriticalAlerts'),
 
     isConfigurable: function () {
       return !App.get('services.noConfigTypes').contains(this.get('content.serviceName'));

ambari-web/app/views/main/service/service.js

@@ -142,9 +142,13 @@ App.MainDashboardServiceView = Em.View.extend({
     return (value || value == 0) ? value : this.t('services.service.summary.notAvailable');
   },
 
-  criticalAlertsCount: function () {
-    return this.get('service.criticalAlertsCount');
-  }.property('service.criticalAlertsCount'),
+  alertsCount: function () {
+    return this.get('service.alertsCount');
+  }.property('service.alertsCount'),
+
+  hasCriticalAlerts: function () {
+    return this.get('service.hasCriticalAlerts');
+  }.property('service.hasCriticalAlerts'),
 
   isCollapsed: false,