You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by jo...@apache.org on 2016/11/10 16:58:53 UTC
[25/50] [abbrv] ambari git commit: AMBARI-18820. Fix markup on the
host summary page (onechiporenko)
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-18456
Commit: a2d53ef06f07d680f3db9f3b0b8e86a8cbc71eae
Parents: dbeb78d
Author: Oleg Nechiporenko <on...@apache.org>
Authored: Tue Nov 8 12:47:21 2016 +0200
Committer: Oleg Nechiporenko <on...@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>