ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From xiw...@apache.org
Subject [08/14] ambari git commit: AMBARI-20039. navigation bar interactiveness: clicking on an element should make it active (onechiporenko)
Date Wed, 22 Feb 2017 01:15:35 GMT
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 <onechiporenko@apache.org>
Authored: Thu Feb 16 12:45:45 2017 +0200
Committer: Oleg Nechiporenko <onechiporenko@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');


Mime
View raw message