AMBARI-2875. 0/x NodeManagers shown in green color. (xiwang via yusaku)

ambari-web/app/styles/application.less

@@ -1527,11 +1527,6 @@ width:100%;
     width: 20px;
     margin-left: 0;
   }
-
-  .green-live{
-    color: #008000;
-  }
-
   .STARTING, .STARTED {
     .tab-marker-position;
     background-image: @status-live-marker;
@@ -1555,6 +1550,14 @@ width:100%;
       }
     }
   }
+  .service-summary-component-red-dead {
+    color: #ff0000;
+    display: inline;
+  }
+  .service-summary-component-green-live {
+    color: #228b22;
+    display: inline;
+  }
 }
 
 #summary-info {

ambari-web/app/templates/main/dashboard/service/hbase.hbs

@@ -48,12 +48,16 @@
       <!-- RegionServers -->
       <tr>
         <td>{{t dashboard.services.hbase.regionServers}}</td>
-         <td>
-            <span class="green-live">{{view.liveRegionServers.length}}/{{view.service.regionServers.length}} </span> {{t services.service.summary.RegionServersLIVE}}
-            <div class="summary-view-host">
-              <a href="#" {{action filterHosts view.regionServerComponent}}>{{view.regionServesText}}</a>
-            </div>
-         </td>
+        <td>
+          <span>
+            {{#view view.regionServersLiveTextView}}
+              {{view.liveComponents}}/{{view.totalComponents}}
+            {{/view}}
+          </span> {{t services.service.summary.RegionServersLIVE}}
+          <div class="summary-view-host">
+            <a href="#" {{action filterHosts view.regionServerComponent}}>{{view.regionServesText}}</a>
+          </div>
+        </td>
       </tr>
       <!-- Regions in Transition -->
       <tr>

ambari-web/app/templates/main/dashboard/service/hdfs.hbs

@@ -43,12 +43,15 @@
     {{/unless}}
 
       {{view view.dashboardMasterComponentView}}
-
       <!-- Data Nodes -->
       <tr>
         <td>{{t dashboard.services.hdfs.datanodes}}</td>
         <td>
-          <span class="green-live">{{view.dataNodesLive.length}}/{{view.service.dataNodes.length}}</span> {{t services.service.summary.DataNodesLive}}
+          <span>
+            {{#view view.dataNodesLiveTextView}}
+              {{view.liveComponents}}/{{view.totalComponents}}
+            {{/view}}
+          </span>  {{t services.service.summary.DataNodesLive}}
           <div class="summary-view-host">
             <a href="#" {{action filterHosts view.dataNodeComponent}}>{{view.dataNodeHostText}}</a>
           </div>

ambari-web/app/templates/main/dashboard/service/yarn.hbs

@@ -48,7 +48,11 @@
       <tr>
         <td>{{t dashboard.services.yarn.nodeManagers}}</td>
         <td>
-          <span class="green-live">{{view.nodeManagersLive}}/{{view.service.nodeManagerNodes.length}}</span> {{t services.service.summary.nodeManagersLive}}
+          <span>
+            {{#view view.nodeManagersLiveTextView}}
+              {{view.liveComponents}}/{{view.totalComponents}}
+            {{/view}}
+          </span>{{t services.service.summary.nodeManagersLive}}
           <div class="summary-view-host">
             <a href="#" {{action filterHosts view.nodeManagerComponent}}>{{view.nodeManagerText}}</a>
           </div>

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

@@ -23,7 +23,11 @@
 <tr>
   <td class="summary-label">{{t services.ganglia.monitors}}</td>
   <td>
-    <span class="green-live">{{view.monitors}} </span>{{t services.service.summary.GangliaMonitorsLIVE}}
+    <span>
+      {{#view view.monitorsLiveTextView}}
+        {{view.monitors}}
+      {{/view}}
+    </span> {{t services.service.summary.GangliaMonitorsLIVE}}
     <div class="summary-view-host">
        <a {{action filterHosts view.monitorsObj}} href="javascript:void(null)" >{{view.hasManyMonitors}}</a>
     </div>

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

@@ -96,6 +96,18 @@ App.MainDashboardServiceHealthView = Em.View.extend({
   }
 });
 
+App.ComponentLiveTextView =  Em.View.extend({
+  classNameBindings: ['color:service-summary-component-red-dead:service-summary-component-green-live'],
+  service: function() { return this.get("parentView").get("service")}.property("parentView.service"),
+  liveComponents: function() {
+  }.property(),
+  totalComponents: function() {
+  }.property(),
+  color: function() {
+    return this.get("liveComponents") == 0;
+  }.property("liveComponents")
+});
+
 App.MainDashboardServiceView = Em.View.extend({
   classNames: ['service', 'clearfix'],
 

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

@@ -51,6 +51,15 @@ App.MainDashboardServiceHbaseView = App.MainDashboardServiceView.extend({
     }
   }.property("service"),
 
+  regionServersLiveTextView: App.ComponentLiveTextView.extend({
+    liveComponents: function() {
+      return App.HostComponent.find().filterProperty('componentName', 'HBASE_REGIONSERVER').filterProperty("workStatus","STARTED").get('length');
+    }.property("service.hostComponents.@each"),
+    totalComponents: function() {
+      return this.get("service.regionServers.length");
+    }.property("service.regionServers.length")
+  }),
+
   /**
    * Formatted output for passive master components
    */

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

@@ -52,6 +52,15 @@ App.MainDashboardServiceHdfsView = App.MainDashboardServiceView.extend({
     }
   }.property("service"),
 
+  dataNodesLiveTextView: App.ComponentLiveTextView.extend({
+    liveComponents: function() {
+      return App.HostComponent.find().filterProperty('componentName', 'DATANODE').filterProperty("workStatus","STARTED").get("length");
+    }.property("service.hostComponents.@each"),
+    totalComponents: function() {
+      return this.get("service.dataNodes.length");
+    }.property("service.dataNodes.length")
+  }),
+
   dfsTotalBlocks: function(){
     return this.formatUnavailable(this.get('service.dfsTotalBlocks'));
   }.property('service.dfsTotalBlocks'),

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

@@ -82,6 +82,15 @@ App.MainDashboardServiceYARNView = App.MainDashboardServiceView.extend({
     }
   }.property("service.nodeManagerNodes"),
 
+  nodeManagersLiveTextView: App.ComponentLiveTextView.extend({
+    liveComponents: function() {
+      return this.get("service.nodeManagerLiveNodes.length");
+    }.property('service.nodeManagerNodes', 'service.nodeManagerLiveNodes', 'service.nodeManagerLiveNodes.length'),
+    totalComponents: function() {
+      return this.get("service.nodeManagerNodes.length");
+    }.property("service.nodeManagerNodes.length")
+  }),
+
   nodeManagersStatus: function () {
     var nmActive = this.get('service.nodeManagersCountActive');
     var nmLost = this.get('service.nodeManagersCountLost');

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

@@ -138,6 +138,7 @@ App.MainServiceInfoSummaryView = Em.View.extend({
     if (service.get("id") == "GANGLIA") {
       var monitors = service.get('hostComponents').filterProperty('isMaster', false);
       var liveMonitors = monitors.filterProperty("workStatus","STARTED").length;
+      this.set("liveMonitors", liveMonitors);
       if (monitors.length) {
         result = Em.I18n.t('services.service.info.summary.hostsRunningMonitor').format(liveMonitors, monitors.length);
       }
@@ -145,6 +146,29 @@ App.MainServiceInfoSummaryView = Em.View.extend({
     return result;
   }.property('controller.content'),
 
+  monitorsLiveTextView: App.ComponentLiveTextView.extend({
+    liveComponents: function () {
+      var service = this.get('service');
+      if (service.get("id") == "GANGLIA") {
+        return service.get('hostComponents').filterProperty('isMaster', false).filterProperty("workStatus","STARTED").length;
+      } else {
+        return null;
+      }
+    }.property('service.hostComponents.@each'),
+    monitors: function () {
+      var result = '';
+      var service = this.get('parentView.controller.content');
+      if (service.get("id") == "GANGLIA") {
+        var monitors = service.get('hostComponents').filterProperty('isMaster', false);
+        var liveMonitors = monitors.filterProperty("workStatus","STARTED").length;
+        if (monitors.length) {
+          result = Em.I18n.t('services.service.info.summary.hostsRunningMonitor').format(liveMonitors, monitors.length);
+        }
+      }
+      return result;
+    }.property('service.hostComponents.@each')
+  }),
+
   hasManyMonitors: function () {
     var service = this.get('controller.content');
     if (service.get("id") == "GANGLIA") {