You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by xi...@apache.org on 2015/04/24 04:03:56 UTC
ambari git commit: AMBARI-10718. Widgets: ui changes v1(xiwang)
Repository: ambari
Updated Branches:
refs/heads/trunk 290276c62 -> 194e160e2
AMBARI-10718. Widgets: ui changes v1(xiwang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/194e160e
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/194e160e
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/194e160e
Branch: refs/heads/trunk
Commit: 194e160e2014965cc11d216a18aec58834eae9ef
Parents: 290276c
Author: Xi Wang <xi...@apache.org>
Authored: Thu Apr 23 18:46:54 2015 -0700
Committer: Xi Wang <xi...@apache.org>
Committed: Thu Apr 23 18:47:01 2015 -0700
----------------------------------------------------------------------
.../controllers/main/service/info/summary.js | 76 +++++++-------------
ambari-web/app/messages.js | 10 +--
.../app/styles/enhanced_service_dashboard.less | 56 ++++++++-------
.../modal_popups/widget_browser_popup.hbs | 32 ++++-----
4 files changed, 75 insertions(+), 99 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/194e160e/ambari-web/app/controllers/main/service/info/summary.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/controllers/main/service/info/summary.js b/ambari-web/app/controllers/main/service/info/summary.js
index 4d902a6..421206a 100644
--- a/ambari-web/app/controllers/main/service/info/summary.js
+++ b/ambari-web/app/controllers/main/service/info/summary.js
@@ -588,7 +588,6 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
* @return {App.ModalPopup}
*/
goToWidgetsBrowser: function () {
-
var self = this;
return App.ModalPopup.show({
@@ -597,8 +596,6 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
}.property(''),
classNames: ['sixty-percent-width-modal', 'widgets-browser-popup'],
- primary: Em.I18n.t('common.close'),
- secondary: null,
onPrimary: function () {
this.hide();
self.set('isAllSharedWidgetsLoaded', false);
@@ -608,8 +605,20 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
},
autoHeight: false,
isHideBodyScroll: false,
- bodyClass: Ember.View.extend({
+ footerClass: Ember.View.extend({
+ template: Ember.Handlebars.compile('<div class="modal-footer">' +
+ '<label id="footer-checkbox">' +
+ '{{view Ember.Checkbox classNames="checkbox" checkedBinding="view.parentView.isShowMineOnly"}} ' +
+ '{{t dashboard.widgets.browser.footer.checkbox}}</label>'+
+ '<button class="btn btn-success" {{action onPrimary target="view"}}>{{t common.close}}</button></div>'),
+ isShowMineOnly: false,
+ onPrimary: function() {
+ this.get('parentView').onPrimary();
+ }
+ }),
+ isShowMineOnly: false,
+ bodyClass: Ember.View.extend({
templateName: require('templates/common/modal_popups/widget_browser_popup'),
controller: self,
willInsertElement: function () {
@@ -618,25 +627,24 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
},
isLoaded: function () {
- return !!this.get('controller.isAllSharedWidgetsLoaded');
- }.property('controller.isAllSharedWidgetsLoaded'),
+ return !!(this.get('controller.isAllSharedWidgetsLoaded') && this.get('controller.isMineWidgetsLoaded'));
+ }.property('controller.isAllSharedWidgetsLoaded', 'controller.isMineWidgetsLoaded'),
isWidgetEmptyList: function () {
return !this.get('filteredContent.length');
}.property('filteredContent.length'),
- activeTab: 'shared',
activeService: '',
activeStatus: '',
content: function () {
- if (this.get('activeTab') == 'mine') {
+ if (this.get('parentView.isShowMineOnly')) {
return this.get('controller.mineWidgets');
- } else if (this.get('activeTab') == 'shared') {
- return this.get('controller.allSharedWidgets');
+ } else {
+ return this.get('controller.mineWidgets').concat(this.get('controller.allSharedWidgets'));
}
}.property('controller.allSharedWidgets.length', 'controller.isAllSharedWidgetsLoaded',
- 'controller.mineWidgets.length', 'controller.isMineWidgetsLoaded', 'activeTab'),
+ 'controller.mineWidgets.length', 'controller.isMineWidgetsLoaded', 'parentView.isShowMineOnly'),
/**
* displaying content filtered by service name and status.
@@ -653,44 +661,6 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
}.property('content', 'activeService', 'activeStatus'),
/**
- * top tabs: Share / Mine
- */
- categories: [
- {
- name: 'shared',
- label: Em.I18n.t('dashboard.widgets.browser.menu.shared')
- },
- {
- name: 'mine',
- label: Em.I18n.t('dashboard.widgets.browser.menu.mine')
- }
- ],
-
- NavItemView: Ember.View.extend({
- tagName: 'li',
- classNameBindings: 'isActive:active'.w(),
- isActive: function () {
- return this.get('item') == this.get('parentView.activeTab');
- }.property('item', 'parentView.activeTab'),
- elementId: Ember.computed(function () {
- var label = Em.get(this, 'templateData.keywords.category.label');
- return label ? 'widget-browser-view-tab-' + label.toLowerCase().replace(/\s/g, '-') : "";
- }),
- count: function () {
- if (this.get('item') == 'mine') {
- return this.get('parentView.controller.mineWidgets.length');
- } else if (this.get('item') == 'shared') {
- return this.get('parentView.controller.allSharedWidgets.length');
- }
- }.property('item', 'parentView.controller.mineWidgets.length',
- 'parentView.controller.allSharedWidgets.length'),
- goToWidgetTab: function (event) {
- var targetName = event.context;
- this.set('parentView.activeTab', targetName);
- }
- }),
-
- /**
* service name filter
*/
services: function () {
@@ -716,8 +686,14 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
this.get('controller').createWidget();
},
- didInsertElement: function () {
+ ensureTooltip: function () {
+ Em.run.later(this, function () {
+ App.tooltip($("[rel='shared-icon-tooltip']"));
+ }, 1000);
+ }.observes('activeService', 'parentView.isShowMineOnly'),
+ didInsertElement: function () {
+ this.ensureTooltip();
}
})
});
http://git-wip-us.apache.org/repos/asf/ambari/blob/194e160e/ambari-web/app/messages.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js
index df96749..00e0f3f 100644
--- a/ambari-web/app/messages.js
+++ b/ambari-web/app/messages.js
@@ -2256,19 +2256,21 @@ Em.I18n.translations = {
'dashboard.button.switchShort': 'Switch',
'dashboard.button.reset': 'Reset all widgets to default ',
'dashboard.button.gangliaLink': 'View metrics in Ganglia',
- 'dashboard.widgets.create': 'Create New Widget',
- 'dashboard.widgets.actions.browse': 'Browse and Manage widgets',
+ 'dashboard.widgets.create': 'Create Widget',
+ 'dashboard.widgets.actions.browse': 'Browse & Manage Widgets',
'dashboard.widgets.layout.import': 'Import a layout',
'dashboard.widgets.layout.save': 'Save a layout',
'dashboard.widgets.browser.header': 'Widget Browser',
'dashboard.widgets.browser.menu.shared': 'Shared',
'dashboard.widgets.browser.menu.mine': 'Mine',
'dashboard.widgets.browser.noWidgets': 'No widgets to diaplay',
+ 'dashboard.widgets.browser.footer.checkbox': 'Show only my widgets',
'dashboard.widgets.browser.action.add': 'Add',
'dashboard.widgets.browser.action.added': 'Added',
'dashboard.widgets.browser.action.delete': 'Delete',
'dashboard.widgets.browser.action.unshare': 'Unshare',
'dashboard.widgets.browser.action.share': 'Share',
+ 'dashboard.widgets.browser.shareIcon.tooltip': 'Shared',
'dashboard.widgets.browser.action.delete.bodyMsg': 'You are about to permanently delete widget: {0}. You can add it back through creating new widget.',
'dashboard.widgets.browser.action.delete.btnMsg': 'Confirm Delete',
@@ -2499,9 +2501,9 @@ Em.I18n.translations = {
'widget.type.graph.description': 'A view to display metrics that can be expressed in line graph or area graph over a time range.',
'widget.type.template.description': 'A view to display metric value along with a templated text.',
'widget.create.wizard.header': 'Create Widget',
- 'widget.create.wizard.step1.header': 'Choose Type',
+ 'widget.create.wizard.step1.header': 'Select Type',
'widget.create.wizard.step1.body.text': 'What type of widget do you want to create?',
- 'widget.create.wizard.step1.body.button.choose': 'Choose',
+ 'widget.create.wizard.step1.body.button.choose': 'Select',
'widget.create.wizard.step2.header': 'Metrics and Expression',
'widget.create.wizard.step2.body.text':'Define the expression with any metrics and valid operators. </br>Use parentheses when necessary.',
'widget.create.wizard.step2.body.template':'Define the template first, a template can have any number of {{expression}} and any string.',
http://git-wip-us.apache.org/repos/asf/ambari/blob/194e160e/ambari-web/app/styles/enhanced_service_dashboard.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/enhanced_service_dashboard.less b/ambari-web/app/styles/enhanced_service_dashboard.less
index 182918f..99508bf 100644
--- a/ambari-web/app/styles/enhanced_service_dashboard.less
+++ b/ambari-web/app/styles/enhanced_service_dashboard.less
@@ -23,12 +23,16 @@
.service-metrics-block {
#add-widget-action-box {
- width: 96%;
+ width: 98%;
padding: 43px;
border: 1px solid @border-color;
+ border-radius: 0px;
+ -webkit-border-radius: 0px;
+ -moz-border-radius: 0px;
+ background-image: none;
.icon-plus {
font-size: 70px;
- color: @border-color;
+ color: #ccc;
}
}
@@ -201,7 +205,7 @@
.widgets-info-container {
.span6.widget-info-section {
width: 44%;
- height: 122px;
+ height: 115px;
margin: 5px 15px;
padding-top: 10px;
padding-left: 5px;
@@ -465,36 +469,25 @@
#widget-browser-popup {
min-width: 750px;
max-width: 900px;
- #shared-mine-tabs {
- a {
- font-size: 15px;
- }
- }
#services-filter-bar {
- padding: 0px 10px 10px 10px;
- a {
+ padding: 0px 10px 0px 10px;
+ margin-bottom: 10px;
+ border-bottom: transparent;
+ width: 80%;
+ li > a {
font-size: 14px;
- padding: 5px 3px;
- line-height: 30px;
+ padding: 5px 5px;
}
a:hover {
cursor: pointer;
- }
- a.active {
- color: #555555;
- border: 1px #ddd solid;
- border-bottom-style: none;
- }
- a.active:hover {
- text-decoration: none;
- cursor: default;
+ border-bottom: transparent;
}
}
#widgets-info {
.widgets-info-container {
.span6.widget-info-section {
width: 44%;
- height: 122px;
+ height: 115px;
margin: 5px 15px;
padding-top: 10px;
padding-left: 5px;
@@ -531,19 +524,28 @@
color: #808080;
overflow: hidden;
text-overflow: ellipsis;
- height: 60px;
+ height: 40px;
}
}
+ .is-shared-icon {
+ position: relative;
+ top: -5px;
+ left: 10px;
+ }
.widget-section-actions {
position: relative;
- top: -30px;
+ top: -10px;
right: 5px;
.btn {
padding: 3px 8px;
- width: 60px;
+ width: 70px;
}
- .added-btn {
- margin-left: 63px;;
+ .added-btn.btn {
+ margin-left: 63px;
+ width: 85px;
+ .icon-ok {
+ color: #468847;
+ }
}
.dropdown-menu {
min-width: 110px;
http://git-wip-us.apache.org/repos/asf/ambari/blob/194e160e/ambari-web/app/templates/common/modal_popups/widget_browser_popup.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/modal_popups/widget_browser_popup.hbs b/ambari-web/app/templates/common/modal_popups/widget_browser_popup.hbs
index 20f3301..0b88018 100644
--- a/ambari-web/app/templates/common/modal_popups/widget_browser_popup.hbs
+++ b/ambari-web/app/templates/common/modal_popups/widget_browser_popup.hbs
@@ -26,23 +26,13 @@
</button>
</div>
- <!--Top menu tabs-->
- <div id="shared-mine-tabs">
- <ul class="nav nav-tabs">
- {{#each category in view.categories}}
- {{#view view.NavItemView itemBinding="category.name" }}
- <a href="#" {{action "goToWidgetTab" category.name target="view"}} >{{category.label}} ({{view.count}})</a>
- {{/view}}
- {{/each}}
- </ul>
- </div>
-
<!--Filters bar: service name filter, status filter here-->
- <div id="services-filter-bar">
+ <ul id="services-filter-bar" class="nav nav-tabs">
{{#each service in view.services}}
- <a {{bindAttr class="service.isActive:active"}} {{action "filterByService" service.value target="view"}}>{{service.label}}</a>
+ <li {{bindAttr class="service.isActive:active"}}>
+ <a {{action "filterByService" service.value target="view"}}>{{service.label}}</a></li>
{{/each}}
- </div>
+ </ul>
<!--Widgets table two column-->
<div id="widgets-info">
@@ -59,14 +49,20 @@
<p class="label-text">{{widget.displayName}}</p>
<p class="description-text">{{widget.description}}</p>
</div>
- <div class="widget-section-actions pull-right">
+ <div class="is-shared-icon pull-left">
+ {{#if widget.isShared}}
+ <i class="icon-group" rel="shared-icon-tooltip"
+ {{translateAttr data-original-title="dashboard.widgets.browser.shareIcon.tooltip"}}></i>
+ {{/if}}
+ </div>
+ <div class="widget-section-actions btn-group pull-right">
{{#if widget.added}}
- <button type="button" class="btn btn-primary added-btn" {{action "hideWidget" widget target="controller"}} >
- {{t dashboard.widgets.browser.action.added}}
+ <button type="button" class="btn added-btn" {{action "hideWidget" widget target="controller"}} >
+ <i class="icon-ok"></i> {{t dashboard.widgets.browser.action.added}}
</button>
{{else}}
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
- <i class="icon-ellipsis-horizontal"></i> <span class="caret"></span>
+ {{t common.more}}<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>