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

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');

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

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 {

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>

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

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>

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

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

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>

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>

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}

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

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() {

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,

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',

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,

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 = [
       {

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',