AMBARI-5266. Red / green colorblind problem with service status dashboard, etc.(xiwang)

ambari-web/app/config.js

@@ -42,6 +42,10 @@ App.singleNodeAlias = document.location.hostname;
 App.minDiskSpace = 2.0; // minimum disk space required for '/' for each host before install, unit GB
 App.minDiskSpaceUsrLib = 1.0; // minimum disk space for '/usr/lib' for each host before install, unit GB
 App.mirroringDatasetNamePrefix = 'ambari-mirroring-'; // special prefix to be added for each Falcon feed name created with Ambari
+App.healthIconClassGreen = 'icon-ok-sign'; // bootstrap icon class for healthy/started service/host/host-component
+App.healthIconClassRed = 'icon-warning-sign'; // bootstrap icon class for master down/stopped service/host/host-component
+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
 
 // experimental features are automatically enabled if running on brunch server
 App.enableExperimental = false;

ambari-web/app/data/host/categories.js

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+var App = require('app');
 module.exports = [
   {
     value: Em.I18n.t('common.all'),
@@ -27,25 +27,28 @@ module.exports = [
   {
     value: Em.I18n.t('hosts.host.healthStatusCategory.green'),
     isHealthStatus: true,
+    class: App.healthIconClassGreen,
     healthStatusValue: 'health-status-LIVE',
     observes: 'view.content.@each.healthClass'
   },
   {
     value: Em.I18n.t('hosts.host.healthStatusCategory.red'),
     isHealthStatus: true,
+    class: App.healthIconClassRed,
     healthStatusValue: 'health-status-DEAD-RED',
     observes: 'view.content.@each.healthClass'
   },
   {
     value: Em.I18n.t('hosts.host.healthStatusCategory.orange'),
     isHealthStatus: true,
+    class: App.healthIconClassOrange,
     healthStatusValue: 'health-status-DEAD-ORANGE',
     observes: 'view.content.@each.healthClass'
   },
   {
     value: Em.I18n.t('hosts.host.healthStatusCategory.yellow'),
     isHealthStatus: true,
-    class: 'icon-question-sign',
+    class: App.healthIconClassYellow,
     healthStatusValue: 'health-status-DEAD-YELLOW',
     observes: 'view.content.@each.healthClass'
   },

ambari-web/app/models/host.js

@@ -213,6 +213,26 @@ App.Host = DS.Model.extend({
     return statusMap[this.get('healthStatus')] || 'health-status-DEAD-YELLOW';
   }.property('healthStatus'),
 
+  healthIconClass: function () {
+    switch (this.get('healthClass')) {
+      case 'health-status-LIVE':
+        return App.healthIconClassGreen;
+        break;
+      case 'health-status-DEAD-RED':
+        return App.healthIconClassRed;
+        break;
+      case 'health-status-DEAD-YELLOW':
+        return App.healthIconClassYellow;
+        break;
+      case 'health-status-DEAD-ORANGE':
+        return App.healthIconClassOrange;
+        break;
+      default:
+        return "";
+        break;
+    }
+  }.property('healthClass'),
+
   /**
    * Tooltip for host indicator
    * Contains affected host components names (based on <code>healthClass</code>)

ambari-web/app/models/host_component.js

@@ -170,6 +170,25 @@ App.HostComponent = DS.Model.extend({
     return this.get('isActive') ? this.get('workStatus') : 'icon-medkit';
   }.property('workStatus','isActive'),
 
+  statusIconClass: function () {
+    switch (this.get('statusClass')) {
+      case 'STARTED':
+      case 'STARTING':
+        return App.healthIconClassGreen;
+        break;
+      case 'INSTALLED':
+      case 'STOPPING':
+        return App.healthIconClassRed;
+        break;
+      case 'UNKNOWN':
+        return App.healthIconClassYellow;
+        break;
+      default:
+        return "";
+        break;
+    }
+  }.property('statusClass'),
+
   componentTextStatus: function () {
     return App.HostComponentStatus.getTextStatus(this.get("workStatus"));
   }.property('workStatus','isDecommissioning')

ambari-web/app/styles/application.less

@@ -236,6 +236,16 @@ h1 {
 .show {
   visibility: visible;
 }
+/************************************************************************
+* Health status(service/host/host component health)icon colors
+***********************************************************************/
+@health-status-red: red;
+@health-status-green: #5AB400;
+@health-status-yellow: #FFD13D;
+@health-status-orange: #FF8E00;
+/************************************************************************
+* Health status(service/host/host component health)icon colors ends
+***********************************************************************/
 
 /***************
  * Ambari wide icon colors
@@ -1721,29 +1731,28 @@ width:100%;
   }
 
   .tab-marker-position {
-    background-position: 6px 5px;
-    background-repeat: no-repeat;
     list-style: none;
-    float: left;
     min-height: 20px;
     min-width: 20px;
-    margin-left: 0;
+    margin-left: 6px;
+    float: none;
+    display: inline;
   }
   .health-status-LIVE, .health-status-STARTING {
     .tab-marker-position;
-    background-image: @status-live-marker;
+    color: @health-status-green;
   }
   .health-status-DEAD-RED, .health-status-STOPPING {
     .tab-marker-position;
-    background-image: @status-dead-red-marker;
+    color: @health-status-red;
   }
   .health-status-DEAD-ORANGE {
     .tab-marker-position;
-    background-image: @status-dead-orange-marker;
+    color: @health-status-orange;
   }
   .health-status-DEAD-YELLOW {
     .tab-marker-position;
-    background-image: @status-dead-yellow-marker;
+    color: @health-status-yellow;
   }
   dt {
     text-align: left;
@@ -1836,18 +1845,20 @@ width:100%;
     height: 20px;
     width: 20px;
     margin-left: 0;
+    display: inline !important;
+    float: none !important;
   }
   .STARTING, .STARTED {
     .tab-marker-position;
-    background-image: @status-live-marker;
+    color: @health-status-green;
   }
   .STOPPING, .INSTALLED {
     .tab-marker-position;
-    background-image: @status-dead-red-marker;
+    color: @health-status-red;
   }
   .UNKNOWN {
     .tab-marker-position;
-    background-image: @status-dead-yellow-marker;
+    color: @health-status-yellow;
   }
 
   .summary-view-host{
@@ -2174,28 +2185,24 @@ width:100%;
 .services-menu {
   .nav-list {
     .tab-marker-position {
-      background-position: 6px 5px;
-      background-repeat: no-repeat;
       list-style: none;
-      float: left;
       height: 20px;
       width: 20px;
-      margin-left: 0; // padding-left: 30px;
-    // padding-right: 30px;
-    // background-position: 12px 9px;
-    // background-repeat: no-repeat;
+      margin-left: 6px;
+      display: inline;
+      float: none;
     }
     .health-status-LIVE, .health-status-STARTING {
       .tab-marker-position;
-      background-image: @status-live-marker;
+      color: @health-status-green;
     }
     .health-status-DEAD-RED, .health-status-STOPPING {
       .tab-marker-position;
-      background-image: @status-dead-red-marker;
+      color: @health-status-red;
     }
     .health-status-DEAD-YELLOW {
       .tab-marker-position;
-      background-image: @status-dead-yellow-marker;
+      color: @health-status-yellow;
     }
     li {
       line-height: 24px;
@@ -2814,10 +2821,6 @@ table.graphs {
     float: left;
     padding-right: 10px;
   }
-  .icon-question-sign {
-    color:#FFD13D;
-  }
-
 
   #hosts-table {
     margin-top: 10px;
@@ -2927,35 +2930,38 @@ table.graphs {
     background-repeat: no-repeat;
     height: 20px;
     width: 13px;
-    display: block;
-    float: left;
-    margin-right:4px;
-  }
-  .health-status-HEALTHY{
-    background-image: @status-live-marker;
-    .status-dot-position;
+    display: inline !important;
+    float: none !important;
   }
+  .health-status-HEALTHY,
   .health-status-LIVE {
-    background-image: @status-live-marker;
     .status-dot-position;
+    color: @health-status-green;
+    margin-right: 1px;
+    margin-left: 1px;
   }
   .health-status-DEAD-RED {
-    background-image: @status-dead-red-marker;
     .status-dot-position;
+    color: @health-status-red;
   }
   .health-status-DEAD-ORANGE {
-    background-image: @status-dead-orange-marker;
     .status-dot-position;
+    color: @health-status-orange;
+    margin-right: 1px;
+    margin-left: 1px;
   }
   .health-status-DEAD-YELLOW {
-    background-image: @status-dead-yellow-marker;
     .status-dot-position;
-    &.icon-question-sign {
-      background-image: none !important;
-      display: inline !important;
-      float: none !important;
-    }
+    color: @health-status-yellow;
+    margin-right: 1px;
+    margin-left: 1px;
+  }
+  .icon-exclamation-sign,
+  .icon-refresh {
+    margin-right: 1px;
+    margin-left: 1px;
   }
+
   .passive-state {
     color: #000;
   }
@@ -2993,10 +2999,6 @@ table.graphs {
       font-size: 0.9em;
       margin-left: 0;
       color: #b4b4b4;
-      .health-status {
-        margin-left: -1px;
-        margin-right: 3px;
-      }
       a {
         text-decoration: none;
       }
@@ -3390,6 +3392,8 @@ table.graphs {
     display: inline-block;
     height: 13px;
     width: 13px;
+    display: inline !important;
+    float: none !important;
   }
 
   .components-health.icon-arrow-up{
@@ -3397,28 +3401,28 @@ table.graphs {
   }
 
   .health-status-started, .health-status-starting {
-    background-image: @status-live-marker;
     .marker;
+    color: @health-status-green;
   }
 
   .health-status-installed, .health-status-stopping {
-    background-image: @status-dead-red-marker;
     .marker;
+    color: @health-status-red;
   }
 
   .health-status-unknown {
-    background-image: @status-dead-yellow-marker;
     .marker;
+    color: @health-status-yellow;
   }
 
   .health-status-LIVE {
-    background-image: @status-live-marker;
     .marker;
+    color: @health-status-green;
   }
 
   .health-status-DEAD-RED {
-    background-image: @status-dead-red-marker;
     .marker;
+    color: @health-status-red;
   }
 
   .health-status-color-blue {
@@ -3430,13 +3434,13 @@ table.graphs {
   }
 
   .health-status-DEAD-ORANGE {
-    background-image: @status-dead-orange-marker;
     .marker;
+    color: @health-status-orange;
   }
 
   .health-status-DEAD-YELLOW {
-    background-image: @status-dead-yellow-marker;
     .marker;
+    color: @health-status-yellow;
   }
 
   .back {
@@ -4231,14 +4235,16 @@ ul.filter {
     background-repeat: no-repeat;
     height: 20px;
     width: 13px;
+    display: inline;
+    float: none;
   }
   .health-status-LIVE {
-    background-image: @status-live-marker;
     .status-dot-position;
+    color: @health-status-green;
   }
   .health-status-DEAD-RED {
-    background-image: @status-dead-red-marker;
     .status-dot-position;
+    color: @health-status-red;
   }
   .dataset-selected {
     background-color: #E6F1F6;

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

@@ -96,7 +96,7 @@
           <td class="first">{{view Ember.Checkbox checkedBinding="host.selected"}}</td>
 
           <td class="health">
-            <span rel="HealthTooltip" {{bindAttr class="host.healthClass"}} {{bindAttr data-original-title="host.healthToolTip" }}></span>
+            <span rel="HealthTooltip" {{bindAttr class="host.healthClass host.healthIconClass"}} {{bindAttr data-original-title="host.healthToolTip" }}></span>
           </td>
 
           <td class="name">

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

@@ -18,7 +18,7 @@
 
 <div id="host-details">
   <div class="status-info">
-    <span rel="HealthTooltip" {{bindAttr class="view.content.healthClass"}} {{bindAttr data-original-title="view.content.healthToolTip" }}></span><span class='host-title'>{{unbound view.content.publicHostName}}</span>
+    <span rel="HealthTooltip" {{bindAttr class="view.content.healthClass view.content.healthIconClass"}} {{bindAttr data-original-title="view.content.healthToolTip" }}></span><span class='host-title'>{{unbound view.content.publicHostName}}</span>
     {{#if view.content.criticalAlertsCount}}
       <span class="label label-important alerts-count" {{action "showAlertsPopup" content target="App.router.mainHostController"}}>{{view.content.criticalAlertsCount}}</span>
     {{else}}

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

@@ -24,7 +24,7 @@
       </a>
     {{/if}}
   {{else}}
-    <span rel='componentHealthTooltip' {{bindAttr class="view.statusClass :components-health" data-original-title="view.componentTextStatus"}}></span>&nbsp;
+    <span rel='componentHealthTooltip' {{bindAttr class="view.statusClass view.statusIconClass :components-health" data-original-title="view.componentTextStatus"}}></span>&nbsp;
   {{/if}}
   {{#if component.displayNameAdvanced}}
     {{component.displayNameAdvanced}}

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

@@ -28,7 +28,7 @@
       </a>
      </td>
    <td>
-     <span rel='healthTooltip' {{bindAttr class="masterComp.statusClass" data-original-title="masterComp.passiveTooltip"}}></span>
+     <span rel='healthTooltip' {{bindAttr class="masterComp.statusClass masterComp.statusIconClass" data-original-title="masterComp.passiveTooltip"}}></span>
      {{masterComp.componentTextStatus}}
    </td>
   </tr>

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

@@ -22,7 +22,7 @@ var uiEffects = require('utils/ui_effects');
 require('models/alert');
 
 App.MainDashboardServiceHealthView = Em.View.extend({
-  classNameBindings: ["healthStatus"],
+  classNameBindings: ["healthStatus", "healthStatusClass"],
   //template: Em.Handlebars.compile(""),
   blink: false,
   tagName: 'span',
@@ -91,6 +91,26 @@ App.MainDashboardServiceHealthView = Em.View.extend({
     return 'health-status-' + status;
   }.property('service.healthStatus','service.passiveState','service.isClientsOnly'),
 
+  healthStatusClass: function () {
+    switch (this.get('healthStatus')) {
+      case 'health-status-LIVE':
+        return App.healthIconClassGreen;
+        break;
+      case 'health-status-DEAD-RED':
+        return App.healthIconClassRed;
+        break;
+      case 'health-status-DEAD-YELLOW':
+        return App.healthIconClassYellow;
+        break;
+      case 'health-status-DEAD-ORANGE':
+        return App.healthIconClassOrange;
+        break;
+      default:
+        return "";
+        break;
+    }
+  }.property('healthStatus'),
+
   didInsertElement: function () {
     this.updateToolTip();
     App.tooltip($("[rel='HealthTooltip']"));

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

@@ -444,7 +444,7 @@ App.MainHostView = App.TableView.extend({
       this.get('categories').setEach('isActive', false);
       var selected = this.get('categories').findProperty('healthStatusValue', this.get('value'));
       selected.set('isActive', true);
-      this.set('class', selected.get('class') || this.get('value'));
+      this.set('class', selected.get('class') + ' ' + this.get('value'));
     }.observes('value'),
 
     showClearFilter: function(){

ambari-web/app/views/main/host/details/host_component_view.js

@@ -84,6 +84,32 @@ App.HostComponentView = Em.View.extend({
     return 'health-status-' + App.HostComponentStatus.getKeyName(this.get('workStatus'));
 
   }.property('workStatus'),
+  /**
+   * CSS-icon-class for host component status
+   * @type {String}
+   */
+  statusIconClass: function () {
+    switch (this.get('statusClass')) {
+      case 'health-status-started':
+      case 'health-status-starting':
+        return App.healthIconClassGreen;
+        break;
+      case 'health-status-installed':
+      case 'health-status-stopping':
+        return App.healthIconClassRed;
+        break;
+      case 'health-status-unknown':
+        return App.healthIconClassYellow;
+        break;
+      case 'health-status-DEAD-ORANGE':
+        return App.healthIconClassOrange;
+        break;
+      default:
+        return "";
+        break;
+    }
+  }.property('statusClass'),
+
 
   /**
    * CSS-class for disabling drop-down menu with list of host component actions