AMBARI-18799. Replace box-* css with bootstrap panel-* css (onechiporenko)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/1cba2f95 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/1cba2f95 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/1cba2f95 Branch: refs/heads/branch-dev-patch-upgrade Commit: 1cba2f95cfefa924295862eae3e3037810e7012e Parents: 53a9250 Author: Oleg Nechiporenko <[email protected]> Authored: Fri Nov 4 14:57:38 2016 +0200 Committer: Oleg Nechiporenko <[email protected]> Committed: Fri Nov 4 16:04:06 2016 +0200 ---------------------------------------------------------------------- ambari-web/app/styles/alerts.less | 14 -- ambari-web/app/styles/application.less | 130 +++---------------- .../main/alerts/definition_details.hbs | 31 ++--- ambari-web/app/templates/main/host/summary.hbs | 64 ++++----- .../app/templates/main/service/info/summary.hbs | 116 +++++++++-------- ambari-web/app/templates/wizard/step3.hbs | 112 ++++++++-------- ambari-web/app/templates/wizard/step9.hbs | 120 +++++++++-------- 7 files changed, 254 insertions(+), 333 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/1cba2f95/ambari-web/app/styles/alerts.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/alerts.less b/ambari-web/app/styles/alerts.less index ceae728..2657444 100644 --- a/ambari-web/app/styles/alerts.less +++ b/ambari-web/app/styles/alerts.less @@ -182,14 +182,6 @@ .alert-definition-details-header { margin-bottom: 30px; } - .box { - .box-header { - .edit-link { - margin: 3px; - } - } - margin-bottom: 0; - } .definition-details-block { margin-top: 30px; .multiline-text { @@ -276,12 +268,6 @@ .edit-link { cursor: pointer; } - - .box .box-header h4 { - color: #333; - font-size: 16px; - font-weight: 500; - } } .alert-configs { http://git-wip-us.apache.org/repos/asf/ambari/blob/1cba2f95/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 821c087..ae7f1f9 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -830,6 +830,9 @@ h1 { } } .wizard-content { + .panel.panel-default.panel-internal { + border: 1px solid #ddd; + } padding: 25px; background-color: #fff; @@ -906,6 +909,11 @@ h1 { } } #confirm-hosts { + + .page-bar { + border: none; + } + table { margin-bottom: 0; th { @@ -920,15 +928,6 @@ h1 { float: none; } } - .box-header { - padding: 0 4px 0 10px; - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #e5e5e5)); - background: -ms-linear-gradient(top, #ffffff, #e5e5e5); - background: -moz-linear-gradient(center top, #ffffff 0%, #e5e5e5 100%); - .btn-primary { - margin-top: 3px; - } - } #host-filter { margin-top: 1px; @@ -1045,20 +1044,13 @@ h1 { } } #deploy { + + .page-bar { + border: none; + } .pre-scrollable { max-height: 750px; } - #overallProgress { - } - .box-header { - padding: 0 4px 0 10px; - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #e5e5e5)); - background: -ms-linear-gradient(top, #ffffff, #e5e5e5); - background: -moz-linear-gradient(center top, #ffffff 0%, #e5e5e5 100%); - .btn-primary { - margin-top: 3px; - } - } table { margin-bottom: 0; } @@ -1290,7 +1282,6 @@ h1 { min-width: 280px; } .panel-heading { - background-color: #f0f0f0; cursor: pointer; } .panel-group { @@ -1409,6 +1400,9 @@ h1 { } } .common-config-category, .enhanced-config-tab-content { + .panel-title { + line-height: 16px; + } .action { cursor: pointer; } @@ -1583,46 +1577,6 @@ a:focus { @rack-state-plus: url("/img/rack-state-plus.png"); @rack-state-minus: url("/img/rack-state-minus.png"); -/*****start styles for boxes*****/ -.box { - border: 1px solid #D4D4D4; - margin-bottom: 20px; - background-color: #FFFFFF; - - .box-header { - border-bottom: 1px solid #D4D4D4; - } - .box-header, - .box-footer { - padding: 4px 4px 4px 10px; - background: #f5f5f5; - } - .box-header:after, - .box-footer:after { - content: ""; - display: table; - clear: both; - } - .box-header { - .btn-group { - float: right; - } - h4 { - float: left; - margin: 5px; - font-size: 15px; - color: #777; - } - } - .box-footer { - hr { - margin: 0; - } - } -} - -/*****end styles for boxes*****/ - /*****start styles for well *****/ .well { border-radius: 0; @@ -3350,48 +3304,6 @@ table.graphs { position: relative; top: 10px; } - .box-header { - margin-left: 0; - .btn-group { - float: left; - } - .btn.decommission { - margin-left: 5px; - } - .btn.add-host-button { - margin-bottom: 10px; - margin-top: -5px; - } - .health-status-bar { - font-size: 0.9em; - margin-left: 0; - color: #b4b4b4; - a { - text-decoration: none; - } - .category-item:hover { - cursor: pointer; - a { - color: #ffffff; - } - } - .active { - a { - color: #ffffff; - } - background-color: #888888; - border-color: #888888; - -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25); - -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25); - box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25); - } - .category-item.active:hover { - a { - color: #ffffff; - } - } - } - } .progress { margin-bottom: 0; } @@ -3665,9 +3577,6 @@ table.graphs { } .warnings-list { .block { - .panel-heading { - background-color: #f0f0f0; - } table { width: 100%; td, th { @@ -3805,11 +3714,6 @@ table.graphs { margin-bottom: 5px; } - .box-header .host-title { - margin: 0; - padding-left: 17px; - } - hr { margin-bottom: 0; clear: both; @@ -5885,6 +5789,9 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox { .panel-heading { background-color: #f0f0f0; + .panel-title { + line-height: 34px; + } } .config-manage-nav { @@ -5988,7 +5895,6 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox { } #select-stack { .panel-heading { - background-color: #f0f0f0; font-weight: bold; p { margin-bottom: 0; http://git-wip-us.apache.org/repos/asf/ambari/blob/1cba2f95/ambari-web/app/templates/main/alerts/definition_details.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/alerts/definition_details.hbs b/ambari-web/app/templates/main/alerts/definition_details.hbs index c7fa613..0318b91 100644 --- a/ambari-web/app/templates/main/alerts/definition_details.hbs +++ b/ambari-web/app/templates/main/alerts/definition_details.hbs @@ -63,32 +63,33 @@ {{! Left column }} {{! Alert Definition Configs }} - <div class="box col-md-8"> - <div class="box-header row"> + <div class="panel panel-default col-md-8"> + <div class="panel-heading row"> <div class="pull-left col-md-7"> - <h4>{{t common.configuration}}</h4> + <h4 class="panel-title">{{t common.configuration}}</h4> </div> <div class="pull-right col-md-5"> {{#isAuthorized "SERVICE.TOGGLE_ALERTS"}} {{#unless App.router.mainAlertDefinitionConfigsController.canEdit}} - <a {{action editConfigs target="App.router.mainAlertDefinitionConfigsController"}} - class="pull-right edit-link"> + <a {{action editConfigs target="App.router.mainAlertDefinitionConfigsController"}} class="pull-right edit-link btn btn-link"> {{t common.edit}} </a> {{/unless}} {{/isAuthorized}} </div> </div> - {{view App.AlertDefinitionConfigsView contentBinding="view.controller.content" alertDefinitionTypeBinding="view.controller.content.type" canEdit=false}} - {{#if App.router.mainAlertDefinitionConfigsController.canEdit}} - <div class="edit-buttons"> - <button {{action cancelEditConfigs target="App.router.mainAlertDefinitionConfigsController"}} - class="btn btn-default">{{t common.cancel}}</button> - <button {{bindAttr disabled="App.router.mainAlertDefinitionConfigsController.hasErrors"}} {{action saveConfigs target="App.router.mainAlertDefinitionConfigsController"}} - class="btn btn-primary">{{t common.save}} - </button> - </div> - {{/if}} + <div class="panel-body"> + {{view App.AlertDefinitionConfigsView contentBinding="view.controller.content" alertDefinitionTypeBinding="view.controller.content.type" canEdit=false}} + {{#if App.router.mainAlertDefinitionConfigsController.canEdit}} + <div class="edit-buttons"> + <button {{action cancelEditConfigs target="App.router.mainAlertDefinitionConfigsController"}} + class="btn btn-default">{{t common.cancel}}</button> + <button {{bindAttr disabled="App.router.mainAlertDefinitionConfigsController.hasErrors"}} {{action saveConfigs target="App.router.mainAlertDefinitionConfigsController"}} + class="btn btn-primary">{{t common.save}} + </button> + </div> + {{/if}} + </div> </div> {{! Alert Definition Configs end }} {{! Left column end }} http://git-wip-us.apache.org/repos/asf/ambari/blob/1cba2f95/ambari-web/app/templates/main/host/summary.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/host/summary.hbs b/ambari-web/app/templates/main/host/summary.hbs index ea4be05..ce64bd4 100644 --- a/ambari-web/app/templates/main/host/summary.hbs +++ b/ambari-web/app/templates/main/host/summary.hbs @@ -19,33 +19,33 @@ <div class="row host-block"> <div class="col-md-6"> {{!components}} - <div class="box"> - <div class="box-header"> - <div class="pull-left"> - <h4>{{t common.components}}</h4> - </div> - <div class="pull-right col-md-5 row" style="padding:0 10px;"> + <div class="panel panel-default"> + <div class="panel-heading"> + <div class="row"> + <div class="col-md-6"> + <h4 class="panel-title">{{t common.components}}</h4> + </div> + <div class="col-md-6"> {{#isAuthorized "HOST.ADD_DELETE_COMPONENTS"}} - <div class="btn-group pull-right col-md-6"> - <button id="add_component" - data-toggle="dropdown" {{bindAttr class="view.addComponentDisabled:disabled :btn :btn-default :dropdown-toggle"}}> + <div class="dropdown pull-right"> + <button id="add_component" data-toggle="dropdown" {{bindAttr class="view.addComponentDisabled:disabled :btn :btn-default :dropdown-toggle"}}> <span class="glyphicon glyphicon-plus"></span> {{t add}} </button> <ul class="dropdown-menu"> - {{#each component in view.addableComponents}} - <li> - <a href="javascript:void(null)" - data-toggle="modal" {{action addComponentWithCheck component target="controller"}}> - {{component.displayName}} - </a> - </li> - {{/each}} + {{#each component in view.addableComponents}} + <li> + <a href="javascript:void(null)" data-toggle="modal" {{action addComponentWithCheck component target="controller"}}> + {{component.displayName}} + </a> + </li> + {{/each}} </ul> </div> {{/isAuthorized}} + </div> </div> </div> - <div class="host-components"> + <div class="host-components panel-body"> {{#if view.sortedComponents.length}} {{#isAuthorized "SERVICE.MODIFY_CONFIGS, SERVICE.START_STOP, HOST.ADD_DELETE_COMPONENTS, HOST.TOGGLE_MAINTENANCE"}} @@ -140,11 +140,11 @@ </div> </div> <div class="host-configuration"> - <div class="box"> - <div class="box-header"> - <h4>{{t hosts.host.summary.header}}</h4> + <div class="panel panel-default"> + <div class="panel-heading"> + <h4 class="panel-title">{{t hosts.host.summary.header}}</h4> </div> - <div class="host-summary-content"> + <div class="host-summary-content panel-body"> <dl class="dl-horizontal host-details-summary-list"> <dt class="summary-hostname-label">{{t hosts.host.summary.hostname}}:</dt> @@ -189,12 +189,14 @@ <div class="col-md-6"> {{!metrics}} {{#unless view.isNoHostMetricsService}} - <div class="box"> - <div class="box-header"> - <h4>{{t hosts.host.summary.hostMetrics}}</h4> - {{view view.timeRangeListView}} + <div class="panel panel-default"> + <div class="panel-heading"> + <div class="row"> + <div class="col-md-6"><h4 class="panel-title">{{t hosts.host.summary.hostMetrics}}</h4></div> + <div class="col-md-6">{{view view.timeRangeListView}}</div> + </div> </div> - <div> + <div class="panel-body"> {{view App.MainHostMetricsView contentBinding="view.content"}} </div> </div> @@ -202,11 +204,11 @@ {{!logs metrics}} {{#if App.supports.logCountVizualization}} - <div class="box"> - <div class="box-header"> - <h4>{{t hosts.host.summary.hostLogMetrics}}</h4> + <div class="panel panel-default"> + <div class="panel-heading"> + <h4 class="panel-title">{{t hosts.host.summary.hostLogMetrics}}</h4> </div> - <div> + <div class="panel-body"> {{view App.MainHostLogMetrics contentBinding="view.content"}} </div> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/1cba2f95/ambari-web/app/templates/main/service/info/summary.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/info/summary.hbs b/ambari-web/app/templates/main/service/info/summary.hbs index 2cdf1d3..1423853 100644 --- a/ambari-web/app/templates/main/service/info/summary.hbs +++ b/ambari-web/app/templates/main/service/info/summary.hbs @@ -47,71 +47,85 @@ {{/if}} <div class="service-block"> - <div class="box"> - <div class="box-header summary-box-header"> - <h4>{{controller.content.label}} {{t services.service.info.menu.summary}}</h4> - {{#if view.hasAlertDefinitions}} - {{#if view.alertsCount}} - <span {{action "showServiceAlertsPopup" controller.content target="controller"}} - {{bindAttr class=":label :pull-right view.hasCriticalAlerts:alerts-crit-count:alerts-warn-count"}}> + <div class="panel panel-default"> + <div class="panel-heading summary-box-header"> + <div class="row"> + <div class="col-md-8 col-lg-8"> + <h4 class="panel-title">{{controller.content.label}} {{t services.service.info.menu.summary}}</h4> + </div> + <div class="col-md-4 col-lg-4"> + {{#if view.hasAlertDefinitions}} + {{#if view.alertsCount}} + <span {{action "showServiceAlertsPopup" controller.content target="controller"}} + {{bindAttr class=":label :pull-right view.hasCriticalAlerts:alerts-crit-count:alerts-warn-count"}}> {{view.alertsCount}} {{pluralize view.alertsCount singular="alert" plural="alerts"}}</span> - {{else}} - <span {{action "showServiceAlertsPopup" controller.content target="controller"}} - class="label pull-right no-alerts-label">{{t services.service.summary.alerts.noAlerts}}</span> - {{/if}} - {{/if}} + {{else}} + <span {{action "showServiceAlertsPopup" controller.content target="controller"}} + class="label pull-right no-alerts-label">{{t services.service.summary.alerts.noAlerts}}</span> + {{/if}} + {{/if}} + </div> + </div> </div> + <div class="panel-body"> {{#if view.serviceSummaryView}} {{view view.serviceSummaryView}} {{else}} {{view App.SpinnerView}} {{/if}} + </div> </div> {{! widgets in the metrics panel are loaded seperately from summary page text information and does not get block due to any global API poller information }} {{#if view.isServiceMetricLoaded}} <div class="service-metrics-block"> - <div class="box"> - <div class="box-header"> - <h4>{{t services.service.metrics}}</h4> - {{#if showTimeRangeControl}} - {{view view.timeRangeListView}} - {{/if}} - {{#if isServiceWithEnhancedWidgets}} - {{#if isAmbariMetricsInstalled}} - <div class="btn-group pull-right actions"> - <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> - {{t common.actions}} <span class="caret"></span> - </button> - <ul class="dropdown-menu"> - {{#each option in view.widgetActions}} - <li {{bindAttr class="option.layouts:dropdown-submenu"}}> - {{#if option.isAction}} - <a href="#" {{action doWidgetAction option.action target="view"}}> - <i {{bindAttr class="option.class"}}></i> - {{option.label}} - </a> - {{#if option.layouts}} - <ul class="dropdown-menu"> - {{#each layout in option.layouts}} - <li> - <a href="javascript:void(0);"> - {{layout.layoutName}} - </a> - </li> - {{/each}} - </ul> - {{/if}} - {{/if}} - </li> - {{/each}} - </ul> - </div> - {{/if}} - {{/if}} + <div class="panel panel-default"> + <div class="panel-heading"> + <div class="row"> + <div class="col-md-8 col-lg-8"> + <h4 class="panel-title">{{t services.service.metrics}}</h4> + </div> + <div class="col-md-4 col-lg-4"> + {{#if showTimeRangeControl}} + {{view view.timeRangeListView}} + {{/if}} + {{#if isServiceWithEnhancedWidgets}} + {{#if isAmbariMetricsInstalled}} + <div class="btn-group pull-right actions"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + {{t common.actions}} <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + {{#each option in view.widgetActions}} + <li {{bindAttr class="option.layouts:dropdown-submenu"}}> + {{#if option.isAction}} + <a href="#" {{action doWidgetAction option.action target="view"}}> + <i {{bindAttr class="option.class"}}></i> + {{option.label}} + </a> + {{#if option.layouts}} + <ul class="dropdown-menu"> + {{#each layout in option.layouts}} + <li> + <a href="javascript:void(0);"> + {{layout.layoutName}} + </a> + </li> + {{/each}} + </ul> + {{/if}} + {{/if}} + </li> + {{/each}} + </ul> + </div> + {{/if}} + {{/if}} + </div> + </div> </div> - <div> + <div class="panel-body"> {{#if isServiceWithEnhancedWidgets}} <div id="widget_layout" class="thumbnails"> {{#each widget in controller.widgets}} http://git-wip-us.apache.org/repos/asf/ambari/blob/1cba2f95/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 275c6af..aa4181e 100644 --- a/ambari-web/app/templates/wizard/step3.hbs +++ b/ambari-web/app/templates/wizard/step3.hbs @@ -22,18 +22,20 @@ <div class="panel panel-default"> <div class="panel-body"> - <div class="box"> - <div class="box-header"> + + <div class="panel panel-default panel-internal"> + <div class="panel-heading"> <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> + {{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> + <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}} @@ -54,63 +56,65 @@ </ul> </div> </div> + <div class="clearfix"></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">{{t common.action}}</th> - <!-- trash icon --> - <!-- retry icon --> - <th class="tinyspan"> - {{view App.CheckboxView checkedBinding="view.pageChecked"}} - </th> - </tr> - </thead> - <tbody> + <div class="panel-body"> + <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%"> + <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> - </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> + </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> + <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"> + </tbody> + </table> + </div> <div class="page-bar"> <div class="selected-hosts-info pull-left"> {{#if view.selectedHostsCount}} @@ -130,6 +134,7 @@ </div> </div> </div> + {{#if hasMoreRegisteredHosts}} <div {{bindAttr class=":alert :alert-warning"}}> <a href="#" {{action registeredHostsPopup target="controller"}}>{{view.registeredHostsMessage}}</a> @@ -144,6 +149,7 @@ {{/unless}} {{/unless}} </div> + </div> </div> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/1cba2f95/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 7b406d0..fa166bb 100644 --- a/ambari-web/app/templates/wizard/step9.hbs +++ b/ambari-web/app/templates/wizard/step9.hbs @@ -34,8 +34,8 @@ </div> </div> - <div class="box"> - <div class="box-header"> + <div class="panel panel-default panel-internal"> + <div class="panel-heading"> <div class="pull-left"> {{#if controller.showRetry}} <a class="btn btn-primary" href="#" {{action retry}}> @@ -60,65 +60,68 @@ {{/each}} </ul> </div> + <div class="clearfix"></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> - </div> - <div class="items-on-page"> - <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label> + <div class="panel-body pre-scrollable"> + <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 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 class="info">{{view.paginationInfo}}</div> - {{view view.pagination4Btns}} + </div> - </div> + </div> + {{#if view.resultMsg}} <p {{bindAttr class="view.resultMsgColor :alert :alert-warning"}}>{{view.resultMsg}} {{#if view.isHostHeartbeatLost}} @@ -127,8 +130,11 @@ {{/if}} </p> {{/if}} + </div> + </div> + </div> <div class="wizard-footer col-md-12"> <div class="btn-area">
