Repository: ambari Updated Branches: refs/heads/trunk b986a3c2d -> 4ff93b0a2
AMBARI-19857. Side Nav: create clickable breadcrumbs on top showing current path.(xiwang) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/cc4c04e5 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/cc4c04e5 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/cc4c04e5 Branch: refs/heads/trunk Commit: cc4c04e5b35e2cd798f38b0740214f96b128215e Parents: b50fbdb Author: Xi Wang <xiw...@apache.org> Authored: Thu Feb 2 17:50:05 2017 -0800 Committer: Xi Wang <xiw...@apache.org> Committed: Fri Feb 3 15:51:20 2017 -0800 ---------------------------------------------------------------------- ambari-web/app/routes/main.js | 4 + ambari-web/app/styles/top-nav.less | 14 +++ ambari-web/app/templates/application.hbs | 7 ++ .../app/templates/main/side-menu-item.hbs | 3 - ambari-web/app/views/application.js | 102 +++++++++++++++++++ 5 files changed, 127 insertions(+), 3 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/cc4c04e5/ambari-web/app/routes/main.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/routes/main.js b/ambari-web/app/routes/main.js index 354198b..5083cec 100644 --- a/ambari-web/app/routes/main.js +++ b/ambari-web/app/routes/main.js @@ -407,6 +407,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { route: '/', connectOutlets: function (router, context) { router.set('mainAdminController.category', "kerberos"); + router.set('mainAdminController.categoryLabel', Em.I18n.t('common.kerberos')); router.get('mainAdminController').connectOutlet('mainAdminKerberos'); } }), @@ -501,6 +502,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { route: '/stack', connectOutlets: function (router) { router.set('mainAdminController.category', "stackAndUpgrade"); + router.set('mainAdminController.categoryLabel', Em.I18n.t('admin.stackUpgrade.title')); router.get('mainAdminController').connectOutlet('mainAdminStackAndUpgrade'); }, @@ -555,6 +557,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { }, connectOutlets: function (router) { router.set('mainAdminController.category', "adminServiceAccounts"); + router.set('mainAdminController.categoryLabel', Em.I18n.t('common.serviceAccounts')); router.get('mainAdminController').connectOutlet('mainAdminServiceAccounts'); } }), @@ -568,6 +571,7 @@ module.exports = Em.Route.extend(App.RouterRedirections, { }, connectOutlets: function (router) { router.set('mainAdminController.category', "serviceAutoStart"); + router.set('mainAdminController.categoryLabel', Em.I18n.t('admin.serviceAutoStart.title')); router.get('mainAdminController').connectOutlet('mainAdminServiceAutoStart'); }, exitRoute: function (router, context, callback) { http://git-wip-us.apache.org/repos/asf/ambari/blob/cc4c04e5/ambari-web/app/styles/top-nav.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/top-nav.less b/ambari-web/app/styles/top-nav.less index 747caab..d1c723a 100644 --- a/ambari-web/app/styles/top-nav.less +++ b/ambari-web/app/styles/top-nav.less @@ -24,6 +24,20 @@ border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; + .navbar-header { + padding: 15px 15px 15px 0px; + margin-top: 5px; + font-size: 20px; + a { + color: #313D54; + cursor: pointer; + } + a.disabled { + cursor: default; + color: #ccc; + } + } + .navbar-text.brand-wrapper { color: @top-nav-brand-color; font-size: 16px; http://git-wip-us.apache.org/repos/asf/ambari/blob/cc4c04e5/ambari-web/app/templates/application.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/application.hbs b/ambari-web/app/templates/application.hbs index 99b65b6..f18d314 100644 --- a/ambari-web/app/templates/application.hbs +++ b/ambari-web/app/templates/application.hbs @@ -64,6 +64,13 @@ <nav class="navbar navbar-default navbar-static-top"> <div class="container main-container"> <div class="navbar-header navbar-nav"> + {{#if view.breadcrumbs.length}} + {{#each item in view.breadcrumbs}} + <span><a {{bindAttr class="item.disabled:disabled"}} {{action goToSection item.route target="view"}}> + {{{item.label}}}</a></span> + {{#unless item.lastItem}} / {{/unless}} + {{/each}} + {{/if}} </div> {{! right offset. don't delete me! }} http://git-wip-us.apache.org/repos/asf/ambari/blob/cc4c04e5/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 86aaedd..27739c8 100644 --- a/ambari-web/app/templates/main/side-menu-item.hbs +++ b/ambari-web/app/templates/main/side-menu-item.hbs @@ -16,9 +16,6 @@ * limitations under the License. }} - - - <!--dropdown menu for the items had dropdowns--> {{#if view.isServicesItem}} <a {{bindAttr class="view.content.isView:views-button-container"}} data-toggle="collapseSubMenu"> http://git-wip-us.apache.org/repos/asf/ambari/blob/cc4c04e5/ambari-web/app/views/application.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/application.js b/ambari-web/app/views/application.js index 7f4c32d..f79aad9 100644 --- a/ambari-web/app/views/application.js +++ b/ambari-web/app/views/application.js @@ -29,6 +29,108 @@ App.ApplicationView = Em.View.extend({ return [];⨠}â¨}.property('App.router.mainViewsController.ambariViews.length', 'App.router.loggedIn'), + /** + * Create the breadcrums showing on ambari top bar + * Eg, Home / Alerts / Metrics Monitor Status + * @returns {array} + */ + breadcrumbs: function () { + var breadcrumbs = []; + if (App.router.get('loggedIn')) { + var home = { + label: '<span class="glyphicon glyphicon-home"></span>', + route: 'dashboard', + disabled: false + }; + if (App.router.get('currentState.parentState.name') == 'dashboard') { + breadcrumbs.pushObject({ + label: '<span class="glyphicon glyphicon-home"></span> ' + Em.I18n.t('menu.item.dashboard'), + disabled: true, + lastItem: true + }); + } else if (App.router.get('currentState.parentState.name') == 'hosts') { + breadcrumbs.pushObject(home); + breadcrumbs.pushObject({ + label: Em.I18n.t('menu.item.hosts'), + disabled: true, + lastItem: true + }); + } else if (App.router.get('currentState.parentState.name') == 'hostDetails') { + var hostName = App.router.get('mainHostDetailsController.content.hostName'); + breadcrumbs.pushObject(home); + breadcrumbs.pushObject({ + label: Em.I18n.t('menu.item.hosts'), + route: 'hosts', + disabled: false + }); + breadcrumbs.pushObject({ + label: hostName, + disabled: true, + lastItem: true + }); + } else if (App.router.get('currentState.parentState.name') == 'alerts') { + breadcrumbs.pushObject(home); + if (App.router.get('currentState.name') == 'alertDetails') { + breadcrumbs.pushObject({ + label: Em.I18n.t('menu.item.alerts'), + route: 'alerts', + disabled: false + }); + breadcrumbs.pushObject({ + label: App.router.get('mainAlertDefinitionDetailsController.content.label'), + disabled: true, + lastItem: true + }); + } else { + breadcrumbs.pushObject({ + label: Em.I18n.t('menu.item.alerts'), + disabled: true, + lastItem: true + }); + } + } else if (App.router.get('currentState.parentState.name') == 'service') { + breadcrumbs.pushObject(home); + var serviceName = App.router.get('mainServiceItemController.content.displayName'); + breadcrumbs.pushObject({ + label: 'Service - ' + serviceName, + disabled: true, + lastItem: true + }); + } else if (App.router.get('currentState.parentState.name') == 'admin'|| App.router.get('currentState.parentState.parentState.name') == 'admin') { + breadcrumbs.pushObject(home); + breadcrumbs.pushObject({ + label: 'Admin - ' + App.router.get('mainAdminController.categoryLabel'), + disabled: true, + lastItem: true + }); + } else if (App.router.get('currentState.parentState.name') == 'views') { + breadcrumbs.pushObject(home); + breadcrumbs.pushObject({ + label: App.router.get('mainViewsDetailsController.content.label'), + disabled: true, + lastItem: true + }); + } + } + return breadcrumbs; + + }.property('App.router.loggedIn', 'App.router.currentState.parentState.name', + 'App.router.mainHostDetailsController.content.hostName', 'App.router.mainAlertDefinitionDetailsController.content.label', + 'App.router.mainServiceItemController.content.displayName', 'App.router.mainAdminController.categoryLabel', 'App.router.mainViewsDetailsController.content.label'), + + goToSection: function (event) { + if (!event.context) return; + if (event.context === 'hosts') { + App.router.set('mainHostController.showFilterConditionsFirstLoad', false); + } else if (event.context === 'views') { + App.router.route('views'); + return; + } else if (event.context === 'alerts') { + App.router.set('mainAlertDefinitionsController.showFilterConditionsFirstLoad', false); + } + App.router.route('main/' + event.context); + }, + didInsertElement: function () { // on 'Enter' pressed, trigger modal window primary button if primary button is enabled(green) // on 'Esc' pressed, close the modal
