AMBARI-6544. Add ZKFC component to summary page (when NNHA enabled)(xiwang)

ambari-web/app/controllers/global/update_controller.js

@@ -338,7 +338,7 @@ App.UpdateController = Em.Controller.extend({
       isATSInstalled = App.cache['services'].mapProperty('ServiceInfo.service_name').contains('YARN') && App.get('isHadoop21Stack'),
       flumeHandlerParam = isFlumeInstalled ? 'ServiceComponentInfo/component_name=FLUME_HANDLER|' : '',
       atsHandlerParam = isATSInstalled ? 'ServiceComponentInfo/component_name=APP_TIMELINE_SERVER|' : '',
-      haComponents = App.get('isHaEnabled') ? 'ServiceComponentInfo/component_name=JOURNALNODE|' : '',
+      haComponents = App.get('isHaEnabled') ? 'ServiceComponentInfo/component_name=JOURNALNODE|ServiceComponentInfo/component_name=ZKFC|' : '',
       realUrl = '/components/?' + flumeHandlerParam + atsHandlerParam + haComponents +
         'ServiceComponentInfo/category=MASTER&fields=' +
         'ServiceComponentInfo/Version,' +

ambari-web/app/styles/application.less

@@ -2342,6 +2342,9 @@ width:100%;
   .icon-medkit {
     color: black!important;
   }
+  tr.component-small {
+    font-size: 11px;
+  }
   td.summary-label {
     width: 180px;
     text-align: right;

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

@@ -16,20 +16,23 @@
 * limitations under the License.
 }}
 <tr class="hidden"><td></td></tr>
-{{#each masterComp in view.mastersComp}}
-  <tr>
+{{#each comp in view.mastersComp}}
+  <tr {{bindAttr class="comp.isZkfc:component-small"}}>
     <td>
-      <a href="#" {{action showDetails masterComp.host}} title="{{unbound masterComp.host.publicHostName}}" rel="UsageTooltip">
-       {{#if masterComp.displayNameAdvanced}}
-         {{masterComp.displayNameAdvanced}}
-       {{else}}
-         {{masterComp.displayName}}
-       {{/if}}
+      <a href="#" {{action showDetails comp.host}} title="{{unbound comp.host.publicHostName}}" rel="UsageTooltip">
+        {{#if comp.displayNameAdvanced}}
+          {{comp.displayNameAdvanced}}
+        {{else}}
+          {{comp.displayName}}
+        {{/if}}
       </a>
     </td>
     <td>
-      <span rel='healthTooltip' {{bindAttr class="masterComp.statusClass masterComp.statusIconClass" data-original-title="masterComp.passiveTooltip"}}></span>
-      {{masterComp.componentTextStatus}}
+      <span rel='healthTooltip' {{bindAttr class="comp.statusClass comp.statusIconClass" data-original-title="comp.passiveTooltip"}}></span>
+      {{comp.componentTextStatus}}
     </td>
   </tr>
 {{/each}}
+
+
+

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

@@ -42,10 +42,26 @@ App.MainDashboardServiceHdfsView = App.MainDashboardServiceView.extend({
       App.tooltip($('[rel=healthTooltip]'));
     },
     templateName: require('templates/main/service/info/summary/master_components'),
-    mastersComp : function() {
-      return this.get('parentView.service.hostComponents').filter(function(comp){
-        return comp.get('isMaster') && comp.get('componentName') !== 'JOURNALNODE';
-      });
+    mastersComp: function() {
+      if (App.get('isHaEnabled')) {
+        // return all Namenodes followed by its ZKFC
+        var namenodes = this.get('parentView.service.hostComponents').filter(function(comp){
+          return comp.get('isMaster') && comp.get('componentName') !== 'JOURNALNODE';
+        });
+        var zkfcs = this.get('parentView.service.hostComponents').filter(function(comp){
+          return comp.get('componentName') == 'ZKFC';
+        });
+        var nnZkfc = [];
+        namenodes.forEach( function(namenode) {
+          nnZkfc.push(namenode);
+          nnZkfc.push(zkfcs.findProperty('host.publicHostName', namenode.get('host.publicHostName')).set('isZkfc', true));
+        });
+        return nnZkfc;
+      } else {
+        return this.get('parentView.service.hostComponents').filter(function(comp){
+          return comp.get('isMaster') && comp.get('componentName') !== 'JOURNALNODE';
+        });
+      }
     }.property('parentView.service.hostComponents')
   }),