Repository: ambari Updated Branches: refs/heads/side-navigation-feature-branch 4c08ceada -> 52093d151
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/side-navigation-feature-branch Commit: 52093d1518493bec21a5ea4662964dab5afbb50a Parents: 4c08cea Author: Oleg Nechiporenko <onechipore...@apache.org> Authored: Thu Feb 16 12:45:45 2017 +0200 Committer: Oleg Nechiporenko <onechipore...@apache.org> 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}} <ul class="side-nav-footer nav nav-pills nav-stacked"> <li class="navigation-footer"> - <a data-toggle="collapse-side-nav"> + <a href="#" data-toggle="collapse-side-nav"> <span class="navigation-icon icon-double-angle-left"></span> </a> </li> http://git-wip-us.apache.org/repos/asf/ambari/blob/52093d15/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 78cce61..ebd898d 100644 --- a/ambari-web/app/templates/main/service/menu_item.hbs +++ b/ambari-web/app/templates/main/service/menu_item.hbs @@ -16,7 +16,7 @@ * limitations under the License. }} -<a class="services-menu-blocks" {{bindAttr href="view.link"}}> +<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}} http://git-wip-us.apache.org/repos/asf/ambari/blob/52093d15/ambari-web/app/templates/main/side-menu-item.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/side-menu-item.hbs b/ambari-web/app/templates/main/side-menu-item.hbs index fe7f68f..0303331 100644 --- a/ambari-web/app/templates/main/side-menu-item.hbs +++ b/ambari-web/app/templates/main/side-menu-item.hbs @@ -18,7 +18,7 @@ <!--dropdown menu for the items had dropdowns--> {{#if view.isServicesItem}} - <a {{bindAttr class="view.content.isView:views-button-container :side-nav-services-menu-item"}} data-toggle="collapse-sub-menu"> + <a {{bindAttr href="view.content.href" class="view.content.isView:views-button-container :side-nav-services-menu-item"}} data-toggle="collapse-sub-menu"> <span {{bindAttr class=":navigation-icon view.content.iconClass"}}></span> <span class="navigation-menu-item">{{{unbound view.content.label}}}</span> <span class="toggle-icon glyphicon glyphicon-menu-down pull-right"></span> @@ -27,7 +27,7 @@ {{view App.SideNavServiceMenuView}} {{else}} {{#if view.isAdminItem}} - <a {{bindAttr class="view.content.isView:views-button-container"}} data-toggle="collapse-sub-menu"> + <a {{bindAttr href="view.content.href" class="view.content.isView:views-button-container"}} data-toggle="collapse-sub-menu"> <span {{bindAttr class=":navigation-icon view.content.iconClass"}}></span> <span class="navigation-menu-item">{{{unbound view.content.label}}}</span> <span class="toggle-icon glyphicon glyphicon-menu-down pull-right"></span> @@ -40,7 +40,7 @@ {{/each}} </ul> {{else}} - <a {{action goToSection view.content.routing target="view"}} {{bindAttr class="view.content.isView:views-button-container"}}> + <a {{action goToSection view.content.routing target="view"}} {{bindAttr href="view.content.href" class="view.content.isView:views-button-container"}}> <span {{bindAttr class=":navigation-icon view.content.iconClass"}}></span> <span class="navigation-menu-item">{{{unbound view.content.label}}}</span> </a> 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');
