AMBARI-5103. Maintenance Mode: maintenance icon changes on Host Details page. (onechiporenko)

ambari-web/app/controllers/main/host/details.js

@@ -45,7 +45,7 @@ App.MainHostDetailsController = Em.Controller.extend({
   },
 
   serviceActiveComponents: function() {
-    return this.get('content.hostComponents').filterProperty('service.passiveState','OFF')
+    return this.get('content.hostComponents').filterProperty('service.isInPassive',true);
   }.property('content.hostComponents'),
 
   /**

ambari-web/app/mixins/main/host/details/host_components/decommissionable.js

@@ -78,11 +78,6 @@ App.Decommissionable = Em.Mixin.create({
       return 'health-status-color-blue icon-cog';
     }
 
-    //Class when maintenance
-    if (this.get('content.passiveState') != "OFF") {
-      return 'icon-medkit';
-    }
-
     if (this.get('isComponentRecommissionAvailable') && (this.get('isStart') || this.get('workStatus') == 'INSTALLED')) {
       return 'health-status-DEAD-ORANGE';
     }
@@ -90,7 +85,7 @@ App.Decommissionable = Em.Mixin.create({
     //For all other cases
     return 'health-status-' + App.HostComponentStatus.getKeyName(this.get('workStatus'));
 
-  }.property('content.passiveState','workStatus', 'isComponentRecommissionAvailable', 'isComponentDecommissioning'),
+  }.property('workStatus', 'isComponentRecommissionAvailable', 'isComponentDecommissioning'),
 
   /**
    * Return host component text status
@@ -110,7 +105,7 @@ App.Decommissionable = Em.Mixin.create({
       }
     }
     return componentTextStatus;
-  }.property('content.passiveState','workStatus','isComponentRecommissionAvailable','isComponentDecommissioning'),
+  }.property('workStatus','isComponentRecommissionAvailable','isComponentDecommissioning'),
 
   /**
    * For Stopping or Starting states, also for decommissioning

ambari-web/app/models/service.js

@@ -32,6 +32,13 @@ App.Service = DS.Model.extend({
   hostComponents: DS.hasMany('App.HostComponent'),
   serviceConfigsTemplate: App.config.get('preDefinedServiceConfigs'),
 
+  /**
+   * @type {bool}
+   */
+  isInPassive: function() {
+    return this.get('passiveState') === "ON";
+  }.property('passiveState'),
+
   // Instead of making healthStatus a computed property that listens on hostComponents.@each.workStatus,
   // we are creating a separate observer _updateHealthStatus.  This is so that healthStatus is updated
   // only once after the run loop.  This is because Ember invokes the computed property every time

ambari-web/app/styles/application.less

@@ -3319,6 +3319,12 @@ table.graphs {
 
   margin-top: 27px;
 
+  .status-info {
+    .alert {
+      margin-bottom: 0;
+    }
+  }
+
   /*
   .component-operation-button {
     background-color: #E5E5E5;

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

@@ -17,12 +17,17 @@
 }}
 
 <div id="host-details">
-  <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>
-  {{#if view.content.criticalAlertsCount}}
-    <span class="label label-important alerts-count" {{action "showAlertsPopup" content target="App.router.mainHostController"}}>{{view.content.criticalAlertsCount}}</span>
-  {{else}}
-    <span class="label label-success alerts-count" {{action "showAlertsPopup" content target="App.router.mainHostController"}}>{{t hosts.host.alert.noAlerts}}</span>
-  {{/if}}
+  <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>
+    {{#if view.content.criticalAlertsCount}}
+      <span class="label label-important alerts-count" {{action "showAlertsPopup" content target="App.router.mainHostController"}}>{{view.content.criticalAlertsCount}}</span>
+    {{else}}
+      <span class="label label-success alerts-count" {{action "showAlertsPopup" content target="App.router.mainHostController"}}>{{t hosts.host.alert.noAlerts}}</span>
+    {{/if}}
+    {{#unless view.isActive}}
+      <span class="alert alert-warning pull-right"><span class="icon-warning-sign"></span> {{t hosts.host.passive.mode}}</span>
+    {{/unless}}
+  </div>  
   <div><a href="javascript:void(null)" data-toggle="modal" {{action back}}><i class="icon-arrow-left"></i>&nbsp;{{t common.back}}</a></div>
   <div class="content">
     {{view App.MainHostMenuView}}
@@ -38,8 +43,7 @@
 				        <!-- dropdown menu links -->
 				        {{#each option in view.maintenance}}
 				        <li {{bindAttr class="controller.isStopDisabled:disabled option.liClass"}}>
-				          <a {{action "doAction" option target="controller" href=true}}><i {{bindAttr class="option.cssClass option.liClass"}}></i>
-{{option.label}}</a>
+				          <a {{action "doAction" option target="controller" href=true}}><i {{bindAttr class="option.cssClass option.liClass"}}></i> {{option.label}}</a>
 				        </li>
 				        {{/each}}
 				      </ul>

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.componentStatusTooltip"}}></span>&nbsp;
+    <span rel='componentHealthTooltip' {{bindAttr class="view.statusClass :components-health" data-original-title="view.componentTextStatus"}}></span>&nbsp;
   {{/if}}
   {{#if component.displayNameAdvanced}}
     {{component.displayNameAdvanced}}
@@ -35,7 +35,10 @@
   <a href="#" {{action routeToService component.service target="controller"}}>{{component.service.displayName}}</a>
   &nbsp;
   {{#if component.staleConfigs}}
-    <i class="text-warning icon-refresh"></i>
+    <span class="text-warning icon-refresh"></span>
+  {{/if}}
+  {{#if component.service.isInPassive}}
+    <span class="icon-medkit"></span>
   {{/if}}
 </div>
 <div class="span5 pull-right">

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

@@ -71,7 +71,14 @@
                   <div class="span3 align-right">{{t common.clients}}&nbsp;/</div>
                   <div class="span7">
                     {{#each component in view.clients}}
-                      {{component.displayName}}{{#if component.staleConfigs}} <i class="text-warning icon-refresh"></i>{{/if}}{{#unless component.isLast}},{{/unless}}
+                      {{component.displayName}}
+                      {{#if component.staleConfigs}}
+                        <span class="text-warning icon-refresh"></span>
+                      {{/if}}
+                      {{#if component.service.isInPassive}}
+                        <span class="icon-medkit"></span>
+                      {{/if}}
+                      {{#unless component.isLast}},{{/unless}}
                     {{/each}}
                 </div>
               {{/if}}

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

@@ -65,33 +65,6 @@ App.HostComponentView = Em.View.extend({
     return componentTextStatus;
   }.property('content.passiveState','workStatus'),
 
-  /**
-   * Returns message for health tooltip
-   * in addition to workStatus it also displays passive state of component
-   * @type {String}
-   */
-  componentStatusTooltip: function() {
-    if (this.get('content.passiveState') != 'OFF') {
-      return Em.I18n.t('hosts.component.passive.short.mode');
-    } else {
-      return this.get('componentTextStatus');
-    }
-  }.property('componentTextStatus','content.passiveState'),
-
-  /**
-   * @type {String}
-   */
-  passiveImpliedTextStatus: function() {
-    if(this.get('parentView.content.passiveState') === 'ON') {
-      return Em.I18n.t('hosts.component.passive.implied.host.mode.tooltip');
-    }
-    else
-      if(this.get('content.service.passiveState') === 'ON') {
-        return Em.I18n.t('hosts.component.passive.implied.service.mode.tooltip').format(this.get('content.service.serviceName'));
-      }
-    return '';
-  }.property('content.passiveState','parentView.content.passiveState'),
-
   /**
    * CSS-class for host component status
    * @type {String}
@@ -107,15 +80,10 @@ App.HostComponentView = Em.View.extend({
       return 'health-status-color-blue icon-cog';
     }
 
-    //Class when maintenance
-    if (this.get('content.passiveState') != "OFF") {
-      return 'icon-medkit';
-    }
-
     //For all other cases
     return 'health-status-' + App.HostComponentStatus.getKeyName(this.get('workStatus'));
 
-  }.property('content.passiveState','workStatus'),
+  }.property('workStatus'),
 
   /**
    * CSS-class for disabling drop-down menu with list of host component actions

ambari-web/test/views/main/host/details/host_component_view_test.js

@@ -32,72 +32,6 @@ describe('App.HostComponentView', function() {
     });
   });
 
-  describe('#componentStatusTooltip', function() {
-
-    var tests = Em.A([
-      {
-        content: Em.Object.create({componentTextStatus: 'status', passiveState: 'ON'}),
-        m: 'ON state',
-        e: Em.I18n.t('hosts.component.passive.short.mode')
-      },
-      {
-        content: Em.Object.create({componentTextStatus: 'status', passiveState: 'IMPLIED'}),
-        m: 'IMPLIED state',
-        e: Em.I18n.t('hosts.component.passive.short.mode')
-      },
-      {
-        content: Em.Object.create({componentTextStatus: 'status', passiveState: 'OFF'}),
-        m: 'OFF state',
-        e: 'status'
-      }
-    ]);
-
-    tests.forEach(function(test) {
-      it(test.m, function() {
-        hostComponentView.set('content', test.content);
-        expect(hostComponentView.get('componentStatusTooltip')).to.equal(test.e);
-      });
-    });
-
-  });
-
-  describe('#passiveImpliedTextStatus', function() {
-
-    var tests = Em.A([
-      {
-        content: {service: {passiveState: 'ON'}},
-        parentView: {content: {passiveState: 'ON'}},
-        m: 'service in ON, host in ON',
-        e: Em.I18n.t('hosts.component.passive.implied.host.mode.tooltip')
-      },
-      {
-        content: {service: {passiveState: 'ON', serviceName:'SERVICE_NAME'}},
-        parentView: {content: {passiveState: 'OFF'}},
-        m: 'service in ON, host in OFF',
-        e: Em.I18n.t('hosts.component.passive.implied.service.mode.tooltip').format('SERVICE_NAME')
-      },
-      {
-        content: {service: {passiveState: 'OFF'}},
-        parentView: {content: {passiveState: 'OFF'}},
-        m: 'service in OFF, host in OFF',
-        e: ''
-      }
-    ]);
-
-    tests.forEach(function(test) {
-      it(test.m, function() {
-        hostComponentView = App.HostComponentView.create({
-          startBlinking: function(){},
-          doBlinking: function(){},
-          parentView: test.parentView,
-          content: test.content
-        });
-        expect(hostComponentView.get('passiveImpliedTextStatus')).to.equal(test.e);
-      });
-    });
-
-  });
-
   describe('#disabled', function() {
 
     var tests = Em.A([
@@ -405,11 +339,11 @@ describe('App.HostComponentView', function() {
       },
       {
         content: Em.Object.create({workStatus: 'STARTED', passiveState: 'ON'}),
-        e: 'icon-medkit'
+        e: 'health-status-started'
       },
       {
         content: Em.Object.create({workStatus: 'STARTED', passiveState: 'IMPLIED'}),
-        e: 'icon-medkit'
+        e: 'health-status-started'
       },
       {
         content: Em.Object.create({workStatus: 'STARTED', passiveState: 'OFF'}),

ambari-web/test/views/main/host/details/host_component_views/decommissionable_test.js

@@ -112,12 +112,12 @@ describe('App.Decommissionable', function() {
       {
         content: Em.Object.create({workStatus: 'STARTED', passiveState: 'ON'}),
         isComponentRecommissionAvailable: false,
-        e: 'icon-medkit'
+        e: 'health-status-started'
       },
       {
         content: Em.Object.create({workStatus: 'STARTED', passiveState: 'IMPLIED'}),
         isComponentRecommissionAvailable: false,
-        e: 'icon-medkit'
+        e: 'health-status-started'
       },
       {
         content: Em.Object.create({workStatus: 'STARTED', passiveState: 'OFF'}),