Repository: ambari Updated Branches: refs/heads/trunk 1c40e9c29 -> df267643d
AMBARI-11670. Width of services menu container is fixed and causes part of longer service names to be rendered outside the frame (alexantonenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/df267643 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/df267643 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/df267643 Branch: refs/heads/trunk Commit: df267643d7ff1d03eeb12ff82eea45720f76c132 Parents: 1c40e9c Author: Alex Antonenko <[email protected]> Authored: Wed Dec 30 15:25:59 2015 +0200 Committer: Alex Antonenko <[email protected]> Committed: Wed Dec 30 15:26:08 2015 +0200 ---------------------------------------------------------------------- ambari-web/app/assets/test/tests.js | 3 +- ambari-web/app/styles/application.less | 23 +++++-- .../app/templates/main/service/menu_item.hbs | 22 +++---- ambari-web/app/views/main/service/menu.js | 4 +- ambari-web/test/views/main/service/menu_test.js | 67 ++++++++++++++++++++ 5 files changed, 102 insertions(+), 17 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/df267643/ambari-web/app/assets/test/tests.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/assets/test/tests.js b/ambari-web/app/assets/test/tests.js index d13767f..76c9e98 100644 --- a/ambari-web/app/assets/test/tests.js +++ b/ambari-web/app/assets/test/tests.js @@ -333,7 +333,8 @@ var files = [ 'test/models/stack_version/repository_version_test', 'test/routes/views_test', //contains test with fake timers that affect Date - 'test/utils/lazy_loading_test' + 'test/utils/lazy_loading_test', + 'test/views/main/service/menu_test' ]; App.initialize(); http://git-wip-us.apache.org/repos/asf/ambari/blob/df267643/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 381459a..eaadee6 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -2442,6 +2442,19 @@ a:focus { padding-left:6px; } } +a.services-menu-blocks{ + overflow:auto; + .icon-health-block{ + width:16%; + float:left; + } + .service-name-block{ + width:55%; + float:left; + white-space:normal; + word-break:break-word; + } +} .quick-links-wrapper { margin-top: -53px; position: relative; @@ -3680,7 +3693,7 @@ table.graphs { .services-menu { .icon-refresh { color: @restart-indicator-color; - margin-left: 1px; + margin-left: 4px; } } #host-details, #serviceConfig { @@ -5124,7 +5137,8 @@ i.icon-asterisks { float: left; width: 100%; min-height: 30px; - margin-left: 2.564102564102564%; + margin-left: 1.282051282051282%; + *margin-left: 2.564102564102564%; *margin-left: 2.5109110747408616%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -5190,7 +5204,8 @@ i.icon-asterisks { } .row-fluid .span2 { - width: 14.52991452991453%; + width: 15.811965811965812%; + *width: 14.52991452991453%; *width: 14.476723040552828%; } @@ -5473,7 +5488,7 @@ i.icon-asterisks { .services-menu .nav-list li { .label.alerts-count { - margin-right: 4px; + margin-right: 0; } .icon-laptop { padding-left: 5px; http://git-wip-us.apache.org/repos/asf/ambari/blob/df267643/ambari-web/app/templates/main/service/menu_item.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/menu_item.hbs b/ambari-web/app/templates/main/service/menu_item.hbs index 8842858..6e69fbb 100644 --- a/ambari-web/app/templates/main/service/menu_item.hbs +++ b/ambari-web/app/templates/main/service/menu_item.hbs @@ -16,18 +16,18 @@ * limitations under the License. }} -<a {{bindAttr href="view.link"}}> - <div {{bindAttr class="view.alertsCount:with-alert :service-caption"}}> +<a class="services-menu-blocks" {{bindAttr href="view.link"}}> + {{#if view.alertsCount}} + <span {{bindAttr class=":label :alerts-count view.hasCriticalAlerts:alerts-crit-count:alerts-warn-count"}}> + {{view.alertsCount}} + </span> + {{/if}} + + <div class="icon-health-block"> {{view App.MainDashboardServiceHealthView class="service-health" serviceBinding="view.content"}} - <span>{{unbound view.content.displayName}}</span> - <i rel="tooltip" {{action goToConfigs target="view"}}{{bindAttr class=":icon-refresh :restart-required-service view.content.isRestartRequired::hidden" data-original-title="view.restartRequiredMessage"}}></i> </div> - - <div class="icon-caption"> - {{#if view.alertsCount}} - <span {{bindAttr class=":label :alerts-count view.hasCriticalAlerts:alerts-crit-count:alerts-warn-count"}}> - {{view.alertsCount}} - </span> - {{/if}} + <div class="service-name-block"> + <span>{{unbound view.content.displayName}}</span> </div> + <i rel="tooltip" {{action goToConfigs target="view"}}{{bindAttr class=":icon-refresh :restart-required-service view.content.isRestartRequired::hidden" data-original-title="view.restartRequiredMessage"}}></i> </a> http://git-wip-us.apache.org/repos/asf/ambari/blob/df267643/ambari-web/app/views/main/service/menu.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/service/menu.js b/ambari-web/app/views/main/service/menu.js index cd54288..f5768f8 100644 --- a/ambari-web/app/views/main/service/menu.js +++ b/ambari-web/app/views/main/service/menu.js @@ -69,7 +69,9 @@ App.MainServiceMenuView = Em.CollectionView.extend({ return this.get('content.id') == this.get('parentView.activeServiceId') ? 'active' : ''; }.property('parentView.activeServiceId'), - alertsCount: Em.computed.alias('content.alertsCount'), + alertsCount: function () { + return this.get('content.alertsCount') > 99 ? "99+" : this.get('content.alertsCount') ; + }.property('content.alertsCount'), hasCriticalAlerts: Em.computed.alias('content.hasCriticalAlerts'), http://git-wip-us.apache.org/repos/asf/ambari/blob/df267643/ambari-web/test/views/main/service/menu_test.js ---------------------------------------------------------------------- diff --git a/ambari-web/test/views/main/service/menu_test.js b/ambari-web/test/views/main/service/menu_test.js new file mode 100644 index 0000000..15f0c15 --- /dev/null +++ b/ambari-web/test/views/main/service/menu_test.js @@ -0,0 +1,67 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var App = require('app'); +require('views/main/service/menu'); + +describe('App.MainServiceMenuView', function () { + + var mainServiceMenuView; + + beforeEach(function(){ + mainServiceMenuView = App.MainServiceMenuView.create(); + var view = mainServiceMenuView.get('itemViewClass').create({ + content:{ + alertsCount: 2 + } + }); + mainServiceMenuView.set('itemViewClass',view); + }); + + var cases = [ + { + title:'alertsCount=0 test case:', + alertsCount:0, + result:0 + }, + { + title:'alertsCount=5 test case:', + alertsCount:5, + result:5 + }, + { + title:'alertsCount=200 test case:', + alertsCount:200, + result:"99+" + }, + { + title:'alertsCount=99 test case:', + alertsCount:99, + result:99 + } + ]; + + + cases.forEach(function(item){ + it(item.title,function(){ + mainServiceMenuView.get('itemViewClass').set('content.alertsCount',item.alertsCount); + expect(mainServiceMenuView.get('itemViewClass.alertsCount')).to.not.be.undefined; + expect(mainServiceMenuView.get('itemViewClass.alertsCount')).to.equal(item.result); + }); + }); +});
