AMBARI-18820. Fix markup on the host summary page (onechiporenko)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/a2d53ef0 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/a2d53ef0 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/a2d53ef0 Branch: refs/heads/branch-feature-AMBARI-18634 Commit: a2d53ef06f07d680f3db9f3b0b8e86a8cbc71eae Parents: dbeb78d Author: Oleg Nechiporenko <onechipore...@apache.org> Authored: Tue Nov 8 12:47:21 2016 +0200 Committer: Oleg Nechiporenko <onechipore...@apache.org> Committed: Wed Nov 9 10:10:19 2016 +0200 ---------------------------------------------------------------------- ambari-web/app/styles/application.less | 98 +++++++++++--------- .../main/host/details/host_component.hbs | 61 ++++++------ ambari-web/app/templates/main/host/metrics.hbs | 52 +++++------ ambari-web/app/templates/main/host/summary.hbs | 37 ++++---- 4 files changed, 135 insertions(+), 113 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/a2d53ef0/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index aa5069d..b57ebb8 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -144,6 +144,20 @@ table.diff { padding: 10px; } +.row.row-no-pad { + .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, + .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { + padding-left: 1px; + padding-right: 1px; + &:first-child { + padding-left: 15px; + } + &:last-child { + padding-right: 15px; + } + } +} + .ru-badge { text-align: center; .upgrade-in-progress { @@ -3591,12 +3605,6 @@ table.graphs { border-bottom-color: #000000; } - //hack to apply style only for firefox - .host-components .btn-group{ - white-space: normal; - } - - .marker { background-repeat: no-repeat; height: 13px; @@ -3664,8 +3672,7 @@ table.graphs { } .content { - padding: 10px; - + padding: 10px 0; } .host-configuration .dl-horizontal { @@ -3695,29 +3702,19 @@ table.graphs { .host-components { padding: 10px; - padding-bottom: 0; border-radius: 4px; background: #FFF; + .component-name-block-wrapper { + display: table; + height: 34px; + .component-name-block { + white-space: normal; + word-wrap: break-word; + display: table-cell; + vertical-align: middle; + } - } - - .host-components .btn-group { - margin: 0 5px 10px 0; - - .component-text-status{ - cursor: default; - display: block; - padding: 3px 20px; - clear: both; - font-weight: normal; - line-height: 20px; - color: #333333; - white-space: nowrap; - font-style: italic; } - } - - .host-components { .dropdown-menu { .disabled { pointer-events: none; @@ -3728,7 +3725,38 @@ table.graphs { pointer-events: auto; } } + .status-icons { + line-height: 34px; + } + .client-list { + ul { + list-style: none; + } + } + &>.row { + padding-bottom: 10px; + } + .btn-group { + //hack to apply style only for firefox + white-space: normal; + margin: 0 5px 10px 0; + & > .btn { + width: 140px; + } + .component-text-status { + cursor: default; + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 20px; + color: #333; + white-space: nowrap; + font-style: italic; + } + } } + .host-tab-content, .logs-tab-content { margin-top: 20px; @@ -4705,10 +4733,6 @@ ul.list-inline li { /* TIME RANGE WIDGET END */ -#host-details .host-components .btn-group > .btn { - width: 140px; -} - /* fieldset begin */ .fieldset { border: 2px solid black; @@ -5140,11 +5164,6 @@ i.glyphicon-asterisks { } .row .host-component-block { - .health-icon-block { - width: 6%; - float: left; - padding-right: 5px; - } .refresh-icon-block { width: 6%; @@ -5156,13 +5175,6 @@ i.glyphicon-asterisks { float: left; padding-left: 3px; } - - .component-name-block { - width: 77%; - float: left; - white-space: normal; - word-wrap: break-word; - } } .filter-combobox{ http://git-wip-us.apache.org/repos/asf/ambari/blob/a2d53ef0/ambari-web/app/templates/main/host/details/host_component.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/host/details/host_component.hbs b/ambari-web/app/templates/main/host/details/host_component.hbs index 9797a03..d94dd3b 100644 --- a/ambari-web/app/templates/main/host/details/host_component.hbs +++ b/ambari-web/app/templates/main/host/details/host_component.hbs @@ -16,42 +16,47 @@ * limitations under the License. }} -<div class="col-md-7 component-label host-component-block"> - <div class="health-icon-block"> - {{#if view.isUpgradeFailed}} - {{#isAuthorized "HOST.ADD_DELETE_COMPONENTS"}} - <a href="#" {{action "upgradeComponent" view.content target="controller"}} > - <i title="Component upgrade failed" class="components-health glyphicon glyphicon-arrow-up"></i> - </a> - {{/isAuthorized}} - {{else}} - <span rel='componentHealthTooltip' {{bindAttr class="view.statusClass view.statusIconClass :components-health" data-original-title="view.componentTextStatus"}}></span> - {{/if}} - </div> - <div class="component-name-block"> - {{#if component.displayNameAdvanced}} - <span {{bindAttr title="component.displayNameAdvanced"}}>{{component.getDisplayNameAdvanced}}</span> - {{else}} - <span {{bindAttr title="component.displayName"}}>{{component.getDisplayName}}</span> - {{/if}} - / - <a href="#" {{action routeToService component.service}} {{bindAttr title="component.service.displayName"}}>{{component.serviceDisplayName}}</a> - </div> - <div class="refresh-icon-block"> + <div class="col-md-1 col-lg-1 align-left status-icons component-label host-component-block"> + <span class="health-icon-block"> + {{#if view.isUpgradeFailed}} + {{#isAuthorized "HOST.ADD_DELETE_COMPONENTS"}} + <a href="#" {{action "upgradeComponent" view.content target="controller"}} > + <i title="Component upgrade failed" class="components-health glyphicon glyphicon-arrow-up"></i> + </a> + {{/isAuthorized}} + {{else}} + <span rel='componentHealthTooltip' {{bindAttr class="view.statusClass view.statusIconClass :components-health" data-original-title="view.componentTextStatus"}}></span> + {{/if}} + </span> + </div> + <div class="col-md-4 col-lg-5 component-name-block-wrapper"> + <span class="component-name-block"> + {{#if component.displayNameAdvanced}} + <span {{bindAttr title="component.displayNameAdvanced"}}>{{component.getDisplayNameAdvanced}} /</span> + {{else}} + <span {{bindAttr title="component.displayName"}}>{{component.getDisplayName}} /</span> + {{/if}} + <span class="hidden-lg"><br /></span> <a href="#" {{action routeToService component.service}} {{bindAttr title="component.service.displayName"}}>{{component.serviceDisplayName}}</a> + </span> + </div> +<div class="col-md-1 col-lg-1 align-center status-icons"> + <span class="refresh-icon-block"> {{#if component.staleConfigs}} <span class="text-warning glyphicon glyphicon-refresh"></span> {{/if}} - </div> - <div class="medkit-icon-block"> + </span> +</div> +<div class="col-md-1 col-lg-1 align-center status-icons"> + <span class="medkit-icon-block"> {{#unless component.isActive}} <span class="icon-medkit"></span> {{/unless}} - </div> + </span> </div> -<div class="col-md-5 pull-right"> +<div class="col-md-5 col-lg-4"> {{#isAuthorized "SERVICE.DECOMMISSION_RECOMMISSION"}} - <div class="btn-group pull-right"> - <button {{ bindAttr class="view.disabled :btn :btn-default :dropdown-toggle"}} data-toggle="dropdown"> + <div class="dropdown"> + <button {{ bindAttr class="view.disabled :btn :btn-default :btn-block :dropdown-toggle"}} data-toggle="dropdown"> {{view.componentTextStatus}} <span class="caret pull-right button-caret-margin"></span> </button> http://git-wip-us.apache.org/repos/asf/ambari/blob/a2d53ef0/ambari-web/app/templates/main/host/metrics.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/host/metrics.hbs b/ambari-web/app/templates/main/host/metrics.hbs index 7c91783..eb5f08b 100644 --- a/ambari-web/app/templates/main/host/metrics.hbs +++ b/ambari-web/app/templates/main/host/metrics.hbs @@ -17,30 +17,30 @@ }} <div class="host-metrics"> - <table class="graphs"> - <tr> - <td> - {{view App.ChartHostMetricsCPU contentBinding="view.content"}} - </td> - <td> - {{view App.ChartHostMetricsDisk contentBinding="view.content"}} - </td> - </tr> - <tr> - <td> - {{view App.ChartHostMetricsLoad contentBinding="view.content"}} - </td> - <td> - {{view App.ChartHostMetricsMemory contentBinding="view.content"}} - </td> - </tr> - <tr> - <td> - {{view App.ChartHostMetricsNetwork contentBinding="view.content"}} - </td> - <td> - {{view App.ChartHostMetricsProcesses contentBinding="view.content"}} - </td> - </tr> - </table> + <div class="graphs"> + <div class="row"> + <div class="col-md-6"> + {{view App.ChartHostMetricsCPU contentBinding="view.content"}} + </div> + <div class="col-md-6"> + {{view App.ChartHostMetricsDisk contentBinding="view.content"}} + </div> + </div> + <div class="row"> + <div class="col-md-6"> + {{view App.ChartHostMetricsLoad contentBinding="view.content"}} + </div> + <div class="col-md-6"> + {{view App.ChartHostMetricsMemory contentBinding="view.content"}} + </div> + </div> + <div class="row"> + <div class="col-md-6"> + {{view App.ChartHostMetricsNetwork contentBinding="view.content"}} + </div> + <div class="col-md-6"> + {{view App.ChartHostMetricsProcesses contentBinding="view.content"}} + </div> + </div> + </div> </div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/a2d53ef0/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 ce64bd4..cfc37bd 100644 --- a/ambari-web/app/templates/main/host/summary.hbs +++ b/ambari-web/app/templates/main/host/summary.hbs @@ -60,35 +60,40 @@ {{/isAuthorized}} {{#each component in view.sortedComponents}} - <div class="row"> - {{view component.viewClass contentBinding="component"}} - </div> + {{view component.viewClass classNames="row row-no-pad" contentBinding="component"}} {{/each}} {{/if}} {{!clients and add component button}} - <div class="clients row"> - <div class="col-md-7 row client-list"> + <div class="clients row row-no-pad"> + <div class="col-md-7 col-lg-8 row client-list component-name-block-wrapper"> {{#if view.clients.length}} <div class="col-md-3 align-right">{{t common.clients}} /</div> - <div class="col-md-7"> + <div class="col-md-9 component-name-block-wrapper"> + <ul> {{#each component in view.clients}} - <span {{bindAttr class="component.staleConfigs:component-restart-required-name"}}> {{component.displayName}} </span> {{#if component.isInstallFailed}} - <span - class="health-status-installed icon-warning-sign"></span>{{/if}}{{#if component.staleConfigs}} - <span - class="text-warning glyphicon glyphicon-refresh"></span>{{/if}}{{#if component.service.isInPassive}} - <span class="icon-medkit"></span>{{/if}}{{#unless component.isLast}} - ,{{/unless}} + <li> + <span {{bindAttr class="component.staleConfigs:component-restart-required-name"}}>{{component.displayName}}</span> + {{#if component.isInstallFailed}} + <span class="health-status-installed icon-warning-sign"></span> + {{/if}} + {{#if component.staleConfigs}} + <span class="text-warning glyphicon glyphicon-refresh"></span> + {{/if}} + {{#if component.service.isInPassive}} + <span class="icon-medkit"></span> + {{/if}} + </li> {{/each}} + </ul> </div> {{/if}} </div> - <div class="col-md-5 pull-right"> + <div class="col-md-5 col-lg-4 pull-right"> {{#isAuthorized "SERVICE.MODIFY_CONFIGS, SERVICE.START_STOP, HOST.ADD_DELETE_COMPONENTS, HOST.TOGGLE_MAINTENANCE"}} {{#if view.clients.length}} - <div class="btn-group pull-right"> + <div class="dropdown"> <button id="add_component" - data-toggle="dropdown" {{bindAttr class=":btn :btn-default :dropdown-toggle controller.content.isNotHeartBeating:disabled"}}> + data-toggle="dropdown" {{bindAttr class=":btn :btn-default :btn-block :dropdown-toggle controller.content.isNotHeartBeating:disabled"}}> {{t common.installed}} <span class="caret pull-right button-caret-margin"></span> </button>
