AMBARI-8432. Alerts UI: Nav area alerts badge should not pulse.(xiwang)

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

@@ -89,6 +89,13 @@ App.MainAlertDefinitionsController = Em.ArrayController.extend({
     return this.get('content').filterProperty('isCriticalOrWarning').get('length');
   }.property('content.@each.isCriticalOrWarning'),
 
+  /**
+   * if critical alerts exist, if true, the alert badge should be red.
+   */
+  isCriticalAlerts: function () {
+    return this.get('content').someProperty('isCritical');
+  }.property('content.@each.isCritical'),
+
   /**
    *  calcuale critical/warning count for each service, to show up the label on services menu
    */

ambari-web/app/models/alert_definition.js

@@ -87,15 +87,27 @@ App.AlertDefinition = DS.Model.extend({
    * @type {boolean}
    */
   isCriticalOrWarning: function () {
+    return this.get('isCritical') || this.get('isWarning');
+  }.property('isCritical', 'isWarning'),
+
+  /**
+   * if this definition is in state: CRIT
+   * @type {boolean}
+   */
+  isCritical: function () {
     var summary = this.get('summary');
-    var status = ['WARNING', 'CRITICAL'];
-    var result = false;
-    status.forEach(function (state) {
-      if (summary[state]) {
-        result = true;
-      }
-    });
-    return result;
+    var state = 'CRITICAL';
+    return summary[state];
+  }.property('summary'),
+
+  /**
+   * if this definition is in state: WARNING
+   * @type {boolean}
+   */
+  isWarning: function () {
+    var summary = this.get('summary');
+    var state = 'WARNING';
+    return summary[state];
   }.property('summary'),
 
   /**

ambari-web/app/styles/application.less

@@ -60,42 +60,6 @@
   100% { color: #118fff; }
 }
 
-@-webkit-keyframes redPulse {
-  from { background-color: #FF0000; }
-  50% { background-color: #A80000; }
-  to { background-color: #FF0000; }
-}
-
-@-moz-keyframes redPulse {
-  from { background-color: #FF0000; }
-  50% { background-color: #A80000; }
-  to { background-color: #FF0000; }
-}
-
-@keyframes redPulse {
-  0% { background-color: #FF0000; }
-  50% { background-color: #A80000; }
-  100% { background-color: #FF0000; }
-}
-
-@-webkit-keyframes redPulseInner {
-  from { color: #FF0000; }
-  50% { color: #A80000; }
-  to { color: #FF0000; }
-}
-
-@-moz-keyframes redPulseInner {
-  from { color: #FF0000; }
-  50% { color: #A80000; }
-  to { color: #FF0000; }
-}
-
-@keyframes redPulseInner {
-  0% { color: #FF0000; }
-  50% { color: #A80000; }
-  100% { color: #FF0000; }
-}
-
 .gradient(@color: #FAFAFA, @start: #FFFFFF, @stop: #F2F2F2) {
   background: @color;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, @start), color-stop(1, @stop));
@@ -218,17 +182,11 @@ footer {
         animation-duration: 1s;
         animation-iteration-count: infinite;
       }
-      .label.alerts-count {
-        background-color: red;
-        -webkit-animation-name: redPulse;
-        -webkit-animation-duration: 1s;
-        -webkit-animation-iteration-count: infinite;
-        -moz-animation-name: redPulse;
-        -moz-animation-duration: 1s;
-        -moz-animation-iteration-count: infinite;
-        animation-name: redPulse;
-        animation-duration: 1s;
-        animation-iteration-count: infinite;
+      .label.alert-crit-count {
+        background-color: @health-status-red;
+      }
+      .label.alerts-warn-count {
+        background-color: @health-status-orange;
       }
       .label {
          padding: 3px 5px 3px;

ambari-web/app/templates/application.hbs

@@ -37,7 +37,7 @@
               {{/with}}
               {{#with App.router.mainAlertDefinitionsController}}
                 {{#if allAlertsCount}}
-                  <span class="label alerts-count" {{action "showPopup" target="App.router.mainAlertDefinitionsController"}}>
+                  <span {{bindAttr class=":label isCriticalAlerts:alert-crit-count:alert-warn-count"}} {{action "showPopup" target="App.router.mainAlertDefinitionsController"}}>
                   {{allAlertsCount}} {{pluralize allAlertsCount singular="alert" plural="alerts"}}</span>
                 {{else}}
                   <span class="label" {{action "showPopup" target="App.router.mainAlertDefinitionsController"}}>