Repository: ambari
Updated Branches:
  refs/heads/trunk 33b281e5f -> 4e372b514


AMBARI-18672. Test and fix new Wizard styles on Ambari (akovalenko)


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

Branch: refs/heads/trunk
Commit: 4e372b51439ef8d202d95c9f4513cd383ff9b7d4
Parents: 33b281e
Author: Aleksandr Kovalenko <[email protected]>
Authored: Mon Oct 24 14:14:26 2016 +0300
Committer: Aleksandr Kovalenko <[email protected]>
Committed: Mon Oct 24 15:06:32 2016 +0300

----------------------------------------------------------------------
 .../app/mixins/wizard/wizard_menu_view.js       |  44 ++++++
 ambari-web/app/styles/application.less          |  23 ----
 .../app/styles/theme/bootstrap-ambari.css       | 133 +++++++++++++++++++
 ambari-web/app/templates/installer.hbs          |  44 +++---
 .../hawq/activateStandby/wizard.hbs             |  36 +++--
 .../highAvailability/hawq/addStandby/wizard.hbs |  38 +++---
 .../hawq/removeStandby/wizard.hbs               |  36 +++--
 .../nameNode/rollbackHA/rollback_wizard.hbs     |  28 ++--
 .../admin/highAvailability/nameNode/wizard.hbs  |  40 +++---
 .../highAvailability/rangerAdmin/wizard.hbs     |  31 ++---
 .../highAvailability/resourceManager/wizard.hbs |  38 +++---
 .../templates/main/admin/kerberos/wizard.hbs    |  38 +++---
 .../add_alert_definition.hbs                    |  30 ++---
 ambari-web/app/templates/main/host/add.hbs      |  44 +++---
 ambari-web/app/templates/main/service/add.hbs   |  41 +++---
 .../app/templates/main/service/reassign.hbs     |  46 +++----
 .../main/service/widgets/create/wizard.hbs      |  54 ++++----
 .../app/templates/main/service/widgets/edit.hbs |  52 +++-----
 18 files changed, 425 insertions(+), 371 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/4e372b51/ambari-web/app/mixins/wizard/wizard_menu_view.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/mixins/wizard/wizard_menu_view.js 
b/ambari-web/app/mixins/wizard/wizard_menu_view.js
index 1a8016a..90b7354 100644
--- a/ambari-web/app/mixins/wizard/wizard_menu_view.js
+++ b/ambari-web/app/mixins/wizard/wizard_menu_view.js
@@ -67,6 +67,50 @@ App.WizardMenuMixin = Em.Mixin.create({
 
   isStep10Disabled: function () {
     return this.isStepDisabled(10);
+  }.property('[email protected]').cacheable(),
+
+  isStep0Completed: function () {
+    return this.get('controller.currentStep') > 0;
+  }.property('[email protected]').cacheable(),
+
+  isStep1Completed: function () {
+    return this.get('controller.currentStep') > 1;
+  }.property('[email protected]').cacheable(),
+
+  isStep2Completed: function () {
+    return this.get('controller.currentStep') > 2;
+  }.property('[email protected]').cacheable(),
+
+  isStep3Completed: function () {
+    return this.get('controller.currentStep') > 3;
+  }.property('[email protected]').cacheable(),
+
+  isStep4Completed: function () {
+    return this.get('controller.currentStep') > 4;
+  }.property('[email protected]').cacheable(),
+
+  isStep5Completed: function () {
+    return this.get('controller.currentStep') > 5;
+  }.property('[email protected]').cacheable(),
+
+  isStep6Completed: function () {
+    return this.get('controller.currentStep') > 6;
+  }.property('[email protected]').cacheable(),
+
+  isStep7Completed: function () {
+    return this.get('controller.currentStep') > 7;
+  }.property('[email protected]').cacheable(),
+
+  isStep8Completed: function () {
+    return this.get('controller.currentStep') > 8;
+  }.property('[email protected]').cacheable(),
+
+  isStep9Completed: function () {
+    return this.get('controller.currentStep') > 9;
+  }.property('[email protected]').cacheable(),
+
+  isStep10Completed: function () {
+    return this.get('controller.currentStep') > 10;
   }.property('[email protected]').cacheable()
 
 });

http://git-wip-us.apache.org/repos/asf/ambari/blob/4e372b51/ambari-web/app/styles/application.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/application.less 
b/ambari-web/app/styles/application.less
index cd103eb..2519bd6 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -833,29 +833,6 @@ h1 {
     margin-top: 0;
   }
 
-  .nav-header {
-    text-transform: uppercase;
-    font-weight: 700;
-    color: #999999;
-    font-size: 13px;
-    padding-left: 0;
-    padding-top: 3px;
-    padding-bottom: 3px;
-  }
-  .nav {
-    li{
-      margin: 0;
-
-      a {
-        padding: 8px 12px;
-        line-height: 1;
-        margin-top: 2px;
-        margin-bottom: 3px;
-      }
-    }
-
-
-  }
   #installOptions {
     .sshKey-file-view {
       width: 486px;

http://git-wip-us.apache.org/repos/asf/ambari/blob/4e372b51/ambari-web/app/styles/theme/bootstrap-ambari.css
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/theme/bootstrap-ambari.css 
b/ambari-web/app/styles/theme/bootstrap-ambari.css
index 4d1f249..289e164 100644
--- a/ambari-web/app/styles/theme/bootstrap-ambari.css
+++ b/ambari-web/app/styles/theme/bootstrap-ambari.css
@@ -446,6 +446,139 @@ h2.table-title {
 .table.table-hover > tbody > tr:hover > td .action {
   visibility: visible;
 }
+.wizard .wizard-header h3 {
+  font-family: 'Roboto', sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  font-size: 20px;
+  color: #333;
+  margin: 20px 30px;
+}
+.wizard .wizard-body {
+  background-color: #ebecf1;
+  margin: 0;
+}
+.wizard .wizard-body .wizard-content {
+  padding-top: 50px;
+}
+.wizard .wizard-body .wizard-content .step-title {
+  font-family: 'Roboto', sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  color: #333;
+  font-weight: bold;
+  font-size: 16px;
+  color: #666;
+}
+.wizard .wizard-body .wizard-content .step-description {
+  font-family: 'Roboto', sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  color: #333;
+  font-size: 12px;
+  color: #999;
+}
+.wizard .wizard-body .wizard-nav {
+  padding-top: 40px;
+  background-color: #323544;
+}
+.wizard .wizard-body .wizard-nav .nav li {
+  padding: 10px 0;
+}
+.wizard .wizard-body .wizard-nav .nav li a {
+  height: 68px;
+  display: table-cell;
+  vertical-align: middle;
+}
+.wizard .wizard-body .wizard-nav .nav li .step-marker {
+  position: absolute;
+  top: 19px;
+  line-height: 15.5px;
+  text-align: center;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #1EB475;
+  border-radius: 50%;
+  font-size: 12px;
+  font-style: inherit;
+  color: #1EB475;
+  background-color: #323544;
+}
+.wizard .wizard-body .wizard-nav .nav li .step-name {
+  font-family: 'Roboto', sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  color: #333;
+  font-size: 16px;
+  color: #bbbbbb;
+  margin-left: 30px;
+}
+.wizard .wizard-body .wizard-nav .nav li .step-description {
+  font-family: 'Roboto', sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  color: #333;
+  font-size: 12px;
+  color: #999;
+  margin-left: 30px;
+}
+.wizard .wizard-body .wizard-nav .nav li.completed .step-marker {
+  background-color: #1EB475;
+  color: white;
+  font-size: 10px;
+  padding-left: 3px;
+}
+.wizard .wizard-body .wizard-nav .nav li.completed .step-marker .step-index {
+  display: none;
+}
+.wizard .wizard-body .wizard-nav .nav li.completed .step-marker:after {
+  font-family: "Glyphicons Halflings";
+  content: "\e013";
+  position: relative;
+  top: 1px;
+  left: -1px;
+}
+.wizard .wizard-body .wizard-nav .nav li.completed:after {
+  width: 2px;
+  height: 100%;
+  position: absolute;
+  background-color: #1EB475;
+  content: "";
+  top: 49px;
+  left: 24px;
+}
+.wizard .wizard-body .wizard-nav .nav li.completed:last-child:after {
+  content: none;
+}
+.wizard .wizard-body .wizard-nav .nav li.active .step-name {
+  font-weight: bold;
+}
+.wizard .wizard-body .wizard-nav .nav li.disabled .step-marker {
+  color: #bbbbbb;
+  border-color: #bbbbbb;
+}
+.wizard .wizard-body .wizard-nav .nav li.disabled.completed .step-marker {
+  background-color: #bbbbbb;
+  color: #323544;
+}
+.wizard .wizard-body .wizard-nav .nav-pills > li.active > a,
+.wizard .wizard-body .wizard-nav .nav-pills > li.active > a:focus,
+.wizard .wizard-body .wizard-nav .nav-pills > li.active > a:hover,
+.wizard .wizard-body .wizard-nav .nav > li > a:focus,
+.wizard .wizard-body .wizard-nav .nav > li > a:hover {
+  background-color: inherit;
+}
+.wizard .wizard-footer {
+  padding: 20px 30px;
+}
+.wizard .wizard-footer button {
+  margin: 0 15px;
+}
 h1,
 h2,
 h3,

http://git-wip-us.apache.org/repos/asf/ambari/blob/4e372b51/ambari-web/app/templates/installer.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/installer.hbs 
b/ambari-web/app/templates/installer.hbs
index 4089fb1..4cac80c 100644
--- a/ambari-web/app/templates/installer.hbs
+++ b/ambari-web/app/templates/installer.hbs
@@ -22,32 +22,24 @@
   </div>
 {{else}}
   <div class="wizard">
-    <div class="container">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-3">
-            <!--Sidebar content-->
-            <div class="well">
-              <ul class="nav nav-pills nav-stacked">
-                <li class="nav-header">{{t installer.header}}</li>
-                <li {{bindAttr class="isStep0:active 
view.isStep0Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep0 target="controller"}}>{{t installer.step0.header}}</a></li>
-                <li {{bindAttr class="isStep1:active 
view.isStep1Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}>{{t installer.step1.header}}</a></li>
-                <li {{bindAttr class="isStep2:active 
view.isStep2Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}>{{t installer.step2.header}}</a></li>
-                <li {{bindAttr class="isStep3:active 
view.isStep3Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep3 target="controller"}}>{{t installer.step3.header}}</a></li>
-                <li {{bindAttr class="isStep4:active 
view.isStep4Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep4 target="controller"}}>{{t installer.step4.header}}</a></li>
-                <li {{bindAttr class="isStep5:active 
view.isStep5Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep5 target="controller"}}>{{t installer.step5.header}}</a></li>
-                <li {{bindAttr class="isStep6:active 
view.isStep6Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep6 target="controller"}}>{{t installer.step6.header}}</a></li>
-                <li {{bindAttr class="isStep7:active 
view.isStep7Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep7 target="controller"}}>{{t installer.step7.header}}</a></li>
-                <li {{bindAttr class="isStep8:active 
view.isStep8Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep8 target="controller"}}>{{t installer.step8.header}}</a></li>
-                <li {{bindAttr class="isStep9:active 
view.isStep9Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep9 target="controller"}}>{{t installer.step9.header}}</a></li>
-                <li {{bindAttr class="isStep10:active 
view.isStep10Disabled:disabled"}}><a href="javascript:void(null);" {{action 
gotoStep10 target="controller"}}>{{t installer.step10.header}}</a></li>
-              </ul>
-            </div>
-          </div>
-          <div class="wizard-content well col-md-9">
-            {{outlet}}
-          </div>
-        </div>
+    <div class="wizard-body row">
+      <div class="wizard-nav col-md-3">
+        <ul class="nav nav-pills nav-stacked">
+          <li {{bindAttr class="isStep0:active view.isStep0Disabled:disabled 
view.isStep0Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep0 target="controller"}}><i class="step-marker"><span 
class="step-index">0</span></i><p class="step-name">{{t 
installer.step0.header}}</p></a></li>
+          <li {{bindAttr class="isStep1:active view.isStep1Disabled:disabled 
view.isStep1Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}><i class="step-marker"><span 
class="step-index">1</span></i><p class="step-name">{{t 
installer.step1.header}}</p></a></li>
+          <li {{bindAttr class="isStep2:active view.isStep2Disabled:disabled 
view.isStep2Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}><i class="step-marker"><span 
class="step-index">2</span></i><p class="step-name">{{t 
installer.step2.header}}</p></a></li>
+          <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 
installer.step3.header}}</p></a></li>
+          <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 
installer.step4.header}}</p></a></li>
+          <li {{bindAttr class="isStep5:active view.isStep5Disabled:disabled 
view.isStep5Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep5 target="controller"}}><i class="step-marker"><span 
class="step-index">5</span></i><p class="step-name">{{t 
installer.step5.header}}</p></a></li>
+          <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 
installer.step6.header}}</p></a></li>
+          <li {{bindAttr class="isStep7:active view.isStep7Disabled:disabled 
view.isStep7Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep7 target="controller"}}><i class="step-marker"><span 
class="step-index">7</span></i><p class="step-name">{{t 
installer.step7.header}}</p></a></li>
+          <li {{bindAttr class="isStep8:active view.isStep8Disabled:disabled 
view.isStep8Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep8 target="controller"}}><i class="step-marker"><span 
class="step-index">8</span></i><p class="step-name">{{t 
installer.step8.header}}</p></a></li>
+          <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 
installer.step9.header}}</p></a></li>
+          <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>
     </div>
   </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/4e372b51/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 0ff7d5d..23cfcf0 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
@@ -17,26 +17,20 @@
 }}
 
 <div id="hawq-ha-wizard" class="wizard">
-  <div class="container">
-      <div class="row">
-        <div class="col-md-3">
-          <!--Sidebar content-->
-          <div class="well">
-            <ul class="nav nav-pills nav-stacked">
-              <li class="nav-header">{{t 
admin.activateHawqStandby.wizard.header}}</li>
-              <li {{bindAttr class="isStep1:active 
view.isStep1Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}>{{t 
admin.activateHawqStandby.wizard.step1.header}}</a></li>
-              <li {{bindAttr class="isStep2:active 
view.isStep2Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}>{{t 
admin.activateHawqStandby.wizard.step2.header}}</a></li>
-              <li {{bindAttr class="isStep3:active 
view.isStep3Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep3 target="controller"}}>{{t 
admin.activateHawqStandby.wizard.step3.header}}</a></li>
-            </ul>
-          </div>
-        </div>
-          <div class="wizard-content well col-md-9">
-            {{#if view.isLoaded}}
-              {{outlet}}
-            {{else}}
-                {{view App.SpinnerView}}
-            {{/if}}
-          </div>
-      </div>
+  <div class="wizard-body row">
+    <div class="wizard-nav col-md-3">
+      <ul class="nav nav-pills nav-stacked">
+        <li {{bindAttr class="isStep1:active view.isStep1Disabled:disabled 
view.isStep1Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}><i class="step-marker"><span 
class="step-index">1</span></i><p class="step-name">{{t 
admin.activateHawqStandby.wizard.step1.header}}</p></a></li>
+        <li {{bindAttr class="isStep2:active view.isStep2Disabled:disabled 
view.isStep2Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}><i class="step-marker"><span 
class="step-index">2</span></i><p class="step-name">{{t 
admin.activateHawqStandby.wizard.step2.header}}</p></a></li>
+        <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/4e372b51/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 8996604..7c21df4 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
@@ -17,27 +17,21 @@
 }}
 
 <div id="hawq-ha-wizard" class="wizard">
-  <div class="container">
-      <div class="row">
-        <div class="col-md-3">
-          <!--Sidebar content-->
-          <div class="well">
-            <ul class="nav nav-pills nav-stacked">
-              <li class="nav-header">{{t 
admin.addHawqStandby.wizard.header}}</li>
-              <li {{bindAttr class="isStep1:active 
view.isStep1Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}>{{t 
admin.addHawqStandby.wizard.step1.header}}</a></li>
-              <li {{bindAttr class="isStep2:active 
view.isStep2Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}>{{t 
admin.addHawqStandby.wizard.step2.header}}</a></li>
-              <li {{bindAttr class="isStep3:active 
view.isStep3Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep3 target="controller"}}>{{t 
admin.addHawqStandby.wizard.step3.header}}</a></li>
-              <li {{bindAttr class="isStep4:active 
view.isStep4Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep4 target="controller"}}>{{t 
admin.addHawqStandby.wizard.step4.header}}</a></li>
-            </ul>
-          </div>
-        </div>
-          <div class="wizard-content well col-md-9">
-            {{#if view.isLoaded}}
-              {{outlet}}
-            {{else}}
-                {{view App.SpinnerView}}
-            {{/if}}
-          </div>
-      </div>
+  <div class="wizard-body row">
+    <div class="wizard-nav col-md-3">
+      <ul class="nav nav-pills nav-stacked">
+        <li {{bindAttr class="isStep1:active view.isStep1Disabled:disabled 
view.isStep1Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}><i class="step-marker"><span 
class="step-index">1</span></i><p class="step-name">{{t 
admin.addHawqStandby.wizard.step1.header}}</p></a></li>
+        <li {{bindAttr class="isStep2:active view.isStep2Disabled:disabled 
view.isStep2Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}><i class="step-marker"><span 
class="step-index">2</span></i><p class="step-name">{{t 
admin.addHawqStandby.wizard.step2.header}}</p></a></li>
+        <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.addHawqStandby.wizard.step3.header}}</p></a></li>
+        <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/4e372b51/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 1c89d6c..13714df 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
@@ -17,26 +17,20 @@
 }}
 
 <div id="hawq-ha-wizard" class="wizard">
-  <div class="container">
-      <div class="row">
-        <div class="col-md-3">
-          <!--Sidebar content-->
-          <div class="well">
-            <ul class="nav nav-pills nav-stacked">
-              <li class="nav-header">{{t 
admin.removeHawqStandby.wizard.header}}</li>
-              <li {{bindAttr class="isStep1:active 
view.isStep1Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}>{{t 
admin.removeHawqStandby.wizard.step1.header}}</a></li>
-              <li {{bindAttr class="isStep2:active 
view.isStep2Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}>{{t 
admin.removeHawqStandby.wizard.step2.header}}</a></li>
-              <li {{bindAttr class="isStep3:active 
view.isStep3Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep3 target="controller"}}>{{t 
admin.removeHawqStandby.wizard.step3.header}}</a></li>
-            </ul>
-          </div>
-        </div>
-          <div class="wizard-content well col-md-9">
-            {{#if view.isLoaded}}
-              {{outlet}}
-            {{else}}
-                {{view App.SpinnerView}}
-            {{/if}}
-          </div>
-      </div>
+  <div class="wizard-body row">
+    <div class="wizard-nav col-md-3">
+      <ul class="nav nav-pills nav-stacked">
+        <li {{bindAttr class="isStep1:active view.isStep1Disabled:disabled 
view.isStep1Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}><i class="step-marker"><span 
class="step-index">1</span></i><p class="step-name">{{t 
admin.removeHawqStandby.wizard.step1.header}}</p></a></li>
+        <li {{bindAttr class="isStep2:active view.isStep2Disabled:disabled 
view.isStep2Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}><i class="step-marker"><span 
class="step-index">2</span></i><p class="step-name">{{t 
admin.removeHawqStandby.wizard.step2.header}}</p></a></li>
+        <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/4e372b51/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 edde4f1..9d325c6 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
@@ -17,24 +17,16 @@
 }}
 
 <div class="wizard">
-  <div class="container">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-3">
-          <!--Sidebar content-->
-          <div class="well">
-            <ul class="nav nav-pills nav-stacked">
-              <li class="nav-header">{{t 
admin.highAvailability.wizard.rollback.header.title}}</li>
-              <li {{bindAttr class="isStep1:active 
view.isStep1Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}>{{t 
admin.rollbackHighAvailability.wizard.step1.header}}</a></li>
-              <li {{bindAttr class="isStep2:active 
view.isStep2Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}>{{t 
admin.rollbackHighAvailability.wizard.step2.header}}</a></li>
-              <li {{bindAttr class="isStep3:active 
view.isStep3Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep3 target="controller"}}>{{t 
admin.rollbackHighAvailability.wizard.step3.header}}</a></li>
-            </ul>
-          </div>
-        </div>
-        <div class="wizard-content well col-md-9">
-          {{outlet}}
-        </div>
-      </div>
+  <div class="wizard-body row">
+    <div class="wizard-nav col-md-3">
+      <ul class="nav nav-pills nav-stacked">
+        <li {{bindAttr class="isStep1:active view.isStep1Disabled:disabled 
view.isStep1Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}><i class="step-marker"><span 
class="step-index">1</span></i><p class="step-name">{{t 
admin.rollbackHighAvailability.wizard.step1.header}}</p></a></li>
+        <li {{bindAttr class="isStep2:active view.isStep2Disabled:disabled 
view.isStep2Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}><i class="step-marker"><span 
class="step-index">2</span></i><p class="step-name">{{t 
admin.rollbackHighAvailability.wizard.step2.header}}</p></a></li>
+        <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>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/4e372b51/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 991691d..a9d5d5c 100644
--- a/ambari-web/app/templates/main/admin/highAvailability/nameNode/wizard.hbs
+++ b/ambari-web/app/templates/main/admin/highAvailability/nameNode/wizard.hbs
@@ -17,28 +17,22 @@
 }}
 
 <div class="wizard">
-  <div class="container">
-      <div class="row">
-        <div class="col-md-3">
-          <!--Sidebar content-->
-          <div class="well">
-            <ul class="nav nav-pills nav-stacked">
-              <li class="nav-header">{{t 
admin.highAvailability.wizard.header}}</li>
-              <li {{bindAttr class="isStep1:active 
view.isStep1Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}>{{t 
admin.highAvailability.wizard.step1.header}}</a></li>
-              <li {{bindAttr class="isStep2:active 
view.isStep2Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}>{{t 
admin.highAvailability.wizard.step2.header}}</a></li>
-              <li {{bindAttr class="isStep3:active 
view.isStep3Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep3 target="controller"}}>{{t 
admin.highAvailability.wizard.step3.header}}</a></li>
-              <li {{bindAttr class="isStep4:active 
view.isStep4Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep4 target="controller"}}>{{t 
admin.highAvailability.wizard.step4.header}}</a></li>
-              <li {{bindAttr class="isStep5:active 
view.isStep5Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep5 target="controller"}}>{{t 
admin.highAvailability.wizard.step5.header}}</a></li>
-              <li {{bindAttr class="isStep6:active 
view.isStep6Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep6 target="controller"}}>{{t 
admin.highAvailability.wizard.step6.header}}</a></li>
-              <li {{bindAttr class="isStep7:active 
view.isStep7Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep7 target="controller"}}>{{t 
admin.highAvailability.wizard.step7.header}}</a></li>
-              <li {{bindAttr class="isStep8:active 
view.isStep8Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep8 target="controller"}}>{{t 
admin.highAvailability.wizard.step8.header}}</a></li>
-              <li {{bindAttr class="isStep9:active 
view.isStep9Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep9 target="controller"}}>{{t 
admin.highAvailability.wizard.step9.header}}</a></li>
-            </ul>
-          </div>
-        </div>
-          <div class="wizard-content well col-md-9">
-            {{outlet}}
-          </div>
-      </div>
+  <div class="wizard-body row">
+    <div class="wizard-nav col-md-3">
+      <ul class="nav nav-pills nav-stacked">
+        <li {{bindAttr class="isStep1:active view.isStep1Disabled:disabled 
view.isStep1Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}><i class="step-marker"><span 
class="step-index">1</span></i><p class="step-name">{{t 
admin.highAvailability.wizard.step1.header}}</p></a></li>
+        <li {{bindAttr class="isStep2:active view.isStep2Disabled:disabled 
view.isStep2Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}><i class="step-marker"><span 
class="step-index">2</span></i><p class="step-name">{{t 
admin.highAvailability.wizard.step2.header}}</p></a></li>
+        <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.highAvailability.wizard.step3.header}}</p></a></li>
+        <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.highAvailability.wizard.step4.header}}</p></a></li>
+        <li {{bindAttr class="isStep5:active view.isStep5Disabled:disabled 
view.isStep5Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep5 target="controller"}}><i class="step-marker"><span 
class="step-index">5</span></i><p class="step-name">{{t 
admin.highAvailability.wizard.step5.header}}</p></a></li>
+        <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.highAvailability.wizard.step6.header}}</p></a></li>
+        <li {{bindAttr class="isStep7:active view.isStep7Disabled:disabled 
view.isStep7Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep7 target="controller"}}><i class="step-marker"><span 
class="step-index">7</span></i><p class="step-name">{{t 
admin.highAvailability.wizard.step7.header}}</p></a></li>
+        <li {{bindAttr class="isStep8:active view.isStep8Disabled:disabled 
view.isStep8Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep8 target="controller"}}><i class="step-marker"><span 
class="step-index">8</span></i><p class="step-name">{{t 
admin.highAvailability.wizard.step8.header}}</p></a></li>
+        <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>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/4e372b51/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 2e4824d..b5b6897 100644
--- 
a/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/wizard.hbs
+++ 
b/ambari-web/app/templates/main/admin/highAvailability/rangerAdmin/wizard.hbs
@@ -17,23 +17,18 @@
 }}
 
 <div id="ra-ha-wizard" class="wizard">
-  <div class="container">
-      <div class="row">
-        <div class="col-md-3">
-          <!--Sidebar content-->
-          <div class="well">
-            <ul class="nav nav-pills nav-stacked">
-              <li class="nav-header">{{t 
admin.ra_highAvailability.wizard.header}}</li>
-              <li {{bindAttr class="isStep1:active 
view.isStep1Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}>{{t 
admin.ra_highAvailability.wizard.step1.header}}</a></li>
-              <li {{bindAttr class="isStep2:active 
view.isStep2Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}>{{t 
admin.ra_highAvailability.wizard.step2.header}}</a></li>
-              <li {{bindAttr class="isStep3:active 
view.isStep3Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep3 target="controller"}}>{{t 
admin.ra_highAvailability.wizard.step3.header}}</a></li>
-              <li {{bindAttr class="isStep4:active 
view.isStep4Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep4 target="controller"}}>{{t 
admin.ra_highAvailability.wizard.step4.header}}</a></li>
-            </ul>
-          </div>
-        </div>
-          <div class="wizard-content well col-md-9">
-            {{outlet}}
-          </div>
-      </div>
+  <div class="wizard-body row">
+    <div class="wizard-nav col-md-3">
+      <ul class="nav nav-pills nav-stacked">
+        <li class="nav-header">{{t 
admin.ra_highAvailability.wizard.header}}</li>
+        <li {{bindAttr class="isStep1:active view.isStep1Disabled:disabled 
view.isStep1Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}><i class="step-marker"><span 
class="step-index">1</span></i><p class="step-name">{{t 
admin.ra_highAvailability.wizard.step1.header}}</p></a></li>
+        <li {{bindAttr class="isStep2:active view.isStep2Disabled:disabled 
view.isStep2Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}><i class="step-marker"><span 
class="step-index">2</span></i><p class="step-name">{{t 
admin.ra_highAvailability.wizard.step2.header}}</p></a></li>
+        <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.ra_highAvailability.wizard.step3.header}}</p></a></li>
+        <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>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/4e372b51/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 33168c5..34de9e7 100644
--- 
a/ambari-web/app/templates/main/admin/highAvailability/resourceManager/wizard.hbs
+++ 
b/ambari-web/app/templates/main/admin/highAvailability/resourceManager/wizard.hbs
@@ -17,27 +17,21 @@
 }}
 
 <div id="rm-ha-wizard" class="wizard">
-  <div class="container">
-      <div class="row">
-        <div class="col-md-3">
-          <!--Sidebar content-->
-          <div class="well">
-            <ul class="nav nav-pills nav-stacked">
-              <li class="nav-header">{{t 
admin.rm_highAvailability.wizard.header}}</li>
-              <li {{bindAttr class="isStep1:active 
view.isStep1Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}>{{t 
admin.rm_highAvailability.wizard.step1.header}}</a></li>
-              <li {{bindAttr class="isStep2:active 
view.isStep2Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}>{{t 
admin.rm_highAvailability.wizard.step2.header}}</a></li>
-              <li {{bindAttr class="isStep3:active 
view.isStep3Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep3 target="controller"}}>{{t 
admin.rm_highAvailability.wizard.step3.header}}</a></li>
-              <li {{bindAttr class="isStep4:active 
view.isStep4Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep4 target="controller"}}>{{t 
admin.rm_highAvailability.wizard.step4.header}}</a></li>
-            </ul>
-          </div>
-        </div>
-          <div class="wizard-content well col-md-9">
-            {{#if view.isLoaded}}
-              {{outlet}}
-            {{else}}
-                {{view App.SpinnerView}}
-            {{/if}}
-          </div>
-      </div>
+  <div class="wizard-body row">
+    <div class="wizard-nav col-md-3">
+      <ul class="nav nav-pills nav-stacked">
+        <li {{bindAttr class="isStep1:active view.isStep1Disabled:disabled 
view.isStep1Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}><i class="step-marker"><span 
class="step-index">1</span></i><p class="step-name">{{t 
admin.rm_highAvailability.wizard.step1.header}}</p></a></li>
+        <li {{bindAttr class="isStep2:active view.isStep2Disabled:disabled 
view.isStep2Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}><i class="step-marker"><span 
class="step-index">2</span></i><p class="step-name">{{t 
admin.rm_highAvailability.wizard.step2.header}}</p></a></li>
+        <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.rm_highAvailability.wizard.step3.header}}</p></a></li>
+        <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/4e372b51/ambari-web/app/templates/main/admin/kerberos/wizard.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/kerberos/wizard.hbs 
b/ambari-web/app/templates/main/admin/kerberos/wizard.hbs
index a6cd55b..63ec8bf 100644
--- a/ambari-web/app/templates/main/admin/kerberos/wizard.hbs
+++ b/ambari-web/app/templates/main/admin/kerberos/wizard.hbs
@@ -17,27 +17,21 @@
 }}
 
 <div class="wizard">
-  <div class="container">
-      <div class="row">
-        <div class="col-md-3">
-          <!--Sidebar content-->
-          <div class="well">
-            <ul class="nav nav-pills nav-stacked">
-              <li class="nav-header"> <i class="glyphicon 
glyphicon-lock"></i>&nbsp;{{t admin.kerberos.wizard.header}}</li>
-              <li {{bindAttr class="isStep1:active 
view.isStep1Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}>{{t 
admin.kerberos.wizard.step1.header}}</a></li>
-              <li {{bindAttr class="isStep2:active 
view.isStep2Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}>{{t 
admin.kerberos.wizard.step2.header}}</a></li>
-              <li {{bindAttr class="isStep3:active 
view.isStep3Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep3 target="controller"}}>{{t 
admin.kerberos.wizard.step3.header}}</a></li>
-              <li {{bindAttr class="isStep4:active 
view.isStep4Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep4 target="controller"}}>{{t 
admin.kerberos.wizard.step4.header}}</a></li>
-              <li {{bindAttr class="isStep5:active 
view.isStep5Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep5 target="controller"}}>{{t 
admin.kerberos.wizard.step5.header}}</a></li>
-              <li {{bindAttr class="isStep6:active 
view.isStep6Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep6 target="controller"}}>{{t 
admin.kerberos.wizard.step6.header}}</a></li>
-              <li {{bindAttr class="isStep7:active 
view.isStep7Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep7 target="controller"}}>{{t 
admin.kerberos.wizard.step7.header}}</a></li>
-              <li {{bindAttr class="isStep8:active 
view.isStep8Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep8 target="controller"}}>{{t 
admin.kerberos.wizard.step8.header}}</a></li>
-            </ul>
-          </div>
-        </div>
-        <div class="wizard-content well col-md-9">
-          {{outlet}}
-        </div>
-      </div>
+  <div class="wizard-body row">
+    <div class="wizard-nav col-md-3">
+      <ul class="nav nav-pills nav-stacked">
+        <li {{bindAttr class="isStep1:active view.isStep1Disabled:disabled 
view.isStep1Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}><i class="step-marker"><span 
class="step-index">1</span></i><p class="step-name">{{t 
admin.kerberos.wizard.step1.header}}</p></a></li>
+        <li {{bindAttr class="isStep2:active view.isStep2Disabled:disabled 
view.isStep2Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}><i class="step-marker"><span 
class="step-index">2</span></i><p class="step-name">{{t 
admin.kerberos.wizard.step2.header}}</p></a></li>
+        <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.kerberos.wizard.step3.header}}</p></a></li>
+        <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.kerberos.wizard.step4.header}}</p></a></li>
+        <li {{bindAttr class="isStep5:active view.isStep5Disabled:disabled 
view.isStep5Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep5 target="controller"}}><i class="step-marker"><span 
class="step-index">5</span></i><p class="step-name">{{t 
admin.kerberos.wizard.step5.header}}</p></a></li>
+        <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.kerberos.wizard.step6.header}}</p></a></li>
+        <li {{bindAttr class="isStep7:active view.isStep7Disabled:disabled 
view.isStep7Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep7 target="controller"}}><i class="step-marker"><span 
class="step-index">7</span></i><p class="step-name">{{t 
admin.kerberos.wizard.step7.header}}</p></a></li>
+        <li {{bindAttr class="isStep8:active view.isStep8Disabled:disabled 
view.isStep8Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep8 target="controller"}}><i class="step-marker"><span 
class="step-index">8</span></i><p class="step-name">{{t 
admin.kerberos.wizard.step8.header}}</p></a></li>
+      </ul>
+    </div>
+    <div class="wizard-content col-md-9">
+      {{outlet}}
+    </div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/4e372b51/ambari-web/app/templates/main/alerts/add_alert_definition/add_alert_definition.hbs
----------------------------------------------------------------------
diff --git 
a/ambari-web/app/templates/main/alerts/add_alert_definition/add_alert_definition.hbs
 
b/ambari-web/app/templates/main/alerts/add_alert_definition/add_alert_definition.hbs
index 6bc7980..64e0e40 100644
--- 
a/ambari-web/app/templates/main/alerts/add_alert_definition/add_alert_definition.hbs
+++ 
b/ambari-web/app/templates/main/alerts/add_alert_definition/add_alert_definition.hbs
@@ -17,23 +17,17 @@
 }}
 
 <div class="wizard">
-  <div class="container">
-
-      <div class="row">
-        <div class="col-md-3">
-          <!--Sidebar content-->
-          <div class="well">
-            <ul class="nav nav-pills nav-stacked">
-              <li class="nav-header">{{t alerts.add.header}}</li>
-              <li {{bindAttr class="isStep1:active 
view.isStep1Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}>{{t alerts.add.step1.header}}</a></li>
-              <li {{bindAttr class="isStep2:active 
view.isStep2Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}>{{t alerts.add.step2.header}}</a></li>
-              <li {{bindAttr class="isStep3:active 
view.isStep3Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep3 target="controller"}}>{{t alerts.add.step3.header}}</a></li>
-            </ul>
-          </div>
-        </div>
-        <div class="wizard-content well col-md-9">
-          {{outlet}}
-        </div>
-      </div>
+  <div class="wizard-body row">
+    <div class="wizard-nav col-md-3">
+      <ul class="nav nav-pills nav-stacked">
+        <li class="nav-header">{{t alerts.add.header}}</li>
+        <li {{bindAttr class="isStep1:active view.isStep1Disabled:disabled 
view.isStep1Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}><i class="step-marker"><span 
class="step-index">1</span></i><p class="step-name">{{t 
alerts.add.step1.header}}</p></a></li>
+        <li {{bindAttr class="isStep2:active view.isStep2Disabled:disabled 
view.isStep2Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}><i class="step-marker"><span 
class="step-index">2</span></i><p class="step-name">{{t 
alerts.add.step2.header}}</p></a></li>
+        <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 
alerts.add.step3.header}}</p></a></li>
+      </ul>
+    </div>
+    <div class="wizard-content col-md-9">
+      {{outlet}}
+    </div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/4e372b51/ambari-web/app/templates/main/host/add.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/host/add.hbs 
b/ambari-web/app/templates/main/host/add.hbs
index dcaf884..c75e0ce 100644
--- a/ambari-web/app/templates/main/host/add.hbs
+++ b/ambari-web/app/templates/main/host/add.hbs
@@ -17,30 +17,24 @@
 }}
 
 <div class="wizard">
-  <div class="container">
-      <div class="row">
-        <div class="col-md-3">
-          <!--Sidebar content-->
-          <div class="well">
-            <ul class="nav nav-pills nav-stacked">
-              <li class="nav-header">{{t hosts.add.header}}</li>
-              <li {{bindAttr class="isStep1:active 
view.isStep1Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}>{{t installer.step2.header}}</a></li>
-              <li {{bindAttr class="isStep2:active 
view.isStep2Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}>{{t installer.step3.header}}</a></li>
-              <li {{bindAttr class="isStep3:active 
view.isStep3Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep3 target="controller"}}>{{t installer.step6.header}}</a></li>
-              <li {{bindAttr class="isStep4:active 
view.isStep4Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep4 target="controller"}}>{{t addHost.step4.header}}</a></li>
-              <li {{bindAttr class="isStep5:active 
view.isStep5Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep5 target="controller"}}>{{t installer.step8.header}}</a></li>
-              <li {{bindAttr class="isStep6:active 
view.isStep6Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep6 target="controller"}}>{{t installer.step9.header}}</a></li>
-              <li {{bindAttr class="isStep7:active 
view.isStep7Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep7 target="controller"}}>{{t installer.step10.header}}</a></li>
-            </ul>
-          </div>
-        </div>
-          <div class="wizard-content well col-md-9">
-            {{#if view.isLoaded}}
-              {{outlet}}
-            {{else}}
-                {{view App.SpinnerView}}
-            {{/if}}
-          </div>
-      </div>
+  <div class="wizard-body row">
+    <div class="wizard-nav col-md-3">
+      <ul class="nav nav-pills nav-stacked">
+        <li {{bindAttr class="isStep1:active view.isStep1Disabled:disabled 
view.isStep1Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}><i class="step-marker"><span 
class="step-index">1</span></i><p class="step-name">{{t 
installer.step2.header}}</p></a></li>
+        <li {{bindAttr class="isStep2:active view.isStep2Disabled:disabled 
view.isStep2Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}><i class="step-marker"><span 
class="step-index">2</span></i><p class="step-name">{{t 
installer.step3.header}}</p></a></li>
+        <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 
installer.step6.header}}</p></a></li>
+        <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 
addHost.step4.header}}</p></a></li>
+        <li {{bindAttr class="isStep5:active view.isStep5Disabled:disabled 
view.isStep5Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep5 target="controller"}}><i class="step-marker"><span 
class="step-index">5</span></i><p class="step-name">{{t 
installer.step8.header}}</p></a></li>
+        <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 
installer.step9.header}}</p></a></li>
+        <li {{bindAttr class="isStep7:active view.isStep7Disabled:disabled 
view.isStep7Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep7 target="controller"}}><i class="step-marker"><span 
class="step-index">7</span></i><p class="step-name">{{t 
installer.step10.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/4e372b51/ambari-web/app/templates/main/service/add.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/add.hbs 
b/ambari-web/app/templates/main/service/add.hbs
index b6eb22a..a3d5f2e 100644
--- a/ambari-web/app/templates/main/service/add.hbs
+++ b/ambari-web/app/templates/main/service/add.hbs
@@ -17,30 +17,21 @@
 }}
 
 <div class="wizard">
-  <div class="container">
-
-    <!--<a class="btn btn-default back" {{action backToServices}}>← Back to 
Services</a>-->
-
-      <div class="row">
-        <div class="col-md-3">
-          <!--Sidebar content-->
-          <div class="well">
-            <ul class="nav nav-pills nav-stacked">
-              <li class="nav-header">{{t services.add.header}}</li>
-              <li {{bindAttr class="isStep1:active 
view.isStep1Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}>{{t installer.step4.header}}</a></li>
-              <li {{bindAttr class="isStep2:active 
view.isStep2Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}>{{t installer.step5.header}}</a></li>
-              <li {{bindAttr class="isStep3:active 
view.isStep3Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep3 target="controller"}}>{{t installer.step6.header}}</a></li>
-              <li {{bindAttr class="isStep4:active 
view.isStep4Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep4 target="controller"}}>{{t installer.step7.header}}</a></li>
-              <li {{bindAttr class="isStep5:active 
view.isStep5Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep5 target="controller"}}>{{t 
admin.kerberos.wizard.step4.header}}</a></li>
-              <li {{bindAttr class="isStep6:active 
view.isStep6Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep5 target="controller"}}>{{t installer.step8.header}}</a></li>
-              <li {{bindAttr class="isStep7:active 
view.isStep7Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep6 target="controller"}}>{{t installer.step9.header}}</a></li>
-              <li {{bindAttr class="isStep8:active 
view.isStep8Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep7 target="controller"}}>{{t installer.step10.header}}</a></li>
-            </ul>
-          </div>
-        </div>
-          <div class="wizard-content well col-md-9">
-            {{outlet}}
-          </div>
-      </div>
+  <div class="wizard-body row">
+    <div class="wizard-nav col-md-3">
+      <ul class="nav nav-pills nav-stacked">
+        <li {{bindAttr class="isStep1:active view.isStep1Disabled:disabled 
view.isStep1Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}><i class="step-marker"><span 
class="step-index">1</span></i><p class="step-name">{{t 
installer.step4.header}}</p></a></li>
+        <li {{bindAttr class="isStep2:active view.isStep2Disabled:disabled 
view.isStep2Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}><i class="step-marker"><span 
class="step-index">2</span></i><p class="step-name">{{t 
installer.step5.header}}</p></a></li>
+        <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 
installer.step6.header}}</p></a></li>
+        <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 
installer.step7.header}}</p></a></li>
+        <li {{bindAttr class="isStep5:active view.isStep5Disabled:disabled 
view.isStep5Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep5 target="controller"}}><i class="step-marker"><span 
class="step-index">5</span></i><p class="step-name">{{t 
admin.kerberos.wizard.step4.header}}</p></a></li>
+        <li {{bindAttr class="isStep6:active view.isStep6Disabled:disabled 
view.isStep6Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep5 target="controller"}}><i class="step-marker"><span 
class="step-index">6</span></i><p class="step-name">{{t 
installer.step8.header}}</p></a></li>
+        <li {{bindAttr class="isStep7:active view.isStep7Disabled:disabled 
view.isStep7Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep6 target="controller"}}><i class="step-marker"><span 
class="step-index">7</span></i><p class="step-name">{{t 
installer.step9.header}}</p></a></li>
+        <li {{bindAttr class="isStep8:active view.isStep8Disabled:disabled 
view.isStep8Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep7 target="controller"}}><i class="step-marker"><span 
class="step-index">8</span></i><p class="step-name">{{t 
installer.step10.header}}</p></a></li>
+      </ul>
+    </div>
+    <div class="wizard-content col-md-9">
+      {{outlet}}
+    </div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/4e372b51/ambari-web/app/templates/main/service/reassign.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/reassign.hbs 
b/ambari-web/app/templates/main/service/reassign.hbs
index 8942800..49a89c3 100644
--- a/ambari-web/app/templates/main/service/reassign.hbs
+++ b/ambari-web/app/templates/main/service/reassign.hbs
@@ -17,31 +17,25 @@
 }}
 
 <div class="wizard">
-  <div class="container">
-      <div class="row">
-        <div class="col-md-3">
-          <!--Sidebar content-->
-          <div class="well">
-            <ul class="nav nav-pills nav-stacked">
-              <li class="nav-header">{{t services.reassign.header}}</li>
-              <li {{bindAttr class="isStep1:active 
view.isStep1Disabled:disabled :step1-link"}}><a href="javascript:void(null);"  
{{action gotoStep1 target="controller"}}>{{t 
services.reassign.step1.header}}</a></li>
-              <li {{bindAttr class="isStep2:active 
view.isStep2Disabled:disabled :step2-link"}}><a href="javascript:void(null);"  
{{action gotoStep2 target="controller"}}>{{t 
services.reassign.step2.header}}</a></li>
-              <li {{bindAttr class="isStep3:active 
view.isStep3Disabled:disabled :step3-link"}}><a href="javascript:void(null);"  
{{action gotoStep3 target="controller"}}>{{t 
services.reassign.step3.header}}</a></li>
-              <li {{bindAttr class="isStep4:active 
view.isStep4Disabled:disabled :step4-link"}}><a href="javascript:void(null);"  
{{action gotoStep4 target="controller"}}>{{t 
services.reassign.step4.header}}</a></li>
-              {{#if controller.content.hasManualSteps}}
-              <li {{bindAttr class="isStep5:active 
view.isStep5Disabled:disabled :step5-link"}}><a href="javascript:void(null);"  
{{action gotoStep3 target="controller"}}>{{t 
services.reassign.step5.header}}</a></li>
-              <li {{bindAttr class="isStep6:active 
view.isStep6Disabled:disabled :step6-link"}}><a href="javascript:void(null);"  
{{action gotoStep4 target="controller"}}>{{t 
services.reassign.step6.header}}</a></li>
-              {{/if}}
-            </ul>
-          </div>
-        </div>
-          <div class="wizard-content well col-md-9">
-            {{#if view.isLoaded}}
-              {{outlet}}
-            {{else}}
-                {{view App.SpinnerView}}
-            {{/if}}
-          </div>
-      </div>
+  <div class="wizard-body row">
+    <div class="wizard-nav col-md-3">
+      <ul class="nav nav-pills nav-stacked">
+        <li {{bindAttr class="isStep1:active view.isStep1Disabled:disabled 
view.isStep1Completed:completed :step1-link"}}><a href="javascript:void(null);" 
 {{action gotoStep1 target="controller"}}><i class="step-marker"><span 
class="step-index">1</span></i><p class="step-name">{{t 
services.reassign.step1.header}}</p></a></li>
+        <li {{bindAttr class="isStep2:active view.isStep2Disabled:disabled 
view.isStep2Completed:completed :step2-link"}}><a href="javascript:void(null);" 
 {{action gotoStep2 target="controller"}}><i class="step-marker"><span 
class="step-index">2</span></i><p class="step-name">{{t 
services.reassign.step2.header}}</p></a></li>
+        <li {{bindAttr class="isStep3:active view.isStep3Disabled:disabled 
view.isStep3Completed:completed :step3-link"}}><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 
services.reassign.step3.header}}</p></a></li>
+        <li {{bindAttr class="isStep4:active view.isStep4Disabled:disabled 
view.isStep4Completed:completed :step4-link"}}><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 
services.reassign.step4.header}}</p></a></li>
+        {{#if controller.content.hasManualSteps}}
+          <li {{bindAttr class="isStep5:active view.isStep5Disabled:disabled 
view.isStep5Completed:completed :step5-link"}}><a href="javascript:void(null);" 
 {{action gotoStep3 target="controller"}}><i class="step-marker"><span 
class="step-index">5</span></i><p class="step-name">{{t 
services.reassign.step5.header}}</p></a></li>
+          <li {{bindAttr class="isStep6:active view.isStep6Disabled:disabled 
view.isStep6Completed:completed :step6-link"}}><a href="javascript:void(null);" 
 {{action gotoStep4 target="controller"}}><i class="step-marker"><span 
class="step-index">6</span></i><p class="step-name">{{t 
services.reassign.step6.header}}</p></a></li>
+        {{/if}}
+      </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/4e372b51/ambari-web/app/templates/main/service/widgets/create/wizard.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/widgets/create/wizard.hbs 
b/ambari-web/app/templates/main/service/widgets/create/wizard.hbs
index a389ecd..8e9a98b 100644
--- a/ambari-web/app/templates/main/service/widgets/create/wizard.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/wizard.hbs
@@ -17,40 +17,32 @@
 }}
 
 <div class="wizard" id="add-widget-wizard">
-  <div class="container">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-3">
-          <!--Sidebar content-->
-          <div class="well">
-            <ul class="nav nav-pills nav-stacked">
-              <li class="nav-header"> {{t widget.create.wizard.header}}</li>
-              <li {{bindAttr class="isStep1:active 
view.isStep1Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}>{{t widget.create.wizard.step1.header}}</a></li>
-              <li {{bindAttr class="isStep2:active 
view.isStep2Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}>{{t widget.create.wizard.step2.header}}</a></li>
-              <li {{bindAttr class="isStep3:active 
view.isStep3Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep3 target="controller"}}>{{t widget.create.wizard.step3.header}}</a></li>
-            </ul>
+  <div class="wizard-body row">
+    <div class="wizard-nav col-md-3">
+      <ul class="nav nav-pills nav-stacked">
+        <li {{bindAttr class="isStep1:active view.isStep1Disabled:disabled 
view.isStep1Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}><i class="step-marker"><span 
class="step-index">1</span></i><p class="step-name">{{t 
widget.create.wizard.step1.header}}</p></a></li>
+        <li {{bindAttr class="isStep2:active view.isStep2Disabled:disabled 
view.isStep2Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}><i class="step-marker"><span 
class="step-index">2</span></i><p class="step-name">{{t 
widget.create.wizard.step2.header}}</p></a></li>
+        <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 
widget.create.wizard.step3.header}}</p></a></li>
+      </ul>
+      {{#if view.isStep2}}
+        <div class="preview" id="widget-preview">
+          <h5>{{t common.preview}}:</h5>
+          <div class="widget">
+            {{view view.previewWidgetClass 
controllerBinding="App.router.widgetWizardStep2Controller"}}
           </div>
-          {{#if view.isStep2}}
-            <div class="preview" id="widget-preview">
-              <h5>{{t common.preview}}:</h5>
-              <div class="widget">
-                {{view view.previewWidgetClass 
controllerBinding="App.router.widgetWizardStep2Controller"}}
-              </div>
-            </div>
-          {{/if}}
-          {{#if view.isStep3}}
-            <div class="preview" id="widget-preview">
-              <h5>{{t common.preview}}:</h5>
-              <div class="widget">
-                {{view view.previewWidgetClass 
controllerBinding="App.router.widgetWizardStep3Controller"}}
-              </div>
-            </div>
-          {{/if}}
         </div>
-        <div class="wizard-content well col-md-9">
-          {{outlet}}
+      {{/if}}
+      {{#if view.isStep3}}
+        <div class="preview" id="widget-preview">
+          <h5>{{t common.preview}}:</h5>
+          <div class="widget">
+            {{view view.previewWidgetClass 
controllerBinding="App.router.widgetWizardStep3Controller"}}
+          </div>
         </div>
-      </div>
+      {{/if}}
+    </div>
+    <div class="wizard-content col-md-9">
+      {{outlet}}
     </div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/4e372b51/ambari-web/app/templates/main/service/widgets/edit.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/widgets/edit.hbs 
b/ambari-web/app/templates/main/service/widgets/edit.hbs
index a54ce72..8ac1a55 100644
--- a/ambari-web/app/templates/main/service/widgets/edit.hbs
+++ b/ambari-web/app/templates/main/service/widgets/edit.hbs
@@ -17,39 +17,31 @@
 }}
 
 <div class="wizard" id="edit-widget-wizard">
-  <div class="container">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-3">
-          <!--Sidebar content-->
-          <div class="well">
-            <ul class="nav nav-pills nav-stacked">
-              <li class="nav-header"> {{t widget.create.wizard.header}}</li>
-              <li {{bindAttr class="isStep1:active 
view.isStep1Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}>{{t widget.create.wizard.step2.header}}</a></li>
-              <li {{bindAttr class="isStep2:active 
view.isStep2Disabled:disabled"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}>{{t widget.create.wizard.step3.header}}</a></li>
-            </ul>
+  <div class="wizard-body row">
+    <div class="wizard-nav col-md-3">
+      <ul class="nav nav-pills nav-stacked">
+        <li {{bindAttr class="isStep1:active view.isStep1Disabled:disabled 
view.isStep1Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep1 target="controller"}}><i class="step-marker"><span 
class="step-index">1</span></i><p class="step-name">{{t 
widget.create.wizard.step2.header}}</p></a></li>
+        <li {{bindAttr class="isStep2:active view.isStep2Disabled:disabled 
view.isStep2Completed:completed"}}><a href="javascript:void(null);"  {{action 
gotoStep2 target="controller"}}><i class="step-marker"><span 
class="step-index">2</span></i><p class="step-name">{{t 
widget.create.wizard.step3.header}}</p></a></li>
+      </ul>
+      {{#if view.isStep1}}
+        <div class="preview" id="widget-preview">
+          <h5>{{t common.preview}}:</h5>
+          <div class="widget">
+            {{view view.previewWidgetClass 
controllerBinding="App.router.widgetWizardStep2Controller"}}
           </div>
-          {{#if view.isStep1}}
-            <div class="preview" id="widget-preview">
-              <h5>{{t common.preview}}:</h5>
-              <div class="widget">
-                {{view view.previewWidgetClass 
controllerBinding="App.router.widgetWizardStep2Controller"}}
-              </div>
-            </div>
-          {{/if}}
-          {{#if view.isStep2}}
-            <div class="preview" id="widget-preview">
-              <h5>{{t common.preview}}:</h5>
-              <div class="widget">
-                {{view view.previewWidgetClass 
controllerBinding="App.router.widgetWizardStep3Controller"}}
-              </div>
-            </div>
-          {{/if}}
         </div>
-        <div class="wizard-content well col-md-9">
-          {{outlet}}
+      {{/if}}
+      {{#if view.isStep2}}
+        <div class="preview" id="widget-preview">
+          <h5>{{t common.preview}}:</h5>
+          <div class="widget">
+            {{view view.previewWidgetClass 
controllerBinding="App.router.widgetWizardStep3Controller"}}
+          </div>
         </div>
-      </div>
+      {{/if}}
+    </div>
+    <div class="wizard-content col-md-9">
+      {{outlet}}
     </div>
   </div>
 </div>

Reply via email to