AMBARI-3450. NameNode HA Wizard: clarify steps for "Initialize Metadata" to avoid mistakes by the user. (yusaku)

ambari-web/app/messages.js

@@ -767,15 +767,22 @@ Em.I18n.translations = {
   'admin.highAvailability.rollback.notice.inProgress':'Please wait while the wizard reverts back to the non-HA setup.',
 
   'admin.highAvailability.wizard.step8.body':
+    '<div class="alert alert-info">' +
     '<ol>' +
-    '<li>Login to the additional NameNode host <b>{2}</b>.</li>' +
-    '<li>Initialize the metadata for the additional NameNode by running:' +
-    '<div class="code-snippet">sudo su -l {0} -c \'hdfs namenode -bootstrapStandby\'</div></li>' +
     '<li>Login to the NameNode host <b>{1}</b>.</li>' +
     '<li>Initialize the metadata for NameNode automatic failover by running:' +
     '<div class="code-snippet">sudo su -l {0} -c \'hdfs zkfc -formatZK\'</div></li>' +
-    '<li>Please proceed once you have completed the steps above.</li>' +
-    '</ol>',
+    '</div>' +
+    '<div class="alert alert-info">' +
+    '<ol start="3">' +
+    '<li>Login to the Additional NameNode host <b>{2}</b>.<br>' +
+    '<div class="alert alert-warn"><strong>Important!</strong> Be sure to login to the Additional NameNode host.<br>This is a different host from the Steps 1 and 2 above.</div>' +
+    '</li>' +
+    '<li>Initialize the metadata for the Additional NameNode by running:' +
+    '<div class="code-snippet">sudo su -l {0} -c \'hdfs namenode -bootstrapStandby\'</div></li>' +
+    '</ol>' +
+    '</div>' +
+    'Please proceed once you have completed the steps above.',
   'admin.highAvailability.wizard.step6.body':
     '<ol>' +
     '<li>Login to the NameNode host <b>{1}</b>.</li>' +

ambari-web/app/styles/application.less

@@ -505,7 +505,7 @@ h1 {
       margin-left: 0;
     }
   }
-  #ha-step1, #ha-step4 {
+  #ha-step1, #ha-step4, #ha-step8 {
     .alert.alert-warn {
       margin-top: 10px;
       margin-bottom: 10px;

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

@@ -17,9 +17,7 @@
 }}
 <div id="ha-step8">
   <h2>{{t admin.highAvailability.wizard.step8.bodyHeader}}</h2>
-  <div class="alert alert-info">
-    {{{view.step8BodyText}}}
-  </div>
+  {{{view.step8BodyText}}}
   <div class="btn-area">
     <a class="btn btn-success pull-right" {{action next}}>{{t common.next}} &rarr;</a>
     <span class="pull-right btn-extra-info">{{!t admin.highAvailability.wizard.step8.metaNoInit}}</span>