AMBARI-3249. NameNode HA Wizard: UI tweaks

ambari-web/app/controllers/main/admin/highAvailability/rollback_controller.js

@@ -222,7 +222,7 @@ App.HighAvailabilityRollbackController = App.HighAvailabilityProgressPageControl
   },
   deleteFailoverControllers: function(){
     var hostNames = this.get('content.masterComponentHosts').filterProperty('component', 'NAMENODE').mapProperty('hostName');
-    this.unInstallComponent('ZKFC', hostNames);
+    this.deleteComponent('ZKFC', hostNames);
   },
   stopStandbyNameNode: function(){
     var hostName = this.get('content.masterComponentHosts').findProperty('isAddNameNode', true).hostName;;

ambari-web/app/messages.js

@@ -676,6 +676,15 @@ Em.I18n.translations = {
   'admin.highAvailability.wizard.step6.bodyHeader':'Manual Steps Required: Initialize JournalNodes',
   'admin.highAvailability.wizard.step8.bodyHeader':'Manual Steps Required: Initialize NameNode HA Metadata',
 
+  'admin.highAvailability.wizard.step5.notice.inProgress':'Please wait while the wizard configures the components.',
+  'admin.highAvailability.wizard.step7.notice.inProgress':'Please wait while the wizard starts the components.',
+  'admin.highAvailability.wizard.step9.notice.inProgress':'Please wait while the wizard finalizes the HA setup.',
+  'admin.highAvailability.wizard.rollback.notice.inProgres':'Reverting Back to Non-HA Setup',
+
+  'admin.highAvailability.wizard.step5.header.title':'Configure Components',
+  'admin.highAvailability.wizard.step7.header.title':'Start Components',
+  'admin.highAvailability.wizard.step9.header.title':'Finalize HA Setup',
+  'admin.highAvailability.wizard.rollback.header.title':'Reverting Back to Non-HA Setup.',
 
   'admin.highAvailability.wizard.step5.task0.title':'Stop All Services',
   'admin.highAvailability.wizard.step5.task1.title':'Install Additional NameNode',
@@ -721,7 +730,7 @@ Em.I18n.translations = {
   'admin.highAvailability.rollback.task9.title':'Delete JournalNodes',
   'admin.highAvailability.rollback.task10.title':'Delete additional NameNode',
   'admin.highAvailability.rollback.task11.title':'Start all services',
-  'admin.highAvailability.rollback.notice.inProgress': 'Please wait while NameNode HA is being disabled.',
+  'admin.highAvailability.rollback.notice.inProgress':'Please wait while the wizard reverts back to the non-HA setup.',
 
   'admin.highAvailability.wizard.step8.body':
     '<ol>' +

ambari-web/app/styles/application.less

@@ -467,15 +467,20 @@ h1 {
         font-size: 20px;
       }
       .not-active-link{
-        text-decoration: none;
-        pointer-events: none;
         color: #999;
-        cursor: default;
+        a{
+          text-decoration: none;
+          pointer-events: none;
+          color: #999;
+          cursor: default;
+        }
       }
       .active-link{
-        pointer-events: auto;
-        color: #0088cc;
-        cursor: pointer;
+        a{
+          pointer-events: auto;
+          color: #0088cc;
+          cursor: pointer;
+        }
       }
       .retry {
         cursor: pointer;
@@ -4097,7 +4102,7 @@ i.icon-asterisks {
   .navbar-static-top .container,
   .navbar-fixed-top .container,
   .navbar-fixed-bottom .container {
-    width: 1170px;
+    width: 1130px;
   }
 
   .span12 {

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

@@ -16,15 +16,15 @@
 * limitations under the License.
 }}
 <div id="ha-progress-page">
-  <h2>{{t admin.highAvailability.wizard.progressPage.header}}</h2>
+  <h2>{{view.headerTitle}}</h2>
 
   <div {{bindAttr class="view.noticeClass"}}>{{view.notice}}</div>
   {{#each task in controller.tasks}}
   {{#view view.taskView contentBinding="task"}}
     <div class="item">
-      <div {{bindAttr class=":pull-left controller.isRollback::span4 controller.isRollback:span3"}}>
+      <div {{bindAttr class=":pull-left view.linkClass controller.isRollback::span4 controller.isRollback:span3"}}>
         <i {{bindAttr class="view.icon view.iconColor"}}></i>
-        <a {{bindAttr class="view.linkClass"}} {{action "hostsLogPopup" task target="view"}} >{{task.title}}</a>
+        <a {{bindAttr class=""}} {{action "hostsLogPopup" task target="view"}} >{{task.title}}</a>
       </div>
       <div {{bindAttr class="view.showProgressBar::hide :row :span5 :pull-left" }}>
         <div {{bindAttr class=":progress-bar controller.isRollback::span8 controller.isRollback:span3"}}>

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

@@ -25,13 +25,29 @@ App.HighAvailabilityProgressPageView = Em.View.extend({
     this.get('controller').loadStep();
   },
 
+  headerTitle: function () {
+    var currentStep = App.router.get('highAvailabilityWizardController.currentStep');
+    if(currentStep == 1) {
+      return  Em.I18n.t('admin.highAvailability.wizard.rollback.header.title');
+    }else {
+      return  Em.I18n.t('admin.highAvailability.wizard.step' + currentStep + '.header.title');
+    }
+  }.property(),
+
   submitButtonText: Em.I18n.t('common.next'),
 
   noticeCompleted: Em.I18n.t('admin.highAvailability.wizard.progressPage.notice.completed'),
 
   noticeFailed: Em.I18n.t('admin.highAvailability.wizard.progressPage.notice.failed'),
 
-  noticeInProgress: Em.I18n.t('admin.highAvailability.wizard.progressPage.notice.inProgress'),
+  noticeInProgress: function () {
+    var currentStep = App.router.get('highAvailabilityWizardController.currentStep');
+    if(currentStep == 1) {
+      return  Em.I18n.t('admin.highAvailability.rollback.notice.inProgress');
+    }else {
+      return  Em.I18n.t('admin.highAvailability.wizard.step' + currentStep + '.notice.inProgress');
+    }
+  }.property(),
 
   notice: Em.I18n.t('admin.highAvailability.wizard.progressPage.notice.inProgress'),