AMBARI-9308. Alerts: Hosts badge shows red when there are only warn level alerts on the hosts

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

@@ -310,6 +310,7 @@ App.MainHostController = Em.ArrayController.extend(App.TableServerMixin, {
       'ALERT': data.Clusters.health_report['Host/host_status/ALERT'],
       'UNKNOWN': data.Clusters.health_report['Host/host_status/UNKNOWN'],
       'health-status-WITH-ALERTS': (data.alerts_summary_hosts) ? data.alerts_summary_hosts.CRITICAL + data.alerts_summary_hosts.WARNING : 0,
+      'health-status-CRITICAL': (data.alerts_summary_hosts) ? data.alerts_summary_hosts.CRITICAL : 0,
       'health-status-RESTART': data.Clusters.health_report['Host/stale_config'],
       'health-status-PASSIVE_STATE': data.Clusters.health_report['Host/maintenance_state'],
       'TOTAL': data.Clusters.total_hosts

ambari-web/app/styles/application.less

@@ -202,9 +202,15 @@ footer {
         text-decoration: none;
         background-color: transparent;
       }
-      .alerts-count {
-        margin: 1px;
+      .alerts-crit-count {
+        margin-left: 0;
         background: @health-status-red;
+        cursor: pointer;
+      }
+      .alerts-warn-count {
+        margin-left: 0;
+        background: @health-status-orange;
+        cursor: pointer;
       }
       .icon-th {
         font-size: 1.3em;

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

@@ -20,7 +20,7 @@
 <a href="#" {{action goToSection view.content.routing target="view"}}>
   {{{unbound view.content.label}}}
   {{#if view.hasAlertsLabel}}
-    <span class="label alerts-count">
+    <span {{bindAttr class=":label view.hasCriticalAlerts:alerts-crit-count:alerts-warn-count"}}>
       {{view.alertsCount}}
     </span>
   {{/if}}

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

@@ -74,6 +74,10 @@ App.MainMenuView = Em.CollectionView.extend({
       return App.router.get('mainHostController.hostsCountMap.health-status-WITH-ALERTS');
     }.property('App.router.mainHostController.hostsCountMap'),
 
+    hasCriticalAlerts: function () {
+      return App.router.get('mainHostController.hostsCountMap.health-status-CRITICAL') > 0;
+    }.property('content.hasAlertsLabel', 'alertsCount'),
+
     hasAlertsLabel: function () {
       return this.get('content.hasAlertsLabel') && this.get('alertsCount') > 0;
     }.property('content.hasAlertsLabel', 'alertsCount'),