Browse Source

AMBARI-10298. YARN service configs should look just like mockups (onechiporenko)

Oleg Nechiporenko 10 năm trước cách đây
mục cha
commit
b54cfb8d09
18 tập tin đã thay đổi với 129 bổ sung40 xóa
  1. 2 0
      ambari-web/app/mixins.js
  2. 65 0
      ambari-web/app/mixins/main/service/configs/widget_popover_support.js
  3. 24 2
      ambari-web/app/styles/widgets.less
  4. 1 1
      ambari-web/app/templates/common/configs/service_config_layout_tab.hbs
  5. 1 1
      ambari-web/app/templates/common/configs/widgets/combo_config_widget.hbs
  6. 1 1
      ambari-web/app/templates/common/configs/widgets/comparison/slider_config_widget_comparison.hbs
  7. 1 1
      ambari-web/app/templates/common/configs/widgets/list_config_widget.hbs
  8. 1 1
      ambari-web/app/templates/common/configs/widgets/overrides/slider_config_widget_override.hbs
  9. 19 29
      ambari-web/app/templates/common/configs/widgets/slider_config_widget.hbs
  10. 1 1
      ambari-web/app/templates/common/configs/widgets/toggle_config_widget.hbs
  11. 1 1
      ambari-web/app/views/common/configs/widgets/config_widget_view.js
  12. 1 0
      ambari-web/app/views/common/configs/widgets/slider_config_widget_view.js
  13. 3 1
      ambari-web/test/views/common/configs/widgets/combo_config_widget_view_test.js
  14. 1 0
      ambari-web/test/views/common/configs/widgets/config_widget_view_test.js
  15. 1 0
      ambari-web/test/views/common/configs/widgets/list_config_widget_view_test.js
  16. 2 0
      ambari-web/test/views/common/configs/widgets/slider_config_widget_view_test.js
  17. 3 1
      ambari-web/test/views/common/configs/widgets/time_interval_spinner_view_test.js
  18. 1 0
      ambari-web/test/views/common/configs/widgets/toggle_config_widget_view_test.js

+ 2 - 0
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');

+ 65 - 0
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');
+  }
+
+});

+ 24 - 2
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 {

+ 1 - 1
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>

+ 1 - 1
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">

+ 1 - 1
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>

+ 1 - 1
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}}

+ 1 - 1
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"}}

+ 19 - 29
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>

+ 1 - 1
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>

+ 1 - 1
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}

+ 1 - 0
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();
   },
 
   /**

+ 3 - 1
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() {

+ 1 - 0
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,

+ 1 - 0
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',

+ 2 - 0
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,

+ 3 - 1
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 = [
       {

+ 1 - 0
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',