AMBARI-21111 Ambari 3.0: Outstanding navigation issues. (atkach)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/cd68c616 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/cd68c616 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/cd68c616 Branch: refs/heads/branch-feature-AMBARI-12556 Commit: cd68c61617724891aaaa1d7cba085cc584e76e7e Parents: 91d10fd Author: Andrii Tkach <[email protected]> Authored: Wed May 24 14:23:48 2017 +0300 Committer: Andrii Tkach <[email protected]> Committed: Thu May 25 13:04:18 2017 +0300 ---------------------------------------------------------------------- .../main/resources/ui/admin-web/app/styles/main.css | 7 +------ ambari-web/app/styles/alerts.less | 14 ++++++++++++++ ambari-web/app/styles/application.less | 13 +++++++++++-- ambari-web/app/styles/common.less | 1 + ambari-web/app/styles/config_history_flow.less | 7 +------ ambari-web/app/styles/theme/bootstrap-ambari.css | 2 +- ambari-web/app/templates/main/service/menu_item.hbs | 11 +++++------ ambari-web/app/views/main/menu.js | 1 + ambari-web/app/views/main/service/menu.js | 4 ---- ambari-web/test/views/main/service/menu_test.js | 12 ------------ 10 files changed, 35 insertions(+), 37 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/cd68c616/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css ---------------------------------------------------------------------- diff --git a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css index 882a4b4..946007d 100644 --- a/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css +++ b/ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css @@ -455,12 +455,7 @@ a.gotoinstance{ border: none; } #top-nav .navbar.navbar-static-top .navbar-inner { - background-image: -moz-linear-gradient(top, #555555, #333333); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#333333)); - background-image: -webkit-linear-gradient(top, #555555, #333333); - background-image: -o-linear-gradient(top, #555555, #333333); - background-image: linear-gradient(to bottom, #555555, #333333); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#555555, endColorstr=#333333); + background-color: #313d54; -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1); http://git-wip-us.apache.org/repos/asf/ambari/blob/cd68c616/ambari-web/app/styles/alerts.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/alerts.less b/ambari-web/app/styles/alerts.less index e4b21a7..4866b40 100644 --- a/ambari-web/app/styles/alerts.less +++ b/ambari-web/app/styles/alerts.less @@ -41,6 +41,20 @@ background-color: #999; } +.nav-pills .service-alerts-critical { + font-size: 10px; + line-height: .8em; + margin-left: -12px; + color: @health-status-red; +} + +.nav-pills .service-alerts-warning { + font-size: 10px; + line-height: .8em; + margin-left: -12px; + color: @health-status-orange; +} + .alert-state-single-host { display: inline-block; width: 115px; http://git-wip-us.apache.org/repos/asf/ambari/blob/cd68c616/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 95990b8..0b3fcc2 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -500,7 +500,7 @@ h1 { } .glyphicon-refresh { - color: #fdb82f; + color: #999; } .glyphicon-warning-sign { @@ -1332,6 +1332,10 @@ a:focus { } } +.navigation-bar-container ul.nav.side-nav-menu li.submenu-li > a.services-menu-blocks { + padding-left: 40px; +} + a.services-menu-blocks{ overflow:auto; .icon-health-block{ @@ -1347,7 +1351,12 @@ a.services-menu-blocks{ margin-left: 4px; margin-right: 4px; } - + .menu-item-name.INSTALLED { + color: @health-status-red; + } + .menu-item-name.UNKNOWN { + color: @health-status-orange; + } } .quick-links-wrapper { http://git-wip-us.apache.org/repos/asf/ambari/blob/cd68c616/ambari-web/app/styles/common.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/common.less b/ambari-web/app/styles/common.less index c5ab5b9..ddd4f3a 100644 --- a/ambari-web/app/styles/common.less +++ b/ambari-web/app/styles/common.less @@ -50,6 +50,7 @@ @green: #69BE28; @blue: #0572ff; @gray-blue: #80A0B9; +@navigation-navy: #323544; @spinner-default-width: 36px; @spinner-default-height: 36px; http://git-wip-us.apache.org/repos/asf/ambari/blob/cd68c616/ambari-web/app/styles/config_history_flow.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/config_history_flow.less b/ambari-web/app/styles/config_history_flow.less index d47a28c..cc09d23 100644 --- a/ambari-web/app/styles/config_history_flow.less +++ b/ambari-web/app/styles/config_history_flow.less @@ -195,12 +195,7 @@ } .version-info-bar { - background-image: -moz-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@top-nav-bg-color-from), to(@top-nav-bg-color-to)); - background-image: -webkit-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to); - background-image: -o-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to); - background-image: linear-gradient(to bottom, @top-nav-bg-color-from, @top-nav-bg-color-to); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= @top-nav-bg-color-from, endColorstr=@top-nav-bg-color-to); //for IE9- + background-color: @navigation-navy; -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1); http://git-wip-us.apache.org/repos/asf/ambari/blob/cd68c616/ambari-web/app/styles/theme/bootstrap-ambari.css ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/theme/bootstrap-ambari.css b/ambari-web/app/styles/theme/bootstrap-ambari.css index 77bb086..66ae8f2 100644 --- a/ambari-web/app/styles/theme/bootstrap-ambari.css +++ b/ambari-web/app/styles/theme/bootstrap-ambari.css @@ -1049,7 +1049,7 @@ input.radio:checked + label:after { .navigation-bar-container ul.nav.side-nav-footer .menu-item-name { display: inline-block; vertical-align: bottom; - max-width: 94px; + max-width: 100px; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; http://git-wip-us.apache.org/repos/asf/ambari/blob/cd68c616/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 239bf8a..723f4f6 100644 --- a/ambari-web/app/templates/main/service/menu_item.hbs +++ b/ambari-web/app/templates/main/service/menu_item.hbs @@ -17,14 +17,13 @@ }} <a class="services-menu-blocks" {{bindAttr href="view.link" data-href="view.dataHref"}}> - {{#if view.alertsCount}} - <span {{bindAttr class=":label :alerts-count view.hasCriticalAlerts:alerts-crit-count:alerts-warn-count :pull-right"}}> - {{view.alertsCount}} - </span> + {{#if view.content.alertsCount}} + <span {{bindAttr class=":icon-circle view.hasCriticalAlerts:service-alerts-critical:service-alerts-warning"}}></span> {{/if}} <span class="pull-right"> <i rel="tooltip" {{action goToConfigs target="view"}} {{bindAttr class=":glyphicon :glyphicon-refresh :restart-required-service view.content.isRestartRequired::hidden" data-original-title="view.restartRequiredMessage"}}></i> </span> - {{view App.MainDashboardServiceHealthView class="service-health" serviceBinding="view.content"}} - <span class="menu-item-name">{{unbound view.content.displayName}}</span> + <span {{bindAttr class=":menu-item-name view.content.workStatus" data-original-title="view.content.toolTipContent"}} rel="serviceHealthTooltip"> + {{unbound view.content.displayName}} + </span> </a> http://git-wip-us.apache.org/repos/asf/ambari/blob/cd68c616/ambari-web/app/views/main/menu.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/menu.js b/ambari-web/app/views/main/menu.js index feb3baf..55e942e 100644 --- a/ambari-web/app/views/main/menu.js +++ b/ambari-web/app/views/main/menu.js @@ -162,6 +162,7 @@ App.SideNavServiceMenuView = Em.CollectionView.extend({ App.router.location.addObserver('lastSetURL', this, 'renderOnRoute'); this.renderOnRoute(); App.tooltip(this.$(".restart-required-service"), {html:true, placement:"right"}); + App.tooltip($("[rel='serviceHealthTooltip']"), {html:true, placement:"right"}); }, willDestroyElement: function() { http://git-wip-us.apache.org/repos/asf/ambari/blob/cd68c616/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 3695bfe..77d5484 100644 --- a/ambari-web/app/views/main/service/menu.js +++ b/ambari-web/app/views/main/service/menu.js @@ -69,10 +69,6 @@ App.MainServiceMenuView = Em.CollectionView.extend({ return this.get('content.id') === this.get('parentView.activeServiceId') ? 'active' : ''; }.property('parentView.activeServiceId'), - alertsCount: function () { - return this.get('content.alertsCount') > 99 ? "99+" : this.get('content.alertsCount'); - }.property('content.alertsCount'), - hasCriticalAlerts: Em.computed.alias('content.hasCriticalAlerts'), isConfigurable: Em.computed.notExistsInByKey('content.serviceName', 'App.services.noConfigTypes'), http://git-wip-us.apache.org/repos/asf/ambari/blob/cd68c616/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 index 6295b63..82033ca 100644 --- a/ambari-web/test/views/main/service/menu_test.js +++ b/ambari-web/test/views/main/service/menu_test.js @@ -115,18 +115,6 @@ describe('App.MainServiceMenuView', function () { }); }); - describe('#alertsCount', function() { - - it('should return 99 ', function() { - itemView.set('content.alertsCount', 99); - expect(itemView.get('alertsCount')).to.be.equal(99); - }); - it('should return 99+ when more than 99', function() { - itemView.set('content.alertsCount', 100); - expect(itemView.get('alertsCount')).to.be.equal('99+'); - }); - }); - describe('#link', function() { beforeEach(function() { this.mock = sinon.stub(App.router, 'get');
