Return-Path: <commits-return-34112-archive-asf-public=cust-asf.ponee.io@ambari.apache.org>
X-Original-To: archive-asf-public-internal@cust-asf2.ponee.io
Delivered-To: archive-asf-public-internal@cust-asf2.ponee.io
Received: from cust-asf.ponee.io (cust-asf.ponee.io [163.172.22.183])
	by cust-asf2.ponee.io (Postfix) with ESMTP id C033C200BC0
	for <archive-asf-public-internal@cust-asf2.ponee.io>; Tue,  1 Nov 2016 01:07:58 +0100 (CET)
Received: by cust-asf.ponee.io (Postfix)
	id BEC2D160B09; Tue,  1 Nov 2016 00:07:58 +0000 (UTC)
Delivered-To: archive-asf-public@cust-asf.ponee.io
Received: from mail.apache.org (hermes.apache.org [140.211.11.3])
	by cust-asf.ponee.io (Postfix) with SMTP id 4580C160B05
	for <archive-asf-public@cust-asf.ponee.io>; Tue,  1 Nov 2016 01:07:57 +0100 (CET)
Received: (qmail 14250 invoked by uid 500); 1 Nov 2016 00:07:56 -0000
Mailing-List: contact commits-help@ambari.apache.org; run by ezmlm
Precedence: bulk
List-Help: <mailto:commits-help@ambari.apache.org>
List-Unsubscribe: <mailto:commits-unsubscribe@ambari.apache.org>
List-Post: <mailto:commits@ambari.apache.org>
List-Id: <commits.ambari.apache.org>
Reply-To: ambari-dev@ambari.apache.org
Delivered-To: mailing list commits@ambari.apache.org
Received: (qmail 14232 invoked by uid 99); 1 Nov 2016 00:07:56 -0000
Received: from git1-us-west.apache.org (HELO git1-us-west.apache.org) (140.211.11.23)
    by apache.org (qpsmtpd/0.29) with ESMTP; Tue, 01 Nov 2016 00:07:56 +0000
Received: by git1-us-west.apache.org (ASF Mail Server at git1-us-west.apache.org, from userid 33)
	id 1EB1CE9437; Tue,  1 Nov 2016 00:07:56 +0000 (UTC)
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
From: xiwang@apache.org
To: commits@ambari.apache.org
Date: Tue, 01 Nov 2016 00:07:56 -0000
Message-Id: <7fc62d0fe7324ccc83b7a84bd5c1c43d@git.apache.org>
X-Mailer: ASF-Git Admin Mailer
Subject: [1/3] ambari git commit: AMBARI-18743. Improve wizard styles and
 apply on Ambari.(xiwang)
archived-at: Tue, 01 Nov 2016 00:07:58 -0000

Repository: ambari
Updated Branches:
  refs/heads/trunk 4ffc8ffb4 -> 334d4ccd3


http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/wizard/step3.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/wizard/step3.hbs b/ambari-web/app/templates/wizard/step3.hbs
index 72881cf..275c6af 100644
--- a/ambari-web/app/templates/wizard/step3.hbs
+++ b/ambari-web/app/templates/wizard/step3.hbs
@@ -16,133 +16,138 @@
 * limitations under the License.
 }}
 
-<div id="confirm-hosts">
-  <h2>{{t installer.step3.header}}</h2>
+<div id="confirm-hosts" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t installer.step3.header}}</h4>
+  <p class="step-description">{{t installer.step3.body}}</p>
 
-  <p class="alert alert-info">{{t installer.step3.body}}</p>
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <div class="box">
+        <div class="box-header">
+          <div class="button-section">
+            {{#unless isBackDisabled}}
+              <button class="btn btn-primary step3-remove-selected-btn" {{bindAttr disabled="view.noHostsSelected"}}
+                {{action removeSelectedHosts target="controller" }}><i class="glyphicon glyphicon-trash glyphicon-white"></i>
+                {{t installer.step3.removeSelected}}
+              </button>
+            {{/unless}}
+            {{#unless isRetryDisabled}}
+              <a class="btn btn-primary decommission"
+                 href="#" {{action retrySelectedHosts target="view"}}><i class="glyphicon glyphicon-repeat glyphicon-white"></i>
+                {{t installer.step3.retryFailed}}
+              </a>
+            {{/unless}}
 
-  <div class="box">
-    <div class="box-header">
-      <div class="button-section">
-        {{#unless isBackDisabled}}
-          <button class="btn btn-primary step3-remove-selected-btn" {{bindAttr disabled="view.noHostsSelected"}}
-            {{action removeSelectedHosts target="controller" }}><i class="glyphicon glyphicon-trash glyphicon-white"></i>
-            {{t installer.step3.removeSelected}}
-          </button>
-        {{/unless}}
-        {{#unless isRetryDisabled}}
-          <a class="btn btn-primary decommission"
-             href="#" {{action retrySelectedHosts target="view"}}><i class="glyphicon glyphicon-repeat glyphicon-white"></i>
-            {{t installer.step3.retryFailed}}
-          </a>
-        {{/unless}}
-
-        <div id="host-filter" class="pull-right">
-          <ul class="clearfix">
-            <li class="first">{{t common.show}}:</li>
-            {{#each category in view.categories}}
-              <li {{bindAttr class=":filter-status category.itemClass"}}>
-                <a {{action selectCategory category target="view"}} href="#">
-                  {{category.label}}
-                </a>
-              </li>
-              {{#unless category.last}}
-                <li class="divider">|</li>
-              {{/unless}}
-            {{/each}}
-          </ul>
+            <div id="host-filter" class="pull-right">
+              <ul class="clearfix">
+                <li class="first">{{t common.show}}:</li>
+                {{#each category in view.categories}}
+                  <li {{bindAttr class=":filter-status category.itemClass"}}>
+                    <a {{action selectCategory category target="view"}} href="#">
+                      {{category.label}}
+                    </a>
+                  </li>
+                  {{#unless category.last}}
+                    <li class="divider">|</li>
+                  {{/unless}}
+                {{/each}}
+              </ul>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
 
-    <div class="pre-scrollable col-sm-12" style="max-height: 440px;">
-      <table id="confirm-hosts-table" class="table table-hover">
-        <thead>
-        <tr>
-          <th class="col-md-5">{{t common.host}}</th>
-          <!-- retrieved from local storage initially -->
-          <th class="col-md-2">{{t common.progress}}</th>
-          <th class="col-md-2">{{t common.status}}</th>
-          <!-- given by the parsing function that parses data from bootstrap call, dynamically assign the color -->
-          <th class="col-md-2"></th>
-          <!-- trash icon -->
-          <!-- retry icon -->
-          <th class="tinyspan">
-            {{view App.CheckboxView checkedBinding="view.pageChecked"}}
-          </th>
-        </tr>
-        </thead>
-        <tbody>
-          {{#if view.pageContent}}
-            {{#each host in view.pageContent}}
-              {{#view App.WizardHostView categoryBinding="controller.category" hostInfoBinding="host"}}
-              <td class="host">
-                <span title="{{unbound host.name}}" class="trim_hostname">{{host.name}}</span>
-              </td>
-              <td class="step3-table-progress">
-                <div class="progress">
-                  <div {{bindAttr class="host.bootBarColor host.isBootDone::progress-bar-striped host.isBootDone::active :progress-bar"}} style="width:100%">
-                  </div>
-                </div>
-              </td>
-              <td class="step3-table-status">
-                <a href="javascript:void(null)"
-                   data-toggle="modal" {{action hostLogPopup host target="controller"}}><span {{bindAttr class="host.bootStatusColor"}}>{{host.bootStatusForDisplay}}</span></a>
-              </td>
-              <td class="step3-table-action">
-                <a class="action" href="#" {{action remove target="view"}}{{bindAttr disabled="isBackDisabled"}}>
-                  <i class="glyphicon glyphicon-trash" {{translateAttr title="common.remove"}}></i>
+        <div class="pre-scrollable col-sm-12" style="max-height: 440px;">
+          <table id="confirm-hosts-table" class="table table-hover">
+            <thead>
+            <tr>
+              <th class="col-md-5">{{t common.host}}</th>
+              <!-- retrieved from local storage initially -->
+              <th class="col-md-2">{{t common.progress}}</th>
+              <th class="col-md-2">{{t common.status}}</th>
+              <!-- given by the parsing function that parses data from bootstrap call, dynamically assign the color -->
+              <th class="col-md-2">{{t common.action}}</th>
+              <!-- trash icon -->
+              <!-- retry icon -->
+              <th class="tinyspan">
+                {{view App.CheckboxView checkedBinding="view.pageChecked"}}
+              </th>
+            </tr>
+            </thead>
+            <tbody>
+              {{#if view.pageContent}}
+                {{#each host in view.pageContent}}
+                  {{#view App.WizardHostView categoryBinding="controller.category" hostInfoBinding="host"}}
+                  <td class="host">
+                    <span title="{{unbound host.name}}" class="trim_hostname">{{host.name}}</span>
+                  </td>
+                  <td class="step3-table-progress">
+                    <div class="progress">
+                      <div {{bindAttr class="host.bootBarColor host.isBootDone::progress-bar-striped host.isBootDone::active :progress-bar"}} style="width:100%">
+                      </div>
+                    </div>
+                  </td>
+                  <td class="step3-table-status">
+                    <a href="javascript:void(null)"
+                       data-toggle="modal" {{action hostLogPopup host target="controller"}}><span {{bindAttr class="host.bootStatusColor"}}>{{host.bootStatusForDisplay}}</span></a>
+                  </td>
+                  <td class="step3-table-action">
+                    <a class="action" href="#" {{action remove target="view"}}{{bindAttr disabled="isBackDisabled"}}>
+                      <i class="glyphicon glyphicon-trash" {{translateAttr title="common.remove"}}></i>
+                    </a>
+                  </td>
+                  <td class="step3-table-checkbox">
+                    {{view App.CheckboxView checkedBinding="host.isChecked"}}
+                  </td>
+                  {{/view}}
+                {{/each}}
+              {{else}}
+              <tr>
+                <td class="step3-table-no-hosts" colspan="5">
+                  {{t hosts.table.noHosts}}
+                </td>
+              </tr>
+              {{/if}}
+            </tbody>
+          </table>
+        </div>
+        <div id="hosts col-sm-12">
+          <div class="page-bar">
+            <div class="selected-hosts-info pull-left">
+              {{#if view.selectedHostsCount}}
+                <a {{action selectedHostsPopup target="controller"}} href="#">
+                  {{view.selectedHostsCount}}
+                  {{pluralize view.selectedHostsCount singular="t:hosts.filters.selectedHostInfo" plural="t:hosts.filters.selectedHostsInfo"}}
                 </a>
-              </td>
-              <td class="step3-table-checkbox">
-                {{view App.CheckboxView checkedBinding="host.isChecked"}}
-              </td>
-              {{/view}}
-            {{/each}}
-          {{else}}
-          <tr>
-            <td class="step3-table-no-hosts" colspan="5">
-              {{t hosts.table.noHosts}}
-            </td>
-          </tr>
-          {{/if}}
-        </tbody>
-      </table>
-    </div>
-    <div id="hosts col-sm-12">
-      <div class="page-bar">
-        <div class="selected-hosts-info pull-left">
-          {{#if view.selectedHostsCount}}
-            <a {{action selectedHostsPopup target="controller"}} href="#">
-              {{view.selectedHostsCount}}
-              {{pluralize view.selectedHostsCount singular="t:hosts.filters.selectedHostInfo" plural="t:hosts.filters.selectedHostsInfo"}}
-            </a>
-            -
-            <a {{action unSelectAll target="view"}} href="#">{{t hosts.filters.clearSelection}}</a>
-          {{/if}}
+                -
+                <a {{action unSelectAll target="view"}} href="#">{{t hosts.filters.clearSelection}}</a>
+              {{/if}}
+            </div>
+            <div class="items-on-page">
+              <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
+            </div>
+            <div class="info">{{view.paginationInfo}}</div>
+            {{view view.pagination4Btns}}
+          </div>
         </div>
-        <div class="items-on-page">
-          <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
+      </div>
+      {{#if hasMoreRegisteredHosts}}
+        <div {{bindAttr class=":alert :alert-warning"}}>
+          <a href="#" {{action registeredHostsPopup target="controller"}}>{{view.registeredHostsMessage}}</a>
         </div>
-        <div class="info">{{view.paginationInfo}}</div>
-        {{view view.pagination4Btns}}
+      {{/if}}
+      <div {{bindAttr class=":alert :alert-warning view.status isWarningsBoxVisible::hidden"}}>
+        {{view.message}}
+        <a href="#" {{action hostWarningsPopup warnings target="controller"}}>{{view.linkText}}</a>
+        {{#unless isBootstrapFailed}}
+          {{#unless isWarningsLoaded}}
+            {{view App.SpinnerView}}
+          {{/unless}}
+        {{/unless}}
       </div>
     </div>
   </div>
-  {{#if hasMoreRegisteredHosts}}
-    <div {{bindAttr class=":alert :alert-warning"}}>
-      <a href="#" {{action registeredHostsPopup target="controller"}}>{{view.registeredHostsMessage}}</a>
-    </div>
-  {{/if}}
-  <div {{bindAttr class=":alert :alert-warning view.status isWarningsBoxVisible::hidden"}}>
-    {{view.message}}
-    <a href="#" {{action hostWarningsPopup warnings target="controller"}}>{{view.linkText}}</a>
-    {{#unless isBootstrapFailed}}
-      {{#unless isWarningsLoaded}}
-        {{view App.SpinnerView}}
-      {{/unless}}
-    {{/unless}}
-  </div>
+</div>
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     <button type="button" class="btn btn-default pull-left installer-back-btn" {{bindAttr disabled="isBackButtonDisabled"}} {{action back}}>
       &larr; {{t common.back}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/wizard/step4.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/wizard/step4.hbs b/ambari-web/app/templates/wizard/step4.hbs
index ab7a8fa..26c304e 100644
--- a/ambari-web/app/templates/wizard/step4.hbs
+++ b/ambari-web/app/templates/wizard/step4.hbs
@@ -16,46 +16,51 @@
 * limitations under the License.
 }}
 
-<div id="step4">
-  <h2>{{t installer.step4.header}}</h2>
+<div id="step4" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t installer.step4.header}}</h4>
+  <p class="step-description">{{t installer.step4.body}}</p>
 
-  <div class="alert alert-info">
-    {{t installer.step4.body}}
-  </div>
-  <table class="table table-hover">
-    <thead>
-    <tr>
-      <th class="col-md-3">{{t common.service}}</th>
-      <th id="service-version">{{t common.version}}</th>
-      <th id="service-description">{{t common.description}}</th>
-      <th>
-        {{view App.CheckboxView disabledBinding="isInstalled" checkedBinding="isAllChecked"}}
-      </th>
-    </tr>
-    </thead>
-    <tbody>
-    {{#each controller}}
-      {{#unless isHiddenOnSelectServicePage}}
-        <tr {{bindAttr class="isSelected:active isSelected:service-selected"}}>
-          <td>
-            <div class="checkbox">{{displayNameOnSelectServicePage}}</div>
-          </td>
-          <td>{{serviceVersionDisplay}}</td>
-          <td>{{{comments}}}</td>
-          <td>
-            <div class="checkbox">
-              {{view App.CheckboxView checkboxClassNamesBinding="serviceName"
-              disabledBinding="isInstalled"
-              checkedBinding="isSelected"
-              }}
-            </div>
-          </td>
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <table class="table table-hover">
+        <thead>
+        <tr>
+          <th class="col-md-3">{{t common.service}}</th>
+          <th id="service-version">{{t common.version}}</th>
+          <th id="service-description">{{t common.description}}</th>
+          <th>
+            {{view App.CheckboxView disabledBinding="isInstalled" checkedBinding="isAllChecked"}}
+          </th>
         </tr>
-      {{/unless}}
-    {{/each}}
-    </tbody>
-  </table>
+        </thead>
+        <tbody>
+        {{#each controller}}
+          {{#unless isHiddenOnSelectServicePage}}
+            <tr {{bindAttr class="isSelected:active isSelected:service-selected"}}>
+              <td>
+                <div class="checkbox">{{displayNameOnSelectServicePage}}</div>
+              </td>
+              <td>{{serviceVersionDisplay}}</td>
+              <td>{{{comments}}}</td>
+              <td>
+                <div class="checkbox">
+                  {{view App.CheckboxView checkboxClassNamesBinding="serviceName"
+                  disabledBinding="isInstalled"
+                  checkedBinding="isSelected"
+                  }}
+                </div>
+              </td>
+            </tr>
+          {{/unless}}
+        {{/each}}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
 
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     {{#unless view.parentView.controller.hideBackButton}}
       <button type="button" class="btn btn-default pull-left installer-back-btn" {{bindAttr disabled="App.router.btnClickInProgress"}} {{action back}}>

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/wizard/step6.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/wizard/step6.hbs b/ambari-web/app/templates/wizard/step6.hbs
index f4fea26..3ba56a5 100644
--- a/ambari-web/app/templates/wizard/step6.hbs
+++ b/ambari-web/app/templates/wizard/step6.hbs
@@ -16,81 +16,86 @@
 * limitations under the License.
 }}
 
-<div id="step6">
-  <h2>{{t installer.step6.header}}</h2>
+<div id="step6" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t installer.step6.header}}</h4>
+  <p class="step-description">{{{view.label}}}</p>
 
-  <div class="alert alert-info">{{{view.label}}}</div>
-  {{#if anyGeneralIssues}}
-    <div class="alert alert-danger">
-      {{t installer.step6.validationSlavesAndClients.hasIssues}}
-      <a href="javascript:void(null);" {{action openSlavesAndClientsIssues target="controller"}}>{{t installer.step6.validationSlavesAndClients.click}}</a>
-      {{t installer.step6.validationSlavesAndClients.forDetails}}
-    </div>
-  {{/if}}
-
-  <div class="pre-scrollable col-sm-12">
-    <table class="table table-hover" id="component_assign_table">
-      <thead>
-      <tr>
-        <th class="host-column">{{t common.host}}</th>
-        {{#each header in controller.headers}}
-
-          <th {{bindAttr class="header.name"}}>
-            <a href="#" {{bindAttr class="header.allChecked:selected:deselected header.isDisabled:remove-link" id="header.allId"}}
-              {{action "selectAllNodes" header target="controller"}}>{{t all}}</a> &nbsp;|&nbsp; <a
-                  href="#" {{bindAttr class="header.noChecked:selected:deselected header.isDisabled:remove-link" id="header.noneId"}}
-            {{action "deselectAllNodes" header target="controller"}}>{{t none}}</a>
-          </th>
+  <div class="panel panel-default">
+    <div class="panel-body">
+      {{#if anyGeneralIssues}}
+        <div class="alert alert-danger">
+          {{t installer.step6.validationSlavesAndClients.hasIssues}}
+          <a href="javascript:void(null);" {{action openSlavesAndClientsIssues target="controller"}}>{{t installer.step6.validationSlavesAndClients.click}}</a>
+          {{t installer.step6.validationSlavesAndClients.forDetails}}
+        </div>
+      {{/if}}
 
-        {{/each}}
-      </tr>
-      </thead>
-      <tbody>
-        {{#each host in view.pageContent}}
+      <div class="pre-scrollable col-sm-12">
+        <table class="table table-hover" id="component_assign_table">
+          <thead>
           <tr>
-            {{#view App.WizardStep6HostView hostBinding="host" }}
-              <div class="checkbox">
-                <span class="trim_hostname">{{host.hostName}}</span>
-                {{#if host.hasMaster}}
-                  <i class="glyphicon glyphicon-asterisks">&#10037;</i>
-                {{/if}}
-              </div>
-            {{/view}}
-            {{#each checkbox in host.checkboxes}}
-              <td {{bindAttr class="checkbox.hasErrorMessage:error checkbox.hasWarnMessage:warning checkbox.component"}}>
-                <div class="checkbox">
-                    <input {{bindAttr id="checkbox.uId" checked = "checkbox.checked" disabled="checkbox.isDisabled"}} {{action "checkboxClick" checkbox target="view" }}
-                            type="checkbox"/>
-                  <label {{bindAttr for="checkbox.uId"}}>{{checkbox.title}}</label>
-                </div>
-              </td>
+            <th class="host-column">{{t common.host}}</th>
+            {{#each header in controller.headers}}
+              <th {{bindAttr class="header.name"}}>
+                <a href="#" {{bindAttr class="header.allChecked:selected:deselected header.isDisabled:remove-link" id="header.allId"}}
+                  {{action "selectAllNodes" header target="controller"}}>{{t all}}</a> &nbsp;|&nbsp; <a
+                      href="#" {{bindAttr class="header.noChecked:selected:deselected header.isDisabled:remove-link" id="header.noneId"}}
+                {{action "deselectAllNodes" header target="controller"}}>{{t none}}</a>
+              </th>
             {{/each}}
           </tr>
-          {{#if host.anyMessage}}
-            <tr>
-              <td {{bindAttr colspan="view.columnCount"}} class="no-borders">
-                {{#each errorMsg in host.errorMessages}}
-                    <div class="alert alert-danger">{{errorMsg}}</div>
-                {{/each}}
-                {{#each warnMsg in host.warnMessages}}
-                  <div class="alert alert-warning">{{warnMsg}}</div>
+          </thead>
+          <tbody>
+            {{#each host in view.pageContent}}
+              <tr>
+                {{#view App.WizardStep6HostView hostBinding="host" }}
+                  <div class="checkbox">
+                    <span class="trim_hostname">{{host.hostName}}</span>
+                    {{#if host.hasMaster}}
+                      <i class="glyphicon glyphicon-asterisks">&#10037;</i>
+                    {{/if}}
+                  </div>
+                {{/view}}
+                {{#each checkbox in host.checkboxes}}
+                  <td {{bindAttr class="checkbox.hasErrorMessage:error checkbox.hasWarnMessage:warning checkbox.component"}}>
+                    <div class="checkbox">
+                        <input {{bindAttr id="checkbox.uId" checked = "checkbox.checked" disabled="checkbox.isDisabled"}} {{action "checkboxClick" checkbox target="view" }}
+                                type="checkbox"/>
+                      <label {{bindAttr for="checkbox.uId"}}>{{checkbox.title}}</label>
+                    </div>
+                  </td>
                 {{/each}}
-              </td>
-            </tr>
-          {{/if}}
-        {{/each}}
-      </tbody>
-    </table>
-  </div>
-  <div id="hosts">
-    <div class="page-bar">
-      <div class="items-on-page">
-        <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
+              </tr>
+              {{#if host.anyMessage}}
+                <tr>
+                  <td {{bindAttr colspan="view.columnCount"}} class="no-borders">
+                    {{#each errorMsg in host.errorMessages}}
+                        <div class="alert alert-danger">{{errorMsg}}</div>
+                    {{/each}}
+                    {{#each warnMsg in host.warnMessages}}
+                      <div class="alert alert-warning">{{warnMsg}}</div>
+                    {{/each}}
+                  </td>
+                </tr>
+              {{/if}}
+            {{/each}}
+          </tbody>
+        </table>
+      </div>
+      <div id="hosts">
+        <div class="page-bar">
+          <div class="items-on-page">
+            <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
+          </div>
+          <div class="info">{{view.paginationInfo}}</div>
+          {{view view.pagination4Btns}}
+        </div>
       </div>
-      <div class="info">{{view.paginationInfo}}</div>
-      {{view view.pagination4Btns}}
     </div>
   </div>
+</div>
+
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     <button type="button" class="btn btn-default installer-back-btn" {{bindAttr disabled="App.router.btnClickInProgress"}} {{action back}}>
       &larr; {{t common.back}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/wizard/step7.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/wizard/step7.hbs b/ambari-web/app/templates/wizard/step7.hbs
index 0f8fa8d..a939e27 100644
--- a/ambari-web/app/templates/wizard/step7.hbs
+++ b/ambari-web/app/templates/wizard/step7.hbs
@@ -16,20 +16,22 @@
 * limitations under the License.
 }}
 
-<div id="serviceConfig">
-  <h2>{{t installer.step7.header}}{{controller.finnalyLoaded}}</h2>
+<div id="serviceConfig" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t installer.step7.header}}{{controller.finnalyLoaded}}</h4>
+  <p class="step-description">{{t installer.step7.body}}</p>
 
-  <div class="alert alert-info">
-    {{t installer.step7.body}}
+  <div class="panel panel-default">
+    <div class="panel-body">
+      {{#if isConfigsLoaded}}
+        {{view App.ServicesConfigView}}
+      {{else}}
+        {{view App.SpinnerView}}
+      {{/if}}
+    </div>
   </div>
+</div>
 
-  {{#if isConfigsLoaded}}
-    {{view App.ServicesConfigView}}
-  {{else}}
-    {{view App.SpinnerView}}
-  {{/if}}
-
-
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     <button type="button" class="btn btn-default installer-back-btn" {{bindAttr disabled="App.router.btnClickInProgress"}} {{action back}}>
       &larr; {{t common.back}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/wizard/step8.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/wizard/step8.hbs b/ambari-web/app/templates/wizard/step8.hbs
index 1af0683..5c2e8e6 100644
--- a/ambari-web/app/templates/wizard/step8.hbs
+++ b/ambari-web/app/templates/wizard/step8.hbs
@@ -15,68 +15,74 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div id="deploy-review">
-  <h2>{{t installer.step8.header}}</h2>
-
-  <div class="alert alert-info">
+<div id="deploy-review" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t installer.step8.header}}</h4>
+  <p class="step-description">
     {{t installer.step8.body}}
     {{#if controller.isManualKerberos}}
       <br/><br/>
       {{t installer.step8.kerberors.warning}}
     {{/if}}
-  </div>
+  </p>
 
-  <div id="step8-content" class="well pre-scrollable">
-    <div id="step8-info">
-      {{#each item in controller.clusterInfo}}
-        <p>
-          <b>{{item.display_name}}</b> : {{item.config_value}}
-        </p>
-      {{/each}}
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <div id="step8-content" class="well pre-scrollable">
+        <div id="step8-info">
+          {{#each item in controller.clusterInfo}}
+            <p>
+              <b>{{item.display_name}}</b> : {{item.config_value}}
+            </p>
+          {{/each}}
 
-      <p><b>{{controller.clusterInfo.repoInfo.display_name}}</b>:</p>
+          <p><b>{{controller.clusterInfo.repoInfo.display_name}}</b>:</p>
 
-      {{#if controller.clusterInfo.useRedhatSatellite}}
-        <div>
-          <ul>
-            <li>
-              <p>{{t installer.step1.advancedRepo.useRedhatSatellite.message}}</p>
-            </li>
-          </ul>
-        </div>
-      {{else}}
-        <div>
-          <ul>
-            {{#each item in controller.clusterInfo.repoInfo}}
-              <li>
-                <p><span class="text text-info">{{item.os_type}} ({{item.repo_id}}): <br/></span>{{item.base_url}}</p>
-              </li>
-            {{/each}}
-          </ul>
-        </div>
-      {{/if}}
+          {{#if controller.clusterInfo.useRedhatSatellite}}
+            <div>
+              <ul>
+                <li>
+                  <p>{{t installer.step1.advancedRepo.useRedhatSatellite.message}}</p>
+                </li>
+              </ul>
+            </div>
+          {{else}}
+            <div>
+              <ul>
+                {{#each item in controller.clusterInfo.repoInfo}}
+                  <li>
+                    <p><span class="text text-info">{{item.os_type}} ({{item.repo_id}}): <br/></span>{{item.base_url}}</p>
+                  </li>
+                {{/each}}
+              </ul>
+            </div>
+          {{/if}}
 
-      <div>
-        {{#if controller.services.length}}
-          <p><b>{{t menu.item.services}}:</b></p>
-          <ul>
-            {{#each controller.services}}
-              <li>
-                <em><b>{{display_name}}</b></em>
-                <ul>
-                  {{#each component in this.service_components}}
-                    <li>
-                      <span class="text text-info">{{component.display_name }} : </span>{{component.component_value}}
-                    </li>
-                  {{/each}}
-                </ul>
-              </li>
-            {{/each}}
-          </ul>
-        {{/if}}
+          <div>
+            {{#if controller.services.length}}
+              <p><b>{{t menu.item.services}}:</b></p>
+              <ul>
+                {{#each controller.services}}
+                  <li>
+                    <em><b>{{display_name}}</b></em>
+                    <ul>
+                      {{#each component in this.service_components}}
+                        <li>
+                          <span class="text text-info">{{component.display_name }} : </span>{{component.component_value}}
+                        </li>
+                      {{/each}}
+                    </ul>
+                  </li>
+                {{/each}}
+              </ul>
+            {{/if}}
+          </div>
+        </div>
       </div>
     </div>
   </div>
+</div>
+
+<div class="wizard-footer col-md-12">
   <div class="btn-area">
     <button type="button" class="btn btn-default pull-left installer-back-btn" {{bindAttr disabled="App.router.btnClickInProgress"}} {{action back}}>
       &larr; {{t common.back}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/334d4ccd/ambari-web/app/templates/wizard/step9.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/wizard/step9.hbs b/ambari-web/app/templates/wizard/step9.hbs
index d1bcf3d..7b406d0 100644
--- a/ambari-web/app/templates/wizard/step9.hbs
+++ b/ambari-web/app/templates/wizard/step9.hbs
@@ -16,120 +16,121 @@
 * limitations under the License.
 }}
 
-<div id="deploy">
+<div id="deploy" class="wizard-content col-md-9">
+  <h4 class="step-title">{{t installer.step9.header}}</h4>
+  <p class="step-description">{{t installer.step9.body}}</p>
 
-  <h2>{{t installer.step9.header}}</h2>
-
-  <p class="alert alert-info">{{t installer.step9.body}}</p>
-
-  <div id="overallProgress">
-    <div class="row">
-      <div class="col-md-10">
-        <div class="progress">
-          <div {{bindAttr class="view.isStepCompleted::progress-bar-striped view.isStepCompleted::active view.barColor :progress-bar"}} {{bindAttr style="view.barWidth"}}>
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <div id="overallProgress">
+        <div class="row">
+          <div class="col-md-10">
+            <div class="progress">
+              <div {{bindAttr class="view.isStepCompleted::progress-bar-striped view.isStepCompleted::active view.barColor :progress-bar"}} {{bindAttr style="view.barWidth"}}>
+              </div>
+            </div>
           </div>
+          <div class="col-md-2">{{view.progressMessage}}</div>
         </div>
       </div>
-      <div class="col-md-2">{{view.progressMessage}}</div>
-    </div>
-  </div>
 
-  <div class="box">
-    <div class="box-header">
-      <div class="pull-left">
-        {{#if controller.showRetry}}
-          <a class="btn btn-primary" href="#" {{action retry}}>
-            <i class="glyphicon glyphicon-repeat glyphicon-white"></i>
-            {{t common.retry}}
-          </a>
-        {{/if}}
-      </div>
-      <!-- filter by host level -->
-      <div id="host-filter" class="pull-right">
-        <ul class="clearfix">
-          <li class="first">{{t common.show}}:</li>
-          {{#each category in view.categories}}
-            <li {{bindAttr class=":filter-status category.itemClass"}}>
-              <a {{action selectCategory category target="view"}} href="#">
-                {{category.label}}
+      <div class="box">
+        <div class="box-header">
+          <div class="pull-left">
+            {{#if controller.showRetry}}
+              <a class="btn btn-primary" href="#" {{action retry}}>
+                <i class="glyphicon glyphicon-repeat glyphicon-white"></i>
+                {{t common.retry}}
               </a>
-            </li>
-            {{#unless category.last}}
-              <li class="divider">|</li>
-            {{/unless}}
-          {{/each}}
-        </ul>
-      </div>
-    </div>
-    <div class="pre-scrollable col-sm-12">
-      <table id="deploy-status-by-host" class="table table-hover">
-        <thead>
-        <tr>
-          <th class="host">
-            {{t common.host}}
-          </th>
-          <th class="status">{{t common.status}}</th>
-          <!--  given by the parsing function that parses data from bootstrap call -->
-          <th class="message">{{t common.message}}</th>
-          <!-- retrieved from local storage initially -->
-        </tr>
-        </thead>
-
-        <tbody>
-          {{#if view.pageContent}}
-            {{#each host in view.pageContent}}
-              {{#view App.HostStatusView objBinding="host" controllerBinding="controller"}}
-              <td class="host">
-                <span title="{{unbound host.name}}" class="trim_hostname">{{host.name}}</span>
-              </td>
-              <td>
-                <div class="progress-wrapper pull-left">
-                  <div class="progress">
-                    <div {{bindAttr class="view.isHostCompleted::active view.isHostCompleted::progress-bar-striped view.barColor :progress-bar" style="view.barWidth"}}></div>
-                  </div>
-                </div>
-                <div class="progress-percentage pull-left">{{host.progress}}%</div>
-              </td>
-              <td class="host-message">
-                <a {{bindAttr class="view.isFailed:text-danger view.isSuccess:text-success view.isWarning:text-warning"}}
-                    href="javascript:void(null)"
-                    data-toggle="modal" {{action hostLogPopup target="view"}}>{{host.message}}</a>
-              </td>
-              {{/view}}
-            {{/each}}
-          {{else}}
-          <tr>
-            <td colspan="3"><p>{{t installer.step3.hosts.noHosts}}</p></td>
-          </tr>
-          {{/if}}
-        </tbody>
-      </table>
-    </div>
-    <div id="hosts">
-      <div class="page-bar">
-        <div class="selected-hosts-info pull-left">
-          {{view.filteredHostsInfo}}
-          -
-          <a {{action showAllHosts target="view"}} href="#">{{t tableView.filters.showAll}}</a>
+            {{/if}}
+          </div>
+          <!-- filter by host level -->
+          <div id="host-filter" class="pull-right">
+            <ul class="clearfix">
+              <li class="first">{{t common.show}}:</li>
+              {{#each category in view.categories}}
+                <li {{bindAttr class=":filter-status category.itemClass"}}>
+                  <a {{action selectCategory category target="view"}} href="#">
+                    {{category.label}}
+                  </a>
+                </li>
+                {{#unless category.last}}
+                  <li class="divider">|</li>
+                {{/unless}}
+              {{/each}}
+            </ul>
+          </div>
         </div>
-        <div class="items-on-page">
-          <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
+        <div class="pre-scrollable col-sm-12">
+          <table id="deploy-status-by-host" class="table table-hover">
+            <thead>
+            <tr>
+              <th class="host">
+                {{t common.host}}
+              </th>
+              <th class="status">{{t common.status}}</th>
+              <!--  given by the parsing function that parses data from bootstrap call -->
+              <th class="message">{{t common.message}}</th>
+              <!-- retrieved from local storage initially -->
+            </tr>
+            </thead>
+            <tbody>
+              {{#if view.pageContent}}
+                {{#each host in view.pageContent}}
+                  {{#view App.HostStatusView objBinding="host" controllerBinding="controller"}}
+                  <td class="host">
+                    <span title="{{unbound host.name}}" class="trim_hostname">{{host.name}}</span>
+                  </td>
+                  <td>
+                    <div class="progress-wrapper pull-left">
+                      <div class="progress">
+                        <div {{bindAttr class="view.isHostCompleted::active view.isHostCompleted::progress-bar-striped view.barColor :progress-bar" style="view.barWidth"}}></div>
+                      </div>
+                    </div>
+                    <div class="progress-percentage pull-left">{{host.progress}}%</div>
+                  </td>
+                  <td class="host-message">
+                    <a {{bindAttr class="view.isFailed:text-danger view.isSuccess:text-success view.isWarning:text-warning"}}
+                        href="javascript:void(null)"
+                        data-toggle="modal" {{action hostLogPopup target="view"}}>{{host.message}}</a>
+                  </td>
+                  {{/view}}
+                {{/each}}
+              {{else}}
+              <tr>
+                <td colspan="3"><p>{{t installer.step3.hosts.noHosts}}</p></td>
+              </tr>
+              {{/if}}
+            </tbody>
+          </table>
+        </div>
+        <div id="hosts">
+          <div class="page-bar">
+            <div class="selected-hosts-info pull-left">
+              {{view.filteredHostsInfo}}
+              -
+              <a {{action showAllHosts target="view"}} href="#">{{t tableView.filters.showAll}}</a>
+            </div>
+            <div class="items-on-page">
+              <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
+            </div>
+            <div class="info">{{view.paginationInfo}}</div>
+            {{view view.pagination4Btns}}
+          </div>
         </div>
-        <div class="info">{{view.paginationInfo}}</div>
-        {{view view.pagination4Btns}}
       </div>
+      {{#if view.resultMsg}}
+        <p {{bindAttr class="view.resultMsgColor :alert :alert-warning"}}>{{view.resultMsg}}
+          {{#if view.isHostHeartbeatLost}}
+            <a href="javascript:void(null)"
+               data-toggle="modal" {{action hostWithInstallFailed target="view"}}>{{t common.showDetails}}</a>
+          {{/if}}
+        </p>
+      {{/if}}
     </div>
   </div>
-
-  <div>
-    {{#if view.resultMsg}}
-      <p {{bindAttr class="view.resultMsgColor :alert :alert-warning"}}>{{view.resultMsg}}
-        {{#if view.isHostHeartbeatLost}}
-          <a href="javascript:void(null)"
-             data-toggle="modal" {{action hostWithInstallFailed target="view"}}>{{t common.showDetails}}</a>
-        {{/if}}
-      </p>
-    {{/if}}
+</div>
+<div class="wizard-footer col-md-12">
     <div class="btn-area">
       <button class="btn btn-success pull-right" {{bindAttr disabled="isNextButtonDisabled"}} {{action submit target="controller"}}>
         {{#if App.router.nextBtnClickInProgress}}
@@ -138,6 +139,4 @@
         {{t common.next}} &rarr;
       </button>
     </div>
-  </div>
-
 </div>