AMBARI-4019. On Move Wizard, component layout should show non-moving items as gray (alexantonenko)

ambari-web/app/controllers/main/service/reassign/step2_controller.js

@@ -28,8 +28,13 @@ App.ReassignMasterWizardStep2Controller = App.WizardStep5Controller.extend({
   loadComponents: function () {
     var components = this.get('components').filterProperty('isMaster', true);
     var masterComponents = this.get('content.masterComponentHosts');
+    var componentNameToReassign = this.get('content').get('reassign').component_name;
     var result = [];
     masterComponents.forEach(function (master) {
+      var color = "grey";
+      if(master.component == componentNameToReassign){
+        color = 'green';
+      }
       result.push({
         component_name: master.component,
         display_name: App.format.role(master.component),
@@ -37,7 +42,8 @@ App.ReassignMasterWizardStep2Controller = App.WizardStep5Controller.extend({
         isInstalled: true,
         serviceId: App.HostComponent.find().findProperty('componentName', master.component).get('serviceName'),
         availableHosts: [],
-        isHiveCoHost: ['HIVE_METASTORE', 'WEBHCAT_SERVER'].contains(master.component)
+        isHiveCoHost: ['HIVE_METASTORE', 'WEBHCAT_SERVER'].contains(master.component),
+        color: color
       });
     }, this);
     return result;

ambari-web/app/templates/wizard/step5.hbs

@@ -68,7 +68,7 @@
     <div class="mapping-box round-corners well">
       <div class="hostString"><span>{{hostInfo}}</span></div>
       {{#each masterServices}}
-      <span class="assignedService round-corners">{{display_name}}</span>
+      <span {{bindAttr class="color :assignedService :round-corners"}}>{{display_name}}</span>
       {{/each}}
     </div>
     {{/each}}