Repository: ambari Updated Branches: refs/heads/trunk 694ff41af -> b54cfb8d0
AMBARI-10298. YARN service configs should look just like mockups (onechiporenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/b54cfb8d Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/b54cfb8d Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/b54cfb8d Branch: refs/heads/trunk Commit: b54cfb8d09568c6de607641ea8fffb94043e8128 Parents: 694ff41 Author: Oleg Nechiporenko <[email protected]> Authored: Wed Apr 1 16:11:17 2015 +0300 Committer: Oleg Nechiporenko <[email protected]> Committed: Wed Apr 1 16:11:17 2015 +0300 ---------------------------------------------------------------------- ambari-web/app/mixins.js | 2 + .../service/configs/widget_popover_support.js | 65 ++++++++++++++++++++ ambari-web/app/styles/widgets.less | 26 +++++++- .../configs/service_config_layout_tab.hbs | 2 +- .../configs/widgets/combo_config_widget.hbs | 2 +- .../slider_config_widget_comparison.hbs | 2 +- .../configs/widgets/list_config_widget.hbs | 2 +- .../overrides/slider_config_widget_override.hbs | 2 +- .../configs/widgets/slider_config_widget.hbs | 48 ++++++--------- .../configs/widgets/toggle_config_widget.hbs | 2 +- .../configs/widgets/config_widget_view.js | 2 +- .../widgets/slider_config_widget_view.js | 1 + .../widgets/combo_config_widget_view_test.js | 4 +- .../configs/widgets/config_widget_view_test.js | 1 + .../widgets/list_config_widget_view_test.js | 1 + .../widgets/slider_config_widget_view_test.js | 2 + .../widgets/time_interval_spinner_view_test.js | 4 +- .../widgets/toggle_config_widget_view_test.js | 1 + 18 files changed, 129 insertions(+), 40 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/app/mixins.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/mixins.js b/ambari-web/app/mixins.js index 260ecae..04aed32 100644 --- a/ambari-web/app/mixins.js +++ b/ambari-web/app/mixins.js @@ -27,8 +27,10 @@ require('mixins/common/serverValidator'); require('mixins/common/table_server_view_mixin'); require('mixins/common/table_server_mixin'); require('mixins/main/host/details/host_components/decommissionable'); +//require('mixins/main/service/themes_support'); require('mixins/main/service/configs/config_overridable'); require('mixins/main/service/configs/preload_requests_chain'); +require('mixins/main/service/configs/widget_popover_support'); require('mixins/routers/redirections'); require('mixins/wizard/wizardProgressPageController'); require('mixins/wizard/wizardDeployProgressController'); http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/app/mixins/main/service/configs/widget_popover_support.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/mixins/main/service/configs/widget_popover_support.js b/ambari-web/app/mixins/main/service/configs/widget_popover_support.js new file mode 100644 index 0000000..0068f47 --- /dev/null +++ b/ambari-web/app/mixins/main/service/configs/widget_popover_support.js @@ -0,0 +1,65 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var App = require('app'); + +/** + * Popover for configs widgets + * Usage: + * <code> + * didInsertElement: function () { + * this._super(); + * this.initPopover(); + * } + * </code> + * @type {Em.Mixin} + */ +App.WidgetPopoverSupport = Em.Mixin.create({ + + /** + * Should popover be on the page + * @type {boolean} + */ + isPopoverEnabled: true, + + /** + * Where popover should be displayed - top|left|right|bottom + * @type {string} + */ + popoverPlacement: 'right', + + initPopover: function () { + // if description for this config not exist, then no need to show popover + if (this.get('isPopoverEnabled') !== 'false' && this.get('config.description')) { + App.popover(this.$('.original-widget'), { + title: Em.I18n.t('installer.controls.serviceConfigPopover.title').format( + this.get('configLabel'), + (this.get('config.displayName') == this.get('config.name')) ? '' : this.get('config.name') + ), + content: this.get('config.description'), + placement: this.get('popoverPlacement'), + trigger: 'hover' + }); + } + }, + + willDestroyElement: function() { + this.$().popover('destroy'); + } + +}); http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/app/styles/widgets.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/widgets.less b/ambari-web/app/styles/widgets.less index 0be2f2f..8088bef 100644 --- a/ambari-web/app/styles/widgets.less +++ b/ambari-web/app/styles/widgets.less @@ -17,12 +17,22 @@ */ @import 'common.less'; -@undo-btn-margin: 20px; +@undo-btn-margin: 10px; @combo-widget-width: 100px; .widget { + + margin-bottom: 30px; + + .widget { + margin-bottom: 0; + } + + .widget-config-label { + font-size: 90%; + } .action-button { - margin-left: @undo-btn-margin; + margin-right: @undo-btn-margin; } } @@ -75,6 +85,18 @@ border-radius: 11px; box-shadow: none; } + + .ui-slider-wrapper { + height: 40px; + .ui-slider-wrapper-inner { + width: 70%; + margin-right: 10px; + } + .ui-slider-label { + line-height: 35px; + } + } + } .slider-disabled { .slider-selection { http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/app/templates/common/configs/service_config_layout_tab.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/service_config_layout_tab.hbs b/ambari-web/app/templates/common/configs/service_config_layout_tab.hbs index ecf2e23..e6878aa 100644 --- a/ambari-web/app/templates/common/configs/service_config_layout_tab.hbs +++ b/ambari-web/app/templates/common/configs/service_config_layout_tab.hbs @@ -22,7 +22,7 @@ <tr> {{#each section in row}} <td {{bindAttr class="section.isHiddenByFilter:invisible :config-section" colspan="section.columnSpan" rowspan="section.rowSpan"}}> - <h3>{{section.displayName}}</h3> + <h4>{{section.displayName}}</h4> <table class="config-subsection-table"> {{#each subRow in section.subsectionRows}} <tr> http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/app/templates/common/configs/widgets/combo_config_widget.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/widgets/combo_config_widget.hbs b/ambari-web/app/templates/common/configs/widgets/combo_config_widget.hbs index 8646967..cf12229 100644 --- a/ambari-web/app/templates/common/configs/widgets/combo_config_widget.hbs +++ b/ambari-web/app/templates/common/configs/widgets/combo_config_widget.hbs @@ -16,7 +16,7 @@ * limitations under the License. }} -<p>{{view.configLabel}}</p> +<p class="widget-config-label">{{view.configLabel}}</p> <div class="input-append pull-left"> {{view Em.TextField valueBinding="view.content.value" disabled="disabled"}} <div class="dropdown btn-group"> http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/app/templates/common/configs/widgets/comparison/slider_config_widget_comparison.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/widgets/comparison/slider_config_widget_comparison.hbs b/ambari-web/app/templates/common/configs/widgets/comparison/slider_config_widget_comparison.hbs index dbe8203..0688c44 100644 --- a/ambari-web/app/templates/common/configs/widgets/comparison/slider_config_widget_comparison.hbs +++ b/ambari-web/app/templates/common/configs/widgets/comparison/slider_config_widget_comparison.hbs @@ -18,7 +18,7 @@ {{#each compareConfig in view.serviceConfigProperty.compareConfigs}} <div {{bindAttr class=":control-group :overrideField"}}> - {{view App.SliderConfigWidgetView configBinding="compareConfig" categoryConfigsAllBinding="view.parentView.categoryConfigsAll"}} + {{view App.SliderConfigWidgetView configBinding="compareConfig" categoryConfigsAllBinding="view.parentView.categoryConfigsAll" isPopoverEnabled="false"}} <span class="label label-info">{{compareConfig.serviceVersion.versionText}}</span> {{#if compareConfig.serviceVersion.isCurrent}} <span class="label label-success">{{t common.current}}</span> http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/app/templates/common/configs/widgets/list_config_widget.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/widgets/list_config_widget.hbs b/ambari-web/app/templates/common/configs/widgets/list_config_widget.hbs index 91ebd15..9268b24 100644 --- a/ambari-web/app/templates/common/configs/widgets/list_config_widget.hbs +++ b/ambari-web/app/templates/common/configs/widgets/list_config_widget.hbs @@ -17,7 +17,7 @@ }} <div {{bindAttr class="view.config.isHiddenByFilter:hide :widget :list-widget"}}> - {{view.configLabel}} + <p class="widget-config-label">{{view.configLabel}}</p> <div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown">{{view.displayVal}} <span class="caret"></span></a> {{#if view.valueIsChanged}} http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/app/templates/common/configs/widgets/overrides/slider_config_widget_override.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/widgets/overrides/slider_config_widget_override.hbs b/ambari-web/app/templates/common/configs/widgets/overrides/slider_config_widget_override.hbs index 66236ac..1ea0404 100644 --- a/ambari-web/app/templates/common/configs/widgets/overrides/slider_config_widget_override.hbs +++ b/ambari-web/app/templates/common/configs/widgets/overrides/slider_config_widget_override.hbs @@ -18,7 +18,7 @@ {{#each overriddenSCP in view.serviceConfigProperty.overrides}} {{! Here serviceConfigBinding should ideally be serviceConfigPropertyBinding }} <div {{bindAttr class="overriddenSCP.errorMessage:error: :control-group :overrideField"}}> - {{view App.SliderConfigWidgetView configBinding="overriddenSCP"}} + {{view App.SliderConfigWidgetView configBinding="overriddenSCP" isPopoverEnabled="false"}} {{#if overriddenSCP.supportsFinal}} <a href="#" data-toggle="tooltip" {{bindAttr class=":btn :btn-small :btn-final overriddenSCP.isFinal:active overriddenSCP.hideFinalIcon:hidden" disabled="overriddenSCP.isNotEditable"}} http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/app/templates/common/configs/widgets/slider_config_widget.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/widgets/slider_config_widget.hbs b/ambari-web/app/templates/common/configs/widgets/slider_config_widget.hbs index e4e7f24..dbcf076 100644 --- a/ambari-web/app/templates/common/configs/widgets/slider_config_widget.hbs +++ b/ambari-web/app/templates/common/configs/widgets/slider_config_widget.hbs @@ -19,35 +19,27 @@ <div {{bindAttr class="view.config.isHiddenByFilter:hide :widget :slider-widget"}}> {{#if view.isOriginalSCP}} - <p>{{formatWordBreak view.configLabel}}</p> + <p class="widget-config-label">{{formatWordBreak view.configLabel}}</p> {{/if}} - <div> - <div {{bindAttr class="view.isMirrorValueValid::error :control-group :pull-left"}}> - <div {{bindAttr class="view.config.stackConfigProperty.valueAttributes.unit:input-append"}}> - {{view view.MirrorValueView valueBinding="view.mirrorValue" class="input-mini" disabledBinding="view.disabled"}} - {{#if view.config.stackConfigProperty.valueAttributes.unit}} - <span class="add-on">{{view.config.stackConfigProperty.valueAttributes.unit}}</span> - {{/if}} - </div> - </div> - {{#if view.isOriginalSCP}} - {{view App.RestoreConfigView visibleBinding="view.undoAllowed"}} - {{/if}} - {{#if view.overrideAllowed}} - {{#isAccessible ADMIN}} - <div class="pull-left action-button"> - <a class="btn btn-small" href="#" data-toggle="tooltip" - {{action "createOverrideProperty" view.config target="view.parentView"}} - {{translateAttr data-original-title="common.override"}}> - <i class="icon-plus-sign"></i> - </a> - </div> - {{/isAccessible}} - {{/if}} - <div class="clearfix"></div> + <div {{bindAttr class="view.isOriginalSCP:original-widget :ui-slider-wrapper"}}> + <div class="pull-left ui-slider-wrapper-inner">{{view Ember.TextField valueBinding="view.config.value" class="input-mini slider-input"}}</div> + <div class="pull-right ui-slider-label">{{view.mirrorValue}} {{view.config.stackConfigProperty.valueAttributes.unit}}</div> </div> - <div class="ui-slider-wrapper"> - {{view Ember.TextField valueBinding="view.config.value" class="input-mini slider-input"}} + <div class="clearfix"> + {{#if view.isOriginalSCP}} + {{view App.RestoreConfigView visibleBinding="view.undoAllowed"}} + {{/if}} + {{#if view.overrideAllowed}} + {{#isAccessible ADMIN}} + <div class="pull-left action-button"> + <a class="btn btn-small" href="#" data-toggle="tooltip" + {{action "createOverrideProperty" view.config target="view.parentView"}} + {{translateAttr data-original-title="common.override"}}> + <i class="icon-plus-sign"></i> + </a> + </div> + {{/isAccessible}} + {{/if}} </div> {{#if view.isComparison}} @@ -73,6 +65,4 @@ {{#if view.isComparison}} {{view App.SliderConfigWidgetComparisonView serviceConfigPropertyBinding="view.config"}} {{/if}} - - <div class="clearfix"></div> </div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/app/templates/common/configs/widgets/toggle_config_widget.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/widgets/toggle_config_widget.hbs b/ambari-web/app/templates/common/configs/widgets/toggle_config_widget.hbs index f592d58..ab5986e 100644 --- a/ambari-web/app/templates/common/configs/widgets/toggle_config_widget.hbs +++ b/ambari-web/app/templates/common/configs/widgets/toggle_config_widget.hbs @@ -16,7 +16,7 @@ * limitations under the License. }} -<p>{{view.configLabel}}</p> +<p class="widget-config-label">{{view.configLabel}}</p> <div class="pull-left"> {{view Ember.Checkbox checkedBinding="view.switcherValue"}} </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/app/views/common/configs/widgets/config_widget_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/configs/widgets/config_widget_view.js b/ambari-web/app/views/common/configs/widgets/config_widget_view.js index 3a9844f..ba6b958 100644 --- a/ambari-web/app/views/common/configs/widgets/config_widget_view.js +++ b/ambari-web/app/views/common/configs/widgets/config_widget_view.js @@ -22,7 +22,7 @@ require('views/common/controls_view'); * Common view for config widgets * @type {Em.View} */ -App.ConfigWidgetView = Em.View.extend(App.SupportsDependentConfigs, { +App.ConfigWidgetView = Em.View.extend(App.SupportsDependentConfigs, App.WidgetPopoverSupport, { /** * @type {App.ConfigProperty} http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/app/views/common/configs/widgets/slider_config_widget_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/configs/widgets/slider_config_widget_view.js b/ambari-web/app/views/common/configs/widgets/slider_config_widget_view.js index 1182ccd..472d38c 100644 --- a/ambari-web/app/views/common/configs/widgets/slider_config_widget_view.js +++ b/ambari-web/app/views/common/configs/widgets/slider_config_widget_view.js @@ -93,6 +93,7 @@ App.SliderConfigWidgetView = App.ConfigWidgetView.extend({ this.prepareValueAttributes(); this.initSlider(); this.toggleWidgetState(); + this.initPopover(); }, /** http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/test/views/common/configs/widgets/combo_config_widget_view_test.js ---------------------------------------------------------------------- diff --git a/ambari-web/test/views/common/configs/widgets/combo_config_widget_view_test.js b/ambari-web/test/views/common/configs/widgets/combo_config_widget_view_test.js index e6f231c..6c0eb55 100644 --- a/ambari-web/test/views/common/configs/widgets/combo_config_widget_view_test.js +++ b/ambari-web/test/views/common/configs/widgets/combo_config_widget_view_test.js @@ -21,7 +21,9 @@ var App = require('app'); describe('App.ComboConfigWidgetView', function() { beforeEach(function() { - this.view = App.ComboConfigWidgetView.create({}); + this.view = App.ComboConfigWidgetView.create({ + initPopover: Em.K + }); }); afterEach(function() { http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/test/views/common/configs/widgets/config_widget_view_test.js ---------------------------------------------------------------------- diff --git a/ambari-web/test/views/common/configs/widgets/config_widget_view_test.js b/ambari-web/test/views/common/configs/widgets/config_widget_view_test.js index ad85aaf..9d0f7db 100644 --- a/ambari-web/test/views/common/configs/widgets/config_widget_view_test.js +++ b/ambari-web/test/views/common/configs/widgets/config_widget_view_test.js @@ -23,6 +23,7 @@ describe('App.ConfigWidgetView', function () { beforeEach(function () { view = App.ConfigWidgetView.create({ + initPopover: Em.K, config: Em.Object.create({ isOriginalSCP: false, isPropertyOverridable: false, http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/test/views/common/configs/widgets/list_config_widget_view_test.js ---------------------------------------------------------------------- diff --git a/ambari-web/test/views/common/configs/widgets/list_config_widget_view_test.js b/ambari-web/test/views/common/configs/widgets/list_config_widget_view_test.js index 4e7fb81..a64bf11 100644 --- a/ambari-web/test/views/common/configs/widgets/list_config_widget_view_test.js +++ b/ambari-web/test/views/common/configs/widgets/list_config_widget_view_test.js @@ -24,6 +24,7 @@ describe('App.ListConfigWidgetView', function () { beforeEach(function () { view = App.ListConfigWidgetView.create({ + initPopover: Em.K, config: Em.Object.create({ name: 'a.b.c', defaultValue: '2,1', http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/test/views/common/configs/widgets/slider_config_widget_view_test.js ---------------------------------------------------------------------- diff --git a/ambari-web/test/views/common/configs/widgets/slider_config_widget_view_test.js b/ambari-web/test/views/common/configs/widgets/slider_config_widget_view_test.js index 34a254f..e9cda26 100644 --- a/ambari-web/test/views/common/configs/widgets/slider_config_widget_view_test.js +++ b/ambari-web/test/views/common/configs/widgets/slider_config_widget_view_test.js @@ -25,6 +25,7 @@ describe('App.SliderConfigWidgetView', function () { beforeEach(function () { viewInt = App.SliderConfigWidgetView.create({ initSlider: Em.K, + initPopover: Em.K, slider: { enable: Em.K, disable: Em.K, @@ -49,6 +50,7 @@ describe('App.SliderConfigWidgetView', function () { viewInt.didInsertElement(); viewFloat = App.SliderConfigWidgetView.create({ initSlider: Em.K, + initPopover: Em.K, slider: { enable: Em.K, disable: Em.K, http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/test/views/common/configs/widgets/time_interval_spinner_view_test.js ---------------------------------------------------------------------- diff --git a/ambari-web/test/views/common/configs/widgets/time_interval_spinner_view_test.js b/ambari-web/test/views/common/configs/widgets/time_interval_spinner_view_test.js index c7a4486..ad47839 100644 --- a/ambari-web/test/views/common/configs/widgets/time_interval_spinner_view_test.js +++ b/ambari-web/test/views/common/configs/widgets/time_interval_spinner_view_test.js @@ -22,7 +22,9 @@ describe('App.TimeIntervalSpinnerView', function() { describe('#convertToWidgetUnits', function(){ beforeEach(function() { - this.view = App.TimeIntervalSpinnerView.create({}); + this.view = App.TimeIntervalSpinnerView.create({ + initPopover: Em.K + }); }); var tests = [ { http://git-wip-us.apache.org/repos/asf/ambari/blob/b54cfb8d/ambari-web/test/views/common/configs/widgets/toggle_config_widget_view_test.js ---------------------------------------------------------------------- diff --git a/ambari-web/test/views/common/configs/widgets/toggle_config_widget_view_test.js b/ambari-web/test/views/common/configs/widgets/toggle_config_widget_view_test.js index d2db911..d048472 100644 --- a/ambari-web/test/views/common/configs/widgets/toggle_config_widget_view_test.js +++ b/ambari-web/test/views/common/configs/widgets/toggle_config_widget_view_test.js @@ -24,6 +24,7 @@ describe('App.ToggleConfigWidgetView', function () { this.view = App.ToggleConfigWidgetView.create({ initSwitcher: Em.K, + initPopover: Em.K, config: Em.Object.create({ name: 'a.b.c', value: 'true',
