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/05/01 03:40:31 UTC
ambari git commit: AMBARI-10881. Widgets: ui changes v3a(XIWANG)
Repository: ambari
Updated Branches:
refs/heads/trunk cd01675b5 -> 2c7e0340c
AMBARI-10881. Widgets: ui changes v3a(XIWANG)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/2c7e0340
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/2c7e0340
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/2c7e0340
Branch: refs/heads/trunk
Commit: 2c7e0340c5de2f11536bccd94a8a05eac14e576f
Parents: cd01675
Author: Xi Wang <xi...@apache.org>
Authored: Thu Apr 30 18:31:14 2015 -0700
Committer: Xi Wang <xi...@apache.org>
Committed: Thu Apr 30 18:31:22 2015 -0700
----------------------------------------------------------------------
.../controllers/main/service/info/summary.js | 4 +-
.../service/widgets/create/step1_controller.js | 4 +-
.../service/widgets/create/step3_controller.js | 2 +-
ambari-web/app/messages.js | 7 ++-
.../app/styles/enhanced_service_dashboard.less | 65 +++++++++-----------
.../modal_popups/widget_browser_popup.hbs | 13 ++--
.../templates/common/widget/gauge_widget.hbs | 5 ++
.../templates/common/widget/graph_widget.hbs | 6 +-
.../templates/common/widget/number_widget.hbs | 5 ++
.../templates/common/widget/template_widget.hbs | 5 ++
.../app/templates/main/service/info/summary.hbs | 6 +-
.../main/service/widgets/create/step1.hbs | 9 +--
.../create/widget_property_threshold.hbs | 28 ++++-----
.../app/views/main/service/info/summary.js | 31 +++++++---
.../main/service/widgets/create/step1_view.js | 3 +
15 files changed, 111 insertions(+), 82 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/2c7e0340/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 22eae54..528abb8 100644
--- a/ambari-web/app/controllers/main/service/info/summary.js
+++ b/ambari-web/app/controllers/main/service/info/summary.js
@@ -354,7 +354,7 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
* @param {object|null} data
*/
loadAllSharedWidgetsSuccessCallback: function (data) {
- var widgetIds = this.get('widgets').mapProperty('id');
+ var widgetIds = this.get('widgets') ? this.get('widgets').mapProperty('id'): [];
if (data.items[0] && data.items.length) {
this.set("allSharedWidgets",
data.items.filter(function (widget) {
@@ -404,7 +404,7 @@ App.MainServiceInfoSummaryController = Em.Controller.extend(App.WidgetSectionMix
* @param {object|null} data
*/
loadMineWidgetsSuccessCallback: function (data) {
- var widgetIds = this.get('widgets').mapProperty('id');
+ var widgetIds = this.get('widgets') ? this.get('widgets').mapProperty('id'): [];
if (data.items[0] && data.items.length) {
this.set("mineWidgets",
data.items.filter(function (widget) {
http://git-wip-us.apache.org/repos/asf/ambari/blob/2c7e0340/ambari-web/app/controllers/main/service/widgets/create/step1_controller.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/controllers/main/service/widgets/create/step1_controller.js b/ambari-web/app/controllers/main/service/widgets/create/step1_controller.js
index 5bc6b2f..d2330dc 100644
--- a/ambari-web/app/controllers/main/service/widgets/create/step1_controller.js
+++ b/ambari-web/app/controllers/main/service/widgets/create/step1_controller.js
@@ -48,8 +48,7 @@ App.WidgetWizardStep1Controller = Em.Controller.extend({
name: option.get('name'),
displayName: option.get('displayName'),
iconPath: option.get('iconPath'),
- description: option.get('description'),
- isSelected: option.get('name') == selectedType
+ description: option.get('description')
}
});
}.property('widgetType'),
@@ -60,6 +59,7 @@ App.WidgetWizardStep1Controller = Em.Controller.extend({
*/
chooseOption: function (event) {
this.set('widgetType', event.context);
+ $("[rel='selectable-tooltip']").trigger('mouseleave');
this.next();
},
http://git-wip-us.apache.org/repos/asf/ambari/blob/2c7e0340/ambari-web/app/controllers/main/service/widgets/create/step3_controller.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/controllers/main/service/widgets/create/step3_controller.js b/ambari-web/app/controllers/main/service/widgets/create/step3_controller.js
index 41897cc..283d5f1 100644
--- a/ambari-web/app/controllers/main/service/widgets/create/step3_controller.js
+++ b/ambari-web/app/controllers/main/service/widgets/create/step3_controller.js
@@ -90,7 +90,7 @@ App.WidgetWizardStep3Controller = Em.Controller.extend({
WidgetInfo: {
widget_name: this.get('widgetName'),
widget_type: this.get('content.widgetType'),
- description: this.get('widgetDescription') || " ",
+ description: this.get('widgetDescription') || "",
scope: this.get('widgetScope').toUpperCase(),
"metrics": this.get('widgetMetrics').map(function (metric) {
return {
http://git-wip-us.apache.org/repos/asf/ambari/blob/2c7e0340/ambari-web/app/messages.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js
index e3c64de..f9d03a9 100644
--- a/ambari-web/app/messages.js
+++ b/ambari-web/app/messages.js
@@ -2265,9 +2265,10 @@ Em.I18n.translations = {
'dashboard.button.reset': 'Reset all widgets to default ',
'dashboard.button.gangliaLink': 'View metrics in Ganglia',
'dashboard.widgets.create': 'Create Widget',
- 'dashboard.widgets.actions.browse': 'Browse & Manage Widgets',
+ 'dashboard.widgets.actions.browse': 'Browse Widgets',
'dashboard.widgets.layout.import': 'Import a layout',
'dashboard.widgets.layout.save': 'Save a layout',
+ 'dashboard.widgets.addButton.tooltip': 'Add Widget',
'dashboard.widgets.browser.header': 'Widget Browser',
'dashboard.widgets.browser.menu.shared': 'Shared',
'dashboard.widgets.browser.menu.mine': 'Mine',
@@ -2511,7 +2512,7 @@ Em.I18n.translations = {
'widget.create.wizard.header': 'Create Widget',
'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': 'Select',
+ 'widget.create.wizard.step1.body.choose.tooltip': 'Click tp 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.',
@@ -2528,7 +2529,7 @@ Em.I18n.translations = {
'widget.edit.wizard.header': 'Edit Widget',
- 'widget.clone.body': 'Are you sure you want to clone current widget {0}?',
+ 'widget.clone.body': 'Are you sure you want to clone current widget <b>{0}</b>?',
'dashboard.widgets.wizard.step2.addMetrics': 'Add Metrics and operators here...',
'dashboard.widgets.wizard.step2.newMetric': '+ Add Metric',
http://git-wip-us.apache.org/repos/asf/ambari/blob/2c7e0340/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 aa424c1..939cf5b 100644
--- a/ambari-web/app/styles/enhanced_service_dashboard.less
+++ b/ambari-web/app/styles/enhanced_service_dashboard.less
@@ -196,6 +196,24 @@
margin-left: -10px;
}
}
+ .thumbnail .hidden-description{
+ display: none;
+ color: #555555;
+ z-index: 7;
+ font-size: 12px;
+ font-weight: bold;
+ line-height: 18px;
+ text-align: center;
+ text-decoration: none;
+ position: absolute;
+ top: 40px;
+ padding: 8px 5px;
+ width: 89%;
+ height: 62%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ background: rgba(255,255,255, 0.7);
+ }
}
}
@@ -212,24 +230,10 @@
}
.span6.widget-info-section:hover {
background-color: #eee;
+ cursor: pointer;
.icon {
background-color: white;
}
- .widget-section-actions {
- display: block;
- }
- }
- .span6.widget-info-section.is-selected {
- background-color: #eee;
- .icon {
- background-color: white;
- }
- }
- .span6.widget-info-section.is-selected:hover {
- background-color: #eee;
- .widget-section-actions {
- display: none;
- }
}
.icon {
border: 1px solid #ddd;
@@ -260,16 +264,6 @@
height: 60px;
}
}
- .widget-section-actions {
- display: none;
- position: relative;
- top: -30px;
- right: 30px;
- .btn {
- padding: 3px 8px;
- width: 70px;
- }
- }
}
}
.step2 {
@@ -279,20 +273,19 @@
}
.controls {
margin-left: 130px;
+ line-height: 40px;
.threshold-input {
- width: 85px;
- //margin-left: 0px;
+ width: 100px;
}
}
}
.badge-container {
- height: 26px;
width: 80px;
.OK, .WARNING, .CRITICAL {
line-height: 26px;
height: 26px;
display: inline-block;
- width: 60px;
+ width: 65px;
text-align: center;
}
.OK {
@@ -592,13 +585,19 @@
.label-description {
padding-top: 5px;
.label-text {
- display: block;
+ display: inline-block;
font-size: 14px;
font-weight: bold;
margin-bottom: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ width: 86%;
+ }
+ .is-shared-icon {
+ display: inline-block;
+ margin-bottom: 0px;
+ margin-right: 5px;
}
.description-text {
font-size: 12px;
@@ -609,11 +608,7 @@
height: 40px;
}
}
- .is-shared-icon {
- position: relative;
- top: -5px;
- left: 10px;
- }
+
.widget-section-actions {
position: relative;
top: -10px;
http://git-wip-us.apache.org/repos/asf/ambari/blob/2c7e0340/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 939931c..5628cf0 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
@@ -47,14 +47,15 @@
</div>
<div class="label-description span8">
<p class="label-text">{{widget.widgetName}}</p>
+ <p class="is-shared-icon pull-right">
+ {{#if widget.isShared}}
+ <i class="icon-group" rel="shared-icon-tooltip"
+ {{translateAttr data-original-title="dashboard.widgets.browser.shareIcon.tooltip"}}></i>
+ {{/if}}
+ </p>
<p class="description-text">{{widget.description}}</p>
</div>
- <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 added-btn" {{action "hideWidget" widget target="controller"}} >
http://git-wip-us.apache.org/repos/asf/ambari/blob/2c7e0340/ambari-web/app/templates/common/widget/gauge_widget.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/widget/gauge_widget.hbs b/ambari-web/app/templates/common/widget/gauge_widget.hbs
index c398af9..ec8a6ec 100644
--- a/ambari-web/app/templates/common/widget/gauge_widget.hbs
+++ b/ambari-web/app/templates/common/widget/gauge_widget.hbs
@@ -29,6 +29,11 @@
<i class="icon-edit"></i>
</a>
<div class="content"> {{view view.chartView}}</div>
+ {{#if view.content.description}}
+ <div class="hidden-description">
+ {{view.content.description}}
+ </div>
+ {{/if}}
{{else}}
<div class="spinner"></div>
{{/if}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/2c7e0340/ambari-web/app/templates/common/widget/graph_widget.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/widget/graph_widget.hbs b/ambari-web/app/templates/common/widget/graph_widget.hbs
index 53da312..5a4b314 100644
--- a/ambari-web/app/templates/common/widget/graph_widget.hbs
+++ b/ambari-web/app/templates/common/widget/graph_widget.hbs
@@ -28,8 +28,12 @@
<a class="corner-icon pull-right" href="#" {{action editWidget target="view"}}>
<i class="icon-edit"></i>
</a>
-
<div class="content"> {{view view.graphView}}</div>
+ {{#if view.content.description}}
+ <div class="hidden-description">
+ {{view.content.description}}
+ </div>
+ {{/if}}
{{else}}
<div class="spinner"></div>
{{/if}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/2c7e0340/ambari-web/app/templates/common/widget/number_widget.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/widget/number_widget.hbs b/ambari-web/app/templates/common/widget/number_widget.hbs
index 1c531b9..3003eaf 100644
--- a/ambari-web/app/templates/common/widget/number_widget.hbs
+++ b/ambari-web/app/templates/common/widget/number_widget.hbs
@@ -29,6 +29,11 @@
<i class="icon-edit"></i>
</a>
<div {{bindAttr class="view.contentColor :content"}}>{{view.displayValue}}</div>
+ {{#if view.content.description}}
+ <div class="hidden-description">
+ {{view.content.description}}
+ </div>
+ {{/if}}
{{else}}
<div class="spinner"></div>
{{/if}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/2c7e0340/ambari-web/app/templates/common/widget/template_widget.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/widget/template_widget.hbs b/ambari-web/app/templates/common/widget/template_widget.hbs
index 6036bb9..9b8ed36 100644
--- a/ambari-web/app/templates/common/widget/template_widget.hbs
+++ b/ambari-web/app/templates/common/widget/template_widget.hbs
@@ -29,6 +29,11 @@
<i class="icon-edit"></i>
</a>
<div class="content"> {{view.value}}</div>
+ {{#if view.content.description}}
+ <div class="hidden-description">
+ {{view.content.description}}
+ </div>
+ {{/if}}
{{else}}
<div class="spinner"></div>
{{/if}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/2c7e0340/ambari-web/app/templates/main/service/info/summary.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/info/summary.hbs b/ambari-web/app/templates/main/service/info/summary.hbs
index 033d054..6591523 100644
--- a/ambari-web/app/templates/main/service/info/summary.hbs
+++ b/ambari-web/app/templates/main/service/info/summary.hbs
@@ -131,9 +131,9 @@
</div>
{{/each}}
<div class="span2p4">
- <button id="add-widget-action-box"
- class="btn btn-default" {{action "goToWidgetsBrowser" controller.content target="controller"}}><i
- class="icon-plus"></i></button>
+ <button id="add-widget-action-box" class="btn btn-default" {{action "goToWidgetsBrowser" controller.content target="controller"}}
+ rel="add-widget-tooltip" {{translateAttr data-original-title="dashboard.widgets.addButton.tooltip"}}>
+ <i class="icon-plus"></i></button>
</div>
</div>
{{/if}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/2c7e0340/ambari-web/app/templates/main/service/widgets/create/step1.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/widgets/create/step1.hbs b/ambari-web/app/templates/main/service/widgets/create/step1.hbs
index 611b3b2..f2d6d43 100644
--- a/ambari-web/app/templates/main/service/widgets/create/step1.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/step1.hbs
@@ -24,7 +24,9 @@
<div class="widgets-info-container row-fluid">
{{#each option in options}}
- <div {{bindAttr class="option.isSelected:is-selected :span6 :row-fluid :widget-info-section"}}>
+ <div class="span6 row-fluid widget-info-section" rel="selectable-tooltip"
+ {{translateAttr data-original-title="widget.create.wizard.step1.body.choose.tooltip"}}
+ {{action "chooseOption" option.name target="controller"}}>
<div class="icon span4">
<a class="widget-icon-image" target="_blank"><img {{bindAttr src="option.iconPath"}}></a>
</div>
@@ -32,11 +34,6 @@
<p class="label-text">{{option.displayName}}</p>
<p class="description-text">{{option.description}}</p>
</div>
- <div class="widget-section-actions pull-right">
- <button type="button" class="btn btn-primary" {{action "chooseOption" option.name target="controller"}} >
- {{t widget.create.wizard.step1.body.button.choose}}
- </button>
- </div>
</div>
{{/each}}
</div>
http://git-wip-us.apache.org/repos/asf/ambari/blob/2c7e0340/ambari-web/app/templates/main/service/widgets/create/widget_property_threshold.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/widgets/create/widget_property_threshold.hbs b/ambari-web/app/templates/main/service/widgets/create/widget_property_threshold.hbs
index aedb964..90bfd73 100644
--- a/ambari-web/app/templates/main/service/widgets/create/widget_property_threshold.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/widget_property_threshold.hbs
@@ -16,19 +16,17 @@
* limitations under the License.
}}
-<div>
- <div class="span2 badge-container"><span {{bindAttr class=":label view.property.badgeOK"}}>{{view.property.badgeOK}}</span> </div>
- <div {{bindAttr class=":span2 :threshold-input property.isSmallValueValid::error"}} rel="threshold-tooltip"
- {{translateAttr data-original-title="dashboard.widgets.wizard.step2.threshold.ok.tooltip"}}>
- {{view Em.TextField valueBinding="view.property.smallValue" class ="span10"}}
- </div>
- <div class="span2 badge-container"><span {{bindAttr class=":label view.property.badgeWarning"}}>{{view.property.badgeWarning}}</span> </div>
- <div {{bindAttr class=":span2 :threshold-input property.isBigValueValid::error"}} rel="threshold-tooltip"
- {{translateAttr data-original-title="dashboard.widgets.wizard.step2.threshold.warning.tooltip"}}>
- {{view Em.TextField valueBinding="view.property.bigValue" class ="span10"}}
- </div>
- <div class="span3 badge-container"><span {{bindAttr class=":label view.property.badgeCritical"}}>{{view.property.badgeCritical}}</span> </div>
- <div {{bindAttr class="property.threshold:error"}}>
- {{view.property.errorMsg}}
- </div>
+<div class="row-fluid">
+ <div class="span3 badge-container"><span {{bindAttr class=":label view.property.badgeWarning"}}>{{view.property.badgeWarning}}</span> </div>
+ <div {{bindAttr class=":span2 :threshold-input property.isSmallValueValid::error"}} rel="threshold-tooltip"
+ {{translateAttr data-original-title="dashboard.widgets.wizard.step2.threshold.ok.tooltip"}}>
+ {{view Em.TextField valueBinding="view.property.smallValue" class ="span10"}}
+</div>
+</div>
+<div class="row-fluid">
+ <div class="span3 badge-container"><span {{bindAttr class=":label view.property.badgeCritical"}}>{{view.property.badgeCritical}}</span> </div>
+ <div {{bindAttr class=":span2 :threshold-input property.isBigValueValid::error"}} rel="threshold-tooltip"
+ {{translateAttr data-original-title="dashboard.widgets.wizard.step2.threshold.warning.tooltip"}}>
+ {{view Em.TextField valueBinding="view.property.bigValue" class ="span10"}}
+ </div>
</div>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/ambari/blob/2c7e0340/ambari-web/app/views/main/service/info/summary.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/service/info/summary.js b/ambari-web/app/views/main/service/info/summary.js
index 99d937d..280e3e5 100644
--- a/ambari-web/app/views/main/service/info/summary.js
+++ b/ambari-web/app/views/main/service/info/summary.js
@@ -314,23 +314,24 @@ App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, {
var stackService = App.StackService.find().findProperty('serviceName', serviceName);
if (!graphNames && !stackService.get('isServiceWithWidgets')) {
self.set('serviceMetricGraphs', []);
- self.set('isServiceMetricLoaded', true);
+ self.set('isServiceMetricLoaded', false);
return;
}
} else if (!graphNames) {
self.set('serviceMetricGraphs', []);
- self.set('isServiceMetricLoaded', true);
+ self.set('isServiceMetricLoaded', false);
return;
}
// load time range for current service from server
self.getUserPref(self.get('persistKey')).complete(function () {
var index = self.get('currentTimeRangeIndex');
- graphNames.forEach(function(graphName) {
- graphObjects.push(App["ChartServiceMetrics" + graphName].extend({
- currentTimeIndex : index
- }));
- });
-
+ if (graphNames) {
+ graphNames.forEach(function(graphName) {
+ graphObjects.push(App["ChartServiceMetrics" + graphName].extend({
+ currentTimeIndex : index
+ }));
+ });
+ }
while(graphObjects.length) {
result.push(graphObjects.splice(0, chunkSize));
}
@@ -567,6 +568,20 @@ App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, {
}
}
this.makeSortable();
+ Em.run.later(this, function () {
+ App.tooltip($("[rel='add-widget-tooltip']"));
+ // enalble description show up on hover
+ $('.thumbnail').hoverIntent(function() {
+ var self = this;
+ setTimeout(function() {
+ if ($(self).is(':hover')) {
+ $(self).find('.hidden-description').fadeIn(200);
+ }
+ }, 1000);
+ }, function() {
+ $(this).find('.hidden-description').hide();
+ });
+ }, 1000);
},
/**
http://git-wip-us.apache.org/repos/asf/ambari/blob/2c7e0340/ambari-web/app/views/main/service/widgets/create/step1_view.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/service/widgets/create/step1_view.js b/ambari-web/app/views/main/service/widgets/create/step1_view.js
index a98f862..8334935 100644
--- a/ambari-web/app/views/main/service/widgets/create/step1_view.js
+++ b/ambari-web/app/views/main/service/widgets/create/step1_view.js
@@ -25,6 +25,9 @@ App.WidgetWizardStep1View = Em.View.extend({
didInsertElement: function () {
var controller = this.get('controller');
controller.loadStep();
+ Em.run.later(this, function () {
+ App.tooltip($("[rel='selectable-tooltip']"));
+ }, 300);
}
});