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/28 23:29:02 UTC
ambari git commit: AMBARI-10805. Create Widget Wizard - Expression
page UI changes.(XIWANG)
Repository: ambari
Updated Branches:
refs/heads/trunk a8536dda6 -> c9fdccd96
AMBARI-10805. Create Widget Wizard - Expression page UI changes.(XIWANG)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/c9fdccd9
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/c9fdccd9
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/c9fdccd9
Branch: refs/heads/trunk
Commit: c9fdccd9646acc45a71d09959cd1e9000f15a69e
Parents: a8536dd
Author: Xi Wang <xi...@apache.org>
Authored: Tue Apr 28 13:58:52 2015 -0700
Committer: Xi Wang <xi...@apache.org>
Committed: Tue Apr 28 13:59:02 2015 -0700
----------------------------------------------------------------------
.../service/widgets/create/step2_controller.js | 32 ++++++-----
ambari-web/app/messages.js | 6 ++-
ambari-web/app/models/widget.js | 11 ++--
ambari-web/app/models/widget_property.js | 24 ++-------
.../app/styles/enhanced_service_dashboard.less | 30 ++++++-----
.../main/service/widgets/create/expression.hbs | 57 +++++++++-----------
.../main/service/widgets/create/step2_graph.hbs | 3 --
.../service/widgets/create/step2_number.hbs | 3 --
.../service/widgets/create/step2_template.hbs | 3 --
.../create/widget_property_threshold.hbs | 6 ++-
.../service/widgets/create/expression_view.js | 17 ++----
.../main/service/widgets/create/step2_view.js | 8 +++
12 files changed, 92 insertions(+), 108 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/c9fdccd9/ambari-web/app/controllers/main/service/widgets/create/step2_controller.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/controllers/main/service/widgets/create/step2_controller.js b/ambari-web/app/controllers/main/service/widgets/create/step2_controller.js
index d870433..edbb20f 100644
--- a/ambari-web/app/controllers/main/service/widgets/create/step2_controller.js
+++ b/ambari-web/app/controllers/main/service/widgets/create/step2_controller.js
@@ -108,22 +108,22 @@ App.WidgetWizardStep2Controller = Em.Controller.extend({
case "NUMBER":
case "GAUGE":
return this.get('expressions')[0] &&
- (this.get('expressions')[0].get('editMode') ||
- this.get('expressions')[0].get('data.length') === 0);
+ (this.get('expressions')[0].get('isInvalid') ||
+ this.get('expressions')[0].get('isEmpty'));
case "GRAPH":
return this.get('dataSets.length') > 0 &&
- (this.get('dataSets').someProperty('expression.editMode') ||
- this.get('dataSets').someProperty('expression.data.length', 0));
+ (this.get('dataSets').someProperty('expression.isInvalid') ||
+ this.get('dataSets').someProperty('expression.isEmpty'));
case "TEMPLATE":
return !this.get('templateValue') ||
this.get('expressions.length') > 0 &&
- (this.get('expressions').someProperty('editMode') ||
- this.get('expressions').someProperty('data.length', 0));
+ (this.get('expressions').someProperty('isInvalid') ||
+ this.get('expressions').someProperty('isEmpty'));
}
return false;
- }.property('widgetPropertiesViews.@each.isValid',
- 'expressions.@each.editMode',
- 'dataSets.@each.expression'),
+ }.property('widgetPropertiesViews.@each.isValid', 'templateValue',
+ 'dataSets.@each.expression', 'dataSets.@each.isInvalid', 'dataSets.@each.isExpressionEmpty',
+ 'expressions.@each.isInvalid', 'expressions.@each.isEmpty'),
/**
* Add data set
@@ -140,8 +140,15 @@ App.WidgetWizardStep2Controller = Em.Controller.extend({
isRemovable: !isDefault,
expression: {
data: [],
- editMode: false
- }
+ isInvalid: false,
+ isEmpty: true
+ },
+ isInvalid: function() {
+ return this.get('expression.isInvalid');
+ }.property('expression.isInvalid'),
+ isExpressionEmpty: function() {
+ return this.get('expression.isEmpty');
+ }.property('expression.isEmpty')
}));
return id;
},
@@ -168,7 +175,8 @@ App.WidgetWizardStep2Controller = Em.Controller.extend({
isRemovable: !isDefault,
data: [],
alias: '{{' + this.get('EXPRESSION_PREFIX') + id + '}}',
- editMode: false
+ isInvalid: false,
+ isEmpty: true
}));
return id;
},
http://git-wip-us.apache.org/repos/asf/ambari/blob/c9fdccd9/ambari-web/app/messages.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js
index c97d2ad..7b032b3 100644
--- a/ambari-web/app/messages.js
+++ b/ambari-web/app/messages.js
@@ -2527,8 +2527,8 @@ Em.I18n.translations = {
'widget.clone.body': 'Are you sure you want to clone current widget {0}?',
'dashboard.widgets.wizard.step2.addMetrics': 'Add Metrics and operators here...',
- 'dashboard.widgets.wizard.step2.newMetric': '+ New Metric',
- 'dashboard.widgets.wizard.step2.newOperator': '+ New Operator',
+ 'dashboard.widgets.wizard.step2.newMetric': '+ Add Metric',
+ 'dashboard.widgets.wizard.step2.newOperator': '+ Add Operator',
'dashboard.widgets.wizard.step2.Component': 'Component',
'dashboard.widgets.wizard.step2.Metric': 'Metric',
'dashboard.widgets.wizard.step2.selectComponent': 'Select a Component',
@@ -2536,6 +2536,8 @@ Em.I18n.translations = {
'dashboard.widgets.wizard.step2.addMetric': 'Add Metric',
'dashboard.widgets.wizard.step2.aggregateFunction': 'Aggregator Function',
'dashboard.widgets.wizard.step2.aggregateTooltip': 'This mathematical function will be applied to compute single value for selected metric across all host components',
+ 'dashboard.widgets.wizard.step2.threshold.ok.tooltip': 'This is the threshold value at which the widget color changes from green (OK) to orange (Warning)',
+ 'dashboard.widgets.wizard.step2.threshold.warning.tooltip': 'This is the threshold value at which the widget color changes from orange (Warning) to red (Critical)',
'restart.service.all': 'Restart All',
'restart.service.all.affected': 'Restart All Affected',
http://git-wip-us.apache.org/repos/asf/ambari/blob/c9fdccd9/ambari-web/app/models/widget.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/models/widget.js b/ambari-web/app/models/widget.js
index be71b2f..5dbd685 100644
--- a/ambari-web/app/models/widget.js
+++ b/ambari-web/app/models/widget.js
@@ -93,7 +93,7 @@ App.WidgetType.FIXTURES = [
properties: [
{
name : 'threshold',
- isRequired: true,
+ isRequired: false,
smallValue: '0.7',
bigValue: '0.9'
}
@@ -116,7 +116,8 @@ App.WidgetType.FIXTURES = [
{
name : 'display_unit',
isRequired: false,
- value: 'MB'
+ value: '',
+ placeholder: 'Optional: MB, ms, etc.'
}
]
},
@@ -140,7 +141,8 @@ App.WidgetType.FIXTURES = [
{
name : 'display_unit',
isRequired: false,
- value: 'MB'
+ value: '',
+ placeholder: 'Optional: MB, ms, etc.'
}
]
},
@@ -154,7 +156,8 @@ App.WidgetType.FIXTURES = [
{
name : 'display_unit',
isRequired: false,
- value: 'MB'
+ value: '',
+ placeholder: 'Optional: MB, ms, etc.'
}
]
}
http://git-wip-us.apache.org/repos/asf/ambari/blob/c9fdccd9/ambari-web/app/models/widget_property.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/models/widget_property.js b/ambari-web/app/models/widget_property.js
index 1d5e27a..a2bdda9 100644
--- a/ambari-web/app/models/widget_property.js
+++ b/ambari-web/app/models/widget_property.js
@@ -214,33 +214,15 @@ App.WidgetPropertyTypes = [
* @returns {boolean}
*/
validate: function (value) {
- if (!this.get('isRequired') && !this.get('smallValue') && !this.get('bigValue')) {
+ if (!value) {
return true;
- } else if (!value) {
- return false;
}
value = ('' + value).trim();
return validator.isValidFloat(value) && value > this.get('MIN_VALUE') && value <= this.get('MAX_VALUE');
},
- thresholdError: function () {
- if (this.get('isSmallValueValid') && this.get('isBigValueValid')) {
- return Number(this.get('smallValue')) > Number(this.get('bigValue'));
- } else {
- return false;
- }
- }.property('smallValue', 'bigValue', 'isSmallValueValid', 'isBigValueValid'),
-
isValid: function () {
- return this.get('isSmallValueValid') && this.get('isBigValueValid') && (!this.get('thresholdError'));
- }.property( 'isSmallValueValid', 'isBigValueValid', 'thresholdError'),
-
- /**
- * Define whether warning threshold < critical threshold
- * @type {Boolean}
- */
- errorMsg: function () {
- return this.get('thresholdError') ? "Threshold 1 should be smaller than threshold 2" : null;
- }.property('thresholdError')
+ return this.get('isSmallValueValid') && this.get('isBigValueValid') ;
+ }.property( 'isSmallValueValid', 'isBigValueValid')
}
];
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/ambari/blob/c9fdccd9/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 2f9a190..3f1d497 100644
--- a/ambari-web/app/styles/enhanced_service_dashboard.less
+++ b/ambari-web/app/styles/enhanced_service_dashboard.less
@@ -273,13 +273,26 @@
}
}
.step2 {
+ .form-horizontal {
+ .control-label {
+ width: auto;
+ }
+ .controls {
+ margin-left: 130px;
+ .threshold-input {
+ width: 85px;
+ //margin-left: 0px;
+ }
+ }
+ }
.badge-container {
height: 26px;
+ width: 80px;
.OK, .WARNING, .CRITICAL {
line-height: 26px;
height: 26px;
display: inline-block;
- width: 70px;
+ width: 60px;
text-align: center;
}
.OK {
@@ -319,23 +332,16 @@
}
.placeholder {
color: #999999;
- margin: 50px;
- }
- .edit-link {
- padding: 5px;
- cursor: pointer;
- color: #555555;
- right: 10px;
- top: 10px;
- position: absolute;
+ padding: 50px;
}
.metric-field {
height: 100%;
+ background-color: #f5f5f5;
}
.metric-instance {
font-weight: bold;
cursor: pointer;
- background: #E6F1F6;
+ background: white;
display: inline-block;
margin: 10px 0 10px 10px;
padding: 5px;
@@ -355,7 +361,7 @@
}
}
.controls {
- background-color: white;
+ background-color: #f5f5f5;
padding: 0 5px;
border: 1px @border-color solid;
margin-right: 20px;
http://git-wip-us.apache.org/repos/asf/ambari/blob/c9fdccd9/ambari-web/app/templates/main/service/widgets/create/expression.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/widgets/create/expression.hbs b/ambari-web/app/templates/main/service/widgets/create/expression.hbs
index 47ef78d..a4b988f 100644
--- a/ambari-web/app/templates/main/service/widgets/create/expression.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/expression.hbs
@@ -16,44 +16,35 @@
* limitations under the License.
}}
-{{#if view.expression.editMode}}
- <div class="metric-field">
+
+<div class="metric-field">
+ {{#if view.expression.isRemovable}}
+ <a {{action removeExpression view.expression target="controller"}} class="remove-link"><i class="icon-trash"></i></a>
+ {{/if}}
+ {{#if view.expression.data.length}}
{{#each element in view.expression.data}}
<div class="metric-instance" {{bindAttr id="element.id"}}>{{element.name}}
<a href="#" {{action removeElement element target="view"}}><i class="icon-remove"></i></a>
</div>
{{/each}}
- </div>
- <div class="pull-left">
- <button class="btn btn-primary" {{action addMetric target="view"}}>{{t dashboard.widgets.wizard.step2.newMetric}}</button>
- <div class="btn-group pull-right">
- <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
- {{t dashboard.widgets.wizard.step2.newOperator}}
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu">
- {{#each operator in view.OPERATORS}}
- <li><a href="#" {{action addOperator operator target="view"}}>{{operator}}</a></li>
- {{/each}}
- </ul>
- </div>
- </div>
- <div {{bindAttr class="view.isInvalid:is-invalid :controls"}}>
- <button class="btn" {{action cancelEdit target="view"}}>{{t common.reset}}</button>
- <button class="btn btn-primary" {{action saveMetrics target="view"}} {{bindAttr disabled="view.isInvalid"}}>{{t common.done}}</button>
- </div>
-{{else}}
- <a {{action startEdit target="view"}} class="edit-link"><i class="icon-edit"></i></a>
- {{#if view.expression.isRemovable}}
- <a {{action removeExpression view.expression target="controller"}} class="remove-link"><i class="icon-trash"></i></a>
- {{/if}}
- {{#if view.expression.data.length}}
- <div class="metric-field">
- {{#each element in view.expression.data}}
- <div class="metric-instance">{{element.name}}</div>
- {{/each}}
- </div>
{{else}}
<div class="placeholder">{{t dashboard.widgets.wizard.step2.addMetrics}}</div>
{{/if}}
-{{/if}}
+</div>
+<div class="pull-left">
+ <button class="btn" {{action addMetric target="view"}}>{{t dashboard.widgets.wizard.step2.newMetric}}</button>
+ <div class="btn-group pull-right">
+ <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+ {{t dashboard.widgets.wizard.step2.newOperator}}
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ {{#each operator in view.OPERATORS}}
+ <li><a href="#" {{action addOperator operator target="view"}}>{{operator}}</a></li>
+ {{/each}}
+ </ul>
+ </div>
+</div>
+<div {{bindAttr class="view.isInvalid:is-invalid :controls"}}>
+ <button class="btn" {{action cancelEdit target="view"}}>{{t common.reset}}</button>
+</div>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/ambari/blob/c9fdccd9/ambari-web/app/templates/main/service/widgets/create/step2_graph.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/widgets/create/step2_graph.hbs b/ambari-web/app/templates/main/service/widgets/create/step2_graph.hbs
index 3013061..affc783 100644
--- a/ambari-web/app/templates/main/service/widgets/create/step2_graph.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/step2_graph.hbs
@@ -19,9 +19,6 @@
<h2>{{t widget.create.wizard.step2.header}}</h2>
<div class="alert alert-info">
{{t widget.create.wizard.step2.body.text}}
- <div class="alert alert-warning">
- {{t widget.create.wizard.step2.body.warning}}
- </div>
</div>
{{#each dataSet in dataSets}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/c9fdccd9/ambari-web/app/templates/main/service/widgets/create/step2_number.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/widgets/create/step2_number.hbs b/ambari-web/app/templates/main/service/widgets/create/step2_number.hbs
index 3225aa4..27fd7e4 100644
--- a/ambari-web/app/templates/main/service/widgets/create/step2_number.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/step2_number.hbs
@@ -19,9 +19,6 @@
<h2>{{t widget.create.wizard.step2.header}}</h2>
<div class="alert alert-info">
{{t widget.create.wizard.step2.body.text}}
- <div class="alert alert-warning">
- {{t widget.create.wizard.step2.body.warning}}
- </div>
</div>
{{#each expression in expressions}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/c9fdccd9/ambari-web/app/templates/main/service/widgets/create/step2_template.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/widgets/create/step2_template.hbs b/ambari-web/app/templates/main/service/widgets/create/step2_template.hbs
index f485f3c..84934f8 100644
--- a/ambari-web/app/templates/main/service/widgets/create/step2_template.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/step2_template.hbs
@@ -28,9 +28,6 @@
<div class="alert alert-info">
{{t widget.create.wizard.step2.body.text}}
- <div class="alert alert-warning">
- {{t widget.create.wizard.step2.body.warning}}
- </div>
</div>
{{#each expression in expressions}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/c9fdccd9/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 ac8b194..aedb964 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
@@ -18,11 +18,13 @@
<div>
<div class="span2 badge-container"><span {{bindAttr class=":label view.property.badgeOK"}}>{{view.property.badgeOK}}</span> </div>
- <div {{bindAttr class=":span2 property.isSmallValueValid::error"}}>
+ <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 property.isBigValueValid::error"}}>
+ <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>
http://git-wip-us.apache.org/repos/asf/ambari/blob/c9fdccd9/ambari-web/app/views/main/service/widgets/create/expression_view.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/service/widgets/create/expression_view.js b/ambari-web/app/views/main/service/widgets/create/expression_view.js
index 552fef9..a733cf8 100644
--- a/ambari-web/app/views/main/service/widgets/create/expression_view.js
+++ b/ambari-web/app/views/main/service/widgets/create/expression_view.js
@@ -81,10 +81,8 @@ App.WidgetWizardExpressionView = Em.View.extend({
/**
* enable metric edit area
*/
- startEdit: function () {
+ didInsertElement: function () {
var self = this;
- this.set('dataBefore', this.get('expression.data').slice(0));
- this.set('expression.editMode', true);
this.propertyDidChange('expression');
Em.run.next(function () {
$(self.get('element')).find('.metric-field').sortable({
@@ -102,16 +100,7 @@ App.WidgetWizardExpressionView = Em.View.extend({
* discard changes and disable metric edit area
*/
cancelEdit: function () {
- this.set('expression.data', this.get('dataBefore'));
- this.set('expression.editMode', false);
- this.propertyDidChange('expression');
- },
-
- /**
- * save changes and disable metric edit area
- */
- saveMetrics: function () {
- this.set('expression.editMode', false);
+ this.set('expression.data', []);
this.propertyDidChange('expression');
},
@@ -148,6 +137,8 @@ App.WidgetWizardExpressionView = Em.View.extend({
}
this.set('isInvalid', isInvalid);
+ this.set('expression.isInvalid', isInvalid);
+ this.set('expression.isEmpty', this.get('expression.data.length') == 0);
if (!isInvalid) this.get('controller').updateExpressions();
}.observes('expression.data.length'),
http://git-wip-us.apache.org/repos/asf/ambari/blob/c9fdccd9/ambari-web/app/views/main/service/widgets/create/step2_view.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/service/widgets/create/step2_view.js b/ambari-web/app/views/main/service/widgets/create/step2_view.js
index a9aeb5f..2fbbbe3 100644
--- a/ambari-web/app/views/main/service/widgets/create/step2_view.js
+++ b/ambari-web/app/views/main/service/widgets/create/step2_view.js
@@ -41,8 +41,15 @@ App.WidgetWizardStep2View = Em.View.extend({
}
}.property('controller.content.widgetType'),
+ ensureTooltip: function () {
+ Em.run.later(this, function () {
+ App.tooltip($("[rel='threshold-tooltip']"));
+ }, 500);
+ }.observes(''),
+
didInsertElement: function () {
var controller = this.get('controller');
+ this.ensureTooltip();
controller.initWidgetData();
controller.renderProperties();
controller.updateExpressions();
@@ -52,6 +59,7 @@ App.WidgetWizardStep2View = Em.View.extend({
App.WidgetPropertyTextFieldView = Em.TextField.extend({
valueBinding: 'property.value',
+ placeholderBinding: 'property.placeholder',
classNameBindings: ['property.classNames', 'parentView.basicClass']
});