You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by on...@apache.org on 2017/02/16 10:45:52 UTC
ambari git commit: AMBARI-20039. navigation bar interactiveness:
clicking on an element should make it active (onechiporenko)
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 <on...@apache.org>
Authored: Thu Feb 16 12:45:45 2017 +0200
Committer: Oleg Nechiporenko <on...@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');