AMBARI-9053. Alert badge color is inconsistent. (xiwang via yusaku)

ambari-web/app/config.js

@@ -50,6 +50,9 @@ App.healthIconClassRed = 'icon-warning-sign'; // bootstrap icon class for master
 App.healthIconClassOrange = 'icon-minus-sign'; // bootstrap icon class for slave down/decommissioned host/host-component
 App.healthIconClassYellow = 'icon-question-sign'; // bootstrap icon class for heartbeat lost service/host/host-component
 App.isManagedMySQLForHiveEnabled = false;
+App.healthStatusRed = '#ff0000';
+App.healthStatusGreen = '#5AB400';
+App.healthStatusOrange = '#FF8E00';
 
 // experimental features are automatically enabled if running on brunch server
 App.enableExperimental = false;

ambari-web/app/styles/application.less

@@ -291,6 +291,7 @@ footer {
       }
       .alerts-count {
         margin: 1px;
+        background: @health-status-red;
       }
       .icon-th {
         font-size: 1.3em;
@@ -338,7 +339,7 @@ footer {
           padding: 0 0 0 3px;
         }
         .operations-count {
-          background: #953B39;
+          background: @health-status-red;
           padding: 1px 4px;
           float: right;
           margin-right: 5px;
@@ -1674,19 +1675,19 @@ a:focus {
     #min-height-limit .progress{
       margin-left: 40px;
       .bar-success {
-        background-image: linear-gradient(to bottom, #95b000, #95a800);
+        background-image: linear-gradient(to bottom, @health-status-green, @health-status-green);
         background-repeat: repeat-x;
-        filter: progid:dximagetransform.microsoft.gradient(startColorstr='#95b000', endColorstr='#95a800', GradientType=0);
+        filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5AB400', endColorstr='#5AB400', GradientType=0);
       }
       .bar-warning {
-        background-image: linear-gradient(to bottom, #FF9E00, #FF8E00);
+        background-image: linear-gradient(to bottom,@health-status-orange, @health-status-orange);
         background-repeat: repeat-x;
-        filter: progid:dximagetransform.microsoft.gradient(startColorstr='#FF9E00', endColorstr='#FF8E00', GradientType=0);
+        filter: progid:dximagetransform.microsoft.gradient(startColorstr='#FF8E00', endColorstr='#FF8E00', GradientType=0);
       }
       .bar-danger {
-        background-image: linear-gradient(to bottom, #B81000, #B80000);
+        background-image: linear-gradient(to bottom, @health-status-red, @health-status-red);
         background-repeat: repeat-x;
-        filter: progid:dximagetransform.microsoft.gradient(startColorstr='#B81000', endColorstr='#B80000', GradientType=0);
+        filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0000', endColorstr='#ff0000', GradientType=0);
       }
     }
 
@@ -2812,7 +2813,7 @@ width:100%;
       }
       .label.operations-count {
         padding: 1px 4px;
-        background: #953B39;
+        background: @health-status-red;
         float: right;
         margin-right: 5px;
         margin-top: 3px;
@@ -3358,21 +3359,21 @@ table.graphs {
 
     .is-red{
       .widget-content {
-        color: #B80000;
+        color: @health-status-red;
         padding-top: 70px;
         font-weight: bold;
       }
     }
     .is-orange{
       .widget-content {
-        color: #FF8E00;
+        color: @health-status-orange;
         padding-top: 70px;
         font-weight: bold;
       }
     }
     .is-green {
       .widget-content {
-        color: #95A800;
+        color: @health-status-green;
         padding-top: 70px;
         font-weight: bold;
       }
@@ -4047,14 +4048,35 @@ table.graphs {
     margin-left: 4px;
   }
 }
-#hosts, #host-details, #serviceConfig {
+#host-details, #serviceConfig {
   .icon-refresh {
     color: @restart-indicator-color;
   }
-  .alerts-count {
+  .alerts-crit-count {
     margin-left: 0;
+    background: @health-status-red;
+  }
+  .alerts-warn-count {
+    margin-left: 0;
+    background: @health-status-orange;
   }
 }
+#hosts{
+  .icon-refresh {
+    color: @restart-indicator-color;
+  }
+  .alerts-crit-count {
+    margin-left: 0;
+    background: @health-status-red;
+    cursor: pointer;
+  }
+  .alerts-warn-count {
+    margin-left: 0;
+    background: @health-status-orange;
+    cursor: pointer;
+  }
+}
+
 .background-operations {
   .progress {
     margin-bottom: 5px;

ambari-web/app/styles/common.less

@@ -19,7 +19,7 @@
 /************************************************************************
 * Health status(service/host/host component health)icon colors
 ***********************************************************************/
-@health-status-red: red;
+@health-status-red: #ff0000;
 @health-status-green: #5AB400;
 @health-status-yellow: #FFD13D;
 @health-status-orange: #FF8E00;

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

@@ -107,9 +107,9 @@
             </span>
             {{#if host.criticalWarningAlertsCount}}
               {{#if host.alertsSummary.CRITICAL}}
-                <span class="label alerts-count label-important" {{action "goToHostAlerts" host target="controller"}}>{{host.criticalWarningAlertsCount}}</span>
+                <span class="label alerts-crit-count" {{action "goToHostAlerts" host target="controller"}}>{{host.criticalWarningAlertsCount}}</span>
               {{else}}
-                <span class="label alerts-count label-warning" {{action "goToHostAlerts" host target="controller"}}>{{host.criticalWarningAlertsCount}}</span>
+                <span class="label alerts-warn-count" {{action "goToHostAlerts" host target="controller"}}>{{host.criticalWarningAlertsCount}}</span>
               {{/if}}
             {{/if}}
           </td>

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 label-important alerts-count">
+    <span class="label alerts-count">
       {{view.alertsCount}}
     </span>
   {{/if}}

ambari-web/app/views/main/dashboard/widget.js

@@ -268,7 +268,7 @@ App.DashboardWidgetView = Em.View.extend({
       didInsertElement: function () {
         var browserVersion = self.getInternetExplorerVersion();
         var handlers = [configObj.get('thresh1'), configObj.get('thresh2')];
-        var colors = ['#95A800', '#FF8E00', '#B80000']; //color green, orange ,red
+        var colors = [App.healthStatusGreen, App.healthStatusOrange, App.healthStatusRed]; //color green, orange ,red
 
         if (browserVersion == -1 || browserVersion > 9) {
           configObj.set('isIE9', false);

ambari-web/app/views/main/dashboard/widgets/datanode_live.js

@@ -140,7 +140,7 @@ App.DataNodeUpView = App.TextDashboardWidgetView.extend({
 
       didInsertElement: function () {
         var handlers = [configObj.get('thresh1'), configObj.get('thresh2')];
-        var colors = ['#B80000', '#FF8E00', '#95A800']; //color red, orange, green
+        var colors = [App.healthStatusRed, App.healthStatusOrange, App.healthStatusGreen]; //color red, orange, green
 
         if (browserVerion == -1 || browserVerion > 9) {
           configObj.set('isIE9', false);

ambari-web/app/views/main/dashboard/widgets/flume_agent_live.js

@@ -145,7 +145,7 @@ App.FlumeAgentUpView = App.TextDashboardWidgetView.extend({
 
       didInsertElement: function () {
         var handlers = [configObj.get('thresh1'), configObj.get('thresh2')];
-        var colors = ['#B80000', '#FF8E00', '#95A800']; //color red, orange, green
+        var colors = [App.healthStatusRed, App.healthStatusOrange, App.healthStatusGreen]; //color red, orange, green
 
         if (browserVerion == -1 || browserVerion > 9) {
           configObj.set('isIE9', false);

ambari-web/app/views/main/dashboard/widgets/hbase_average_load.js

@@ -135,7 +135,7 @@ App.HBaseAverageLoadView = App.TextDashboardWidgetView.extend({
       },
 
       didInsertElement: function () {
-        var colors = ['#95A800', '#FF8E00', '#B80000']; //color green, orange ,red
+        var colors = [App.healthStatusGreen, App.healthStatusOrange, App.healthStatusRed]; //color green, orange ,red
         var handlers = [33, 66]; //fixed value
 
         if (browserVerion == -1 || browserVerion > 9) {

ambari-web/app/views/main/dashboard/widgets/hbase_regions_in_transition.js

@@ -131,7 +131,7 @@ App.HBaseRegionsInTransitionView = App.TextDashboardWidgetView.extend({
       },
 
       didInsertElement: function () {
-        var colors = ['#95A800', '#FF8E00', '#B80000']; //color green, orange ,red
+        var colors = [App.healthStatusGreen, App.healthStatusOrange, App.healthStatusRed]; //color green, orange ,red
         var handlers = [33, 66]; //fixed value
 
         if (browserVerion == -1 || browserVerion > 9) {

ambari-web/app/views/main/dashboard/widgets/namenode_rpc.js

@@ -138,7 +138,7 @@ App.NameNodeRpcView = App.TextDashboardWidgetView.extend({
       },
 
       didInsertElement: function () {
-        var colors = ['#95A800', '#FF8E00', '#B80000']; //color green, orange ,red
+        var colors = [App.healthStatusGreen, App.healthStatusOrange, App.healthStatusRed]; //color green, orange ,red
         var handlers = [33, 66]; //fixed value
 
         if (browserVerion == -1 || browserVerion > 9) {

ambari-web/app/views/main/dashboard/widgets/node_managers_live.js

@@ -145,7 +145,7 @@ App.NodeManagersLiveView = App.TextDashboardWidgetView.extend({
       didInsertElement: function () {
         var self = this;
         var handlers = [configObj.get('thresh1'), configObj.get('thresh2')];
-        var colors = ['#B80000', '#FF8E00', '#95A800']; //color red, orange, green
+        var colors = [App.healthStatusRed, App.healthStatusOrange, App.healthStatusGreen]; //color red, orange, green
 
         if (browserVerion == -1 || browserVerion > 9) {
           configObj.set('isIE9', false);

ambari-web/app/views/main/dashboard/widgets/pie_chart_widget.js

@@ -113,9 +113,9 @@ App.PieChartDashboardWidgetView = App.DashboardWidgetView.extend({
       var used = parseFloat(this.get('parentView.dataForPieChart')[1]);
       var thresh1 = parseFloat(this.get('thresh1'));
       var thresh2 = parseFloat(this.get('thresh2'));
-      var color_green = '#95A800';
-      var color_red = '#B80000';
-      var color_orange = '#FF8E00';
+      var color_green = App.healthStatusGreen;
+      var color_red = App.healthStatusRed;
+      var color_orange = App.healthStatusOrange;
       if (used <= thresh1) {
         this.set('palette', new Rickshaw.Color.Palette({
           scheme: [ '#FFFFFF', color_green  ].reverse()

ambari-web/app/views/main/dashboard/widgets/supervisor_live.js

@@ -144,7 +144,7 @@ App.SuperVisorUpView = App.TextDashboardWidgetView.extend({
 
       didInsertElement: function () {
         var handlers = [configObj.get('thresh1'), configObj.get('thresh2')];
-        var colors = ['#B80000', '#FF8E00', '#95A800']; //color red, orange, green
+        var colors = [App.healthStatusRed, App.healthStatusOrange, App.healthStatusGreen]; //color red, orange, green
 
         if (browserVerion == -1 || browserVerion > 9) {
           configObj.set('isIE9', false);

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

@@ -65,9 +65,9 @@ App.MainHostMenuView = Em.CollectionView.extend({
     var badgeText = "" + criticalWarningCount;
     var badgeClasses = "label";
     if (criticalCount > 0) {
-      badgeClasses += " label-important";
+      badgeClasses += " alerts-crit-count";
     } else if (warningCount > 0) {
-      badgeClasses += " label-warning";
+      badgeClasses += " alerts-warn-count";
     }
     var alertOption = this.get('content').findProperty('name', 'alerts');
     alertOption.set('badgeText', badgeText);