AMBARI-2993. NameNode HA Wizard: Progress page UI tweaks. (Aleksandr Kovalenko via yusaku)

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

@@ -20,6 +20,8 @@ var App = require('app');
 
 App.HighAvailabilityWizardStep5Controller = App.HighAvailabilityProgressPageController.extend({
 
+  name:"highAvailabilityWizardStep5Controller",
+
   commands: ['stopAllServices', 'installNameNode', 'installJournalNodes', 'startJournalNodes', 'disableSNameNode', 'reconfigureHDFS'],
 
   stopAllServices: function () {

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

@@ -20,6 +20,8 @@ var App = require('app');
 
 App.HighAvailabilityWizardStep7Controller = App.HighAvailabilityProgressPageController.extend({
 
+  name:"highAvailabilityWizardStep7Controller",
+
   commands: ['startZooKeeperServers', 'startNameNode'],
 
   startZooKeeperServers: function () {

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

@@ -20,6 +20,8 @@ var App = require('app');
 
 App.HighAvailabilityWizardStep9Controller = App.HighAvailabilityProgressPageController.extend({
 
+  name:"highAvailabilityWizardStep9Controller",
+
   commands: ['startSecondNameNode', 'installZKFC', 'startZKFC', 'startAllServices'],
 
   startSecondNameNode: function () {

ambari-web/app/styles/application.less

@@ -446,16 +446,30 @@ h1 {
       }
     }
   }
-  #step14, #ha-progress-page {
+  #step14 {
     .item {
       line-height: 30px;
       i {
         font-size: 20px;
       }
+    }
+    .row {
+      margin-left: 0;
+    }
+  }
+  #ha-progress-page {
+    .item {
+      line-height: 40px;
+      width:100%;
+      float:left;
+
+      i {
+        font-size: 20px;
+      }
       .not-active-link{
         text-decoration: none;
         pointer-events: none;
-        color: black;
+        color: #999;
         cursor: default;
       }
       .active-link{
@@ -470,6 +484,17 @@ h1 {
           font-size: 14px;
         }
       }
+      .pull-left{
+        float: left;
+      }
+      .progress-bar{
+        margin-top: 10px;
+
+        .progress{
+          margin-bottom: 0px;
+        }
+      }
+
     }
     .row {
       margin-left: 0;
@@ -3991,7 +4016,7 @@ i.icon-asterisks {
   //when screen is wide, the modal width is fixed
   .full-width-modal {
     .modal{
-      width: 1170px;
+      width: 1155px;
       margin: -350px 0 0 -583px;
     }
   }

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

@@ -21,27 +21,31 @@
   <div {{bindAttr class="view.noticeClass"}}>{{view.notice}}</div>
   {{#each task in controller.tasks}}
   {{#view view.taskView contentBinding="task"}}
-  <div class="item">
-    <i {{bindAttr class="view.icon view.iconColor"}}></i>
-    <a {{bindAttr class="view.linkClass"}} {{action "hostsLogPopup" task target="view"}} >{{task.title}}</a>
-    {{#if task.showRetry}}
-    <a {{action retryTask target="controller"}} class="btn btn-primary retry">
-      <i class="icon-repeat icon-white"></i>
-      {{t common.retry}}
-    </a>
-    {{/if}}
-  </div>
-  <div {{bindAttr class="view.showProgressBar::hide :row :span12" }}>
-    <div class="progress-bar span4">
-      <div class="progress-striped active progress-info progress">
-        <div class="bar" {{bindAttr style="view.barWidth"}}></div>
+    <div class="item">
+      <div class="pull-left span4">
+        <i {{bindAttr class="view.icon view.iconColor"}}></i>
+        <a {{bindAttr class="view.linkClass"}} {{action "hostsLogPopup" task target="view"}} >{{task.title}}</a>
+      </div>
+      <div {{bindAttr class="view.showProgressBar::hide :row :span5 :pull-left" }}>
+        <div class="progress-bar span8">
+          <div class="progress-striped active progress-info progress">
+            <div class="bar" {{bindAttr style="view.barWidth"}}></div>
+          </div>
+        </div>
+        <div class="span1">{{task.progress}}&#37;</div>
+      </div>
+      <div>
+      {{#if task.showRetry}}
+        <a {{action retryTask target="controller"}} class="btn btn-primary retry">
+          <i class="icon-repeat icon-white"></i>
+          {{t common.retry}}
+        </a>
+      {{/if}}
       </div>
     </div>
-    <div class="span1">{{task.progress}}&#37;</div>
-  </div>
   {{/view}}
   {{/each}}
   <div class="btn-area">
-    <a {{bindAttr class=":btn controller.isSubmitDisabled:disabled :btn-success :pull-right"}} {{action done target="controller"}}>{{t common.done}}</a>
+    <a {{bindAttr class=":btn controller.isSubmitDisabled:disabled :btn-success :pull-right"}} {{action done target="controller"}}>{{t common.next}}</a>
   </div>
 </div>