ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From xiw...@apache.org
Subject [3/3] ambari git commit: AMBARI-18743. Improve wizard styles and apply on Ambari.(xiwang)
Date Tue, 01 Nov 2016 00:07:58 GMT
AMBARI-18743. Improve wizard styles and apply on Ambari.(xiwang)


Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/334d4ccd
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/334d4ccd
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/334d4ccd

Branch: refs/heads/trunk
Commit: 334d4ccd3d54035b5bc6bfc23ab4548366f37c0d
Parents: 4ffc8ff
Author: Xi Wang <xiwang@apache.org>
Authored: Fri Oct 28 15:34:15 2016 -0700
Committer: Xi Wang <xiwang@apache.org>
Committed: Mon Oct 31 16:50:21 2016 -0700

----------------------------------------------------------------------
 .../common/assign_master_components.hbs         | 223 +++++------
 ambari-web/app/templates/common/progress.hbs    |  95 ++---
 ambari-web/app/templates/installer.hbs          |   5 +-
 .../hawq/activateStandby/step1.hbs              |  12 +-
 .../hawq/activateStandby/step2.hbs              |  52 +--
 .../hawq/activateStandby/wizard.hbs             |   2 -
 .../highAvailability/hawq/addStandby/step1.hbs  |  12 +-
 .../highAvailability/hawq/addStandby/step3.hbs  |  71 ++--
 .../highAvailability/hawq/addStandby/wizard.hbs |   2 -
 .../hawq/removeStandby/step1.hbs                |  12 +-
 .../hawq/removeStandby/step2.hbs                |  46 +--
 .../hawq/removeStandby/wizard.hbs               |   2 -
 .../highAvailability/journalNode/step1.hbs      |  10 +-
 .../highAvailability/journalNode/step2.hbs      |  37 +-
 .../highAvailability/journalNode/step3.hbs      |  31 +-
 .../highAvailability/journalNode/step5.hbs      |  20 +-
 .../highAvailability/journalNode/wizard.hbs     |   4 +-
 .../nameNode/rollbackHA/rollback_wizard.hbs     |   4 +-
 .../nameNode/rollbackHA/step1.hbs               |  22 +-
 .../nameNode/rollbackHA/step2.hbs               |   6 +-
 .../nameNode/rollbackHA/step3.hbs               |   7 +-
 .../admin/highAvailability/nameNode/step1.hbs   |  31 +-
 .../admin/highAvailability/nameNode/step3.hbs   | 121 +++---
 .../admin/highAvailability/nameNode/step4.hbs   |  10 +-
 .../admin/highAvailability/nameNode/step6.hbs   |   6 +-
 .../admin/highAvailability/nameNode/step8.hbs   |   6 +-
 .../admin/highAvailability/nameNode/wizard.hbs  |   4 +-
 .../highAvailability/rangerAdmin/step1.hbs      |  36 +-
 .../highAvailability/rangerAdmin/step3.hbs      |  68 ++--
 .../highAvailability/rangerAdmin/wizard.hbs     |   4 +-
 .../highAvailability/resourceManager/step1.hbs  |  12 +-
 .../highAvailability/resourceManager/step3.hbs  |  46 +--
 .../highAvailability/resourceManager/wizard.hbs |   2 -
 .../app/templates/main/admin/kerberos/step1.hbs |  63 ++--
 .../app/templates/main/admin/kerberos/step2.hbs |  24 +-
 .../app/templates/main/admin/kerberos/step3.hbs | 117 +++---
 .../app/templates/main/admin/kerberos/step4.hbs |  19 +-
 .../app/templates/main/admin/kerberos/step5.hbs |  40 +-
 .../templates/main/admin/kerberos/wizard.hbs    |   4 +-
 .../add_alert_definition.hbs                    |   4 +-
 .../main/alerts/add_alert_definition/step1.hbs  |  26 +-
 .../main/alerts/add_alert_definition/step2.hbs  |  21 +-
 .../main/alerts/add_alert_definition/step3.hbs  |  29 +-
 ambari-web/app/templates/main/host/add.hbs      |   2 -
 ambari-web/app/templates/main/service/add.hbs   |   4 +-
 .../app/templates/main/service/reassign.hbs     |  12 +-
 .../main/service/widgets/create/step1.hbs       |  40 +-
 .../main/service/widgets/create/step2.hbs       |  35 +-
 .../main/service/widgets/create/step2_graph.hbs |  50 +--
 .../service/widgets/create/step2_number.hbs     |  24 +-
 .../service/widgets/create/step2_template.hbs   |  56 +--
 .../main/service/widgets/create/step3.hbs       |  82 ++--
 .../main/service/widgets/create/wizard.hbs      |   4 +-
 .../app/templates/main/service/widgets/edit.hbs |   4 +-
 ambari-web/app/templates/wizard/step0.hbs       |  52 +--
 ambari-web/app/templates/wizard/step1.hbs       | 371 ++++++++++---------
 ambari-web/app/templates/wizard/step10.hbs      |  61 +--
 ambari-web/app/templates/wizard/step2.hbs       | 237 ++++++------
 ambari-web/app/templates/wizard/step3.hbs       | 239 ++++++------
 ambari-web/app/templates/wizard/step4.hbs       |  79 ++--
 ambari-web/app/templates/wizard/step6.hbs       | 137 +++----
 ambari-web/app/templates/wizard/step7.hbs       |  24 +-
 ambari-web/app/templates/wizard/step8.hbs       | 106 +++---
 ambari-web/app/templates/wizard/step9.hbs       | 209 ++++++-----
 64 files changed, 1660 insertions(+), 1536 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/common/assign_master_components.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/assign_master_components.hbs b/ambari-web/app/templates/common/assign_master_components.hbs
index a9da3e5..b3470a8 100644
--- a/ambari-web/app/templates/common/assign_master_components.hbs
+++ b/ambari-web/app/templates/common/assign_master_components.hbs
@@ -15,130 +15,137 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div id="assign-masters">
+<div id="assign-masters" class="wizard-content col-md-9">
 {{#if view.showTitle}}
-  <h2>{{view.title}}</h2>
+  <h4 class="step-title">{{view.title}}</h4>
 {{/if}}
-  <div class="alert alert-info">
+  <p class="step-description">
     {{{view.alertMessage}}}
-  </div>
-  {{#each msg in controller.generalErrorMessages}}
-    <div class="alert alert-danger">{{msg}}</div>
-  {{/each}}
-  {{#each msg in controller.generalWarningMessages}}
-      <div class="alert alert-warning">{{msg}}</div>
-  {{/each}}
-  {{#if controller.isLoaded}}
-    <div class="assign-masters row">
-      <div class="select-hosts col-md-7">
-        <div class="row col-md-12">
-          {{#if showCurrentHost}}
-            <div class="col-md-12 control-group mlc">
-              <div class="row">
-                <div class="col-md-4"><span class="pull-right control-label">{{t services.reassign.step2.currentHost}}</span>
-                </div>
-                <div class="col-md-8"><span>{{currentHostId}}</span></div>
-              </div>
-            </div>
-          {{/if}}
-          <div class="clearfix"></div>
-          <div class="row">
-            <div class="col-md-12 control-group">
-              <form class="form-horizontal" autocomplete="off">
-                <!-- View for array controller -->
-                {{#each controller.additionalHostsList}}
-                  <div class="row additional-hosts-list">
-                    <div class="col-md-5">
-                      <label class="pts pull-right">
-                        {{label}}
-                      </label>
-                    </div>
-                    <div class="col-md-7 host-cell">
-                      {{host}}
+  </p>
+  <div class="panel panel-default">
+    <div class="panel-body">
+      {{#each msg in controller.generalErrorMessages}}
+        <div class="alert alert-danger">{{msg}}</div>
+      {{/each}}
+      {{#each msg in controller.generalWarningMessages}}
+          <div class="alert alert-warning">{{msg}}</div>
+      {{/each}}
+      {{#if controller.isLoaded}}
+        <div class="assign-masters row">
+          <div class="select-hosts col-md-7">
+            <div class="row col-md-12">
+              {{#if showCurrentHost}}
+                <div class="col-md-12 control-group mlc">
+                  <div class="row">
+                    <div class="col-md-4"><span class="pull-right control-label">{{t services.reassign.step2.currentHost}}</span>
                     </div>
+                    <div class="col-md-8"><span>{{currentHostId}}</span></div>
                   </div>
-                {{/each}}
-                {{#each servicesMastersToShow}}
-                  <div class="row">
-                    <div class="col-md-5">
-                      <div class="control-group">
-                        <label class="pts pull-right">
-                          {{#if showCurrentPrefix}}
-                            {{t common.current}}
-                          {{/if}}
-                          {{#if showAdditionalPrefix}}
-                            {{t common.additional}}
-                          {{/if}}
-                          {{display_name}}:
-                        </label>
+                </div>
+              {{/if}}
+              <div class="clearfix"></div>
+              <div class="row">
+                <div class="col-md-12 control-group">
+                  <form class="form-horizontal" autocomplete="off">
+                    <!-- View for array controller -->
+                    {{#each controller.additionalHostsList}}
+                      <div class="row additional-hosts-list">
+                        <div class="col-md-5">
+                          <label class="pts pull-right">
+                            {{label}}
+                          </label>
+                        </div>
+                        <div class="col-md-7 host-cell">
+                          {{host}}
+                        </div>
                       </div>
-                    </div>
-                    <div class="col-md-7">
-                      {{#if isServiceCoHost}}
-                        <div class="hostName">
-                          {{selectedHost}}<i class="glyphicon glyphicon-asterisks">&#10037;</i>
+                    {{/each}}
+                    {{#each servicesMastersToShow}}
+                      <div class="row">
+                        <div class="col-md-5">
+                          <div class="control-group">
+                            <label class="pts pull-right">
+                              {{#if showCurrentPrefix}}
+                                {{t common.current}}
+                              {{/if}}
+                              {{#if showAdditionalPrefix}}
+                                {{t common.additional}}
+                              {{/if}}
+                              {{display_name}}:
+                            </label>
+                          </div>
                         </div>
-                      {{else}}
-                        <div {{bindAttr class="errorMessage:error: warnMessage:warning: :form-group"}}>
-                          {{#if view.shouldUseInputs}}
-                            {{view App.InputHostView
-                            componentBinding="this"
-                            disabledBinding="isInstalled" }}
+                        <div class="col-md-7">
+                          {{#if isServiceCoHost}}
+                            <div class="hostName">
+                              {{selectedHost}}<i class="glyphicon glyphicon-asterisks">&#10037;</i>
+                            </div>
                           {{else}}
-                            {{view App.SelectHostView
-                            componentBinding="this"
-                            disabledBinding="isInstalled"
-                            optionValuePath="content.host_name"
-                            optionLabelPath="content.host_info" }}
-                          {{/if}}
-                          {{#if showAddControl}}
-                            {{view App.AddControlView componentNameBinding="component_name"}}
-                          {{/if}}
-                          {{#if showRemoveControl}}
-                            {{view App.RemoveControlView componentNameBinding="component_name" serviceComponentIdBinding="serviceComponentId"}}
-                          {{/if}}
+                            <div {{bindAttr class="errorMessage:error: warnMessage:warning: :form-group"}}>
+                              {{#if view.shouldUseInputs}}
+                                {{view App.InputHostView
+                                componentBinding="this"
+                                disabledBinding="isInstalled" }}
+                              {{else}}
+                                {{view App.SelectHostView
+                                componentBinding="this"
+                                disabledBinding="isInstalled"
+                                optionValuePath="content.host_name"
+                                optionLabelPath="content.host_info" }}
+                              {{/if}}
+                              {{#if showAddControl}}
+                                {{view App.AddControlView componentNameBinding="component_name"}}
+                              {{/if}}
+                              {{#if showRemoveControl}}
+                                {{view App.RemoveControlView componentNameBinding="component_name" serviceComponentIdBinding="serviceComponentId"}}
+                              {{/if}}
 
-                          <span rel="popover" title="Warning" {{bindAttr data-content="warnMessage"}}>
-                            {{#if warnMessage}}
-                              <i class="glyphicon glyphicon-warning-sign"></i>
-                            {{/if}}
-                          </span>
-                          <span rel="popover" title="Error" {{bindAttr data-content="errorMessage"}}>
-                            {{#if errorMessage}}
-                              <i class="glyphicon glyphicon-exclamation-sign"></i>
-                            {{/if}}
-                          </span>
+                              <span rel="popover" title="Warning" {{bindAttr data-content="warnMessage"}}>
+                                {{#if warnMessage}}
+                                  <i class="glyphicon glyphicon-warning-sign"></i>
+                                {{/if}}
+                              </span>
+                              <span rel="popover" title="Error" {{bindAttr data-content="errorMessage"}}>
+                                {{#if errorMessage}}
+                                  <i class="glyphicon glyphicon-exclamation-sign"></i>
+                                {{/if}}
+                              </span>
+                            </div>
+                          {{/if}}
                         </div>
-                      {{/if}}
-                    </div>
-                  </div>
-                {{/each}}
-              </form>
+                      </div>
+                    {{/each}}
+                  </form>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
 
-      <div class="host-assignments col-md-5">
-        {{#each masterHostMapping}}
-          <div class="mapping-box round-corners well">
-            <div class="hostString"><span>{{hostInfo}}</span></div>
-            {{#each masterServicesToDisplay}}
-              <span {{bindAttr class="isInstalled:assignedService:newService :round-corners"}}>{{display_name}}</span>
+          <div class="host-assignments col-md-5">
+            {{#each masterHostMapping}}
+              <div class="mapping-box round-corners well">
+                <div class="hostString"><span>{{hostInfo}}</span></div>
+                {{#each masterServicesToDisplay}}
+                  <span {{bindAttr class="isInstalled:assignedService:newService :round-corners"}}>{{display_name}}</span>
+                {{/each}}
+              </div>
             {{/each}}
-          </div>
-        {{/each}}
 
-        {{#if remainingHosts}}
-          <div class="remaining-hosts round-corners well">
-            <span><strong>{{remainingHosts}}</strong> {{t installer.step5.attention}}</span></div>
-        {{/if}}
-      </div>
-      <div class="clearfix"></div>
+            {{#if remainingHosts}}
+              <div class="remaining-hosts round-corners well">
+                <span><strong>{{remainingHosts}}</strong> {{t installer.step5.attention}}</span></div>
+            {{/if}}
+          </div>
+          <div class="clearfix"></div>
+        </div>
+      {{else}}
+        {{view App.SpinnerView}}
+      {{/if}}
     </div>
-  {{else}}
-    {{view App.SpinnerView}}
-  {{/if}}
+  </div>
+</div>
+
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     {{#if view.isBackButtonVisible}}
       <button type="button" class="btn btn-default pull-left installer-back-btn" {{bindAttr disabled="App.router.btnClickInProgress"}} {{action back}}>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/common/progress.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/progress.hbs b/ambari-web/app/templates/common/progress.hbs
index 90a85a9..8485698 100644
--- a/ambari-web/app/templates/common/progress.hbs
+++ b/ambari-web/app/templates/common/progress.hbs
@@ -15,8 +15,8 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div id="common-progress-page">
-  <h2>{{view.headerTitle}}</h2>
+<div id="common-progress-page" class="wizard-content col-md-9">
+  <h4 class="step-title">{{view.headerTitle}}</h4>
 
   <div {{bindAttr class="view.noticeClass"}}>{{{view.notice}}}
     {{#if controller.showRetry}}
@@ -25,50 +25,57 @@
       </a>
     {{/if}}
   </div>
-  {{#if controller.isLoaded}}
-    {{#each task in controller.tasks}}
-      {{#view view.taskView contentBinding="task"}}
-        <div class="item">
-          <div {{bindAttr class=":pull-left view.linkClass view.parentView.labelWidth"}}>
-            <i {{bindAttr class="view.icon view.iconColor"}}></i>
-            <a {{action "showHostProgressPopup" task target="controller"}} >{{task.title}}</a>
-          </div>
-          <div {{bindAttr class="view.showProgressBar::hide :row :col-md-5 :pull-left" }}>
-            <div {{bindAttr class=":progress-wrapper controller.isRollback::col-md-8 controller.isRollback:col-md-3"}}>
-              <div class="progress">
-                <div class="progress-bar-striped active progress-bar-info progress-bar" {{bindAttr style="view.barWidth"}}></div>
+
+  <div class="panel panel-default">
+    <div class="panel-body">
+      {{#if controller.isLoaded}}
+        {{#each task in controller.tasks}}
+          {{#view view.taskView contentBinding="task"}}
+            <div class="item">
+              <div {{bindAttr class=":pull-left view.linkClass view.parentView.labelWidth"}}>
+                <i {{bindAttr class="view.icon view.iconColor"}}></i>
+                <a {{action "showHostProgressPopup" task target="controller"}} >{{task.title}}</a>
+              </div>
+              <div {{bindAttr class="view.showProgressBar::hide :row :col-md-5 :pull-left" }}>
+                <div {{bindAttr class=":progress-wrapper controller.isRollback::col-md-8 controller.isRollback:col-md-3"}}>
+                  <div class="progress">
+                    <div class="progress-bar-striped active progress-bar-info progress-bar" {{bindAttr style="view.barWidth"}}></div>
+                  </div>
+                </div>
+                <div {{bindAttr class=":col-md-1 view.hidePercent:noDisplay"}}>{{task.progress}}&#37;</div>
+              </div>
+              <div>
+                {{#if task.showRetry}}
+                  <a {{action retryTask target="controller"}} class="btn btn-primary retry"
+                                                              rel="tooltip"
+                                                              data-trigger="click" {{bindAttr title="view.showDBTooltip:testDBRetryTooltip"}}>
+                    <i class="glyphicon glyphicon-repeat glyphicon-white"></i>
+                    {{t common.retry}}
+                  </a>
+                {{/if}}
+                {{#if task.showRollback}}
+                  <a {{action rollback target="controller"}} class="btn btn-primary retry">
+                    <i class="glyphicon glyphicon-repeat glyphicon-white"></i>
+                    {{t common.rollBack}}
+                  </a>
+                {{/if}}
+                {{#if task.showSkip}}
+                  <a {{action skipTask target="controller"}} class="btn btn-primary retry">
+                    <i class="glyphicon-step-forward glyphicon glyphicon-white"></i>
+                    {{t common.skip}}
+                  </a>
+                {{/if}}
               </div>
             </div>
-            <div {{bindAttr class=":col-md-1 view.hidePercent:noDisplay"}}>{{task.progress}}&#37;</div>
-          </div>
-          <div>
-            {{#if task.showRetry}}
-              <a {{action retryTask target="controller"}} class="btn btn-primary retry"
-                                                          rel="tooltip"
-                                                          data-trigger="click" {{bindAttr title="view.showDBTooltip:testDBRetryTooltip"}}>
-                <i class="glyphicon glyphicon-repeat glyphicon-white"></i>
-                {{t common.retry}}
-              </a>
-            {{/if}}
-            {{#if task.showRollback}}
-              <a {{action rollback target="controller"}} class="btn btn-primary retry">
-                <i class="glyphicon glyphicon-repeat glyphicon-white"></i>
-                {{t common.rollBack}}
-              </a>
-            {{/if}}
-            {{#if task.showSkip}}
-              <a {{action skipTask target="controller"}} class="btn btn-primary retry">
-                <i class="glyphicon-step-forward glyphicon glyphicon-white"></i>
-                {{t common.skip}}
-              </a>
-            {{/if}}
-          </div>
-        </div>
-      {{/view}}
-    {{/each}}
-  {{else}}
-    {{view App.SpinnerView}}
-  {{/if}}
+          {{/view}}
+        {{/each}}
+      {{else}}
+        {{view App.SpinnerView}}
+      {{/if}}
+    </div>
+  </div>
+</div>
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     {{#if view.showBackButton}}
       <button class="btn btn-default pull-left" {{bindAttr disabled="controller.isBackButtonDisabled"}} {{action back target="controller"}}>&larr; {{t common.back}}</button>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/installer.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/installer.hbs b/ambari-web/app/templates/installer.hbs
index 4cac80c..8ea98a1 100644
--- a/ambari-web/app/templates/installer.hbs
+++ b/ambari-web/app/templates/installer.hbs
@@ -38,9 +38,8 @@
           <li {{bindAttr class="isStep10:active view.isStep10Disabled:disabled view.isStep10Completed:completed"}}><a href="javascript:void(null);" {{action gotoStep10 target="controller"}}><i class="step-marker"><span class="step-index">10</span></i><p class="step-name">{{t installer.step10.header}}</p></a></li>
         </ul>
       </div>
-      <div class="wizard-content col-md-9">
-        {{outlet}}
-      </div>
+        {{! outlet includes body and footer }}
+      {{outlet}}
     </div>
   </div>
 {{/if}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/hawq/activateStandby/step1.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/hawq/activateStandby/step1.hbs b/ambari-web/app/templates/main/admin/highAvailability/hawq/activateStandby/step1.hbs
index 47f9dc2..13852b6 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/hawq/activateStandby/step1.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/hawq/activateStandby/step1.hbs
@@ -15,13 +15,11 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div>
-  <h2>{{t admin.activateHawqStandby.wizard.step1.header}}</h2>
-
-  <div class="alert alert-info">
-    {{t admin.activateHawqStandby.wizard.step1.body}}
-  </div>
-
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.activateHawqStandby.wizard.step1.header}}</h4>
+  <p class="step-description">{{t admin.activateHawqStandby.wizard.step1.body}}</p>
+</div>
+</div class="wizard-footer col-md-12">
   <div class="btn-area">
     <a class="btn btn-success pull-right" {{action next}}>{{t common.next}} &rarr;</a>
   </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/hawq/activateStandby/step2.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/hawq/activateStandby/step2.hbs b/ambari-web/app/templates/main/admin/highAvailability/hawq/activateStandby/step2.hbs
index 984df84..267c44e 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/hawq/activateStandby/step2.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/hawq/activateStandby/step2.hbs
@@ -15,39 +15,45 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<h2>{{t admin.activateHawqStandby.wizard.step2.header}}</h2>
 
-<div class="alert alert-info">
-  {{t admin.activateHawqStandby.wizard.step2.confirm.host.body}}
-</div>
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.activateHawqStandby.wizard.step2.header}}</h4>
+  <p class="step-description">{{t admin.activateHawqStandby.wizard.step2.confirm.host.body}}</p>
 
-<div id="activate-standby-step2-content" class="well pre-scrollable">
-    <div id="activate-standby-step2-info">
-        <table id="ha-step3-review-table">
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <div id="activate-standby-step2-content" class="well pre-scrollable">
+        <div id="activate-standby-step2-info">
+          <table id="ha-step3-review-table">
             <tr>
                 <td>{{t admin.activateHawqStandby.wizard.step2.hawqMaster}}</td>
                 <td>{{controller.content.hawqHosts.hawqMaster}}</td>
-		        <td><span class="to-be-disabled-red"><i class="glyphicon glyphicon-minus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeDeleted}}</span></td>
+                <td><span class="to-be-disabled-red"><i class="glyphicon glyphicon-minus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeDeleted}}</span></td>
             </tr>
             <tr>
                 <td>{{t admin.activateHawqStandby.wizard.step2.hawqStandby}}</td>
                 <td>{{controller.content.hawqHosts.hawqStandby}}</td>
-		        <td><span class="to-be-installed-green"><i class="glyphicon glyphicon-arrow-up"></i>&nbsp;{{t admin.activateHawqStandby.wizard.step2.toBeActivated}}</span></td>
+                <td><span class="to-be-installed-green"><i class="glyphicon glyphicon-arrow-up"></i>&nbsp;{{t admin.activateHawqStandby.wizard.step2.toBeActivated}}</span></td>
             </tr>
-        </table>
-    </div>
-</div>
+          </table>
+        </div>
+      </div>
 
-{{#if controller.isLoaded}}
-  <div id="serviceConfig">
-    {{{t admin.activateHawqStandby.wizard.step2.confirm.config.body}}}
-    {{view App.ServiceConfigView}}
+        {{#if controller.isLoaded}}
+          <div id="serviceConfig">
+            {{{t admin.activateHawqStandby.wizard.step2.confirm.config.body}}}
+            {{view App.ServiceConfigView}}
+          </div>
+        {{else}}
+          {{view App.SpinnerView}}
+        {{/if}}
+    </div>
   </div>
-{{else}}
-  {{view App.SpinnerView}}
-{{/if}}
-
-<div class="btn-area">
-    <a class="btn btn-default" {{action back}}>&larr; {{t common.back}}</a>
-    <a class="btn btn-success pull-right" {{action submit target="controller"}} {{bindAttr disabled="controller.isSubmitDisabled"}}>{{t common.next}} &rarr;</a>
 </div>
+<div class="wizard-footer col-md-12">
+    <div class="btn-area">
+        <a class="btn btn-default" {{action back}}>&larr; {{t common.back}}</a>
+        <a class="btn btn-success pull-right" {{action submit target="controller"}} {{bindAttr disabled="controller.isSubmitDisabled"}}>{{t common.next}} &rarr;</a>
+    </div>
+</div>
+

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/hawq/activateStandby/wizard.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/hawq/activateStandby/wizard.hbs b/ambari-web/app/templates/main/admin/highAvailability/hawq/activateStandby/wizard.hbs
index 23cfcf0..38650c4 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/hawq/activateStandby/wizard.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/hawq/activateStandby/wizard.hbs
@@ -25,12 +25,10 @@
         <li {{bindAttr class="isStep3:active view.isStep3Disabled:disabled view.isStep3Completed:completed"}}><a href="javascript:void(null);"  {{action gotoStep3 target="controller"}}><i class="step-marker"><span class="step-index">3</span></i><p class="step-name">{{t admin.activateHawqStandby.wizard.step3.header}}</p></a></li>
       </ul>
     </div>
-    <div class="wizard-content col-md-9">
       {{#if view.isLoaded}}
         {{outlet}}
       {{else}}
         {{view App.SpinnerView}}
       {{/if}}
-    </div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/hawq/addStandby/step1.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/hawq/addStandby/step1.hbs b/ambari-web/app/templates/main/admin/highAvailability/hawq/addStandby/step1.hbs
index 2e315e3..0024b56 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/hawq/addStandby/step1.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/hawq/addStandby/step1.hbs
@@ -15,13 +15,11 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div>
-  <h2>{{t admin.addHawqStandby.wizard.step1.header}}</h2>
-
-  <div class="alert alert-info">
-    {{t admin.addHawqStandby.wizard.step1.body}}
-  </div>
-
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.addHawqStandby.wizard.step1.header}}</h4>
+  <p class="step-description">{{t admin.addHawqStandby.wizard.step1.body}}</p>
+</div>
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     <a class="btn btn-success pull-right" {{action next}}>{{t common.next}} &rarr;</a>
   </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/hawq/addStandby/step3.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/hawq/addStandby/step3.hbs b/ambari-web/app/templates/main/admin/highAvailability/hawq/addStandby/step3.hbs
index 02ed51b..ba146e7 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/hawq/addStandby/step3.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/hawq/addStandby/step3.hbs
@@ -15,44 +15,47 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<h2>{{t admin.addHawqStandby.wizard.step3.header}}</h2>
-
-<div class="alert alert-info">
-  {{t admin.addHawqStandby.wizard.step3.confirm.host.body}}
-</div>
-
-<div id="ha-step3-content" class="well pre-scrollable">
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.addHawqStandby.wizard.step3.header}}</h4>
+  <p class="step-description">{{t admin.addHawqStandby.wizard.step3.confirm.host.body}}</p>
+  <div class="panel panel-default">
+    <div class="panel-body">
+    <div id="ha-step3-content" class="well pre-scrollable">
     <div id="step8-info">
-        <table id="ha-step3-review-table">
-            <tr>
-                <td>
-		     <b>{{t admin.addHawqStandby.wizard.step3.hawqMaster}}</b>:
-                </td>
-                <td>{{controller.content.hawqHosts.hawqMaster}}</td>
-                <td></td>
-            </tr>
-            <tr>
-                <td>
-                  <b>{{t admin.addHawqStandby.wizard.step3.newHawqStandby}}</b>:
-                </td>
-                <td>{{controller.content.hawqHosts.newHawqStandby}}</td>
-                <td><span class="to-be-installed-green"><i class="glyphicon glyphicon-plus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeInstalled}}</span></td>
-            </tr>
-        </table>
+      <table id="ha-step3-review-table">
+        <tr>
+            <td>
+         <b>{{t admin.addHawqStandby.wizard.step3.hawqMaster}}</b>:
+            </td>
+            <td>{{controller.content.hawqHosts.hawqMaster}}</td>
+            <td></td>
+        </tr>
+        <tr>
+            <td>
+              <b>{{t admin.addHawqStandby.wizard.step3.newHawqStandby}}</b>:
+            </td>
+            <td>{{controller.content.hawqHosts.newHawqStandby}}</td>
+            <td><span class="to-be-installed-green"><i class="glyphicon glyphicon-plus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeInstalled}}</span></td>
+        </tr>
+      </table>
+    </div>
     </div>
-</div>
-
-{{#if controller.isLoaded}}
-  <div id="serviceConfig">
-    {{{t admin.addHawqStandby.wizard.step3.confirm.config.body}}}
 
-    {{view App.ServiceConfigView}}
+    {{#if controller.isLoaded}}
+      <div id="serviceConfig">
+        {{{t admin.addHawqStandby.wizard.step3.confirm.config.body}}}
+        {{view App.ServiceConfigView}}
+      </div>
+    {{else}}
+      {{view App.SpinnerView}}
+    {{/if}}
+    </div>
   </div>
-{{else}}
-  {{view App.SpinnerView}}
-{{/if}}
-
-<div class="btn-area">
+</div>
+<div class="wizard-footer col-md-12">
+  <div class="btn-area">
     <a class="btn btn-default" {{action back}}>&larr; {{t common.back}}</a>
     <a class="btn btn-success pull-right" {{action submit target="controller"}} {{bindAttr disabled="controller.isSubmitDisabled"}}>{{t common.next}} &rarr;</a>
+  </div>
 </div>
+

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/hawq/addStandby/wizard.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/hawq/addStandby/wizard.hbs b/ambari-web/app/templates/main/admin/highAvailability/hawq/addStandby/wizard.hbs
index 7c21df4..bd1cf26 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/hawq/addStandby/wizard.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/hawq/addStandby/wizard.hbs
@@ -26,12 +26,10 @@
         <li {{bindAttr class="isStep4:active view.isStep4Disabled:disabled view.isStep4Completed:completed"}}><a href="javascript:void(null);"  {{action gotoStep4 target="controller"}}><i class="step-marker"><span class="step-index">4</span></i><p class="step-name">{{t admin.addHawqStandby.wizard.step4.header}}</p></a></li>
       </ul>
     </div>
-    <div class="wizard-content col-md-9">
       {{#if view.isLoaded}}
         {{outlet}}
       {{else}}
         {{view App.SpinnerView}}
       {{/if}}
-    </div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/hawq/removeStandby/step1.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/hawq/removeStandby/step1.hbs b/ambari-web/app/templates/main/admin/highAvailability/hawq/removeStandby/step1.hbs
index 02ceb03..2c251ed 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/hawq/removeStandby/step1.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/hawq/removeStandby/step1.hbs
@@ -15,13 +15,11 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div>
-  <h2>{{t admin.removeHawqStandby.wizard.step1.header}}</h2>
-
-  <div class="alert alert-info">
-    {{t admin.removeHawqStandby.wizard.step1.body}}
-  </div>
-
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.removeHawqStandby.wizard.step1.header}}</h4>
+  <p class="step-description">{{t admin.removeHawqStandby.wizard.step1.body}}</p>
+</div>
+</div class="wizard-footer col-md-12">
   <div class="btn-area">
     <a class="btn btn-success pull-right" {{action next}}>{{t common.next}} &rarr;</a>
   </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/hawq/removeStandby/step2.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/hawq/removeStandby/step2.hbs b/ambari-web/app/templates/main/admin/highAvailability/hawq/removeStandby/step2.hbs
index 014c25a..197cb2b 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/hawq/removeStandby/step2.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/hawq/removeStandby/step2.hbs
@@ -15,29 +15,31 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<h2>{{t admin.removeHawqStandby.wizard.step2.header}}</h2>
-
-<div class="alert alert-info">
-  {{t admin.removeHawqStandby.wizard.step2.confirm.host.body}}
-</div>
-
-<div id="remove-standby-step2-content" class="well pre-scrollable">
-    <div id="remove-standby-step2-info">
-        <table id="ha-step3-review-table">
-            <tr>
-                <td>{{t admin.removeHawqStandby.wizard.step2.hawqStandby}}</td>
-                <td>{{controller.content.hawqHosts.hawqStandby}}</td>
-		        <td><span class="to-be-disabled-red"><i class="glyphicon glyphicon-minus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeDeleted}}</span></td>
-            </tr>
-        </table>
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.removeHawqStandby.wizard.step2.header}}</h4>
+  <p class="step-description">{{t admin.removeHawqStandby.wizard.step2.confirm.host.body}}</p>
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <div id="remove-standby-step2-content" class="well pre-scrollable">
+        <div id="remove-standby-step2-info">
+            <table id="ha-step3-review-table">
+                <tr>
+                    <td>{{t admin.removeHawqStandby.wizard.step2.hawqStandby}}</td>
+                    <td>{{controller.content.hawqHosts.hawqStandby}}</td>
+                    <td><span class="to-be-disabled-red"><i class="glyphicon glyphicon-minus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeDeleted}}</span></td>
+                </tr>
+            </table>
+        </div>
+      </div>
+      <div id="serviceConfig">
+        {{{t admin.removeHawqStandby.wizard.step2.confirm.config.body}}}
+      </div>
     </div>
+  </div>
 </div>
-
-<div id="serviceConfig">
-  {{{t admin.removeHawqStandby.wizard.step2.confirm.config.body}}}
-</div>
-
-<div class="btn-area">
+<div class="wizard-footer col-md-12">
+  <div class="btn-area">
     <a class="btn btn-default" {{action back}}>&larr; {{t common.back}}</a>
     <a class="btn btn-success pull-right" {{action submit target="controller"}} {{bindAttr disabled="controller.isSubmitDisabled"}}>{{t common.next}} &rarr;</a>
-</div>
+  </div>
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/hawq/removeStandby/wizard.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/hawq/removeStandby/wizard.hbs b/ambari-web/app/templates/main/admin/highAvailability/hawq/removeStandby/wizard.hbs
index 13714df..41835b3 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/hawq/removeStandby/wizard.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/hawq/removeStandby/wizard.hbs
@@ -25,12 +25,10 @@
         <li {{bindAttr class="isStep3:active view.isStep3Disabled:disabled view.isStep3Completed:completed"}}><a href="javascript:void(null);"  {{action gotoStep3 target="controller"}}><i class="step-marker"><span class="step-index">3</span></i><p class="step-name">{{t admin.removeHawqStandby.wizard.step3.header}}</p></a></li>
       </ul>
     </div>
-    <div class="wizard-content col-md-9">
       {{#if view.isLoaded}}
         {{outlet}}
       {{else}}
         {{view App.SpinnerView}}
       {{/if}}
-    </div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/journalNode/step1.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/journalNode/step1.hbs b/ambari-web/app/templates/main/admin/highAvailability/journalNode/step1.hbs
index e9e6fec..fcde440 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/journalNode/step1.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/journalNode/step1.hbs
@@ -15,7 +15,11 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<h2>{{t admin.manageJournalNode.wizard.step1.header}}</h2>
-<div class="btn-area">
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.manageJournalNode.wizard.step1.header}}</h4>
+</div>
+<div class="wizard-footer col-md-12">
+  <div class="btn-area">
     <a class="btn btn-success pull-right" {{action next}}>{{t common.next}} &rarr;</a>
-</div>
\ No newline at end of file
+  </div>
+</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/journalNode/step2.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/journalNode/step2.hbs b/ambari-web/app/templates/main/admin/highAvailability/journalNode/step2.hbs
index 67a63fd..ae01f46 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/journalNode/step2.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/journalNode/step2.hbs
@@ -16,11 +16,12 @@
 * limitations under the License.
 }}
 
-
-<h2>{{t admin.manageJournalNode.wizard.step3.header}}</h2>
-
-<div id="manage-journal-node-step2-content" class="well pre-scrollable">
-    <div id="step8-info">
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.manageJournalNode.wizard.step3.header}}</h4>
+  <div class="panel panel-default">
+    <div class="panel-body">
+    <div id="manage-journal-node-step2-content" class="well pre-scrollable">
+      <div id="step8-info">
         <table id="manage-journal-node-step2-review-table">
             <tr>
                 <td>{{t admin.highAvailability.wizard.step3.journalNode}}</td>
@@ -41,23 +42,27 @@
                 </td>
             </tr>
         </table>
+      </div>
     </div>
+      <div id="serviceConfig">
+        {{#if controller.isLoaded}}
+            {{{t admin.manageJournalNode.wizard.step3.confirm.config.body}}}
+            {{view App.ServiceConfigView isNotEditableBinding="controller.isNotEditable"}}
+        {{else}}
+            {{view App.SpinnerView}}
+        {{/if}}
+      </div>
+    </div>
+  </div>
 </div>
 
-
-<div id="serviceConfig">
-    {{#if controller.isLoaded}}
-        {{{t admin.manageJournalNode.wizard.step3.confirm.config.body}}}
-        {{view App.ServiceConfigView isNotEditableBinding="controller.isNotEditable"}}
-    {{else}}
-        {{view App.SpinnerView}}
-    {{/if}}
-</div>
-
-<div class="btn-area">
+<div class="wizard-footer col-md-12">
+  <div class="btn-area">
     <a class="btn" {{action back}}>&larr; {{t common.back}}</a>
     <a class="btn btn-success pull-right" {{bindAttr disabled="controller.isNextDisabled"}} {{action next}}>{{t common.next}} &rarr;</a>
     {{#if App.router.nextBtnClickInProgress}}
         {{view App.SpinnerView tagName="span" classNames="pull-right"}}
     {{/if}}
+  </div>
 </div>
+

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/journalNode/step3.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/journalNode/step3.hbs b/ambari-web/app/templates/main/admin/highAvailability/journalNode/step3.hbs
index b87497f..e105e11 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/journalNode/step3.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/journalNode/step3.hbs
@@ -15,18 +15,21 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div id="manage-journal-node-step3">
-    <h2>{{t admin.manageJournalNode.wizard.step3.header}}</h2>
-    {{#unless controller.isNameNodeStarted}}
-        <div class="alert alert-error">
-            {{t admin.highAvailability.wizard.step4.error.nameNode}}
-        </div>
-    {{/unless}}
-    <div class="alert alert-info">
-        {{{view.step3BodyText}}}
-    </div>
-    <div class="btn-area">
-        <a  {{bindAttr class="controller.isNextEnabled::disabled :btn :btn-success :pull-right"}} {{action done target="controller"}}>{{t common.next}} &rarr;</a>
-        <span class="pull-right btn-extra-info">{{view.nnCheckPointText}}</span>
-    </div>
+<div id="manage-journal-node-step3" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.manageJournalNode.wizard.step3.header}}</h4>
+  {{#unless controller.isNameNodeStarted}}
+    <p class="step-description">
+        {{t admin.highAvailability.wizard.step4.error.nameNode}}
+    </p>
+  {{/unless}}
+  <p class="step-description">
+    {{{view.step3BodyText}}}
+  </p>
+</div>
+
+<div class="wizard-footer col-md-12">
+  <div class="btn-area">
+    <a  {{bindAttr class="controller.isNextEnabled::disabled :btn :btn-success :pull-right"}} {{action done target="controller"}}>{{t common.next}} &rarr;</a>
+    <span class="pull-right btn-extra-info">{{view.nnCheckPointText}}</span>
+  </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/journalNode/step5.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/journalNode/step5.hbs b/ambari-web/app/templates/main/admin/highAvailability/journalNode/step5.hbs
index 53634cd..2b1e0d2 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/journalNode/step5.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/journalNode/step5.hbs
@@ -15,13 +15,15 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div id="manage-journal-node-step5">
-    <h2>{{t admin.manageJournalNode.wizard.step5.bodyHeader}}</h2>
-    <div class="alert alert-info">
-        {{{view.step5BodyText}}}
-    </div>
-    <div class="btn-area">
-        <a {{bindAttr class="controller.isNextEnabled::disabled :btn :btn-success :pull-right"}} {{action done target="controller"}}>{{t common.next}} &rarr;</a>
-        <span class="pull-right btn-extra-info">{{view.jnCheckPointText}}</span>
-    </div>
+<div id="manage-journal-node-step5" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.manageJournalNode.wizard.step5.bodyHeader}}</h4>
+  <p class="step-description">
+    {{{view.step5BodyText}}}
+  </p>
+</div>
+<div class="wizard-footer col-md-12">
+  <div class="btn-area">
+    <a {{bindAttr class="controller.isNextEnabled::disabled :btn :btn-success :pull-right"}} {{action done target="controller"}}>{{t common.next}} &rarr;</a>
+    <span class="pull-right btn-extra-info">{{view.jnCheckPointText}}</span>
+  </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/journalNode/wizard.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/journalNode/wizard.hbs b/ambari-web/app/templates/main/admin/highAvailability/journalNode/wizard.hbs
index c191d50..e654c50 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/journalNode/wizard.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/journalNode/wizard.hbs
@@ -28,8 +28,6 @@
                 <li {{bindAttr class="isStep6:active view.isStep6Disabled:disabled view.isStep6Completed:completed"}}><a href="javascript:void(null);"  {{action gotoStep6 target="controller"}}><i class="step-marker"><span class="step-index">6</span></i><p class="step-name">{{t admin.manageJournalNode.wizard.step6.header}}</p></a></li>
             </ul>
         </div>
-        <div class="wizard-content col-md-9">
-            {{outlet}}
-        </div>
+        {{outlet}}
     </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/rollback_wizard.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/rollback_wizard.hbs b/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/rollback_wizard.hbs
index 9d325c6..20c9fa7 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/rollback_wizard.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/rollback_wizard.hbs
@@ -25,8 +25,6 @@
         <li {{bindAttr class="isStep3:active view.isStep3Disabled:disabled view.isStep3Completed:completed"}}><a href="javascript:void(null);"  {{action gotoStep3 target="controller"}}><i class="step-marker"><span class="step-index">3</span></i><p class="step-name">{{t admin.rollbackHighAvailability.wizard.step3.header}}</p></a></li>
       </ul>
     </div>
-    <div class="wizard-content col-md-9">
-      {{outlet}}
-    </div>
+    {{outlet}}
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step1.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step1.hbs b/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step1.hbs
index 16330b9..a81b3d7 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step1.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step1.hbs
@@ -17,15 +17,16 @@
 }}
 <div>
   {{#if view.isLoaded}}
-      <h2>{{t admin.rollbackHighAvailability.wizard.step1.header}}</h2>
+    <div class="wizard-content col-md-9">
+      <h4 class="step-title">{{t admin.rollbackHighAvailability.wizard.step1.header}}</h4>
 
       <div class="alert alert-info">
           <p>
               Select Additional NameNode host:
-            {{view Ember.Select
-            contentBinding="view.addNNHosts"
-            valueBinding="view.selectedAddNNHost"
-            }}
+              {{view Ember.Select
+              contentBinding="view.addNNHosts"
+              valueBinding="view.selectedAddNNHost"
+              }}
           </p>
 
           <div class="code-snippet">Tip: Suggested host <b>{{view.tipAddNNHost}}</b></div>
@@ -33,17 +34,20 @@
       <div class="alert alert-info">
           <p>
               Select Secondary NameNode host:
-            {{view Ember.Select
-            contentBinding="view.sNNHosts"
-            valueBinding="view.selectedSNNHost"
-            }}
+              {{view Ember.Select
+              contentBinding="view.sNNHosts"
+              valueBinding="view.selectedSNNHost"
+              }}
           </p>
 
           <div class="code-snippet">Tip: Suggested host <b>{{view.tipSNNHost}}</b></div>
       </div>
+    </div>
+    <div class="wizard-footer col-md-12">
       <div class="btn-area">
           <a {{bindAttr class=":btn controller.isNameServiceIdValid::disabled :btn-success :pull-right"}} {{action done target="view"}}>{{t common.next}} &rarr;</a>
       </div>
+    </div>
   {{else}}
       {{view App.SpinnerView}}
   {{/if}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step2.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step2.hbs b/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step2.hbs
index 10b14d1..20130ad 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step2.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step2.hbs
@@ -15,11 +15,13 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div>
-  <h2>{{t admin.rollbackHighAvailability.wizard.step2.header}}</h2>
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.rollbackHighAvailability.wizard.step2.header}}</h4>
   <div class="alert alert-info">
       {{{view.step2BodyText}}}
   </div>
+</div>
+<div class="wizard-footer col-md-12">
    <div class="btn-area">
       <a  {{bindAttr class=":btn :btn-success :pull-right"}} {{action next}}>{{t common.next}} &rarr;</a>
       <span class="pull-right btn-extra-info">{{view.nnCheckPointText}}</span>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step3.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step3.hbs b/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step3.hbs
index 850b4e3..4956975 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step3.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step3.hbs
@@ -15,9 +15,10 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div>
-  <h2>{{t admin.rollbackHighAvailability.wizard.step3.header}}</h2>
-
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.rollbackHighAvailability.wizard.step3.header}}</h4>
+</div>
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     <a {{bindAttr class=":btn controller.isNameServiceIdValid::disabled :btn-success :pull-right"}} {{action next}}>{{t common.next}} &rarr;</a>
   </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/nameNode/step1.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/nameNode/step1.hbs b/ambari-web/app/templates/main/admin/highAvailability/nameNode/step1.hbs
index 63793e8..f5087f9 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/nameNode/step1.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/nameNode/step1.hbs
@@ -15,10 +15,9 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div id="ha-step1">
-  <h2>{{t admin.highAvailability.wizard.step1.header}}</h2>
-
-  <div class="alert alert-info">
+<div id="ha-step1" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.highAvailability.wizard.step1.header}}</h4>
+  <p class="step-description">
     {{t admin.highAvailability.wizard.step1.body}}
     <div class="alert alert-warning">
       {{t admin.highAvailability.wizard.step1.alert}}
@@ -26,18 +25,22 @@
         {{{t admin.highAvailability.wizard.step1.hawq.alert}}}
       {{/if}}
     </div>
-  </div>
-
-  <div {{bindAttr class=":form-group view.showInputError:error view.showInputError:has-error :form-horizontal :nameserviceid-input"}}>
-    <label class="control-label">{{t admin.highAvailability.wizard.step1.nameserviceid}}:</label>
-
-    <div>
-      {{view Ember.TextField valueBinding="content.nameServiceId" classNames="input-sm form-control"}}
-      <span {{bindAttr class=":help-block :validation-block :col-sm-9 :pull-right view.showInputError::hidden"}}>
-        {{t admin.highAvailability.wizard.step1.nameserviceid.error}}
-      </span>
+  </p>
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <div {{bindAttr class=":form-group view.showInputError:error view.showInputError:has-error :form-horizontal :nameserviceid-input"}}>
+        <label class="control-label">{{t admin.highAvailability.wizard.step1.nameserviceid}}:</label>
+        <div>
+          {{view Ember.TextField valueBinding="content.nameServiceId" classNames="input-sm form-control"}}
+          <span {{bindAttr class=":help-block :validation-block :col-sm-9 :pull-right view.showInputError::hidden"}}>
+            {{t admin.highAvailability.wizard.step1.nameserviceid.error}}
+          </span>
+        </div>
+      </div>
     </div>
   </div>
+</div>
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     <a {{bindAttr class=":btn controller.isNameServiceIdValid::disabled :btn-success :pull-right"}} {{action next target="controller"}}>{{t common.next}} &rarr;</a>
   </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/nameNode/step3.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/nameNode/step3.hbs b/ambari-web/app/templates/main/admin/highAvailability/nameNode/step3.hbs
index 0536898..de303c6 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/nameNode/step3.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/nameNode/step3.hbs
@@ -16,67 +16,68 @@
 * limitations under the License.
 }}
 
-
-<h2>{{t admin.highAvailability.wizard.step3.header}}</h2>
-
-<div class="alert alert-info">
-  {{t admin.highAvailability.wizard.step3.confirm.host.body}}
-</div>
-
-<div id="ha-step3-content" class="well pre-scrollable">
-  <div id="step8-info">
-    <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><span class="to-be-disabled-red"><i class="glyphicon glyphicon-minus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeDeleted}}</span></td>
-      </tr>
-      <tr>
-        <td>{{t admin.highAvailability.wizard.step3.addNameNode}}</td>
-        <td>{{view.addNameNode}}</td>
-        <td><span class="to-be-installed-green"><i class="glyphicon glyphicon-plus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeInstalled}}</span></td>
-      </tr>
-      <tr>
-        <td>{{t admin.highAvailability.wizard.step3.journalNode}}</td>
-        <td>
-          <ul class="list-unstyled">
-            {{#each item in view.journalNodes}}
-              <li>{{item.hostName}}</li>
-            {{/each}}
-          </ul>
-        </td>
-        <td>
-          <ul class="list-unstyled">
-            {{#each item in view.journalNodes}}
-              <li><span class="to-be-installed-green"><i
-                  class="glyphicon glyphicon-plus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeInstalled}}</span></li>
-            {{/each}}
-          </ul>
-        </td>
-      </tr>
-    </table>
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.highAvailability.wizard.step3.header}}</h4>
+  <p class="step-description">{{t admin.highAvailability.wizard.step3.confirm.host.body}}</p>
+  <div class="panel panel-default">
+    <div class="panel-body">
+    <div id="ha-step3-content" class="well pre-scrollable">
+      <div id="step8-info">
+        <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><span class="to-be-disabled-red"><i class="glyphicon glyphicon-minus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeDeleted}}</span></td>
+            </tr>
+            <tr>
+                <td>{{t admin.highAvailability.wizard.step3.addNameNode}}</td>
+                <td>{{view.addNameNode}}</td>
+                <td><span class="to-be-installed-green"><i class="glyphicon glyphicon-plus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeInstalled}}</span></td>
+            </tr>
+            <tr>
+                <td>{{t admin.highAvailability.wizard.step3.journalNode}}</td>
+                <td>
+                    <ul class="list-unstyled">
+                        {{#each item in view.journalNodes}}
+                            <li>{{item.hostName}}</li>
+                        {{/each}}
+                    </ul>
+                </td>
+                <td>
+                    <ul class="list-unstyled">
+                        {{#each item in view.journalNodes}}
+                            <li><span class="to-be-installed-green"><i
+                                    class="glyphicon glyphicon-plus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeInstalled}}</span></li>
+                        {{/each}}
+                    </ul>
+                </td>
+            </tr>
+        </table>
+      </div>
+    </div>
+    <div id="serviceConfig">
+        {{#if controller.isLoaded}}
+            {{{t admin.highAvailability.wizard.step3.confirm.config.body}}}
+            {{view App.ServiceConfigView isNotEditableBinding="controller.isNotEditable"}}
+        {{else}}
+            {{view App.SpinnerView}}
+        {{/if}}
+    </div>
+    </div>
   </div>
 </div>
 
-
-<div id="serviceConfig">
-{{#if controller.isLoaded}}
-  {{{t admin.highAvailability.wizard.step3.confirm.config.body}}}
-  {{view App.ServiceConfigView isNotEditableBinding="controller.isNotEditable"}}
-{{else}}
-  {{view App.SpinnerView}}
-{{/if}}
-</div>
-
-<div class="btn-area">
-  <a class="btn btn-default" {{action back}}>&larr; {{t common.back}}</a>
-  <a class="btn btn-success pull-right" {{bindAttr disabled="controller.isNextDisabled"}} {{action next}}>{{t common.next}} &rarr;</a>
-  {{#if App.router.nextBtnClickInProgress}}
-    {{view App.SpinnerView tagName="span" classNames="pull-right"}}
-  {{/if}}
+<div class="wizard-footer col-md-12">
+    <div class="btn-area">
+      <a class="btn btn-default" {{action back}}>&larr; {{t common.back}}</a>
+      <a class="btn btn-success pull-right" {{bindAttr disabled="controller.isNextDisabled"}} {{action next}}>{{t common.next}} &rarr;</a>
+      {{#if App.router.nextBtnClickInProgress}}
+        {{view App.SpinnerView tagName="span" classNames="pull-right"}}
+      {{/if}}
+    </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/nameNode/step4.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/nameNode/step4.hbs b/ambari-web/app/templates/main/admin/highAvailability/nameNode/step4.hbs
index b864a39..384f827 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/nameNode/step4.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/nameNode/step4.hbs
@@ -15,16 +15,18 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div id="ha-step4">
-  <h2>{{t admin.highAvailability.wizard.step4.bodyHeader}}</h2>
+<div id="ha-step4" class="wizard-content col-md-9">
+ <h4 class="step-title">{{t admin.highAvailability.wizard.step4.bodyHeader}}</h4>
   {{#unless controller.isNameNodeStarted}}
-    <div class="alert alert-danger">
+    <p class="step-description">
       {{t admin.highAvailability.wizard.step4.error.nameNode}}
-    </div>
+    </p>
   {{/unless}}
   <div class="alert alert-info">
     {{{view.step4BodyText}}}
   </div>
+</div>
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     <a  {{bindAttr class="controller.isNextEnabled::disabled :btn :btn-success :pull-right"}} {{action done target="controller"}}>{{t common.next}} &rarr;</a>
     <span class="pull-right btn-extra-info">{{view.nnCheckPointText}}</span>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/nameNode/step6.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/nameNode/step6.hbs b/ambari-web/app/templates/main/admin/highAvailability/nameNode/step6.hbs
index 441f94c..d6ecf3e 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/nameNode/step6.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/nameNode/step6.hbs
@@ -15,11 +15,13 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div id="ha-step6">
-  <h2>{{t admin.highAvailability.wizard.step6.bodyHeader}}</h2>
+<div id="ha-step6" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.highAvailability.wizard.step6.bodyHeader}}</h4>
   <div class="alert alert-info">
     {{{view.step6BodyText}}}
   </div>
+</div>
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     <a {{bindAttr class="controller.isNextEnabled::disabled :btn :btn-success :pull-right"}} {{action done target="controller"}}>{{t common.next}} &rarr;</a>
     <span class="pull-right btn-extra-info">{{view.jnCheckPointText}}</span>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/nameNode/step8.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/nameNode/step8.hbs b/ambari-web/app/templates/main/admin/highAvailability/nameNode/step8.hbs
index f52b0ba..cb1c2ce 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/nameNode/step8.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/nameNode/step8.hbs
@@ -15,9 +15,11 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div id="ha-step8">
-  <h2>{{t admin.highAvailability.wizard.step8.bodyHeader}}</h2>
+<div id="ha-step8" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.highAvailability.wizard.step8.bodyHeader}}</h4>
   {{{view.step8BodyText}}}
+</div>
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     <a class="btn btn-success pull-right" {{action done target="controller"}}>{{t common.next}} &rarr;</a>
     <span class="pull-right btn-extra-info">{{!t admin.highAvailability.wizard.step8.metaNoInit}}</span>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/nameNode/wizard.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/nameNode/wizard.hbs b/ambari-web/app/templates/main/admin/highAvailability/nameNode/wizard.hbs
index a9d5d5c..88c2bb9 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/nameNode/wizard.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/nameNode/wizard.hbs
@@ -31,8 +31,6 @@
         <li {{bindAttr class="isStep9:active view.isStep9Disabled:disabled view.isStep9Completed:completed"}}><a href="javascript:void(null);"  {{action gotoStep9 target="controller"}}><i class="step-marker"><span class="step-index">9</span></i><p class="step-name">{{t admin.highAvailability.wizard.step9.header}}</p></a></li>
       </ul>
     </div>
-    <div class="wizard-content col-md-9">
-      {{outlet}}
-    </div>
+    {{outlet}}
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/step1.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/step1.hbs b/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/step1.hbs
index ac248d0..ed7098c 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/step1.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/step1.hbs
@@ -16,27 +16,29 @@ right ownership.  The ASF licenses this file
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div>
-  <h2>{{t admin.ra_highAvailability.wizard.step1.header}}</h2>
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.ra_highAvailability.wizard.step1.header}}</h4>
+  <p class="step-description">{{t admin.ra_highAvailability.wizard.step1.body}}</p>
 
-  <div class="alert alert-info">
-    {{t admin.ra_highAvailability.wizard.step1.body}}
-  </div>
-  <form class="form-horizontal">
-    <div {{bindAttr class=":form-group showloadBalancerURLError:error showloadBalancerURLError:has-error :col-md-12"}}>
-      <label class="control-label">{{t admin.ra_highAvailability.wizard.step1.load_balancer_url}}:</label>
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <form class="form-horizontal">
+        <div {{bindAttr class=":form-group showloadBalancerURLError:error showloadBalancerURLError:has-error :col-md-12"}}>
+          <label class="control-label">{{t admin.ra_highAvailability.wizard.step1.load_balancer_url}}:</label>
 
-      <div class="row">
-        <div class="col-md-3">
-          {{view Em.TextField valueBinding="content.loadBalancerURL" classNames="input-sm form-control"}}
+          <div class="row">
+            <div class="col-md-3">
+              {{view Em.TextField valueBinding="content.loadBalancerURL" classNames="input-sm form-control"}}
+            </div>
+            {{#if showloadBalancerURLError}}
+              <span class="help-block validation-block col-sm-9 help-inline">{{t admin.ra_highAvailability.wizard.step1.invalid_url}}</span>
+            {{/if}}
+          </div>
         </div>
-        {{#if showloadBalancerURLError}}
-          <span class="help-block validation-block col-sm-9 help-inline">{{t admin.ra_highAvailability.wizard.step1.invalid_url}}</span>
-        {{/if}}
-      </div>
+      </form>
     </div>
-  </form>
+  </div>
 </div>
-<div class="btn-area">
+<div class="btn-area" class="wizard-footer col-md-12">
   <button class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action next}}>{{t common.next}} &rarr;</button>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/step3.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/step3.hbs b/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/step3.hbs
index c229662..3c798c8 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/step3.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/step3.hbs
@@ -15,38 +15,44 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<h2>{{t admin.ra_highAvailability.wizard.step3.header}}</h2>
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.ra_highAvailability.wizard.step3.header}}</h4>
+  <p class="step-description"> {{t admin.ra_highAvailability.wizard.step3.alert_message}}</p>
 
-<div class="alert alert-info">
-  {{t admin.ra_highAvailability.wizard.step3.alert_message}}
-</div>
-
-<div id="ha-step3-content" class="well pre-scrollable">
-  <div id="step8-info">
-    <table id="ha-step3-review-table">
-      <tr>
-        <td>
-          <b>{{t admin.ra_highAvailability.wizard.step3.currentRA}}</b>:
-        </td>
-        <td>{{controller.content.raHosts.currentRA}}</td>
-        <td></td>
-      </tr>
-      {{#each host in controller.content.raHosts.additionalRA}}
-        <tr>
-          <td>
-            <b>{{t admin.ra_highAvailability.wizard.step3.additionalRA}}</b>:
-          </td>
-          <td>{{host}}</td>
-          <td><span class="to-be-installed-green"><i class="glyphicon glyphicon-plus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeInstalled}}</span></td>
-        </tr>
-      {{/each}}
-    </table>
+  <div class="panel panel-default">
+    <div class="panel-body">
+        <div id="ha-step3-content" class="well pre-scrollable">
+          <div id="step8-info">
+            <table id="ha-step3-review-table">
+              <tr>
+                <td>
+                  <b>{{t admin.ra_highAvailability.wizard.step3.currentRA}}</b>:
+                </td>
+                <td>{{controller.content.raHosts.currentRA}}</td>
+                <td></td>
+              </tr>
+              {{#each host in controller.content.raHosts.additionalRA}}
+                <tr>
+                  <td>
+                    <b>{{t admin.ra_highAvailability.wizard.step3.additionalRA}}</b>:
+                  </td>
+                  <td>{{host}}</td>
+                  <td><span class="to-be-installed-green"><i class="glyphicon glyphicon-plus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeInstalled}}</span></td>
+                </tr>
+              {{/each}}
+            </table>
+          </div>
+        </div>
+        <div class="alert alert-info">
+          {{{t admin.rm_highAvailability.wizard.step3.configs_changes}}}
+        </div>
+    </div>
   </div>
 </div>
-<div class="alert alert-info">
-  {{{t admin.rm_highAvailability.wizard.step3.configs_changes}}}
-</div>
-<div class="btn-area">
-  <a class="btn btn-default" {{action back}}>&larr; {{t common.back}}</a>
-  <a class="btn btn-success pull-right" {{action next}}>{{t common.next}} &rarr;</a>
+<div class="wizard-footer col-md-12">
+  <div class="btn-area">
+    <a class="btn btn-default" {{action back}}>&larr; {{t common.back}}</a>
+    <a class="btn btn-success pull-right" {{action next}}>{{t common.next}} &rarr;</a>
+  </div>
 </div>
+

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/wizard.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/wizard.hbs b/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/wizard.hbs
index b5b6897..402834f 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/wizard.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/wizard.hbs
@@ -27,8 +27,6 @@
         <li {{bindAttr class="isStep4:active view.isStep4Disabled:disabled view.isStep4Completed:completed"}}><a href="javascript:void(null);"  {{action gotoStep4 target="controller"}}><i class="step-marker"><span class="step-index">4</span></i><p class="step-name">{{t admin.ra_highAvailability.wizard.step4.header}}</p></a></li>
       </ul>
     </div>
-    <div class="wizard-content col-md-9">
-      {{outlet}}
-    </div>
+    {{outlet}}
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/resourceManager/step1.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/resourceManager/step1.hbs b/ambari-web/app/templates/main/admin/highAvailability/resourceManager/step1.hbs
index e3e115b..f8cb02f 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/resourceManager/step1.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/resourceManager/step1.hbs
@@ -15,13 +15,13 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div>
-  <h2>{{t admin.rm_highAvailability.wizard.step1.header}}</h2>
-
-  <div class="alert alert-info">
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.rm_highAvailability.wizard.step1.header}}</h4>
+  <p class="step-description">
     {{t admin.rm_highAvailability.wizard.step1.body}}
-  </div>
-
+  </p>
+</div>
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     <a class="btn btn-success pull-right" {{action next}}>{{t common.next}} &rarr;</a>
   </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/resourceManager/step3.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/resourceManager/step3.hbs b/ambari-web/app/templates/main/admin/highAvailability/resourceManager/step3.hbs
index de5ed63..d6bcbac 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/resourceManager/step3.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/resourceManager/step3.hbs
@@ -15,15 +15,17 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<h2>{{t admin.rm_highAvailability.wizard.step3.header}}</h2>
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.rm_highAvailability.wizard.step3.header}}</h4>
+  <p class="step-description">
+    {{t admin.rm_highAvailability.wizard.step3.confirm.host.body}}
+  </p>
 
-<div class="alert alert-info">
-  {{t admin.rm_highAvailability.wizard.step3.confirm.host.body}}
-</div>
-
-<div id="ha-step3-content" class="well pre-scrollable">
-    <div id="step8-info">
-        <table id="ha-step3-review-table">
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <div id="ha-step3-content" class="well pre-scrollable">
+        <div id="step8-info">
+          <table id="ha-step3-review-table">
             <tr>
                 <td>
                     <b>{{t admin.rm_highAvailability.wizard.step3.currentRM}}</b>:
@@ -38,22 +40,24 @@
                 <td>{{controller.content.rmHosts.additionalRM}}</td>
                 <td><span class="to-be-installed-green"><i class="glyphicon glyphicon-plus"></i>&nbsp;{{t admin.highAvailability.wizard.step3.toBeInstalled}}</span></td>
             </tr>
-        </table>
+          </table>
+        </div>
+      </div>
+      {{#if controller.isLoaded}}
+        <div id="serviceConfig">
+          {{{t admin.rm_highAvailability.wizard.step3.confirm.config.body}}}
+          {{view App.ServiceConfigView}}
+        </div>
+      {{else}}
+        {{view App.SpinnerView}}
+      {{/if}}
     </div>
-</div>
-
-{{#if controller.isLoaded}}
-  <div id="serviceConfig">
-
-    {{{t admin.rm_highAvailability.wizard.step3.confirm.config.body}}}
-
-    {{view App.ServiceConfigView}}
   </div>
-{{else}}
-  {{view App.SpinnerView}}
-{{/if}}
+</div>
 
-<div class="btn-area">
+<div class="wizard-footer col-md-12">
+  <div class="btn-area">
     <a class="btn btn-default" {{action back}}>&larr; {{t common.back}}</a>
     <a class="btn btn-success pull-right" {{action submit target="controller"}} {{bindAttr disabled="controller.isSubmitDisabled"}}>{{t common.next}} &rarr;</a>
+  </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/highAvailability/resourceManager/wizard.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/highAvailability/resourceManager/wizard.hbs b/ambari-web/app/templates/main/admin/highAvailability/resourceManager/wizard.hbs
index 34de9e7..1ef3fd8 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/resourceManager/wizard.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/resourceManager/wizard.hbs
@@ -26,12 +26,10 @@
         <li {{bindAttr class="isStep4:active view.isStep4Disabled:disabled view.isStep4Completed:completed"}}><a href="javascript:void(null);"  {{action gotoStep4 target="controller"}}><i class="step-marker"><span class="step-index">4</span></i><p class="step-name">{{t admin.rm_highAvailability.wizard.step4.header}}</p></a></li>
       </ul>
     </div>
-    <div class="wizard-content col-md-9">
       {{#if view.isLoaded}}
         {{outlet}}
       {{else}}
         {{view App.SpinnerView}}
       {{/if}}
-    </div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/kerberos/step1.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/kerberos/step1.hbs b/ambari-web/app/templates/main/admin/kerberos/step1.hbs
index 7f8979b..e53db25 100644
--- a/ambari-web/app/templates/main/admin/kerberos/step1.hbs
+++ b/ambari-web/app/templates/main/admin/kerberos/step1.hbs
@@ -16,43 +16,46 @@
 * limitations under the License.
 }}
 
-<div id="kerberos-wizard-step1">
-  <h2>{{t admin.kerberos.wizard.step1.header}}</h2>
-
-  <p class="alert alert-info">
+<div id="kerberos-wizard-step1" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t admin.kerberos.wizard.step1.header}}</h4>
+  <p class="step-description">
     {{t admin.kerberos.wizard.step1.info.body}}
   </p>
-
   <div class="alert alert-warning">
     {{t admin.kerberos.wizard.step1.alert.body}}
   </div>
 
-  <div id="kerberos-step1-options-body">
-    {{t admin.kerberos.wizard.step1.body.text}}
-    {{#each option in options}}
-      {{view App.RadioButtonView
-        classNames="radio"
-        name="option.displayName"
-        labelClassNames="kerberos-step1-option-radiobutton"
-        labelBinding="option.displayName"
-        selectionBinding="selectedItem"
-        valueBinding="option.value"}}
-    {{/each}}
-    <br/>
-  </div>
-  <div class="alert alert-info" id="kerberos-step1-prerequisites-body">
-    <h5>{{selectedOption.displayName}}:</h5>
-    <b>{{t admin.kerberos.wizard.step1.prerequisites.label}}</b> <br/> <br/>
-    {{#each condition in selectedOption.preConditions}}
-      {{view App.CheckboxView
-        classNames="checkbox"
-        checkedBinding="condition.checked"
-        labelClassNames="kerberos-step1-prerequiste-checkboxes"
-        labelBinding="condition.displayText"
-      }}
-    {{/each}}
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <div id="kerberos-step1-options-body">
+        {{t admin.kerberos.wizard.step1.body.text}}
+        {{#each option in options}}
+          {{view App.RadioButtonView
+            classNames="radio"
+            name="option.displayName"
+            labelClassNames="kerberos-step1-option-radiobutton"
+            labelBinding="option.displayName"
+            selectionBinding="selectedItem"
+            valueBinding="option.value"}}
+        {{/each}}
+        <br/>
+      </div>
+      <div class="alert alert-info" id="kerberos-step1-prerequisites-body">
+        <h5>{{selectedOption.displayName}}:</h5>
+        <b>{{t admin.kerberos.wizard.step1.prerequisites.label}}</b> <br/> <br/>
+        {{#each condition in selectedOption.preConditions}}
+          {{view App.CheckboxView
+            classNames="checkbox"
+            checkedBinding="condition.checked"
+            labelClassNames="kerberos-step1-prerequiste-checkboxes"
+            labelBinding="condition.displayText"
+          }}
+        {{/each}}
+      </div>
+    </div>
   </div>
-
+</div>
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     <a id="submit-kerberos-step1" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action "next" target="controller"}}>{{t common.next}} &rarr;</a>
   </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/kerberos/step2.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/kerberos/step2.hbs b/ambari-web/app/templates/main/admin/kerberos/step2.hbs
index 47632a8..384a25d 100644
--- a/ambari-web/app/templates/main/admin/kerberos/step2.hbs
+++ b/ambari-web/app/templates/main/admin/kerberos/step2.hbs
@@ -17,18 +17,22 @@
 }}
 
 <div id="kerberos-wizard-step2">
-  <div id="serviceConfig">
-    <h2>{{t admin.kerberos.wizard.step2.header}}</h2>
-
-    <div class="alert alert-info">
+  <div id="serviceConfig" class="wizard-content col-md-9">
+    <h4 class="step-title">{{t admin.kerberos.wizard.step2.header}}</h4>
+    <p class="step-description">
       {{t admin.kerberos.wizard.step2.info.body}}
+    </p>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        {{#if isConfigsLoaded}}
+          {{view App.ServicesConfigView}}
+        {{else}}
+          {{view App.SpinnerView}}
+        {{/if}}
+      </div>
     </div>
-    {{#if isConfigsLoaded}}
-      {{view App.ServicesConfigView}}
-    {{else}}
-      {{view App.SpinnerView}}
-    {{/if}}
-
+  </div>
+  <div class="wizard-footer col-md-12">
     <div class="btn-area">
       <a id="back-kerberos-step2" class="btn btn-default" {{bindAttr disabled="isBackBtnDisabled"}} {{action back}}>&larr; {{t common.back}}</a>
       <a id="submit-kerberos-step2" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}}


Mime
View raw message