ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From xiw...@apache.org
Subject [2/3] ambari git commit: AMBARI-18743. Improve wizard styles and apply on Ambari.(xiwang)
Date Tue, 01 Nov 2016 00:07:57 GMT
http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/kerberos/step3.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/kerberos/step3.hbs b/ambari-web/app/templates/main/admin/kerberos/step3.hbs
index 4fd35a0..ef51818 100644
--- a/ambari-web/app/templates/main/admin/kerberos/step3.hbs
+++ b/ambari-web/app/templates/main/admin/kerberos/step3.hbs
@@ -16,9 +16,8 @@
 * limitations under the License.
 }}
 <div id="kerberos-wizard-step3">
-    <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}}
               <a href="#" {{action retry target="controller"}}>
@@ -27,64 +26,70 @@
           {{/if}}
         </div>
       {{#if controller.isLoaded}}
-          <div class="clearfix">
-            {{#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">
+              <div class="clearfix">
+                {{#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 {{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>
+                          <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}}
+                            {{/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>
-              {{/view}}
+                  {{/view}}
 
-            {{/each}}
-          </div>
-        {{#if showIgnore}}
-            <div class="alert alert-warning">
-                <label>{{view Em.Checkbox classNames="checkbox" checkedBinding="ignore"}} {{t admin.kerberos.wizard.step3.checkbox.ignoreAndProceed.label}}</label>
-            </div>
-        {{/if}}
-        {{#if view.isHostHeartbeatLost}}
-          <p class="alert alert-danger">{{view.resultMsg}}
-            <a href="javascript:void(null)"
-            data-toggle="modal" {{action showHostsWithLostHeartBeat target="view"}}>{{t common.showDetails}}</a>
-          </p>
-        {{/if}}
-      {{else}}
-          {{view App.SpinnerView}}
-      {{/if}}
+                {{/each}}
+              </div>
+            {{#if showIgnore}}
+                <div class="alert alert-warning">
+                    <label>{{view Em.Checkbox classNames="checkbox" checkedBinding="ignore"}} {{t admin.kerberos.wizard.step3.checkbox.ignoreAndProceed.label}}</label>
+                </div>
+            {{/if}}
+            {{#if view.isHostHeartbeatLost}}
+              <p class="alert alert-danger">{{view.resultMsg}}
+                <a href="javascript:void(null)"
+                data-toggle="modal" {{action showHostsWithLostHeartBeat target="view"}}>{{t common.showDetails}}</a>
+              </p>
+            {{/if}}
+          {{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/main/admin/kerberos/step4.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/kerberos/step4.hbs b/ambari-web/app/templates/main/admin/kerberos/step4.hbs
index 1c5d281..1e6f956 100644
--- a/ambari-web/app/templates/main/admin/kerberos/step4.hbs
+++ b/ambari-web/app/templates/main/admin/kerberos/step4.hbs
@@ -16,15 +16,16 @@
 * limitations under the License.
 }}
 <div id="kerberos-wizard-step4">
-  <div id="serviceConfig">
-    <h2>{{t admin.kerberos.wizard.step4.header}}</h2>
-
-    <p class="alert alert-info">
-      {{t admin.kerberos.wizard.step4.info.body}}
-    </p>
-
-    {{view App.ServicesConfigView}}
-
+  <div id="serviceConfig" class="wizard-content col-md-9">
+    <h4 class="step-title">{{t admin.kerberos.wizard.step4.header}}</h4>
+    <p class="step-description">{{t admin.kerberos.wizard.step4.info.body}}</p>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        {{view App.ServicesConfigView}}
+      </div>
+    </div>
+  </div>
+  <div class="wizard-footer col-md-12">
     <div class="btn-area">
       <button id="back-kerberos-step4" class="btn btn-default" {{action back}}>&larr; {{t common.back}}</button>
       <button id="submit-kerberos-step4" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/admin/kerberos/step5.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/admin/kerberos/step5.hbs b/ambari-web/app/templates/main/admin/kerberos/step5.hbs
index 1e5af83..c0cdc00 100644
--- a/ambari-web/app/templates/main/admin/kerberos/step5.hbs
+++ b/ambari-web/app/templates/main/admin/kerberos/step5.hbs
@@ -16,38 +16,42 @@
 * limitations under the License.
 }}
 <div id="kerberos-wizard-step5">
-  <div id="confirm-configuration">
-    <h2>{{t admin.kerberos.wizard.step5.header}}</h2>
-
-    <div class="alert alert-info">
-      <p>
+  <div id="confirm-configuration" class="wizard-content col-md-9">
+    <h4 class="step-title">{{t admin.kerberos.wizard.step5.header}}</h4>
+    <div>
+      <p class="step-description">
         {{t admin.kerberos.wizard.step5.info.body}}
       </p>
       {{#unless App.router.kerberosWizardController.skipClientInstall}}
-        <p>
+        <p class="step-description">
           {{t admin.kerberos.wizard.step5.moreInfoNonManual.body}}
         </p>
       {{/unless}}
       {{#if App.router.kerberosWizardController.skipClientInstall}}
-        <p>
+        <p class="step-description">
           {{t admin.kerberos.wizard.step5.moreInfoManual.body}}
         </p>
       {{/if}}
     </div>
 
-    <div class="well pre-scrollable">
-      {{#each confirmProperties}}
-        {{#if value}}
-          <p><strong>{{label}}</strong>: {{value}}</p>
-        {{/if}}
-      {{/each}}
-    </div>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        <div class="well pre-scrollable">
+          {{#each confirmProperties}}
+            {{#if value}}
+              <p><strong>{{label}}</strong>: {{value}}</p>
+            {{/if}}
+          {{/each}}
+        </div>
 
-    <div class="additional btn-area clearfix">
-      <button class="btn btn-primary pull-right mls" {{action downloadCSV}}>{{t admin.kerberos.wizard.step5.downloadCSV}}</button>
-      <button class="btn btn-default pull-right" {{action exitWizard}}>{{t admin.kerberos.wizard.step5.exitWizard}}</button>
+        <div class="additional btn-area clearfix">
+          <button class="btn btn-primary pull-right mls" {{action downloadCSV}}>{{t admin.kerberos.wizard.step5.downloadCSV}}</button>
+          <button class="btn btn-default pull-right" {{action exitWizard}}>{{t admin.kerberos.wizard.step5.exitWizard}}</button>
+        </div>
+      </div>
     </div>
-
+  </div>
+  <div class="wizard-footer col-md-12">
     <div class="btn-area">
       <button id="back-kerberos-step5" class="btn btn-default" {{action back}}>&larr; {{t common.back}}</button>
       <button id="submit-kerberos-step5" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/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 63ec8bf..3faa9b1 100644
--- a/ambari-web/app/templates/main/admin/kerberos/wizard.hbs
+++ b/ambari-web/app/templates/main/admin/kerberos/wizard.hbs
@@ -30,8 +30,6 @@
         <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>
+    {{outlet}}
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/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 64e0e40..649f0c5 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
@@ -26,8 +26,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 alerts.add.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/alerts/add_alert_definition/step1.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/alerts/add_alert_definition/step1.hbs b/ambari-web/app/templates/main/alerts/add_alert_definition/step1.hbs
index 9b207cd..ee61648 100644
--- a/ambari-web/app/templates/main/alerts/add_alert_definition/step1.hbs
+++ b/ambari-web/app/templates/main/alerts/add_alert_definition/step1.hbs
@@ -16,14 +16,20 @@
 * limitations under the License.
 }}
 
-<h2>{{t alerts.add.step1.header}}</h2>
-
-{{#each type in controller.alertDefinitionsTypes}}
-  <a href="#" {{bindAttr class=":btn type.isActive:active"}} {{action selectType type target="controller"}}>
-    <span {{bindAttr class="type.icon"}}></span> {{type.value}}
-  </a>
-{{/each}}
-
-<div class="btn-area">
-  <a class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action next}}>{{t common.next}} &rarr;</a>
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t alerts.add.step1.header}}</h4>
+  <div class="panel panel-default">
+    <div class="panel-body">
+    {{#each type in controller.alertDefinitionsTypes}}
+        <a href="#" {{bindAttr class=":btn type.isActive:active"}} {{action selectType type target="controller"}}>
+            <span {{bindAttr class="type.icon"}}></span> {{type.value}}
+        </a>
+    {{/each}}
+    </div>
+  </div>
+</div>
+<div class="wizard-footer col-md-12">
+  <div class="btn-area">
+    <a class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{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/alerts/add_alert_definition/step2.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/alerts/add_alert_definition/step2.hbs b/ambari-web/app/templates/main/alerts/add_alert_definition/step2.hbs
index 27db700..f9278d0 100644
--- a/ambari-web/app/templates/main/alerts/add_alert_definition/step2.hbs
+++ b/ambari-web/app/templates/main/alerts/add_alert_definition/step2.hbs
@@ -15,12 +15,17 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-
-<h2>{{t alerts.add.step2.header}}</h2>
-
-{{view App.AlertDefinitionConfigsView canEdit=true isWizard=true alertDefinitionTypeBinding="controller.content.selectedType"}}
-
-<div class="btn-area">
-  <a class="btn btn-default" {{bindAttr disabled="isBackBtnDisabled"}} {{action back}}>&larr; {{t common.back}}</a>
-  <a class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action next}}>{{t common.next}} &rarr;</a>
+<div class="wizard-content col-md-9">
+  <h4 class="step-title">{{t alerts.add.step2.header}}</h4>
+  <div class="panel panel-default">
+    <div class="panel-body">
+    {{view App.AlertDefinitionConfigsView canEdit=true isWizard=true alertDefinitionTypeBinding="controller.content.selectedType"}}
+    </div>
+  </div>
 </div>
+<div class="wizard-footer col-md-12">
+  <div class="btn-area">
+    <a class="btn btn-default" {{bindAttr disabled="isBackBtnDisabled"}} {{action back}}>&larr; {{t common.back}}</a>
+    <a class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action next}}>{{t common.next}} &rarr;</a>
+  </div>
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/alerts/add_alert_definition/step3.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/alerts/add_alert_definition/step3.hbs b/ambari-web/app/templates/main/alerts/add_alert_definition/step3.hbs
index 713c5ab..89c3253 100644
--- a/ambari-web/app/templates/main/alerts/add_alert_definition/step3.hbs
+++ b/ambari-web/app/templates/main/alerts/add_alert_definition/step3.hbs
@@ -15,17 +15,22 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-
-<h2>{{t alerts.add.step3.header}}</h2>
-
-<div>
-  {{t alerts.add.step3.selectedType}}: <strong>{{controller.content.selectedType}}</strong>
+<div class="wizard-content col-md-9">
+    <h4 class="step-title">{{t alerts.add.step3.header}}</h4>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        <div>
+          {{t alerts.add.step3.selectedType}}: <strong>{{controller.content.selectedType}}</strong>
+        </div>
+        <div class="control-group">
+            <pre class="alert-definition-review">{{view.alertDefinitionToDisplay}}</pre>
+        </div>
+      </div>
+    </div>
 </div>
-<div class="control-group">
-    <pre class="alert-definition-review">{{view.alertDefinitionToDisplay}}</pre>
-</div>
-
-<div class="btn-area">
-  <a class="btn btn-default" {{bindAttr disabled="isBackBtnDisabled"}} {{action back}}>&larr; {{t common.back}}</a>
-  <a class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action done}}>{{t common.done}} </a>
+<div class="wizard-footer col-md-12">
+    <div class="btn-area">
+      <a class="btn btn-default" {{bindAttr disabled="isBackBtnDisabled"}} {{action back}}>&larr; {{t common.back}}</a>
+      <a class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action done}}>{{t common.done}} </a>
+    </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/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 c75e0ce..33682b7 100644
--- a/ambari-web/app/templates/main/host/add.hbs
+++ b/ambari-web/app/templates/main/host/add.hbs
@@ -29,12 +29,10 @@
         <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/334d4ccd/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 a3d5f2e..2873a87 100644
--- a/ambari-web/app/templates/main/service/add.hbs
+++ b/ambari-web/app/templates/main/service/add.hbs
@@ -30,8 +30,6 @@
         <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>
+    {{outlet}}
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/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 49a89c3..92a8cd6 100644
--- a/ambari-web/app/templates/main/service/reassign.hbs
+++ b/ambari-web/app/templates/main/service/reassign.hbs
@@ -30,12 +30,10 @@
         {{/if}}
       </ul>
     </div>
-    <div class="wizard-content col-md-9">
-      {{#if view.isLoaded}}
-        {{outlet}}
-      {{else}}
-        {{view App.SpinnerView}}
-      {{/if}}
-    </div>
+  {{#if view.isLoaded}}
+    {{outlet}}
+  {{else}}
+    {{view App.SpinnerView}}
+  {{/if}}
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/service/widgets/create/step1.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/widgets/create/step1.hbs b/ambari-web/app/templates/main/service/widgets/create/step1.hbs
index e465bcb..0edc935 100644
--- a/ambari-web/app/templates/main/service/widgets/create/step1.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/step1.hbs
@@ -16,27 +16,29 @@
 * limitations under the License.
 }}
 
-<div id="add-widget-step1">
-  <h2>{{t widget.create.wizard.step1.header}}</h2>
+<div id="add-widget-step1" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t widget.create.wizard.step1.header}}</h4>
 
-  <div id="add-widget-step1-options-body">
-    <h4>{{t widget.create.wizard.step1.body.text}}</h4>
-
-    <div class="widgets-info-container row">
-      {{#each option in options}}
-        <div class="col-md-6 row widget-info-section" rel="selectable-tooltip"
-          {{translateAttr data-original-title="widget.create.wizard.step1.body.choose.tooltip"}}
-          {{action "chooseOption" option.name target="controller"}}>
-          <div class="icon col-md-4">
-            <a class="widget-icon-image" target="_blank"><img {{bindAttr src="option.iconPath"}}></a>
-          </div>
-          <div class="label-description col-md-8">
-            <p class="label-text">{{option.displayName}}</p>
-            <p class="description-text">{{option.description}}</p>
-          </div>
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <div id="add-widget-step1-options-body">
+        <h4>{{t widget.create.wizard.step1.body.text}}</h4>
+        <div class="widgets-info-container row">
+          {{#each option in options}}
+            <div class="col-md-6 row widget-info-section" rel="selectable-tooltip"
+              {{translateAttr data-original-title="widget.create.wizard.step1.body.choose.tooltip"}}
+              {{action "chooseOption" option.name target="controller"}}>
+              <div class="icon col-md-4">
+                <a class="widget-icon-image" target="_blank"><img {{bindAttr src="option.iconPath"}}></a>
+              </div>
+              <div class="label-description col-md-8">
+                <p class="label-text">{{option.displayName}}</p>
+                <p class="description-text">{{option.description}}</p>
+              </div>
+            </div>
+          {{/each}}
         </div>
-      {{/each}}
+      </div>
     </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/service/widgets/create/step2.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/widgets/create/step2.hbs b/ambari-web/app/templates/main/service/widgets/create/step2.hbs
index 021f051..aac3726 100644
--- a/ambari-web/app/templates/main/service/widgets/create/step2.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/step2.hbs
@@ -16,7 +16,7 @@
 * limitations under the License.
 }}
 
-<div class="step2">
+<div class="step2 wizard-content col-md-9">
 
   {{#if view.templateType.isNumber}}
     {{template "templates/main/service/widgets/create/step2_number"}}
@@ -29,23 +29,24 @@
   {{#if view.templateType.isTemplate}}
     {{template "templates/main/service/widgets/create/step2_template"}}
   {{/if}}
-
-  <div>
-    <form class="form-horizontal">
-      {{#each property in widgetPropertiesViews}}
-        <div {{bindAttr class=":form-group :col-md-12 property.name property.isValid::error"}}>
-          <label class="control-label">{{property.label}}
-            {{#if property.isRequired }}
-              <i class="glyphicon glyphicon-asterisk"></i>
-            {{/if}}
-          </label>
-          {{view property.viewClass propertyBinding="property"}}
-        </div>
-      {{/each}}
-    </form>
+  <div class="panel panel-default">
+    <div class="panel-body">
+        <form class="form-horizontal">
+          {{#each property in widgetPropertiesViews}}
+            <div {{bindAttr class=":form-group :col-md-12 property.name property.isValid::error"}}>
+              <label class="control-label">{{property.label}}
+                {{#if property.isRequired }}
+                  <i class="glyphicon glyphicon-asterisk"></i>
+                {{/if}}
+              </label>
+              {{view property.viewClass propertyBinding="property"}}
+            </div>
+          {{/each}}
+        </form>
+    </div>
   </div>
-
-
+</div>
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     {{#unless isEditWidget}}
       <button id="add-widget-step2-back" class="btn btn-default" {{action back}}>&larr; {{t common.back}}</button>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/service/widgets/create/step2_graph.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/widgets/create/step2_graph.hbs b/ambari-web/app/templates/main/service/widgets/create/step2_graph.hbs
index 0040a9f..4a8638c 100644
--- a/ambari-web/app/templates/main/service/widgets/create/step2_graph.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/step2_graph.hbs
@@ -16,29 +16,33 @@
 * limitations under the License.
 }}
 
-<h2>{{t widget.create.wizard.step2.header}}</h2>
-<div class="alert alert-info">
+<h4 class="step-title">{{t widget.create.wizard.step2.header}}</h4>
+<p class="step-description">
   {{t widget.create.wizard.step2.body.text}}
-</div>
-{{#if isAnyExpressionInvalid}}
-  <div class="alert alert-error">
-    Expression is not complete or is invalid!
-  </div>
-{{/if}}
-{{#each dataSet in dataSets}}
-  <fieldset>
-    <h5>{{view Ember.TextField valueBinding="dataSet.label" class="form-control"}}</h5>
-    <h5>{{t common.expression}}:</h5>
-    {{view App.WidgetWizardExpressionView expressionBinding="dataSet.expression"}}
-    {{#if dataSet.isRemovable}}
-      <a {{action removeDataSet dataSet target="controller"}} class="remove-link"><i class="glyphicon glyphicon-trash"></i></a>
+</p>
+<div class="panel panel-default">
+  <div class="panel-body">
+    {{#if isAnyExpressionInvalid}}
+      <div class="alert alert-error">
+        Expression is not complete or is invalid!
+      </div>
     {{/if}}
-  </fieldset>
-{{/each}}
+    {{#each dataSet in dataSets}}
+      <fieldset>
+        <h5>{{view Ember.TextField valueBinding="dataSet.label" class="form-control"}}</h5>
+        <h5>{{t common.expression}}:</h5>
+        {{view App.WidgetWizardExpressionView expressionBinding="dataSet.expression"}}
+        {{#if dataSet.isRemovable}}
+          <a {{action removeDataSet dataSet target="controller"}} class="remove-link"><i class="glyphicon glyphicon-trash"></i></a>
+        {{/if}}
+      </fieldset>
+    {{/each}}
 
-<div class="align-right">
-  <a href="#" {{action addDataSet target="controller"}}>
-    <i class="glyphicon glyphicon-plus"></i>
-    {{t widget.create.wizard.step2.addDataset}}
-  </a>
-</div>
+    <div class="align-right">
+      <a href="#" {{action addDataSet target="controller"}}>
+        <i class="glyphicon glyphicon-plus"></i>
+        {{t widget.create.wizard.step2.addDataset}}
+      </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/service/widgets/create/step2_number.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/widgets/create/step2_number.hbs b/ambari-web/app/templates/main/service/widgets/create/step2_number.hbs
index 13c4f4b..dfd86cd 100644
--- a/ambari-web/app/templates/main/service/widgets/create/step2_number.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/step2_number.hbs
@@ -16,15 +16,19 @@
 * limitations under the License.
 }}
 
-<h2>{{t widget.create.wizard.step2.header}}</h2>
-<div class="alert alert-info">
+<h4 class="step-title">{{t widget.create.wizard.step2.header}}</h4>
+<p class="step-description">
   {{t widget.create.wizard.step2.body.text}}
-</div>
-{{#if isAnyExpressionInvalid}}
-  <div class="alert alert-error">
-    Expression is not complete or is invalid!
+</p>
+<div class="panel panel-default">
+  <div class="panel-body">
+    {{#if isAnyExpressionInvalid}}
+      <div class="alert alert-error">
+        Expression is not complete or is invalid!
+      </div>
+    {{/if}}
+    {{#each expression in expressions}}
+      {{view App.WidgetWizardExpressionView expressionBinding="expression"}}
+    {{/each}}
   </div>
-{{/if}}
-{{#each expression in expressions}}
-  {{view App.WidgetWizardExpressionView expressionBinding="expression"}}
-{{/each}}
+</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/service/widgets/create/step2_template.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/widgets/create/step2_template.hbs b/ambari-web/app/templates/main/service/widgets/create/step2_template.hbs
index 6c0722a..a743378 100644
--- a/ambari-web/app/templates/main/service/widgets/create/step2_template.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/step2_template.hbs
@@ -16,36 +16,40 @@
 * limitations under the License.
 }}
 
-<h2>{{t widget.create.wizard.step2.header}}</h2>
+<h4 class="step-title">{{t widget.create.wizard.step2.header}}</h4>
 
-<div class="alert alert-info">
+<p class="step-description">
   {{t widget.create.wizard.step2.body.template}}
-</div>
+</p>
 
-<div {{bindAttr class=":template isTemplateInvalid:error"}}>
-  <h5>{{t widget.create.wizard.step2.template.header}}</h5>
-  {{view Ember.TextArea valueBinding="templateValue" placeholderBinding="view.templatePlaceholder"}}
-    {{#if isTemplateInvalid}}
-      <div>{{t widget.create.wizard.step2.body.template.invalid.msg}}</div>
+<div class="panel panel-default">
+  <div class="panel-body">
+    <div {{bindAttr class=":template isTemplateInvalid:error"}}>
+      <h5>{{t widget.create.wizard.step2.template.header}}</h5>
+      {{view Ember.TextArea valueBinding="templateValue" placeholderBinding="view.templatePlaceholder"}}
+        {{#if isTemplateInvalid}}
+          <div>{{t widget.create.wizard.step2.body.template.invalid.msg}}</div>
+        {{/if}}
+    </div>
+
+    <div class="alert alert-info">
+      {{t widget.create.wizard.step2.body.text}}
+    </div>
+    {{#if isAnyExpressionInvalid}}
+      <div class="alert alert-error">
+        Expression is not complete or is invalid!
+      </div>
     {{/if}}
-</div>
+    {{#each expression in expressions}}
+      <h5>{{EXPRESSION_PREFIX}}{{expression.id}}</h5>
+      {{view App.WidgetWizardExpressionView expressionBinding="expression"}}
+    {{/each}}
 
-<div class="alert alert-info">
-  {{t widget.create.wizard.step2.body.text}}
-</div>
-{{#if isAnyExpressionInvalid}}
-  <div class="alert alert-error">
-    Expression is not complete or is invalid!
+    <div class="align-right">
+      <a href="#" {{action addExpression target="controller"}}>
+        <i class="glyphicon glyphicon-plus"></i>
+        {{t widget.create.wizard.step2.addExpression}}
+      </a>
+    </div>
   </div>
-{{/if}}
-{{#each expression in expressions}}
-  <h5>{{EXPRESSION_PREFIX}}{{expression.id}}</h5>
-  {{view App.WidgetWizardExpressionView expressionBinding="expression"}}
-{{/each}}
-
-<div class="align-right">
-  <a href="#" {{action addExpression target="controller"}}>
-    <i class="glyphicon glyphicon-plus"></i>
-    {{t widget.create.wizard.step2.addExpression}}
-  </a>
 </div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/main/service/widgets/create/step3.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/widgets/create/step3.hbs b/ambari-web/app/templates/main/service/widgets/create/step3.hbs
index a4ee81c..45d3142 100644
--- a/ambari-web/app/templates/main/service/widgets/create/step3.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/step3.hbs
@@ -16,49 +16,51 @@
 * limitations under the License.
 }}
 
-<div class="step3">
-  <h2>{{t widget.create.wizard.step3.header}}</h2>
+<div class="step3 wizard-content col-md-9">
+  <h4 class="step-title">{{t widget.create.wizard.step3.header}}</h4>
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <form>
+        <div class="row">
+          <div class="col-md-2 title">{{t widget.create.wizard.step3.widgetName}}<i class="glyphicon glyphicon-asterisk"></i></div>
+          <div {{bindAttr class=":col-md-10 isNameInvalid:error"}}>
+            {{view Ember.TextField valueBinding="widgetName" class="form-control"}}
+            {{#if isNameInvalid}}
+              <div>{{widgetNameErrorMessage}}</div>
+            {{/if}}
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-2 title">{{t common.author}}</div>
+          <div class="col-md-10">{{widgetAuthor}}</div>
+        </div>
+        <div class="row">
+          <div class="col-md-2 title">{{t widget.create.wizard.step3.sharing}}</div>
+          <div class="col-md-10">
+            {{view App.CheckboxView
+              classNames="checkbox"
+              disabledBinding="controller.isSharedCheckboxDisabled"
+              checkedBinding="controller.isSharedChecked"
+              labelTranslate="widget.create.wizard.step3.sharing.msg"
+            }}
+          </div>
+        </div>
 
-  <form>
-    <div class="row">
-      <div class="col-md-2 title">{{t widget.create.wizard.step3.widgetName}}<i class="glyphicon glyphicon-asterisk"></i></div>
-      <div {{bindAttr class=":col-md-10 isNameInvalid:error"}}>
-        {{view Ember.TextField valueBinding="widgetName" class="form-control"}}
-        {{#if isNameInvalid}}
-          <div>{{widgetNameErrorMessage}}</div>
-        {{/if}}
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-md-2 title">{{t common.author}}</div>
-      <div class="col-md-10">{{widgetAuthor}}</div>
-    </div>
-
-    <div class="row">
-      <div class="col-md-2 title">{{t widget.create.wizard.step3.sharing}}</div>
-      <div class="col-md-10">
-        {{view App.CheckboxView
-          classNames="checkbox"
-          disabledBinding="controller.isSharedCheckboxDisabled"
-          checkedBinding="controller.isSharedChecked"
-          labelTranslate="widget.create.wizard.step3.sharing.msg"
-        }}
-      </div>
-    </div>
+        <div class="row">
+          <div class="col-md-2 title">{{t common.description}}</div>
+          <div {{bindAttr class=":col-md-10 isDescriptionInvalid:error"}}>
+            {{view Ember.TextArea valueBinding="widgetDescription" class="description-text-area"}}
+            {{#if isDescriptionInvalid}}
+              <div>{{descriptionErrorMessage}}</div>
+            {{/if}}
+          </div>
+        </div>
 
-    <div class="row">
-      <div class="col-md-2 title">{{t common.description}}</div>
-      <div {{bindAttr class=":col-md-10 isDescriptionInvalid:error"}}>
-        {{view Ember.TextArea valueBinding="widgetDescription" class="description-text-area"}}
-        {{#if isDescriptionInvalid}}
-          <div>{{descriptionErrorMessage}}</div>
-        {{/if}}
-      </div>
+      </form>
     </div>
-
-  </form>
-
+  </div>
+</div>
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     <button id="add-widget-step3-back" class="btn btn-default" {{action back}}>&larr; {{t common.back}}</button>
     <button id="add-widget-step3-save" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action "complete" target="controller"}}>{{t common.save}}</button>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/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 8e9a98b..3e7389f 100644
--- a/ambari-web/app/templates/main/service/widgets/create/wizard.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/wizard.hbs
@@ -41,8 +41,6 @@
         </div>
       {{/if}}
     </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/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 8ac1a55..281fe81 100644
--- a/ambari-web/app/templates/main/service/widgets/edit.hbs
+++ b/ambari-web/app/templates/main/service/widgets/edit.hbs
@@ -40,8 +40,6 @@
         </div>
       {{/if}}
     </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/wizard/step0.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/wizard/step0.hbs b/ambari-web/app/templates/wizard/step0.hbs
index 38f9269..07c9857 100644
--- a/ambari-web/app/templates/wizard/step0.hbs
+++ b/ambari-web/app/templates/wizard/step0.hbs
@@ -15,34 +15,38 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div id="get-started">
-  <h2>{{t installer.step0.body.header}}</h2>
-  <p class="alert alert-info">
-    {{t installer.step0.body}}
-  </p>
-  <div {{bindAttr class="view.onError:has-error :form-group"}}>
-    <label class="control-label" for="cluster-name">{{t installer.step0.clusterName}}
-      <a href="javascript:void(null)"
-         rel="popover"
-        {{translateAttr title="installer.step0.clusterName.tooltip.title"
-        data-content="installer.step0.clusterName.tooltip.content"}}>{{t common.learnMore}}</a>
-    </label>
+<div id="get-started" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t installer.step0.body.header}}</h4>
+  <p class="step-description">{{t installer.step0.body}}</p>
 
-    <div>
-      {{view App.WizardStep0ViewClusterNameInput id="cluster-name" valueBinding="content.cluster.name" placeholder="cluster name" target="controller" classNames="col-sm-3"}}
-      {{#if clusterNameError}}
-        <p class="help-block validation-block col-sm-9">{{clusterNameError}}</p>
-      {{/if}}
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <div {{bindAttr class="view.onError:has-error :form-group"}}>
+        <label class="control-label" for="cluster-name">{{t installer.step0.clusterName}}
+          <a href="javascript:void(null)"
+           rel="popover"
+            {{translateAttr title="installer.step0.clusterName.tooltip.title"
+            data-content="installer.step0.clusterName.tooltip.content"}}>{{t common.learnMore}}</a>
+        </label>
+
+        <div>
+          {{view App.WizardStep0ViewClusterNameInput id="cluster-name" valueBinding="content.cluster.name" placeholder="cluster name" target="controller" classNames="col-sm-3"}}
+          {{#if clusterNameError}}
+            <p class="help-block validation-block col-sm-9">{{clusterNameError}}</p>
+          {{/if}}
+        </div>
+      </div>
     </div>
   </div>
+</div>
 
-  <div class="btn-area">
-    <button type="button" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action "submit" target="controller"}}>
-      {{#if App.router.nextBtnClickInProgress}}
+<div class="wizard-footer col-md-12 btn-area">
+  <button type="button" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action "submit" target="controller"}}>
+    {{#if App.router.nextBtnClickInProgress}}
         {{view App.SpinnerView tagName="span" classNames="service-button-spinner"}}
-      {{/if}}
-      {{t common.next}} &rarr;
-    </button>
-  </div>
+    {{/if}}
+    {{t common.next}} &rarr;
+  </button>
 </div>
 
+

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/wizard/step1.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/wizard/step1.hbs b/ambari-web/app/templates/wizard/step1.hbs
index 977a8fa..dce6b27 100644
--- a/ambari-web/app/templates/wizard/step1.hbs
+++ b/ambari-web/app/templates/wizard/step1.hbs
@@ -15,206 +15,211 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div id="select-stack">
-  <h2>{{t installer.step1.header}}</h2>
-  <p class="alert alert-info">{{t installer.step1.body}}</p>
+<div id="select-stack" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t installer.step1.header}}</h4>
+  <p class="step-description">{{t installer.step1.body}}</p>
 
-  {{! left tabs }}
-  <div class="row">
-    <div class="col-md-2">
-      <ul class="nav nav-tabs nav-stacked nav-tabs-left">
-        {{#each stack in availableStackTypes}}
-          <li {{bindAttr class="stack.isSelected:active"}}><a {{action "selectRepoInList" stack target="controller"}} href="#">{{stack.stackName}}</a></li>
-        {{/each}}
-      </ul>
-    </div>
-
-    <div class="col-md-10">
-      <div class="details-panel">
-        <div class="version-info">
-          <div class="btn-group">
-            <button type="button" data-toggle="dropdown" class="btn dropdown-toggle btn-info">{{controller.selectedStack.displayName}} <span class="caret"></span></button>
-            <ul class="dropdown-menu">
-              {{#each stack in selectedStackType.stacks}}
-                <li>
-                  {{!view view.stackRadioButton stackBinding="stack"}}
-                  <a href="#" {{action "changeVersion" stack target="controller"}}>{{stack.displayName}}
-                    {{#if stack.stackDefault}}
-                      ({{t installer.step1.changeVersion.defaultVersion}})
-                    {{/if}}
-                  </a>
-                </li>
-              {{/each}}
-              <li><a href="#" {{action "uploadVdf" target="controller"}}>{{t installer.step1.addVersion}} ...</a></li>
-            </ul>
-          </div>
+  <div class="panel panel-default">
+    <div class="panel-body">
+      {{! left tabs }}
+      <div class="row">
+        <div class="col-md-2">
+          <ul class="nav nav-tabs nav-stacked nav-tabs-left">
+            {{#each stack in availableStackTypes}}
+              <li {{bindAttr class="stack.isSelected:active"}}><a {{action "selectRepoInList" stack target="controller"}} href="#">{{stack.stackName}}</a></li>
+            {{/each}}
+          </ul>
         </div>
-        <div class="version-contents-section">
-          {{#unless servicesForSelectedStack}}
-            <div class="alert alert-info" role="alert">{{t installer.step1.useLocalRepo.infoForm.content.empty}}</div>
-          {{/unless}}
-          <table class="table table-hover">
-            <tbody>
-              {{#each service in servicesForSelectedStack}}
-                <tr>
-                  <td class="col-md-4">{{service.displayName}}</td>
-                  <td class="col-md-8">{{service.latestVersion}}</td>
-                </tr>
-              {{/each}}
-            </tbody>
-          </table>
+        <div class="col-md-10">
+          <div class="details-panel">
+            <div class="version-info">
+              <div class="btn-group">
+                <button type="button" data-toggle="dropdown" class="btn dropdown-toggle btn-info">{{controller.selectedStack.displayName}} <span class="caret"></span></button>
+                <ul class="dropdown-menu">
+                  {{#each stack in selectedStackType.stacks}}
+                    <li>
+                      {{!view view.stackRadioButton stackBinding="stack"}}
+                      <a href="#" {{action "changeVersion" stack target="controller"}}>{{stack.displayName}}
+                        {{#if stack.stackDefault}}
+                          ({{t installer.step1.changeVersion.defaultVersion}})
+                        {{/if}}
+                      </a>
+                    </li>
+                  {{/each}}
+                  <li><a href="#" {{action "uploadVdf" target="controller"}}>{{t installer.step1.addVersion}} ...</a></li>
+                </ul>
+              </div>
+            </div>
+            <div class="version-contents-section">
+              {{#unless servicesForSelectedStack}}
+                <div class="alert alert-info" role="alert">{{t installer.step1.useLocalRepo.infoForm.content.empty}}</div>
+              {{/unless}}
+              <table class="table table-hover">
+                <tbody>
+                  {{#each service in servicesForSelectedStack}}
+                    <tr>
+                      <td class="col-md-4">{{service.displayName}}</td>
+                      <td class="col-md-8">{{service.latestVersion}}</td>
+                    </tr>
+                  {{/each}}
+                </tbody>
+              </table>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
-  {{! left tabs end }}
+      {{! left tabs end }}
 
-  {{! Public Repository radio }}
-  <div {{bindAttr class=":radio :big-radio :public-radio"}}>
-    {{view view.usePublicRepoRadioButton classNames="display-inline-block"}}
-    {{#if networkIssuesExist}}
-      <a id="public-disabled-link" class="display-inline-block" {{action "openPublicOptionDisabledWindow" target="view"}}>{{t installer.step1.selectUseRepoOptions.public.networkLost}}</a>
-    {{/if}}
-  </div>
-  {{! Public Repository radio END }}
+      {{! Public Repository radio }}
+      <div {{bindAttr class=":radio :big-radio :public-radio"}}>
+        {{view view.usePublicRepoRadioButton classNames="display-inline-block"}}
+        {{#if networkIssuesExist}}
+          <a id="public-disabled-link" class="display-inline-block" {{action "openPublicOptionDisabledWindow" target="view"}}>{{t installer.step1.selectUseRepoOptions.public.networkLost}}</a>
+        {{/if}}
+      </div>
+      {{! Public Repository radio END }}
 
-  {{!--Local repo loaded info below--}}
-  {{view view.useLocalRepoRadioButton classNames="radio big-radio"}}
+      {{!--Local repo loaded info below--}}
+      {{view view.useLocalRepoRadioButton classNames="radio big-radio"}}
 
-  {{#if App.router.nextBtnClickInProgress}}
-    {{view App.SpinnerView}}
-  {{else}}
-  <form id="repoVersionInfoForm" class="form-horizontal" role="form" name="localVersionInfoForm" novalidate>
+      {{#if App.router.nextBtnClickInProgress}}
+        {{view App.SpinnerView}}
+      {{else}}
+      <form id="repoVersionInfoForm" class="form-horizontal" role="form" name="localVersionInfoForm" novalidate>
 
-    <div class="panel panel-default repos-panel">
-      <div class="panel-heading">
-        <p>{{t common.repositories}}</p>
-      </div>
-      <div class="panel-body version-contents-body">
-          <div class="alert alert-info" role="alert">{{t installer.step1.useLocalRepo.infoForm.alert.baseUrl}}</div>
-          {{#if view.showWarning}}
-            <div class="alert alert-warning">{{t installer.step1.attentionNeeded}}</div>
-          {{/if}}
+        <div class="panel panel-default repos-panel">
+          <div class="panel-heading">
+            <p>{{t common.repositories}}</p>
+          </div>
+          <div class="panel-body version-contents-body">
+              <div class="alert alert-info" role="alert">{{t installer.step1.useLocalRepo.infoForm.alert.baseUrl}}</div>
+              {{#if view.showWarning}}
+                <div class="alert alert-warning">{{t installer.step1.attentionNeeded}}</div>
+              {{/if}}
 
-          {{! OSes and Repositories }}
-          <div class="row">
-            <div class="table-controls row col-sm-12 pull-right">
-              <div class="col-sm-12">
-                {{! Add OS }}
-                <div class="btn-group pull-right">
-                  <button
-                    type="button" {{bindAttr data-original-title="view.addOsButtonTooltip" class=":btn :btn-default :dropdown-toggle :add-os-button view.isAddOsButtonDisabled:disabled"}}
-                    data-toggle="dropdown">
-                    <i class="glyphicon glyphicon-plus"></i> {{t common.add}} &nbsp;<span class="caret"></span>
-                  </button>
-                  <ul class="dropdown-menu">
-                    {{#each operatingSystem in selectedStack.operatingSystems}}
-                      {{#unless operatingSystem.isSelected}}
-                        <li><a {{action "addOS" operatingSystem target="controller"}}>{{operatingSystem.osType}}</a></li>
-                      {{/unless}}
-                    {{/each}}
-                  </ul>
+              {{! OSes and Repositories }}
+              <div class="row">
+                <div class="table-controls row col-sm-12 pull-right">
+                  <div class="col-sm-12">
+                    {{! Add OS }}
+                    <div class="btn-group pull-right">
+                      <button
+                        type="button" {{bindAttr data-original-title="view.addOsButtonTooltip" class=":btn :btn-default :dropdown-toggle :add-os-button view.isAddOsButtonDisabled:disabled"}}
+                        data-toggle="dropdown">
+                        <i class="glyphicon glyphicon-plus"></i> {{t common.add}} &nbsp;<span class="caret"></span>
+                      </button>
+                      <ul class="dropdown-menu">
+                        {{#each operatingSystem in selectedStack.operatingSystems}}
+                          {{#unless operatingSystem.isSelected}}
+                            <li><a {{action "addOS" operatingSystem target="controller"}}>{{operatingSystem.osType}}</a></li>
+                          {{/unless}}
+                        {{/each}}
+                      </ul>
+                    </div>
+                    {{! Add OS END}}
+                  </div>
                 </div>
-                {{! Add OS END}}
               </div>
-            </div>
-          </div>
-          <table class="table table-hover">
-            <thead>
-              <tr>
-                <th class="col-sm-2">{{t common.os}}</th>
-                <th class="col-sm-3">{{t common.name}}</th>
-                <th class="col-sm-6">{{t installer.step1.advancedRepo.localRepo.column.baseUrl}}</th>
-                <th class="col-sm-1"></th>
-              </tr>
-            </thead>
-            <tbody>
-              {{#each operatingSystem in selectedStack.operatingSystems}}
-                {{#if operatingSystem.isSelected}}
+              <table class="table table-hover">
+                <thead>
                   <tr>
-                    <td class="col-sm-2">{{operatingSystem.osType}}</td>
-                    <td class="col-sm-9" colspan="2">
-                      <table class="table table-condensed no-borders repos-inner-table">
-                        <tbody>
-                          {{#each repository in operatingSystem.repositories}}
-                            <tr>
-                              <td class="col-sm-3">{{repository.repoId}}</td>
-                              <td class="col-sm-1">
-                                {{view view.popoverView repositoryBinding="repository"}}
-                              </td>
-                              <td class="col-sm-8">
-                                <div {{bindAttr class=":repo-url repository.invalidFormatError:textfield-error repository.invalidError:textfield-error"}}>
-                                  {{view Ember.TextField placeholderBinding="repository.placeholder" valueBinding="repository.baseUrl" disabledBinding="controller.selectedStack.useRedhatSatellite" classNames="form-control"}}
-                                  {{#if controller.selectedStack.usePublicRepo}}
-                                    <i {{bindAttr class="repository.undo::invisible :icon-undo"}}
-                                      {{action "doRestoreDefaultValue" repository target="controller"}}
-                                      {{translateAttr title="common.undo"}}>
-                                    </i>
-                                  {{else}}
-                                    <i {{bindAttr class="repository.notEmpty::invisible :icon-undo"}}
-                                      {{action "doRestoreToEmpty" repository target="controller"}}
-                                      {{translateAttr title="common.undo"}}>
-                                    </i>
-                                  {{/if}}
-                                </div>
-                              </td>
-                            </tr>
-                        {{/each}}
-                        </tbody>
-                      </table>
-                    </td>
-                    <td class="col-sm-1">
-                      <a class="action" href="#" {{action "removeOS" operatingSystem target="controller"}}>
-                        <span class="icon icon-minus" {{translateAttr title="common.remove"}}></span>
-                      </a>
-                    </td>
+                    <th class="col-sm-2">{{t common.os}}</th>
+                    <th class="col-sm-3">{{t common.name}}</th>
+                    <th class="col-sm-6">{{t installer.step1.advancedRepo.localRepo.column.baseUrl}}</th>
+                    <th class="col-sm-1"></th>
                   </tr>
-                {{/if}}
-              {{/each}}
-            </tbody>
-          </table>
-          {{! OSes and Repositories END }}
+                </thead>
+                <tbody>
+                  {{#each operatingSystem in selectedStack.operatingSystems}}
+                    {{#if operatingSystem.isSelected}}
+                      <tr>
+                        <td class="col-sm-2">{{operatingSystem.osType}}</td>
+                        <td class="col-sm-9" colspan="2">
+                          <table class="table table-condensed no-borders repos-inner-table">
+                            <tbody>
+                              {{#each repository in operatingSystem.repositories}}
+                                <tr>
+                                  <td class="col-sm-3">{{repository.repoId}}</td>
+                                  <td class="col-sm-1">
+                                    {{view view.popoverView repositoryBinding="repository"}}
+                                  </td>
+                                  <td class="col-sm-8">
+                                    <div {{bindAttr class=":repo-url repository.invalidFormatError:textfield-error repository.invalidError:textfield-error"}}>
+                                      {{view Ember.TextField placeholderBinding="repository.placeholder" valueBinding="repository.baseUrl" disabledBinding="controller.selectedStack.useRedhatSatellite" classNames="form-control"}}
+                                      {{#if controller.selectedStack.usePublicRepo}}
+                                        <i {{bindAttr class="repository.undo::invisible :icon-undo"}}
+                                          {{action "doRestoreDefaultValue" repository target="controller"}}
+                                          {{translateAttr title="common.undo"}}>
+                                        </i>
+                                      {{else}}
+                                        <i {{bindAttr class="repository.notEmpty::invisible :icon-undo"}}
+                                          {{action "doRestoreToEmpty" repository target="controller"}}
+                                          {{translateAttr title="common.undo"}}>
+                                        </i>
+                                      {{/if}}
+                                    </div>
+                                  </td>
+                                </tr>
+                            {{/each}}
+                            </tbody>
+                          </table>
+                        </td>
+                        <td class="col-sm-1">
+                          <a class="action" href="#" {{action "removeOS" operatingSystem target="controller"}}>
+                            <span class="icon icon-minus" {{translateAttr title="common.remove"}}></span>
+                          </a>
+                        </td>
+                      </tr>
+                    {{/if}}
+                  {{/each}}
+                </tbody>
+              </table>
+              {{! OSes and Repositories END }}
 
-          {{! Skip Repository Base URL validation }}
-          <div id="skip-validation" {{bindAttr class="controller.selectedStack.useRedhatSatellite:disabled :checkbox"}}>
-              {{#view App.CheckboxView
-                labelTranslate="installer.step1.advancedRepo.skipValidation.message"
-                labelClassNamesBinding="controller.selectedStack.useRedhatSatellite:disabled"
-                checkedBinding="skipValidationChecked"
-                disabledBinding="controller.selectedStack.useRedhatSatellite"
-              }}
-                <i class="glyphicon glyphicon-question-sign" rel="skip-validation-tooltip"
-                data-toggle="tooltip" {{translateAttr title="installer.step1.advancedRepo.skipValidation.tooltip"}}>
-                </i>
-              {{/view}}
-            <div class="clearfix"></div>
-          </div>
-          {{! Skip Repository Base URL validation END }}
+              {{! Skip Repository Base URL validation }}
+              <div id="skip-validation" {{bindAttr class="controller.selectedStack.useRedhatSatellite:disabled :checkbox"}}>
+                  {{#view App.CheckboxView
+                    labelTranslate="installer.step1.advancedRepo.skipValidation.message"
+                    labelClassNamesBinding="controller.selectedStack.useRedhatSatellite:disabled"
+                    checkedBinding="skipValidationChecked"
+                    disabledBinding="controller.selectedStack.useRedhatSatellite"
+                  }}
+                    <i class="glyphicon glyphicon-question-sign" rel="skip-validation-tooltip"
+                    data-toggle="tooltip" {{translateAttr title="installer.step1.advancedRepo.skipValidation.tooltip"}}>
+                    </i>
+                  {{/view}}
+                <div class="clearfix"></div>
+              </div>
+              {{! Skip Repository Base URL validation END }}
 
-          {{! Use RedHat Satellite/Spacewalk }}
-          <div id="use-redhat" class="checkbox">
-            {{#view view.redhatCheckBoxView
-              classNames="use-redhat-checkbox"
-            }}
-              <label {{bindAttr for="view.checkboxId" class=":redhat-label :display-inline-block controller.selectedStack.usePublicRepo:disabled" data-original-title="view.redhatDisabledTooltip"}}>
-                {{t installer.step1.advancedRepo.useRedhatSatellite.message}}
-              </label>
-              <i class="glyphicon glyphicon-question-sign" rel="use-redhat-tooltip"
-              data-toggle="tooltip" {{translateAttr title="installer.step1.advancedRepo.useRedhatSatellite.tooltip"}}>
-              </i>
-            {{/view}}
+              {{! Use RedHat Satellite/Spacewalk }}
+              <div id="use-redhat" class="checkbox">
+                {{#view view.redhatCheckBoxView
+                  classNames="use-redhat-checkbox"
+                }}
+                  <label {{bindAttr for="view.checkboxId" class=":redhat-label :display-inline-block controller.selectedStack.usePublicRepo:disabled" data-original-title="view.redhatDisabledTooltip"}}>
+                    {{t installer.step1.advancedRepo.useRedhatSatellite.message}}
+                  </label>
+                  <i class="glyphicon glyphicon-question-sign" rel="use-redhat-tooltip"
+                  data-toggle="tooltip" {{translateAttr title="installer.step1.advancedRepo.useRedhatSatellite.tooltip"}}>
+                  </i>
+                {{/view}}
+              </div>
+              {{! Use RedHat Satellite/Spacewalk END }}
           </div>
-          {{! Use RedHat Satellite/Spacewalk END }}
-      </div>
-    </div>
-  </form>
-  {{/if}}
-  {{#if view.invalidUrlExist}}
-    <div class="alert alert-warning">
-      {{t installer.step1.invalidURLAttention}}
-      <a href="javascript:void(null)" {{action "retryRepoUrls" target="view"}}>{{t installer.step1.retryRepoUrls}}</a>
+        </div>
+      </form>
+    {{/if}}
+      {{#if view.invalidUrlExist}}
+        <div class="alert alert-warning">
+          {{t installer.step1.invalidURLAttention}}
+          <a href="javascript:void(null)" {{action "retryRepoUrls" target="view"}}>{{t installer.step1.retryRepoUrls}}</a>
+        </div>
+      {{/if}}
     </div>
-  {{/if}}
+  </div>
+</div>
+<div class="wizard-footer col-md-12">
   <button type="button" class="btn btn-default pull-left installer-back-btn" {{bindAttr disabled="App.router.btnClickInProgress"}} {{action back}}>
     &larr; {{t common.back}}
     {{#if App.router.backBtnClickInProgress}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/wizard/step10.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/wizard/step10.hbs b/ambari-web/app/templates/wizard/step10.hbs
index f2caf9c..2e242eb 100644
--- a/ambari-web/app/templates/wizard/step10.hbs
+++ b/ambari-web/app/templates/wizard/step10.hbs
@@ -15,39 +15,46 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div id="deploy-summary">
-  <h2>{{t installer.step10.header}}</h2>
+<div id="deploy-summary" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t installer.step10.header}}</h4>
   {{#if view.serviceRestartText}}
-    <div id="step10-alert-message" class="alert alert-danger">
+    <div id="step10-alert-message" class="step-description">
       {{{view.serviceRestartText}}}
     </div>
   {{/if}}
-  <div class="alert alert-info">
+  <p class="step-description">
     {{t installer.step10.body}}
+  </p>
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <div id="step10-content" class="well pre-scrollable">
+        <ul>
+          {{#each item in clusterInfo}}
+            <li>
+              <span {{bindAttr class="item.color"}}>{{item.displayStatement}}</span>
+              <ul>
+                {{#each status in item.status}}
+                  <li>
+                    <span {{bindAttr class="status.color"}}>{{status.displayStatement}}</span>
+                    <ul>
+                      {{#each statement in status.statements}}
+                        <li>
+                          <span {{bindAttr class="status.color"}}>{{statement.displayStatement}}</span>
+                        </li>
+                      {{/each}}
+                    </ul>
+                  </li>
+                {{/each}}
+              </ul>
+            </li>
+          {{/each}}
+        </ul>
+      </div>
+    </div>
   </div>
-  <div id="step10-content" class="well pre-scrollable">
-    <ul>
-      {{#each item in clusterInfo}}
-        <li>
-          <span {{bindAttr class="item.color"}}>{{item.displayStatement}}</span>
-          <ul>
-            {{#each status in item.status}}
-              <li>
-                <span {{bindAttr class="status.color"}}>{{status.displayStatement}}</span>
-                <ul>
-                  {{#each statement in status.statements}}
-                    <li>
-                      <span {{bindAttr class="status.color"}}>{{statement.displayStatement}}</span>
-                    </li>
-                  {{/each}}
-                </ul>
-              </li>
-            {{/each}}
-          </ul>
-        </li>
-      {{/each}}
-    </ul>
-  </div>
+</div>
+
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     <button type="button" class="btn btn-success pull-right" {{bindAttr disabled="App.router.btnClickInProgress"}} {{action complete}}>
       {{#if App.router.nextBtnClickInProgress}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/wizard/step2.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/wizard/step2.hbs b/ambari-web/app/templates/wizard/step2.hbs
index f9a0928..55ebd79 100644
--- a/ambari-web/app/templates/wizard/step2.hbs
+++ b/ambari-web/app/templates/wizard/step2.hbs
@@ -16,150 +16,156 @@
 * limitations under the License.
 }}
 
-<div id="installOptions">
-  <h2>{{t installer.step2.header}}</h2>
+<div id="installOptions" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t installer.step2.header}}</h4>
+  <p class="step-description">{{t installer.step2.body}}</p>
 
-  <p class="alert alert-info">{{t installer.step2.body}}</p>
+  <div class="panel panel-default">
+    <div class="panel-body">
 
-  <div id="targetHosts">
-    <strong>{{t installer.step2.targetHosts}}</strong>
+      <div id="targetHosts">
+        <strong>{{t installer.step2.targetHosts}}</strong>
 
-    <div {{bindAttr class="hostsError:has-error :form-group :target-hosts-input"}}>
-      <p>{{t installer.step2.targetHosts.info}}. {{t installer.step2.orUse}}
-        <a href="javascript:void(null)"
-           rel="popover"
-          {{translateAttr title="installer.step2.hostPattern.tooltip.title" data-content="installer.step2.hostPattern.tooltip.content"}}>
-          {{t installer.step2.hostPattern.tooltip.title}}
-        </a>
-      </p>
+        <div {{bindAttr class="hostsError:has-error :form-group :target-hosts-input"}}>
+          <p>{{t installer.step2.targetHosts.info}}. {{t installer.step2.orUse}}
+            <a href="javascript:void(null)"
+               rel="popover"
+              {{translateAttr title="installer.step2.hostPattern.tooltip.title" data-content="installer.step2.hostPattern.tooltip.content"}}>
+              {{t installer.step2.hostPattern.tooltip.title}}
+            </a>
+          </p>
 
-      <div class="row">
-        <div class="col-md-6">
-          {{view Ember.TextArea id="host-names" class="form-control" valueBinding="content.installOptions.hostNames" rows="5"
-          placeholder="host names"}}
-        </div>
-        <div class="clearfix"></div>
-        {{#if hostsError}}
-          <p class="help-block validation-block col-md-8">{{hostsError}}</p>
-        {{/if}}
-      </div>
-    </div>
-  </div>
-
-  <div id="hostConnectivity">
-    <div class="ambari-agents">
-      <strong>{{t installer.step2.sshKey}}</strong>
-
-      {{#view view.providingSSHKeyRadioButton}}
-        {{#if useSSH}}
-          {{t installer.step2.useSsh.provide}}
-          <a href="javascript:void(null)"
-             rel="popover"
-            {{translateAttr title="installer.step2.useSsh.tooltip.title" data-content="installer.step2.useSsh.tooltip.content"}}>
-            {{t installer.step2.useSsh.tooltip.title}}</a>
-          {{t installer.step2.useSsh.provide_id_rsa}}
-        {{else}}
-          {{t installer.step2.install.perform}}
-          <a href="javascript:void(null)"
-             rel="popover"
-            {{translateAttr title="installer.step2.automaticInstall.tooltip.title" data-content="installer.step2.automaticInstall.tooltip.content"}}>
-            {{t installer.step2.automaticInstall.tooltip.title}}</a>
-          {{t installer.step2.install.perform_on_hosts}}
-        {{/if}}
-      {{/view}}
-
-      {{#if useSSH}}
-        <div class="ssh-key-input">
-          {{#if view.isFileApi}}
-            <div class="form-group">
-              {{view App.SshKeyFileUploader disabledBinding="view.sshKeyState"}}
-            </div>
-          {{/if}}
-          <div {{bindAttr class="sshKeyError:has-error :form-group :row"}}>
+          <div class="row">
             <div class="col-md-6">
-              {{view Ember.TextArea class="form-control" rows="3" id="sshKey"
-              placeholder="ssh private key" disabledBinding="view.sshKeyState" valueBinding="content.installOptions.sshKey"}}
+              {{view Ember.TextArea id="host-names" class="form-control" valueBinding="content.installOptions.hostNames" rows="5"
+              placeholder="host names"}}
             </div>
             <div class="clearfix"></div>
-            {{#if sshKeyError}}
-              <span class="help-block validation-block col-md-8">{{sshKeyError}}</span>
+            {{#if hostsError}}
+              <p class="help-block validation-block col-md-8">{{hostsError}}</p>
             {{/if}}
           </div>
-          <div class="row">
-            <span rel="tooltip" {{translateAttr title="installer.step2.sshUser.toolTip"}} class="ssh-user col-md-4">
-              {{t installer.step2.sshUser}}
-            </span>
+        </div>
+      </div>
 
-            <div {{bindAttr class="sshUserError:has-error :form-group :col-md-8"}}>
-              <div class="row">
-                <div class="col-md-4">
-                  {{view view.textFieldView valueBinding="content.installOptions.sshUser" isEnabledBinding="content.installOptions.useSsh" classNames="form-control"}}
+      <div id="hostConnectivity">
+        <div class="ambari-agents">
+          <strong>{{t installer.step2.sshKey}}</strong>
+
+          {{#view view.providingSSHKeyRadioButton}}
+            {{#if useSSH}}
+              {{t installer.step2.useSsh.provide}}
+              <a href="javascript:void(null)"
+                 rel="popover"
+                {{translateAttr title="installer.step2.useSsh.tooltip.title" data-content="installer.step2.useSsh.tooltip.content"}}>
+                {{t installer.step2.useSsh.tooltip.title}}</a>
+              {{t installer.step2.useSsh.provide_id_rsa}}
+            {{else}}
+              {{t installer.step2.install.perform}}
+              <a href="javascript:void(null)"
+                 rel="popover"
+                {{translateAttr title="installer.step2.automaticInstall.tooltip.title" data-content="installer.step2.automaticInstall.tooltip.content"}}>
+                {{t installer.step2.automaticInstall.tooltip.title}}</a>
+              {{t installer.step2.install.perform_on_hosts}}
+            {{/if}}
+          {{/view}}
+
+          {{#if useSSH}}
+            <div class="ssh-key-input">
+              {{#if view.isFileApi}}
+                <div class="form-group">
+                  {{view App.SshKeyFileUploader disabledBinding="view.sshKeyState"}}
+                </div>
+              {{/if}}
+              <div {{bindAttr class="sshKeyError:has-error :form-group :row"}}>
+                <div class="col-md-6">
+                  {{view Ember.TextArea class="form-control" rows="3" id="sshKey"
+                  placeholder="ssh private key" disabledBinding="view.sshKeyState" valueBinding="content.installOptions.sshKey"}}
                 </div>
-                {{#if sshUserError}}
-                  <span class="help-block validation-block col-md-8 help-inline">{{sshUserError}}</span>
+                <div class="clearfix"></div>
+                {{#if sshKeyError}}
+                  <span class="help-block validation-block col-md-8">{{sshKeyError}}</span>
                 {{/if}}
               </div>
-            </div>
-          </div>
-           <div class="row">
-                <span rel="tooltip" {{translateAttr title="installer.step2.sshPort.toolTip"}} class="ssh-port col-md-4">
-                    {{t installer.step2.sshPort}}
+              <div class="row">
+                <span rel="tooltip" {{translateAttr title="installer.step2.sshUser.toolTip"}} class="ssh-user col-md-4">
+                  {{t installer.step2.sshUser}}
                 </span>
 
-                <div {{bindAttr class="sshPortError:has-error :form-group :col-md-8"}}>
+                <div {{bindAttr class="sshUserError:has-error :form-group :col-md-8"}}>
+                  <div class="row">
+                    <div class="col-md-4">
+                      {{view view.textFieldView valueBinding="content.installOptions.sshUser" isEnabledBinding="content.installOptions.useSsh" classNames="form-control"}}
+                    </div>
+                    {{#if sshUserError}}
+                      <span class="help-block validation-block col-md-8 help-inline">{{sshUserError}}</span>
+                    {{/if}}
+                  </div>
+                </div>
+              </div>
+               <div class="row">
+                    <span rel="tooltip" {{translateAttr title="installer.step2.sshPort.toolTip"}} class="ssh-port col-md-4">
+                        {{t installer.step2.sshPort}}
+                    </span>
+
+                    <div {{bindAttr class="sshPortError:has-error :form-group :col-md-8"}}>
+                        <div class="row">
+                          <div class="col-md-4">
+                            {{view view.textFieldView valueBinding="content.installOptions.sshPort" isEnabledBinding="content.installOptions.useSsh" classNames="form-control"}}
+                          </div>
+                          {{#if sshPortError}}
+                              <span class="help-block validation-block col-md-8 help-inline">{{sshPortError}}</span>
+                          {{/if}}
+                        </div>
+                    </div>
+               </div>
+              {{#if App.supports.customizeAgentUserAccount}}
+                <div class="row">
+                  <span rel="tooltip" {{translateAttr title="installer.step2.agentUser.toolTip"}} class="ssh-user col-md-4">
+                    {{t installer.step2.agentUser}}
+                  </span>
+
+                  <div {{bindAttr class="agentUserError:has-error :form-group :col-md-8"}}>
                     <div class="row">
                       <div class="col-md-4">
-                        {{view view.textFieldView valueBinding="content.installOptions.sshPort" isEnabledBinding="content.installOptions.useSsh" classNames="form-control"}}
+                        {{view view.textFieldView valueBinding="content.installOptions.agentUser" isEnabledBinding="content.installOptions.useSsh" classNames="form-control"}}
                       </div>
-                      {{#if sshPortError}}
-                          <span class="help-block validation-block col-md-8 help-inline">{{sshPortError}}</span>
+                      {{#if agentUserError}}
+                        <span class="help-block validation-block col-md-8 help-inline">{{agentUserError}}</span>
                       {{/if}}
                     </div>
-                </div>
-           </div>
-          {{#if App.supports.customizeAgentUserAccount}}
-            <div class="row">
-              <span rel="tooltip" {{translateAttr title="installer.step2.agentUser.toolTip"}} class="ssh-user col-md-4">
-                {{t installer.step2.agentUser}}
-              </span>
-
-              <div {{bindAttr class="agentUserError:has-error :form-group :col-md-8"}}>
-                <div class="row">
-                  <div class="col-md-4">
-                    {{view view.textFieldView valueBinding="content.installOptions.agentUser" isEnabledBinding="content.installOptions.useSsh" classNames="form-control"}}
                   </div>
-                  {{#if agentUserError}}
-                    <span class="help-block validation-block col-md-8 help-inline">{{agentUserError}}</span>
-                  {{/if}}
                 </div>
-              </div>
+              {{/if}}
+
             </div>
           {{/if}}
 
+          {{#view view.manualRegistrationRadioButton}}
+            {{t installer.step2.install.perform}}
+            {{#if useSSH}}
+              <a href="javascript:void(null)"
+                 rel="popover"
+                {{translateAttr title="installer.step2.manualInstall.tooltip.title" data-content="installer.step2.manualInstall.tooltip.content"}}>
+                {{t installer.step2.manualInstall.tooltip.title}}</a>
+            {{else}}
+              <a href="javascript:void(null)"
+                 rel="popover"
+                {{translateAttr title="installer.step2.manualInstall.tooltip.title" data-content="installer.step2.manualInstall.tooltip.content_no_ssh"}}>
+                {{t installer.step2.manualInstall.tooltip.title}}</a>
+            {{/if}}
+            {{t installer.step2.install.perform_on_hosts}}
+            {{#if useSSH}}
+              {{t installer.step2.install.without_ssh}}
+            {{/if}}
+          {{/view}}
         </div>
-      {{/if}}
-
-      {{#view view.manualRegistrationRadioButton}}
-        {{t installer.step2.install.perform}}
-        {{#if useSSH}}
-          <a href="javascript:void(null)"
-             rel="popover"
-            {{translateAttr title="installer.step2.manualInstall.tooltip.title" data-content="installer.step2.manualInstall.tooltip.content"}}>
-            {{t installer.step2.manualInstall.tooltip.title}}</a>
-        {{else}}
-          <a href="javascript:void(null)"
-             rel="popover"
-            {{translateAttr title="installer.step2.manualInstall.tooltip.title" data-content="installer.step2.manualInstall.tooltip.content_no_ssh"}}>
-            {{t installer.step2.manualInstall.tooltip.title}}</a>
-        {{/if}}
-        {{t installer.step2.install.perform_on_hosts}}
-        {{#if useSSH}}
-          {{t installer.step2.install.without_ssh}}
-        {{/if}}
-      {{/view}}
+      </div>
     </div>
   </div>
+</div>
 
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     {{#unless view.parentView.controller.hideBackButton}}
       <button class="btn btn-default pull-left installer-back-btn" {{action back}} {{bindAttr disabled="App.router.btnClickInProgress"}}>
@@ -176,5 +182,4 @@
       {{t installer.step2.registerAndConfirm}} &rarr;
     </button>
   </div>
-
 </div>


Mime
View raw message