Repository: ambari Updated Branches: refs/heads/trunk ed6aaaf73 -> 3a806b50e
AMBARI-5565. New dashboard UI tweaks.(xiwang) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/3a806b50 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/3a806b50 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/3a806b50 Branch: refs/heads/trunk Commit: 3a806b50e8f452538a561c65e5d8b531169004d0 Parents: ed6aaaf Author: Xi Wang <[email protected]> Authored: Thu Apr 24 13:19:19 2014 -0700 Committer: Xi Wang <[email protected]> Committed: Thu Apr 24 16:50:24 2014 -0700 ---------------------------------------------------------------------- ambari-web/app/messages.js | 2 +- ambari-web/app/routes/main.js | 2 +- ambari-web/app/styles/application.less | 115 ++++++++----------- .../app/templates/main/charts/heatmap.hbs | 2 +- ambari-web/app/templates/main/dashboard.hbs | 3 +- .../main/dashboard/plus_button_filter.hbs | 8 +- .../app/templates/main/dashboard/widgets.hbs | 72 ++++++------ ambari-web/app/views/main/dashboard.js | 14 +-- ambari-web/app/views/main/dashboard/widgets.js | 24 ++-- 9 files changed, 103 insertions(+), 139 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/3a806b50/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index 9609db4..c958066 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -1647,7 +1647,7 @@ Em.I18n.translations = { 'dashboard.clusterMetrics.memory':'Memory Usage', 'dashboard.clusterMetrics.network':'Network Usage', - 'dashboard.widgets.title': 'Cluster Status and Metrics', + 'dashboard.widgets.title': 'Metrics', 'dashboard.heatmaps.title': 'Heatmaps', 'dashboard.button.switch': 'Switch to classic dashboard', 'dashboard.button.switchShort': 'Switch', http://git-wip-us.apache.org/repos/asf/ambari/blob/3a806b50/ambari-web/app/routes/main.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/routes/main.js b/ambari-web/app/routes/main.js index 8e0aa43..e305cab 100644 --- a/ambari-web/app/routes/main.js +++ b/ambari-web/app/routes/main.js @@ -94,7 +94,7 @@ module.exports = Em.Route.extend({ router.transitionTo(event.context); }, widgets: Em.Route.extend({ - route: '/clusterWidgets', + route: '/metrics', connectOutlets: function (router, context) { router.set('mainDashboardController.selectedCategory', 'widgets'); router.get('mainDashboardController').connectOutlet('mainDashboardWidgets'); http://git-wip-us.apache.org/repos/asf/ambari/blob/3a806b50/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 7e85402..c9f3943 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -123,9 +123,6 @@ footer { .navbar.navbar-static-top { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - -moz-box-shadow: 0 1 5px #888; - -webkit-box-shadow: 0 1px 5px #888; - box-shadow: 0 1px 5px #888; .navbar-inner { background-image: -moz-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@top-nav-bg-color-from), to(@top-nav-bg-color-to)); @@ -1235,7 +1232,10 @@ a:focus { /**********start styles for dropdown-menu, accordion-group ****************/ .dropdown-menu, +.dropdown-submenu > .dropdown-menu, .nav-pills .dropdown-menu, +.nav-pills > li > a, +.nav-tabs > li > a, .accordion-group { border-radius: 0px; -webkit-border-radius: 0px; @@ -2688,30 +2688,31 @@ table.graphs { width: 100%; } -/*Dashboard Widgets Start*/ +/*Dashboard Widgets/heatmaps Start*/ #dashboard-widgets-container{ > ul.nav.nav-tabs { margin-bottom: 10px; } - h4{ - line-height: 30px; - margin-bottom: 0px; - margin-top: 0px; + > ul.nav.nav-tabs > li.active > a, .nav-pills > li.active > a { + padding-right: 18px; } - .add-widget-button{ - margin-top: 0px; - margin-left: -22px; - width: 70px; - .add-button{ - color: #666666; + #widgets-options-menu { + position: relative; + top: -39px; + left: 62px; + width: 15px; + .dropdown-submenu { + &> a:after { + border-left-color: #333; + } } - .filter-components{ - overflow: auto; + .add-widgets-text .dropdown-menu { + top: 0; + left: 99%; + margin-top: -6px; + margin-left: -1px; max-height: 375px; width: 210px; - color: #333333; - right: 0; - left: auto; li { display: block; padding: 3px 0 3px 5px; @@ -2733,54 +2734,35 @@ table.graphs { } } } - } - .more-options-button{ - margin-top: 0px; - margin-left: 0px; - margin-right: 6px; - padding: 1px; - width: 70px; - .icon-cog{ - color: #666666; - font-size: 18px; - position: relative; - left: 3px; - top: 2px; - } - .caret{ - position: relative; - left: 5px; - top: 2px; + .add-widgets-text:hover .dropdown-menu { + display: block; } } - .right-align-dropdown{ - right: 0; - left: auto; - padding-top: 9px; - padding-bottom: 9px; - margin-right: 4px; + .dashboard-widgets-box { + position: relative; + top: -20px; + } + h4{ + line-height: 30px; + margin-bottom: 0px; + margin-top: 0px; } - #dashboard-widgets{ .caption { height: 25px; } - .thumbnails { - margin-left: 8px; - } .row-fluid .span2p4 { - width: 19.34%; - *width: 19.34%; + width: 19.60%; + *width: 19.60%; } .row-fluid .span4p8 { - width: 39.1%; - *width: 39.1%; + width: 39.55%; + *width: 39.55%; } - .thumbnails > div { margin-left: 0px; margin-right: 3px; - margin-top: 5px; + margin-top: 0px; margin-bottom: 7px; height: 163px; } @@ -2910,7 +2892,7 @@ table.graphs { z-index: 5; } .uptime-content{ - top: -136px; + top: -116px; } .uptime-content-isNA{ top: -95px; @@ -4115,13 +4097,13 @@ ul.filter { } /*start charts rack*/ .rack { - width: 98%; + width: 99%; display: inline-block; vertical-align: top; border: 1px solid #D4D4D4; - border-radius: 5px; margin-right: 4px; margin-bottom: 10px; + margin-top:5px; .rackHeader { background-color: #F7F7F7; @@ -4258,7 +4240,6 @@ ul.filter { /*Start Heatmap*/ .heatmap { - padding: 5px; #heatmap-metric-title { margin-left: 23px; } @@ -4289,10 +4270,11 @@ ul.filter { } .legend-column { min-width: 150px; + margin-right: 10px; } .heatmap-content { float: right; - width: 80%; + width: 78%; } .heatmap_host_details { font-size: 12px; @@ -5769,24 +5751,17 @@ i.icon-asterisks { #dashboard-widgets-container{ - .add-widget-button{ - margin-left: 9px; //3px for 3 buttons view - } - .more-options-button{ - margin-right: 2px; - } - #dashboard-widgets{ .row-fluid .span2p4 { - width: 19.08%; - *width: 19.08%; + width: 19.47%; + *width: 19.47%; } .row-fluid .span4p8 { - width: 39%; - *width: 39%; + width: 39.45%; + *width: 39.45%; } .thumbnails > div { - margin-right: 8px; + margin-right: 5px; } .thumbnail .caption { font-size: 14px; http://git-wip-us.apache.org/repos/asf/ambari/blob/3a806b50/ambari-web/app/templates/main/charts/heatmap.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/charts/heatmap.hbs b/ambari-web/app/templates/main/charts/heatmap.hbs index f08ffc8..7e7a941 100644 --- a/ambari-web/app/templates/main/charts/heatmap.hbs +++ b/ambari-web/app/templates/main/charts/heatmap.hbs @@ -16,7 +16,7 @@ * limitations under the License. }} -<div class="heatmap box"> +<div class="heatmap"> <div class="container-fluid"> <div class="row-fluid"> http://git-wip-us.apache.org/repos/asf/ambari/blob/3a806b50/ambari-web/app/templates/main/dashboard.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard.hbs b/ambari-web/app/templates/main/dashboard.hbs index f0bceb0..37f8766 100644 --- a/ambari-web/app/templates/main/dashboard.hbs +++ b/ambari-web/app/templates/main/dashboard.hbs @@ -25,10 +25,11 @@ <ul class="nav nav-tabs"> {{#each category in view.categories}} {{#view view.NavItemView itemBinding="category.name" }} - <a href="#" {{action "goToDashboardView" category.url}} >{{category.label}}</a> + <a href="#" {{action "goToDashboardView" category.url}} >{{category.label}}</a> {{/view}} {{/each}} </ul> + <!--show widgets or heapmaps in the content--> {{outlet}} </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/3a806b50/ambari-web/app/templates/main/dashboard/plus_button_filter.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/plus_button_filter.hbs b/ambari-web/app/templates/main/dashboard/plus_button_filter.hbs index 79823bc..0037f38 100644 --- a/ambari-web/app/templates/main/dashboard/plus_button_filter.hbs +++ b/ambari-web/app/templates/main/dashboard/plus_button_filter.hbs @@ -16,12 +16,9 @@ * limitations under the License. }} -<button class="btn single-btn-group add-button" {{action "clickFilterButton" target="view"}} > - <i class="icon-plus"></i> <span style="font-weight: bold">{{t common.add}}</span> -</button> -<ul class="dropdown-menu filter-components" > +<ul class="dropdown-menu" > {{#if view.hiddenWidgets.length}} - <li> + <li class="add-widgets-dropdown-list"> <ul> {{#each widget in view.hiddenWidgets}} <li> @@ -45,6 +42,5 @@ <li> <button class="btn" {{action "closeFilter" target="view"}}>{{t common.cancel}}</button> </li> - {{/if}} </ul> http://git-wip-us.apache.org/repos/asf/ambari/blob/3a806b50/ambari-web/app/templates/main/dashboard/widgets.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/widgets.hbs b/ambari-web/app/templates/main/dashboard/widgets.hbs index f3079f3..84fe9d6 100644 --- a/ambari-web/app/templates/main/dashboard/widgets.hbs +++ b/ambari-web/app/templates/main/dashboard/widgets.hbs @@ -16,43 +16,43 @@ * limitations under the License. }} {{#if view.isDataLoaded}} - <div class="box"> - <div class="box-header"> - <div class="row-fluid"> - <h4 class="span10"></h4> - <a class="add-widget-button span1">{{view view.plusButtonFilterView}}</a> - <div class="btn-group"> - <button class="btn dropdown-toggle span1 more-options-button" data-toggle="dropdown"> - <i class="icon-cog"></i> - <span class= "caret"></span> - </button> - <ul class="dropdown-menu right-align-dropdown"> - <li> - <a href="#" {{action "resetAllWidgets" target="view"}}> - <i class="icon-refresh"></i> - {{t dashboard.button.reset}} - </a> - </li> - <li> - <a target="_blank" {{bindAttr href="view.gangliaUrl"}}> - <i class="icon-share"></i> - {{t dashboard.button.gangliaLink}} - </a> - </li> - </ul> - </div> + + <div id="widgets-options-menu" class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li class="dropdown-submenu add-widgets-text"> + <a href="javascript:void(null);"><i class="icon-plus"></i> {{t common.add}}</a> + {{view view.plusButtonFilterView}} + </li> + <li class="dropdown-submenu"> + <a href="javascript:void(null);"><i class="icon-cog"></i> {{t common.edit}}</a> + <ul class="dropdown-menu"> + <li> + <a href="#" {{action "resetAllWidgets" target="view"}}> + <i class="icon-refresh"></i> {{t dashboard.button.reset}} + </a> + </li> + <li> + <a target="_blank" {{bindAttr href="view.gangliaUrl"}}> + <i class="icon-share"></i> {{t dashboard.button.gangliaLink}} + </a> + </li> + </ul> + </li> + </ul> + </div> + + <div class="dashboard-widgets-box"> + <div id="dashboard-widgets" class="widgets-container"> + <div class="thumbnails row-fluid" id="sortable"> + {{#if view.visibleWidgets.length}} + {{#each widgetClass in view.visibleWidgets}} + <div {{bindAttr class="widgetClass.class"}}> + {{view widgetClass }} + </div> + {{/each}} + {{/if}} </div> </div> - <div id="dashboard-widgets" class="widgets-container"> - <div class="thumbnails row-fluid" id="sortable"> - {{#if view.visibleWidgets.length}} - {{#each widgetClass in view.visibleWidgets}} - <div {{bindAttr class="widgetClass.class"}}> - {{view widgetClass }} - </div> - {{/each}} - {{/if}} - </div> - </div> </div> {{/if}} http://git-wip-us.apache.org/repos/asf/ambari/blob/3a806b50/ambari-web/app/views/main/dashboard.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/dashboard.js b/ambari-web/app/views/main/dashboard.js index eb6700b..ab8614c 100644 --- a/ambari-web/app/views/main/dashboard.js +++ b/ambari-web/app/views/main/dashboard.js @@ -27,19 +27,13 @@ App.MainDashboardView = Em.View.extend({ categories: function() { var items = [{ name: 'widgets', - url: 'dashboard.widgets', - label: Em.I18n.t('dashboard.widgets.title'), - isActive: function () { - return 'widgets' === this.get('selected'); - }.property('selected') + url: 'dashboard.index', + label: Em.I18n.t('dashboard.widgets.title') }, { name: 'charts', - url: 'dashboard.charts.heatmap', - label: Em.I18n.t('dashboard.heatmaps.title'), - isActive: function () { - return 'charts' === this.get('selected'); - }.property('selected') + url: 'dashboard.charts.index', + label: Em.I18n.t('dashboard.heatmaps.title') }]; return items; }.property(''), http://git-wip-us.apache.org/repos/asf/ambari/blob/3a806b50/ambari-web/app/views/main/dashboard/widgets.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/dashboard/widgets.js b/ambari-web/app/views/main/dashboard/widgets.js index 8900541..081c79c 100644 --- a/ambari-web/app/views/main/dashboard/widgets.js +++ b/ambari-web/app/views/main/dashboard/widgets.js @@ -197,22 +197,21 @@ App.MainDashboardWidgetsView = Em.View.extend(App.UserPref, App.LocalStorage, { * Submenu view for New Dashboard style * @type {Ember.View} */ - plusButtonFilterView: filters.createComponentView({ - /** - * Base methods was implemented in <code>filters.componentFieldView</code> - */ - hiddenWidgetsBinding: 'parentView.hiddenWidgets', - visibleWidgetsBinding: 'parentView.visibleWidgets', - layout: null, - - filterView: filters.componentFieldView.extend({ - templateName:require('templates/main/dashboard/plus_button_filter'), + plusButtonFilterView: Ember.View.extend({ + templateName: require('templates/main/dashboard/plus_button_filter'), hiddenWidgetsBinding: 'parentView.hiddenWidgets', visibleWidgetsBinding: 'parentView.visibleWidgets', valueBinding: '', + didInsertElement: function() { + $(".add-widgets-dropdown-list").click(function( event ) { + event.stopPropagation(); + }); + }, + closeFilter:function () { + }, applyFilter:function() { - this._super(); - var parent = this.get('parentView').get('parentView'); + this.closeFilter(); + var parent = this.get('parentView'); var hiddenWidgets = this.get('hiddenWidgets'); var checkedWidgets = hiddenWidgets.filterProperty('checked', true); @@ -245,7 +244,6 @@ App.MainDashboardWidgetsView = Em.View.extend(App.UserPref, App.LocalStorage, { parent.translateToReal(newValue); } } - }) }), /**
