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/25 02:13:54 UTC
ambari git commit: AMBARI-10744. Create Widget Wizard - Add Metric
popup UI changes.(XIWANG)
Repository: ambari
Updated Branches:
refs/heads/trunk ed3e8ca48 -> 27eae30dd
AMBARI-10744. Create Widget Wizard - Add Metric popup 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/27eae30d
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/27eae30d
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/27eae30d
Branch: refs/heads/trunk
Commit: 27eae30ddb849a65dd7f660bd5fd5c8e30e8941d
Parents: ed3e8ca
Author: Xi Wang <xi...@apache.org>
Authored: Fri Apr 24 16:46:24 2015 -0700
Committer: Xi Wang <xi...@apache.org>
Committed: Fri Apr 24 17:13:25 2015 -0700
----------------------------------------------------------------------
ambari-web/app/messages.js | 2 +
.../app/styles/enhanced_service_dashboard.less | 73 +++++++++++++++++++-
.../service/widgets/create/step2_add_metric.hbs | 21 +++---
.../service/widgets/create/expression_view.js | 7 +-
4 files changed, 90 insertions(+), 13 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/27eae30d/ambari-web/app/messages.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js
index 00e0f3f..6404f5e 100644
--- a/ambari-web/app/messages.js
+++ b/ambari-web/app/messages.js
@@ -2523,6 +2523,8 @@ Em.I18n.translations = {
'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.Component': 'Component',
+ 'dashboard.widgets.wizard.step2.Metric': 'Metric',
'dashboard.widgets.wizard.step2.selectComponent': 'Select a Component',
'dashboard.widgets.wizard.step2.selectMetric': 'Select a Metric',
'dashboard.widgets.wizard.step2.addMetric': 'Add Metric',
http://git-wip-us.apache.org/repos/asf/ambari/blob/27eae30d/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 99508bf..852eccb 100644
--- a/ambari-web/app/styles/enhanced_service_dashboard.less
+++ b/ambari-web/app/styles/enhanced_service_dashboard.less
@@ -407,6 +407,14 @@
}
}
+.add-metric-modal.modal-690px-width {
+ .modal {
+ max-height: 600px;
+ .modal-body {
+ min-height: 380px;;
+ }
+ }
+}
#add-metric-popup {
min-height: 200px;
div.row-fluid {
@@ -416,12 +424,24 @@
}
}
.component-select {
+ .btn.dropdown-toggle {
+ border-radius: 4px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ width: 220px;
+ text-align: left;
+ white-space: normal;
+ }
+ ul.dropdown-menu {
+ overflow: auto;
+ max-height: 280px;
+ }
.accordion-group {
border: none;
}
.accordion-toggle {
text-decoration: none;
- padding-bottom: 0;
+ padding: 3px 15px;
.icon-caret-down {
width: 10px;
display: inline-block;
@@ -432,7 +452,6 @@
}
.accordion-toggle.collapsed {
text-decoration: none;
- padding-bottom: 0;
.icon-caret-down {
display: none;
}
@@ -456,6 +475,56 @@
background: transparent;
}
}
+ .chosen-container-single {
+ width: 250px;
+ .chosen-single {
+ height: 30px;
+ line-height: 20px;
+ color: #333333;
+ font-size: 14px;
+ padding: 4px 14px;
+ border-radius: 4px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ background-color: #f5f5f5;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+ background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+ background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+ background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+ background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+ background-repeat: repeat-x;
+ border: 1px solid #bbbbbb;
+ span {
+ margin-right: 8px;
+ }
+ div b {
+ background: none;
+ width: 0;
+ height: 0;
+ top: 13px;
+ left: -3px;
+ position: relative;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid #333333;
+ }
+ }
+
+ .chosen-drop {
+ margin-top: 2px;
+ overflow: auto;
+ width: 300px;
+ max-height: 280px;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ -webkit-border-radius: 0px;
+ -moz-border-radius: 0px;
+ border-radius: 0px;
+ -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ }
+ }
+
}
.sixty-percent-width-modal.widgets-browser-popup {
http://git-wip-us.apache.org/repos/asf/ambari/blob/27eae30d/ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs b/ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs
index 503e45e..2b9c184 100644
--- a/ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs
+++ b/ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs
@@ -17,25 +17,30 @@
}}
<div class="row-fluid">
- <div class="span3">{{t dashboard.widgets.wizard.step2.selectComponent}}</div>
+ <div class="span3">{{t dashboard.widgets.wizard.step2.Component}}</div>
<div class="btn-group component-select span5">
- <button class="btn">{{t dashboard.widgets.wizard.step2.selectComponent}}</button>
- <button class="btn dropdown-toggle" data-toggle="dropdown">
- <span class="caret"></span>
- </button>
+ {{#if view.selectedComponent}}
+ <button class="btn dropdown-toggle" data-toggle="dropdown">
+ {{view.selectedComponent.displayName}}<span class="caret pull-right"></span>
+ </button>
+ {{else}}
+ <button class="btn dropdown-toggle" data-toggle="dropdown">
+ {{t dashboard.widgets.wizard.step2.selectComponent}}<span class="caret pull-right"></span>
+ </button>
+ {{/if}}
<ul class="dropdown-menu accordion" id="accordion2">
{{#each service in view.componentMap}}
<li class="accordion-group keep-open">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" {{bindAttr href="service.href"}}>
- <i class="icon-caret-down"></i><i class="icon-caret-right"></i>{{service.displayName}} ({{service.count}})
+ <i class="icon-caret-down"></i><i class="icon-caret-right"></i>{{service.displayName}}
</a>
</div>
<div {{bindAttr id="service.serviceName"}} class="accordion-body collapse">
<ul class="accordion-inner">
{{#each component in service.components}}
<li>
- <a href="#" {{action selectComponents component target="view"}}> {{component.displayName}} ({{component.count}})</a>
+ <a href="#" {{action selectComponents component target="view"}}> {{component.displayName}}</a>
</li>
{{/each}}
</ul>
@@ -47,7 +52,7 @@
</div>
<div class="row-fluid">
- <div class="span3">{{t dashboard.widgets.wizard.step2.selectMetric}}</div>
+ <div class="span3">{{t dashboard.widgets.wizard.step2.Metric}}</div>
<div class="span9">
<select class="chosen-select">
{{#each metric in view.selectedComponent.metrics}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/27eae30d/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 43c68c4..0b4e1f2 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
@@ -157,10 +157,11 @@ App.WidgetWizardExpressionView = Em.View.extend({
addMetric: function () {
return App.ModalPopup.show({
header: Em.I18n.t('dashboard.widgets.wizard.step2.addMetric'),
- classNames: ['modal-690px-width'],
+ classNames: ['modal-690px-width', 'add-metric-modal'],
disablePrimary: function () {
return Em.isNone(this.get('selectedMetric'));
}.property('selectedMetric'),
+ isHideBodyScroll: true,
expression: this.get('expression'),
/**
@@ -185,7 +186,7 @@ App.WidgetWizardExpressionView = Em.View.extend({
});
$(".chosen-select").chosen({
- placeholder_text: Em.I18n.t('widget.create.wizard.step2.noMetricFound'),
+ placeholder_text: Em.I18n.t('dashboard.widgets.wizard.step2.selectMetric'),
no_results_text: Em.I18n.t('widget.create.wizard.step2.noMetricFound')
}).change(function (event, obj) {
self.set('parentView.selectedMetric', Em.Object.create({
@@ -289,7 +290,7 @@ App.WidgetWizardExpressionView = Em.View.extend({
return result;
}.property('controller.filteredMetrics')
}),
- primary: Em.I18n.t('common.save'),
+ primary: Em.I18n.t('common.add'),
onPrimary: function () {
var data = this.get('expression.data');
var id = (data.length > 0) ? Math.max.apply(this, data.mapProperty('id')) + 1 : 1;