AMBARI-4507 Out-of-Service mode icon and tooltips. (ababiichuk)

ambari-web/app/messages.js

@@ -1343,8 +1343,8 @@ Em.I18n.translations = {
   'hosts.table.restartComponents.withNames':'Restart {0}',
   'hosts.table.restartComponents.withoutNames':'{0} components should be restarted',
 
-  'hosts.table.componentsInPassiveState.withNames':'{0} in passive state',
-  'hosts.table.componentsInPassiveState.withoutNames':'{0} components in passive state',
+  'hosts.table.componentsInPassiveState.withNames':'{0} in Out-of-Service mode',
+  'hosts.table.componentsInPassiveState.withoutNames':'{0} components in Out-of-Service mode',
 
   'hosts.table.menu.l1.selectedHosts':'Selected Hosts',
   'hosts.table.menu.l1.filteredHosts':'Filtered Hosts',
@@ -1435,7 +1435,10 @@ Em.I18n.translations = {
   'hosts.host.decommissioned':'Decommissioned',
   'hosts.host.decommissioning':'Decommissioning...',
 
-
+  'hosts.component.passive.implied.host.mode.tooltip':'Cannot Turn Off Out-of-Service mode because Host is in Out-of-Service mode',
+  'hosts.component.passive.implied.service.mode.tooltip':'Cannot Turn Off Out-of-Service mode because {0} is in Out-of-Service mode',
+  'hosts.component.passive.mode':'Component is in Out-of-Service mode',
+  'hosts.host.passive.mode':'Host is in Out-of-Service mode',
   'hosts.host.alert.noAlerts':'No alerts',
   'hosts.host.alert.noAlerts.message':'There are no alerts for this host.',
   'hosts.host.healthStatus.heartBeatNotReceived':'The server has not received a heartbeat from this host for more than 3 minutes.',

ambari-web/app/models/host.js

@@ -231,6 +231,9 @@ App.Host = DS.Model.extend({
       return item.get('workStatus') !== App.HostComponentStatus.started;
     });
     var output = '';
+    if (this.get('passiveState') != 'ACTIVE') {
+      return Em.I18n.t('hosts.host.passive.mode');
+    }
     switch (this.get('healthClass')){
       case 'health-status-DEAD-RED':
         hostComponents = hostComponents.filterProperty('isMaster', true);
@@ -254,7 +257,7 @@ App.Host = DS.Model.extend({
         break;
     }
     return output;
-  }.property('hostComponents.@each.workStatus')
+  }.property('hostComponents.@each.workStatus','hostComponents.@each.passiveState')
 });
 
 App.Host.FIXTURES = [];

ambari-web/app/models/host_component.js

@@ -156,6 +156,20 @@ App.HostComponent = DS.Model.extend({
    * User friendly host component status
    * @returns {String}
    */
+  isActive: function() {
+    return (this.get('passiveState') == 'ACTIVE');
+  }.property('passiveState'),
+
+  passiveTooltip: function() {
+    if (!this.get('isActive')) {
+      return Em.I18n.t('hosts.component.passive.mode');
+    }
+  }.property('isActive'),
+
+  statusClass: function() {
+    return this.get('isActive') ? this.get('workStatus') : 'icon-medkit';
+  }.property('workStatus','isActive'),
+
   componentTextStatus: function () {
     return App.HostComponentStatus.getTextStatus(this.get("workStatus"));
   }.property('workStatus','isDecommissioning')

ambari-web/app/styles/application.less

@@ -1770,6 +1770,10 @@ width:100%;
   color: #666;
   font-size: 13px;
 
+  .icon-medkit {
+    color: black!important;
+  }
+
   td.summary-label {
     width: 180px;
     text-align: right;

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

@@ -47,7 +47,7 @@
                   </a>
                 {{/if}}
               {{else}}
-                <span {{bindAttr class="view.statusClass :components-health"}}></span>&nbsp;
+                <span rel='componentHealthTooltip' {{bindAttr class="view.statusClass :components-health" title="view.componentTextStatus"}}></span>&nbsp;
               {{/if}}
                 {{#if component.displayNameAdvanced}}
                   {{component.displayNameAdvanced}}
@@ -193,23 +193,21 @@
                             </a>
                         </li>
                     {{/if}}
-                    {{#unless view.isImplied}}
                       {{#if view.isActive}}
-                          <li {{bindAttr class="view.noActionAvailable"}}>
-                              <a href="javascript:void(null)"
+                          <li rel='passiveTooltip' {{bindAttr class="view.noActionAvailable" title="view.passiveImpliedTextStatus"}}>
+                              <a href="javascript:void(null)" {{bindAttr class="view.isImplied:disabled"}}
                                  data-toggle="modal" {{action "turnOnOffPassiveConfirmation" view.content target="controller"}}>
                                 {{t passiveState.turnOn}}
                               </a>
                           </li>
                       {{else}}
-                          <li {{bindAttr class="view.noActionAvailable"}}>
-                              <a href="javascript:void(null)"
+                          <li rel='passiveTooltip' {{bindAttr class="view.noActionAvailable" title="view.passiveImpliedTextStatus"}}>
+                              <a href="javascript:void(null)" {{bindAttr class="view.isImplied:disabled"}}
                                  data-toggle="modal" {{action "turnOnOffPassiveConfirmation" view.content target="controller"}}>
                                 {{t passiveState.turnOff}}
                               </a>
                           </li>
                       {{/if}}
-                    {{/unless}}
                   {{/unless}}
                 </ul>
               </div>

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

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

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

@@ -115,6 +115,9 @@ App.MainDashboardServiceView = Em.View.extend({
   }.property('controller.data'),
 
   dashboardMasterComponentView : Em.View.extend({
+    didInsertElement: function() {
+      App.tooltip($('[rel=healthTooltip]'));
+    },
     templateName: require('templates/main/service/info/summary/master_components'),
     mastersComp : function(){
      return this.get('parentView.service.hostComponents').filterProperty('isMaster', true);

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

@@ -38,6 +38,9 @@ App.MainDashboardServiceHdfsView = App.MainDashboardServiceView.extend({
   }),
 
   dashboardMasterComponentView: Em.View.extend({
+    didInsertElement: function() {
+      App.tooltip($('[rel=healthTooltip]'));
+    },
     templateName: require('templates/main/service/info/summary/master_components'),
     mastersComp : function() {
       return this.get('parentView.service.hostComponents').filter(function(comp){

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

@@ -224,6 +224,8 @@ App.MainHostSummaryView = Em.View.extend({
   ComponentView: Em.View.extend({
     content: null,
     didInsertElement: function () {
+      App.tooltip($('[rel=componentHealthTooltip]'));
+      App.tooltip($('[rel=passiveTooltip]'));
       if (this.get('isInProgress')) {
         this.doBlinking();
       }
@@ -262,6 +264,9 @@ App.MainHostSummaryView = Em.View.extend({
      * Return host component text status
      */
     componentTextStatus: function () {
+      if (this.get('content.passiveState') != 'ACTIVE') {
+        return Em.I18n.t('hosts.component.passive.mode');
+      }
       var workStatus = this.get("workStatus");
       var componentTextStatus = this.get('content.componentTextStatus');
       var hostComponent = this.get('hostComponent');
@@ -289,9 +294,17 @@ App.MainHostSummaryView = Em.View.extend({
         }
       }
       return componentTextStatus;
-    }.property('workStatus','isDataNodeRecommissionAvailable', 'isDataNodeDecommissioning', 'isNodeManagerRecommissionAvailable',
+    }.property('content.passiveState','workStatus','isDataNodeRecommissionAvailable', 'isDataNodeDecommissioning', 'isNodeManagerRecommissionAvailable',
       'isTaskTrackerRecommissionAvailable', 'isRegionServerRecommissionAvailable', 'isRegionServerDecommissioning'),
 
+    passiveImpliedTextStatus: function() {
+      if(this.get('parentView.content.passiveState') === 'PASSIVE') {
+        return Em.I18n.t('hosts.component.passive.implied.host.mode.tooltip');
+      } else if(this.get('content.service.passiveState') === 'PASSIVE') {
+        return Em.I18n.t('hosts.component.passive.implied.service.mode.tooltip').format(this.get('content.service.serviceName'));
+      }
+    }.property('content.passiveState','parentView.content.passiveState'),
+
     statusClass: function () {
       //If the component is DataNode
       if (this.get('isDataNode')) {
@@ -433,7 +446,7 @@ App.MainHostSummaryView = Em.View.extend({
     }.property('content.passiveState'),
 
     isImplied: function() {
-      return (this.get('content.passiveState') == "IMPLIED");
+      return (this.get('parentView.content.passiveState') === 'PASSIVE' || this.get('content.service.passiveState') === 'PASSIVE');
     }.property('content.passiveState'),
 
     isDecommissioning: function () {

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

@@ -55,6 +55,9 @@ App.MainServiceInfoSummaryView = Em.View.extend({
   servicesHaveClients: ["OOZIE", "ZOOKEEPER", "HIVE", "MAPREDUCE2", "TEZ"],
 
   sumMasterComponentView : Em.View.extend({
+    didInsertElement: function() {
+      App.tooltip($('[rel=healthTooltip]'));
+    },
     templateName: require('templates/main/service/info/summary/master_components'),
     mastersComp : function(){
       return this.get('parentView.service.hostComponents').filterProperty('isMaster', true);