AMBARI-9763 Status icon on service menu disappears for 1-2 sec when turning on/off maintenance state.y (ababiichuk)

ambari-web/app/styles/application.less

@@ -1916,9 +1916,6 @@ a:focus {
   border-collapse: collapse;
   color: #666;
   font-size: 13px;
-  .icon-medkit {
-    color: black!important;
-  }
   tr.component-small {
     font-size: 11px;
   }
@@ -2271,7 +2268,6 @@ a:focus {
   }
   .icon-medkit {
     padding-left:6px;
-    color: black!important;
   }
 }
 .quick-links-wrapper {

ambari-web/app/styles/common.less

@@ -16,6 +16,14 @@
  * limitations under the License.
  */
 
+/************************************************************************
+* Health status(service/host/host component health)icons class names
+***********************************************************************/
+@health-status-red-icon:  icon-warning-sign;
+@health-status-green-icon:  icon-ok-sign;
+@health-status-yellow-icon:  icon-question-sign;
+@health-status-orange-icon:  icon-minus-sign;
+@maintenance-icon: icon-medkit;
 /************************************************************************
 * Health status(service/host/host component health)icon colors
 ***********************************************************************/
@@ -23,6 +31,7 @@
 @health-status-green: #5AB400;
 @health-status-yellow: #FFD13D;
 @health-status-orange: #FF8E00;
+@maintenance-black: #000000;
 /************************************************************************
 * Health status(service/host/host component health)icon colors ends
 ***********************************************************************/
@@ -32,6 +41,22 @@
 @green: #69BE28;
 @blue: #0572ff;
 
+(~".@{health-status-red-icon}") {
+  color: @health-status-red;
+}
+(~".@{health-status-green-icon}") {
+  color: @health-status-green;
+}
+(~".@{health-status-yellow-icon}") {
+  color: @health-status-yellow;
+}
+(~".@{health-status-orange-icon}") {
+  color: @health-status-orange;
+}
+(~".@{maintenance-icon}") {
+  color: @maintenance-black;
+}
+
 @-webkit-keyframes orangePulse {
   from { background-color: #fdb82f; }
   50% { background-color: #fd910e; }

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

@@ -84,24 +84,23 @@ App.MainDashboardServiceHealthView = Em.View.extend({
   }.property('service.healthStatus','service.passiveState','service.serviceName'),
 
   healthStatusClass: function () {
-    switch (this.get('healthStatus')) {
-      case 'health-status-LIVE':
+    if (this.get('service.passiveState') != 'OFF' || App.get('services.clientOnly').contains(this.get('service.serviceName')))
+      return '';
+    switch (this.get('service.healthStatus')) {
+      case 'green':
+      case 'green-blinking':
         return App.healthIconClassGreen;
         break;
-      case 'health-status-DEAD-RED':
+      case 'red':
+      case 'red-blinking':
         return App.healthIconClassRed;
         break;
-      case 'health-status-DEAD-YELLOW':
+      case 'yellow':
         return App.healthIconClassYellow;
-        break;
-      case 'health-status-DEAD-ORANGE':
-        return App.healthIconClassOrange;
-        break;
       default:
-        return "";
-        break;
+        return '';
     }
-  }.property('healthStatus'),
+  }.property('service.healthStatus','service.passiveState','service.serviceName'),
 
   didInsertElement: function () {
     this.updateToolTip();