Return-Path: X-Original-To: archive-asf-public-internal@cust-asf2.ponee.io Delivered-To: archive-asf-public-internal@cust-asf2.ponee.io Received: from cust-asf.ponee.io (cust-asf.ponee.io [163.172.22.183]) by cust-asf2.ponee.io (Postfix) with ESMTP id 93E52200C46 for ; Wed, 22 Feb 2017 02:15:31 +0100 (CET) Received: by cust-asf.ponee.io (Postfix) id 911FD160B7A; Wed, 22 Feb 2017 01:15:31 +0000 (UTC) Delivered-To: archive-asf-public@cust-asf.ponee.io Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by cust-asf.ponee.io (Postfix) with SMTP id 54582160B7C for ; Wed, 22 Feb 2017 02:15:30 +0100 (CET) Received: (qmail 18528 invoked by uid 500); 22 Feb 2017 01:15:29 -0000 Mailing-List: contact commits-help@ambari.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: ambari-dev@ambari.apache.org Delivered-To: mailing list commits@ambari.apache.org Received: (qmail 18391 invoked by uid 99); 22 Feb 2017 01:15:29 -0000 Received: from git1-us-west.apache.org (HELO git1-us-west.apache.org) (140.211.11.23) by apache.org (qpsmtpd/0.29) with ESMTP; Wed, 22 Feb 2017 01:15:29 +0000 Received: by git1-us-west.apache.org (ASF Mail Server at git1-us-west.apache.org, from userid 33) id 4ED2DE004D; Wed, 22 Feb 2017 01:15:29 +0000 (UTC) Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit From: xiwang@apache.org To: commits@ambari.apache.org Date: Wed, 22 Feb 2017 01:15:35 -0000 Message-Id: <14a574ba7e7541c6b61e1cb51ced0ad9@git.apache.org> In-Reply-To: <1696b286ed934457ba0f491f17b50997@git.apache.org> References: <1696b286ed934457ba0f491f17b50997@git.apache.org> X-Mailer: ASF-Git Admin Mailer Subject: [08/14] ambari git commit: AMBARI-20039. navigation bar interactiveness: clicking on an element should make it active (onechiporenko) archived-at: Wed, 22 Feb 2017 01:15:31 -0000 AMBARI-20039. navigation bar interactiveness: clicking on an element should make it active (onechiporenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/52093d15 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/52093d15 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/52093d15 Branch: refs/heads/trunk Commit: 52093d1518493bec21a5ea4662964dab5afbb50a Parents: 4c08cea Author: Oleg Nechiporenko Authored: Thu Feb 16 12:45:45 2017 +0200 Committer: Oleg Nechiporenko Committed: Thu Feb 16 12:45:45 2017 +0200 ---------------------------------------------------------------------- .../app/styles/theme/bootstrap-ambari.css | 24 +++---- ambari-web/app/templates/application.hbs | 2 +- .../app/templates/main/service/menu_item.hbs | 2 +- .../app/templates/main/side-menu-item.hbs | 6 +- ambari-web/app/views/main/menu.js | 71 ++++++++++---------- .../vendor/scripts/theme/bootstrap-ambari.js | 4 ++ 6 files changed, 55 insertions(+), 54 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/52093d15/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 d981fde..700ed1d 100644 --- a/ambari-web/app/styles/theme/bootstrap-ambari.css +++ b/ambari-web/app/styles/theme/bootstrap-ambari.css @@ -946,25 +946,25 @@ input.radio:checked + label:after { .navigation-bar-container ul.nav.side-nav-footer li > a:hover .submenu-item { color: #fff; } -.navigation-bar-container ul.nav.side-nav-menu li.active:not(.no-active-effect), -.navigation-bar-container ul.nav.side-nav-footer li.active:not(.no-active-effect) { +.navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu), +.navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) { background: #404351; cursor: pointer; } -.navigation-bar-container ul.nav.side-nav-menu li.active:not(.no-active-effect) > a, -.navigation-bar-container ul.nav.side-nav-footer li.active:not(.no-active-effect) > a { +.navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu) > a, +.navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a { border-left: 6px solid #3fae2a; padding-left: 19px; color: #fff; } -.navigation-bar-container ul.nav.side-nav-menu li.active:not(.no-active-effect) > a .navigation-menu-item, -.navigation-bar-container ul.nav.side-nav-footer li.active:not(.no-active-effect) > a .navigation-menu-item, -.navigation-bar-container ul.nav.side-nav-menu li.active:not(.no-active-effect) > a .submenu-item, -.navigation-bar-container ul.nav.side-nav-footer li.active:not(.no-active-effect) > a .submenu-item, -.navigation-bar-container ul.nav.side-nav-menu li.active:not(.no-active-effect) > a .navigation-icon, -.navigation-bar-container ul.nav.side-nav-footer li.active:not(.no-active-effect) > a .navigation-icon, -.navigation-bar-container ul.nav.side-nav-menu li.active:not(.no-active-effect) > a .toggle-icon, -.navigation-bar-container ul.nav.side-nav-footer li.active:not(.no-active-effect) > a .toggle-icon { +.navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu) > a .navigation-menu-item, +.navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a .navigation-menu-item, +.navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu) > a .submenu-item, +.navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a .submenu-item, +.navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu) > a .navigation-icon, +.navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a .navigation-icon, +.navigation-bar-container ul.nav.side-nav-menu li.active:not(.has-sub-menu) > a .toggle-icon, +.navigation-bar-container ul.nav.side-nav-footer li.active:not(.has-sub-menu) > a .toggle-icon { color: #fff; } .navigation-bar-container ul.nav.side-nav-menu .all-services-actions, http://git-wip-us.apache.org/repos/asf/ambari/blob/52093d15/ambari-web/app/templates/application.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/application.hbs b/ambari-web/app/templates/application.hbs index ce0e4e4..573d92b 100644 --- a/ambari-web/app/templates/application.hbs +++ b/ambari-web/app/templates/application.hbs @@ -54,7 +54,7 @@ {{view App.MainSideMenuView}} {{else}} - + {{{unbound view.content.label}}} http://git-wip-us.apache.org/repos/asf/ambari/blob/52093d15/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 2b8b5af..91aaad7 100644 --- a/ambari-web/app/views/main/menu.js +++ b/ambari-web/app/views/main/menu.js @@ -28,20 +28,21 @@ App.MainSideMenuView = Em.CollectionView.extend({ content: function () { var result = []; - if (App.router.get('loggedIn')) { + let {router} = App; + if (router.get('loggedIn')) { - if (App.router.get('clusterController.isLoaded') && App.get('router.clusterInstallCompleted')) { + if (router.get('clusterController.isLoaded') && App.get('router.clusterInstallCompleted')) { if (!App.get('isOnlyViewUser')) { result.push( - {label: Em.I18n.t('menu.item.dashboard'), iconClass: 'glyphicon glyphicon-home', routing: 'dashboard', active: 'active'}, - {label: Em.I18n.t('menu.item.services'), iconClass: 'glyphicon glyphicon-briefcase', routing: 'services'}, - {label: Em.I18n.t('menu.item.hosts'), iconClass: 'icon-tasks', routing: 'hosts'}, - {label: Em.I18n.t('menu.item.alerts'), iconClass: 'glyphicon glyphicon-bell', routing: 'alerts'} + {label: Em.I18n.t('menu.item.dashboard'), iconClass: 'glyphicon glyphicon-home', routing: 'dashboard', active: 'active', href: router.urlFor('main.dashboard')}, + {label: Em.I18n.t('menu.item.services'), iconClass: 'glyphicon glyphicon-briefcase', routing: 'services', href: router.urlFor('main.services')}, + {label: Em.I18n.t('menu.item.hosts'), iconClass: 'icon-tasks', routing: 'hosts', href: router.urlFor('main.hosts')}, + {label: Em.I18n.t('menu.item.alerts'), iconClass: 'glyphicon glyphicon-bell', routing: 'alerts', href: router.urlFor('main.alerts')} ); } if (App.isAuthorized('CLUSTER.TOGGLE_KERBEROS, CLUSTER.MODIFY_CONFIGS, SERVICE.START_STOP, SERVICE.SET_SERVICE_USERS_GROUPS, CLUSTER.UPGRADE_DOWNGRADE_STACK, CLUSTER.VIEW_STACK_DETAILS') || (App.get('upgradeInProgress') || App.get('upgradeHolding'))) { - result.push({ label: Em.I18n.t('menu.item.admin'), iconClass: 'glyphicon glyphicon-wrench', routing: 'admin'}); + result.push({ label: Em.I18n.t('menu.item.admin'), iconClass: 'glyphicon glyphicon-wrench', routing: 'admin', href: router.urlFor('main.admin')}); } } } @@ -56,24 +57,10 @@ App.MainSideMenuView = Em.CollectionView.extend({ itemViewClass: Em.View.extend({ - classNameBindings: ['active', 'dropdownMenu:dropdown', 'dropdownMenu:no-active-effect'], + classNameBindings: ['dropdownMenu:dropdown'], classNames: ['mainmenu-li'], - active: function () { - if (App.get('clusterName') && App.router.get('clusterController.isLoaded')) { - var lastUrl = App.router.location.lastSetURL || location.href.replace(/^[^#]*#/, ''); - if (lastUrl.substr(1, 4) !== 'main' || !this._childViews) { - return ''; - } - var reg = /^\/main\/([a-z]+)/g; - var subUrl = reg.exec(lastUrl); - var chunk = null !== subUrl ? subUrl[1] : 'dashboard'; - return this.get('content.routing').indexOf(chunk) === 0 ? "active" : ""; - } - return ''; - }.property('App.router.location.lastSetURL', 'App.router.clusterController.isLoaded'), - templateName: require('templates/main/side-menu-item'), dropdownMenu: Em.computed.existsIn('content.routing', ['services', 'admin']), @@ -101,12 +88,14 @@ App.MainSideMenuView = Em.CollectionView.extend({ var categories = []; var upg = App.get('upgradeInProgress') || App.get('upgradeHolding'); // create dropdown categories for each menu item + let {router} = App; if (itemName === 'admin') { if(App.isAuthorized('CLUSTER.VIEW_STACK_DETAILS, CLUSTER.UPGRADE_DOWNGRADE_STACK') || upg) { categories.push({ name: 'stackAndUpgrade', url: 'stack', - label: Em.I18n.t('admin.stackUpgrade.title') + label: Em.I18n.t('admin.stackUpgrade.title'), + href: router.urlFor('main.admin.stackAndUpgrade') }); } if(App.isAuthorized('SERVICE.SET_SERVICE_USERS_GROUPS') || upg) { @@ -114,7 +103,8 @@ App.MainSideMenuView = Em.CollectionView.extend({ name: 'adminServiceAccounts', url: 'serviceAccounts', label: Em.I18n.t('common.serviceAccounts'), - disabled: App.get('upgradeInProgress') || App.get('upgradeHolding') + disabled: App.get('upgradeInProgress') || App.get('upgradeHolding'), + href: router.urlFor('main.admin.adminServiceAccounts') }); } if (!App.get('isHadoopWindowsStack') && App.isAuthorized('CLUSTER.TOGGLE_KERBEROS') || upg) { @@ -122,7 +112,8 @@ App.MainSideMenuView = Em.CollectionView.extend({ name: 'kerberos', url: 'kerberos/', label: Em.I18n.t('common.kerberos'), - disabled: App.get('upgradeInProgress') || App.get('upgradeHolding') + disabled: App.get('upgradeInProgress') || App.get('upgradeHolding'), + href: router.urlFor('main.admin.adminKerberos') }); } if (App.isAuthorized('SERVICE.START_STOP, CLUSTER.MODIFY_CONFIGS') || upg) { @@ -130,7 +121,8 @@ App.MainSideMenuView = Em.CollectionView.extend({ categories.push({ name: 'serviceAutoStart', url: 'serviceAutoStart', - label: Em.I18n.t('admin.serviceAutoStart.title') + label: Em.I18n.t('admin.serviceAutoStart.title'), + href: router.urlFor('main.admin.adminServiceAutoStart') }); } } @@ -183,14 +175,14 @@ App.SideNavServiceMenuView = Em.CollectionView.extend({ * Syncs navigation menu with requested URL */ renderOnRoute:function () { - var last_url = App.router.location.lastSetURL || location.href.replace(/^[^#]*#/, ''); - if (last_url.substr(1, 4) !== 'main' || !this._childViews) { + var lastUrl = App.router.location.lastSetURL || location.href.replace(/^[^#]*#/, ''); + if (lastUrl.substr(1, 4) !== 'main' || !this._childViews) { return; } var reg = /^\/main\/services\/(\S+)\//g; - var sub_url = reg.exec(last_url); - var service_id = (null != sub_url) ? sub_url[1] : 1; - this.set('activeServiceId', service_id); + var subUrl = reg.exec(lastUrl); + var serviceId = (null != subUrl) ? subUrl[1] : 1; + this.set('activeServiceId', serviceId); }, tagName:'ul', @@ -198,17 +190,13 @@ App.SideNavServiceMenuView = Em.CollectionView.extend({ itemViewClass:Em.View.extend({ - classNameBindings:["active", "clients"], + classNameBindings:["clients"], classNames: ["submenu-li"], templateName:require('templates/main/service/menu_item'), restartRequiredMessage: null, shouldBeRestarted: Em.computed.someBy('content.hostComponents', 'staleConfigs', true), - active:function () { - 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'), @@ -219,9 +207,18 @@ App.SideNavServiceMenuView = Em.CollectionView.extend({ return !App.get('services.noConfigTypes').contains(this.get('content.serviceName')); }.property('App.services.noConfigTypes','content.serviceName'), + /** + * '#/main/services/SERVICE_ID' + * + * @type {string} + */ + dataHref: function () { + return App.router.urlFor('main.services.service', {service_id: this.get('content.id')}); + }.property('content.id'), + link: function() { var stateName = (['summary','configs'].contains(App.router.get('currentState.name'))) - ? this.get('isConfigurable') ? App.router.get('currentState.name') : 'summary' + ? this.get('isConfigurable') ? App.router.get('currentState.name') : 'summary' : 'summary'; return "#/main/services/" + this.get('content.id') + "/" + stateName; }.property('App.router.currentState.name', 'parentView.activeServiceId','isConfigurable'), http://git-wip-us.apache.org/repos/asf/ambari/blob/52093d15/ambari-web/vendor/scripts/theme/bootstrap-ambari.js ---------------------------------------------------------------------- diff --git a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js index 28eabb7..9ba14ad 100644 --- a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js +++ b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js @@ -28,6 +28,10 @@ var $servicesMenuItem = $(this).find('.side-nav-services-menu-item'); var $allServicesAction = $(this).find('.all-services-actions'); + $subMenuToggler.each(function (index, toggler) { + return $(toggler).parent().addClass('has-sub-menu'); + }); + if (settings.fitHeight) { $(this).addClass('navigation-bar-fit-height'); $allServicesAction.children('.dropdown-menu').css('position', 'fixed');