AMBARI-4124. Move masters dialog UI has many problems. (Denys Buzhor via alexantonenko)

ambari-web/app/config.js

@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+  console.log = function(){};
+console.warn = function(){};
+
 var App = require('app');
 
 App.testMode = (location.port == '3333'); // test mode is automatically enabled if running on brunch server

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

@@ -24,8 +24,7 @@ App.ReassignMasterWizardStep2Controller = App.WizardStep5Controller.extend({
 
   loadStep: function() {
     this._super();
-    this.rebalanceComponentHosts('NAMENODE');
-    this.rebalanceComponentHosts('SECONDARY_NAMENODE');
+    this.rebalanceComponentHosts(this.get('content.reassign.component_name'));
   },
 
   loadComponents: function () {
@@ -51,6 +50,29 @@ App.ReassignMasterWizardStep2Controller = App.WizardStep5Controller.extend({
       });
     }, this);
     return result;
+  },
+
+  rebalanceComponentHosts:function (componentName) {
+    var currentComponents = this.get("selectedServicesMasters").filterProperty("component_name", componentName),
+      componentHosts = currentComponents.mapProperty("selectedHost"),
+      availableComponentHosts = [],
+      preparedAvailableHosts = null;
+    this.get("hosts").forEach(function (item) {
+      if (this.get('currentHostId') !== item.get('host_name')) {
+        availableComponentHosts.pushObject(item);
+      }
+    }, this);
+    if (availableComponentHosts.length == 0) {
+      return false;
+    }
+    currentComponents.forEach(function (item) {
+      preparedAvailableHosts = availableComponentHosts.slice(0);
+      if (item.get('selectedHost') == this.get('currentHostId') && item.get('component_name') == this.get('content.reassign.component_name')) {
+        item.set('selectedHost', preparedAvailableHosts.objectAt(0).host_name);
+      }
+      preparedAvailableHosts.sort(this.sortHostsByName, this);
+      item.set("availableHosts", preparedAvailableHosts);
+    }, this);
   }
 });
 

ambari-web/app/messages.js

@@ -1160,7 +1160,7 @@ Em.I18n.translations = {
   'services.reassign.step1.message1': 'This wizard will walk you through moving {0}.<br/>',
   'services.reassign.step1.message2': 'The process to reassign {0} involves a combination of <b>automated steps</b> (that will be handled by the wizard) and ' +
       '<b>manual steps</b> (that you must perform in sequence as instructed by the wizard).<br/><br/>',
-  'services.reassign.step1.message3': '<b>All services will be restarted as part of the wizard. You should plan a cluster maintenance window and prepare ' +
+  'services.reassign.step1.message3': '<br/><b>All services will be restarted as part of the wizard. You should plan a cluster maintenance window and prepare ' +
     'for cluster downtime when moving {0}.</b>',
 
   'services.reassign.step2.header':'Assign Master',

ambari-web/app/styles/application.less

@@ -16,6 +16,10 @@
  * limitations under the License.
  */
 
+@space-s: 5px;
+@space-m: 10px;
+@space-l: 20px;
+
 .gradient(@color: #FAFAFA, @start: #FFFFFF, @stop: #F2F2F2) {
   background: @color;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, @start), color-stop(1, @stop));
@@ -5033,9 +5037,16 @@ i.icon-asterisks {
 
 .prrl {
   position: relative;
-  right: 10px;
+  right: @space-m;
+}
+
+.pts {
+  padding-top: @space-s;
 }
 
+.mlc {
+  margin-left: 0;
+}
 #cleanerContainer {
   z-index: 1000;
   position: absolute;
@@ -5049,4 +5060,4 @@ i.icon-asterisks {
   #filterCleaner:hover {
     opacity: .9;
   }
-}
+}

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

@@ -24,51 +24,65 @@
     {{t installer.step5.body.hive}}
   {{/if}}
 </div>
-<div class="assign-masters">
-  <div class="select-hosts">
-    {{#if currentHostId}}
-      <div class="control-group offset1">{{t services.reassign.step2.currentHost}}
-        <span>{{currentHostId}}</span>
+<div class="assign-masters row-fluid">
+  <div class="select-hosts span6">
+    <div class="row-fluid">
+      <div class="span12 control-group">
+        {{#if currentHostId}}
+          <div class="row-fluid">
+            <div class="span4"><span class="pull-right control-label">{{t services.reassign.step2.currentHost}}</span></div>
+            <div class="span8"><span>{{currentHostId}}</span></div>
+          </div>
+        {{/if}}
       </div>
-    {{/if}}
-    <form class="form-horizontal" autocomplete="off">
-      <!-- View for array controller -->
-      {{#each servicesMasters}}
-      <div class="control-group">
-        <label class="control-label">
-          {{#if controller.isReassignHive}}
-            {{t installer.step5.hiveGroup}}
-          {{else}}
-            {{display_name}}:
-          {{/if}}
-        </label>
-        {{#if isHiveCoHost}}
-          <label class="host-name">{{selectedHost}}<i class="icon-asterisks">&#10037</i></label>
-        {{else}}
-        <div class="controls">
-          {{view App.SelectHostView
-            contentBinding="availableHosts"
-            optionValuePath="content.host_name"
-            optionLabelPath="content.host_info"
-            selectedHostBinding="selectedHost"
-            componentNameBinding="component_name"
-            zIdBinding="zId"
-            disabledBinding="isInstalled"
-          }}
-          {{#if showAddControl}}
-            {{view App.AddControlView componentNameBinding="component_name"}}
-          {{/if}}
-          {{#if showRemoveControl}}
-            {{view App.RemoveControlView componentNameBinding="component_name" zIdBinding="zId"}}
-          {{/if}}
+      <div class="clearfix"></div>
+      <div class="row-fluid">
+        <div class="span12 control-group">
+          <form class="form-horizontal" autocomplete="off">
+            <!-- View for array controller -->
+            {{#each servicesMasters}}
+              <div class="row-fluid">
+                <div class="span4">
+                  <div class="control-group">
+                    <label class="pts pull-right">
+                      {{#if controller.isReassignHive}}
+                        {{t installer.step5.hiveGroup}}
+                      {{else}}
+                        {{display_name}}:
+                      {{/if}}
+                    </label>
+                  </div>
+                </div>
+                <div class="span8">
+                  {{#if isHiveCoHost}}
+                    <label class="host-name">{{selectedHost}}<i class="icon-asterisks">&#10037</i></label>
+                  {{else}}
+                    {{view App.SelectHostView
+                      contentBinding="availableHosts"
+                      optionValuePath="content.host_name"
+                      optionLabelPath="content.host_info"
+                      selectedHostBinding="selectedHost"
+                      componentNameBinding="component_name"
+                      zIdBinding="zId"
+                      disabledBinding="isInstalled"
+                    }}
+                    {{#if showAddControl}}
+                      {{view App.AddControlView componentNameBinding="component_name"}}
+                    {{/if}}
+                    {{#if showRemoveControl}}
+                      {{view App.RemoveControlView componentNameBinding="component_name" zIdBinding="zId"}}
+                    {{/if}}
+                  </div>
+                {{/if}}
+              </div>
+            {{/each}}
+          </form>
         </div>
-        {{/if}}
       </div>
-      {{/each}}
-    </form>
+    </div>
   </div>
 
-  <div class="host-assignments">
+  <div class="host-assignments span6">
     {{#each masterHostMapping}}
     <div class="mapping-box round-corners well">
       <div class="hostString"><span>{{hostInfo}}</span></div>
@@ -83,7 +97,7 @@
       <span><strong>{{remainingHosts}}</strong> {{t installer.step5.attention}}</span></div>
     {{/if}}
   </div>
-  <div style="clear: both;"></div>
+  <div class="clearfix"></div>
 </div>
 <div class="btn-area">
   <a class="btn pull-left" {{action back href="true"}}>&larr; {{t common.back}}</a>