AMBARI-3138. NameNode HA Wizard: layout change for the Review page. (xiwang via yusaku)

ambari-web/app/messages.js

@@ -690,10 +690,12 @@ Em.I18n.translations = {
   'admin.highAvailability.wizard.step9.task5.title':'Delete Secondary NameNode',
   'admin.highAvailability.wizard.step9.notice.completed':'NameNode HA has been enabled successfully.',
 
-  'admin.highAvailability.wizard.step3.nn1':'Current NameNode is on {0}.',
-  'admin.highAvailability.wizard.step3.nn2':'Additional NameNode will be installed on {0}.',
-  'admin.highAvailability.wizard.step3.sn':'Existing Secondary NameNode on {0} will be disabled.',
-  'admin.highAvailability.wizard.step3.jn':'JournalNode will be installed on following hosts:',
+  'admin.highAvailability.wizard.step3.curNameNode': '<b>Current NameNode:</b> ',
+  'admin.highAvailability.wizard.step3.addNameNode': '<b>Additional NameNode:</b> ',
+  'admin.highAvailability.wizard.step3.secNameNode': '<b>Secondary NameNode:</b> ',
+  'admin.highAvailability.wizard.step3.journalNode': '<b>JournalNode:</b> ',
+  'admin.highAvailability.wizard.step3.toBeInstalled': 'TO BE INSTALLED',
+  'admin.highAvailability.wizard.step3.toBeDisabled': 'TO BE DISABLED',
   'admin.highAvailability.wizard.step4.ckNotCreated':'Checkpoint not created yet',
   'admin.highAvailability.wizard.step4.ckCreated':'Checkpoint created',
   'admin.highAvailability.wizard.step6.jsNoInit':'JournalNodes not initialized yet',

ambari-web/app/styles/application.less

@@ -509,9 +509,30 @@ h1 {
       display: inline-block;
     }
   }
+
   #ha-step4 li, #ha-step6 li, #ha-step8 li {
     margin-top: 8px;
   }
+
+  #ha-step3-review-table {
+    td {
+      text-align: center;
+      vertical-align: top;
+      padding: 5px;
+      ul {
+        margin: 0px;
+      }
+      li {
+        list-style-type: none;
+      }
+    }
+    .to-be-disabled-red {
+      color: #ff0000;
+    }
+    .to-be-installed-green {
+      color: #008000;
+    }
+  }
 }
 
 #stack-upgrade {

ambari-web/app/templates/main/admin/highAvailability/step3.hbs

@@ -25,15 +25,39 @@
 
 <div id="step8-content" class="well pre-scrollable">
   <div id="step8-info">
-    {{view.curNameNode}} <br/>
-    {{view.addNameNode}} <br/>
-    {{view.secondaryNameNode}} <br/>
-    {{t admin.highAvailability.wizard.step3.jn}} <br/>
-    <ul>
-      {{#each item in view.journalNodes}}
-        <li>{{item.hostName}}</li>
-      {{/each}}
-    </ul>
+    <table id="ha-step3-review-table">
+      <tr>
+        <td>{{t admin.highAvailability.wizard.step3.curNameNode}}</td>
+        <td>{{view.curNameNode}}</td><td></td>
+      </tr>
+      <tr>
+        <td>{{t admin.highAvailability.wizard.step3.secNameNode}}</td>
+        <td>{{view.secondaryNameNode}}</td>
+        <td class="to-be-disabled-red"><i class="icon-minus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeDisabled}}</td>
+      </tr>
+      <tr>
+        <td>{{t admin.highAvailability.wizard.step3.addNameNode}}</td>
+        <td>{{view.addNameNode}}</td>
+        <td class="to-be-installed-green"><i class="icon-plus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeInstalled}}</td>
+      </tr>
+      <tr>
+        <td>{{t admin.highAvailability.wizard.step3.journalNode}}</td>
+        <td>
+          <ul>
+            {{#each item in view.journalNodes}}
+              <li>{{item.hostName}}</li>
+            {{/each}}
+          </ul>
+        </td>
+        <td>
+          <ul>
+            <div class="to-be-installed-green"><i class="icon-plus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeInstalled}}</div>
+            <div class="to-be-installed-green"><i class="icon-plus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeInstalled}}</div>
+            <div class="to-be-installed-green"><i class="icon-plus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeInstalled}}</div>
+          </ul>
+        </td>
+      </tr>
+    </table>
   </div>
 </div>
 

ambari-web/app/views/main/admin/highAvailability/step3_view.js

@@ -25,15 +25,15 @@ App.HighAvailabilityWizardStep3View = Em.View.extend({
 
   curNameNode: function () {
     var nN = this.get('controller.content.masterComponentHosts').findProperty('isCurNameNode', true);
-    return Em.I18n.t('admin.highAvailability.wizard.step3.nn1').format(nN.hostName);
+    return nN.hostName;
   }.property('controller.content.masterComponentHosts'),
   addNameNode: function () {
     var addNN = this.get('controller.content.masterComponentHosts').findProperty('isAddNameNode', true);
-    return Em.I18n.t('admin.highAvailability.wizard.step3.nn2').format(addNN.hostName);
+    return addNN.hostName;
   }.property('controller.content.masterComponentHosts'),
   secondaryNameNode: function () {
     var sn = this.get('controller.content.masterComponentHosts').findProperty('component', "SECONDARY_NAMENODE");
-    return Em.I18n.t('admin.highAvailability.wizard.step3.sn').format(sn.hostName);
+    return sn.hostName;
   }.property('controller.content.masterComponentHosts'),
   journalNodes: function () {
     return this.get('controller.content.masterComponentHosts').filterProperty('component', "JOURNALNODE");