AMBARI-10800 Provide escape-hatch textfield input to all enhanced-config widgets. (ababiichuk)

ambari-web/app/messages.js

@@ -2604,6 +2604,7 @@ Em.I18n.translations = {
   'config.group.save.confirmation.manage.button': 'Manage Hosts',
   'config.group.description.default': 'New configuration group created on {0}',
 
+  'config.infoMessage.wrong.value.for.widget': 'Config value can\'t be converted to widget value',
   'config.warnMessage.outOfBoundaries.greater': 'Values greater than {0} are not recommended',
   'config.warnMessage.outOfBoundaries.less': 'Values smaller than {0} are not recommended',
 

ambari-web/app/templates/common/configs/widgets/combo_config_widget.hbs

@@ -19,7 +19,7 @@
   <div class="clearfix"></div>
   <p class="widget-config-label">{{view.configLabel}}</p>
 {{/if}}
-<div {{bindAttr class=":pull-left view.isOriginalSCP:original-widget view.disabled:disabled"}}>
+<div {{bindAttr class=":pull-left view.isOriginalSCP:original-widget view.disabled:disabled view.showAsTextBox:hide"}}>
   <div class="input-append">
     <div class="dropdown btn-group">
       {{view Em.TextField valueBinding="view.content.value" disabled="disabled"}}

ambari-web/app/templates/common/configs/widgets/controls.hbs

@@ -17,8 +17,19 @@
 }}
 
 {{#if view.canEdit}}
+  {{#if view.supportSwitchToCheckBox}}
+    <div {{bindAttr class="view.showAsTextBox::hide :left"}}>
+      {{view App.PlainConfigTextField serviceConfigBinding="view.config"}}
+    </div>
+  {{/if}}
   <div class="widget-config-controls">
     <div class="widget-col left">
+      {{#if view.supportSwitchToCheckBox}}
+        <a href="#"
+          {{bindAttr class=":icon-pencil view.isHover::hide"}}
+          {{action "toggleWidgetView" target="view"}}>
+        </a>
+      {{/if}}
       {{view view.issueView configBinding="view.config"}}
       {{#if view.config.isNotDefaultValue}}
         {{#if view.undoAllowed}}

ambari-web/app/templates/common/configs/widgets/list_config_widget.hbs

@@ -22,7 +22,7 @@
     <p class="widget-config-label">{{view.configLabel}}</p>
   {{/if}}
   <div class="pull-left btn-group">
-    <a {{bindAttr class=":btn :dropdown-toggle view.config.isEditable::disabled"}} data-toggle="dropdown">{{view.displayVal}} <span class="caret"></span></a>
+    <a {{bindAttr class=":btn :dropdown-toggle view.config.isEditable::disabled view.showAsTextBox:hide"}} data-toggle="dropdown">{{view.displayVal}} <span class="caret"></span></a>
     <ul class="dropdown-menu">
       {{#each option in view.options}}
         <li>

ambari-web/app/templates/common/configs/widgets/slider_config_widget.hbs

@@ -21,8 +21,8 @@
     <div class="clearfix"></div>
     <p class="widget-config-label">{{formatWordBreak view.configLabel}}</p>
   {{/if}}
-  <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>
-    {{template "templates/common/configs/widgets/controls"}}
+  <div {{bindAttr class="view.isOriginalSCP:original-widget view.showAsTextBox:hide :ui-slider-wrapper"}}>
+    <div {{bindAttr class=":pull-left :ui-slider-wrapper-inner"}}>{{view Ember.TextField valueBinding="view.config.value" class="input-mini slider-input"}}</div>
   </div>
+  {{template "templates/common/configs/widgets/controls"}}
 </div>

ambari-web/app/templates/common/configs/widgets/time_interval_spinner.hbs

@@ -20,7 +20,7 @@
   <div class="clearfix"></div>
   <p class="widget-config-label">{{view.configLabel}}</p>
 {{/if}}
-<div {{bindAttr class=":pull-left view.isOriginalSCP:original-widget"}}>
+<div {{bindAttr class=":pull-left view.isOriginalSCP:original-widget view.showAsTextBox:hide"}}>
   {{#each spinnerContent in view.content}}
     {{view App.SpinnerInputView contentBinding="spinnerContent" disabledBinding="view.disabled"}}
   {{/each}}

ambari-web/app/views.js

@@ -52,6 +52,7 @@ require('views/common/configs/compare_property_view');
 require('views/common/configs/config_history_flow');
 require('views/common/configs/selectable_popup_body_view');
 require('views/common/configs/custom_category_views/notification_configs_view');
+require('views/common/configs/widgets/plain_config_text_field');
 require('views/common/configs/widgets/config_widget_view');
 require('views/common/configs/widgets/checkbox_config_widget_view');
 require('views/common/configs/widgets/directory_config_widget_view');

ambari-web/app/views/common/configs/widgets/combo_config_widget_view.js

@@ -26,6 +26,7 @@ App.ComboConfigWidgetView = App.ConfigWidgetView.extend({
   templateName: require('templates/common/configs/widgets/combo_config_widget'),
   classNames: ['widget-config', 'combo-widget'],
 
+  supportSwitchToCheckBox: true,
   /**
    * Object with following structure:
    * {String} .value - value in widget format
@@ -123,6 +124,14 @@ App.ComboConfigWidgetView = App.ConfigWidgetView.extend({
       $(event.target).closest('.dropdown').toggleClass('open');
       return false;
     }
+  },
+
+  setValue: function() {
+    this.setConfigValue({ context: this.get('config.value') });
+  },
+
+  isValueCompatibleWithWidget: function() {
+    return this.get('content.valuesList').someProperty('configValue', this.get('config.value'));
   }
 
 });

ambari-web/app/views/common/configs/widgets/config_widget_view.js

@@ -71,6 +71,17 @@ App.ConfigWidgetView = Em.View.extend(App.SupportsDependentConfigs, App.WidgetPo
    */
   subSection: null,
 
+  /**
+   * true if text filed is shown
+   * @type {boolean}
+   */
+  showAsTextBox: false,
+
+  /**
+   * @type {boolean}
+   */
+  supportSwitchToCheckBox: false,
+
   /**
    * Alias to <code>config.isOriginalSCP</code>
    * Should be used in the templates
@@ -231,6 +242,47 @@ App.ConfigWidgetView = Em.View.extend(App.SupportsDependentConfigs, App.WidgetPo
    */
   configGroup: function() {
     return !this.get('config.group') || this.get('config.group.isDefault') ? false : this.get('config.group');
-  }.property('config.group.name')
+  }.property('config.group.name'),
+
+  /**
+   * switcher to display config as widget or text field
+   * @method toggleWidgetView
+   */
+  toggleWidgetView: function() {
+    if (this.get('showAsTextBox')) {
+      this.textBoxToWidget();
+    } else {
+      this.widgetToTextBox();
+    }
+  },
+
+  /**
+   * switch display of config to text field
+   * @method widgetToTextBox
+   */
+  widgetToTextBox: function() {
+    this.set("showAsTextBox", true);
+  },
+
+  /**
+   * switch display of config to widget
+   * @method textBoxToWidget
+   */
+  textBoxToWidget: function() {
+    if (this.isValueCompatibleWithWidget()) {
+      this.setValue(this.get('config.value'));
+      this.set("showAsTextBox", false);
+    } else {
+      App.showAlertPopup(Em.I18n.t('common.warning'), Em.I18n.t('config.infoMessage.wrong.value.for.widget'));
+    }
+  },
+
+  /**
+   * check if config value can be converted to config widget value
+   * @returns {boolean}
+   */
+  isValueCompatibleWithWidget: function() {
+    return true
+  }
 
 });

ambari-web/app/views/common/configs/widgets/list_config_widget_view.js

@@ -41,6 +41,8 @@ var configOption = Em.Object.extend({
  */
 App.ListConfigWidgetView = App.ConfigWidgetView.extend({
 
+  supportSwitchToCheckBox: true,
+
   /**
    * Counter used to determine order of options selection (<code>order<code>-field in the <code>configOption</code>)
    * Greater number - later selection
@@ -252,6 +254,14 @@ App.ListConfigWidgetView = App.ConfigWidgetView.extend({
       var option = this.get('parentView.options').findProperty('value', this.get('value'));
       this.get('parentView').toggleOption({context: option});
     }
-  })
+  }),
+
+  setValue: function() {
+    this.calculateInitVal();
+  },
+
+  isValueCompatibleWithWidget: function() {
+    return this.get('options').someProperty('value', this.get('config.value'));
+  }
 
 });

ambari-web/app/views/common/configs/widgets/plain_config_text_field.js

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+/**
+ * Default input control
+ * @type {*}
+ */
+
+var App = require('app');
+require('views/common/controls_view');
+
+App.PlainConfigTextField = Ember.TextField.extend(App.SupportsDependentConfigs, {
+
+  valueBinding: 'serviceConfig.value',
+  classNames: ['span10'],
+  placeholderBinding: 'serviceConfig.defaultValue',
+
+  focusOut: function () {
+    this.sendRequestRorDependentConfigs(this.get('serviceConfig'));
+  }
+
+});

ambari-web/app/views/common/configs/widgets/slider_config_widget_view.js

@@ -29,6 +29,8 @@ App.SliderConfigWidgetView = App.ConfigWidgetView.extend({
 
   templateName: require('templates/common/configs/widgets/slider_config_widget'),
 
+  supportSwitchToCheckBox: true,
+
   /**
    * Slider-object created on the <code>initSlider</code>
    * @type {Object}
@@ -109,14 +111,20 @@ App.SliderConfigWidgetView = App.ConfigWidgetView.extend({
     return parseFunction(this.widgetValueByConfigAttributes(this.get('config.recommendedValue')));
   }.property('config.recommendedValue'),
 
+  units: ['b', 'kb', 'mb', 'gb', 'tb', 'pb'],
   /**
    * unit type of widget
    * @type {String}
    */
-  unitType: function() {
-    return this.get('config.stackConfigProperty.widget.units.length') && this.get('config.stackConfigProperty.widget.units')[0]['unit-name'];
-  }.property('config.stackConfigProperty.widget.units.@each.unit-name'),
-
+   unitType: function() {
+     var widgetUnit = this.get('config.stackConfigProperty.widget.units.length') && this.get('config.stackConfigProperty.widget.units')[0]['unit-name'].toLowerCase();
+     var configUnit = this.get('config.stackConfigProperty.valueAttributes.type').toLowerCase();
+     if (widgetUnit) {
+      return this.get('units').indexOf(widgetUnit) > this.get('units').indexOf(configUnit) ? 'float' : this.get('config.stackConfigProperty.valueAttributes.type')
+     } else {
+      return 'float';
+     }
+   }.property('config.stackConfigProperty.widget.units.@each.unit-name'),
   /**
    * Function used to parse widget mirror value
    * For integer - parseInt, for float - parseFloat
@@ -437,6 +445,22 @@ App.SliderConfigWidgetView = App.ConfigWidgetView.extend({
         self.changeBoundariesOnce();
       }, 10);
     }
-  }.observes('parentView.content.isActive', 'parentView.parentView.tab.isActive')
+  }.observes('parentView.content.isActive', 'parentView.parentView.tab.isActive'),
+
+  isValueCompatibleWithWidget: function() {
+    var configValue = this.get('parseFunction')(this.get('config.value'));
+    if (this.get('config.stackConfigProperty.valueAttributes.minimum')) {
+      var min = this.get('parseFunction')(this.get('config.stackConfigProperty.valueAttributes.minimum'));
+      if (configValue < min) return false;
+    }
+    if (this.get('config.stackConfigProperty.valueAttributes.maximum')) {
+      var max = this.get('parseFunction')(this.get('config.stackConfigProperty.valueAttributes.maximum'));
+      if (configValue > max) return false;
+    }
+    if (this.get('config.stackConfigProperty.valueAttributes.step')) {
+      if (configValue % this.get('config.stackConfigProperty.valueAttributes.increment_step') != 0) return false;
+    }
+    return true
+  }
 
 });

ambari-web/app/views/common/configs/widgets/time_interval_spinner_view.js

@@ -22,6 +22,8 @@ App.TimeIntervalSpinnerView = App.ConfigWidgetView.extend({
   templateName: require('templates/common/configs/widgets/time_interval_spinner'),
   classNames: ['widget-config', 'spinner-input-widget'],
 
+  supportSwitchToCheckBox: true,
+
   /**
    * @property isValid
    * @type {Boolean}
@@ -228,5 +230,25 @@ App.TimeIntervalSpinnerView = App.ConfigWidgetView.extend({
     this._super();
     this.set('content', this.generateWidgetValue(this.get('config.defaultValue')));
     this.parseIncrement();
+  },
+
+  setValue: function() {
+    this.set('content', this.generateWidgetValue(this.get('config.value')));
+  },
+
+  isValueCompatibleWithWidget: function() {
+    var configValue = parseInt(this.get('config.value'));
+    if (this.get('config.stackConfigProperty.valueAttributes.minimum')) {
+      var min = parseInt(this.get('config.stackConfigProperty.valueAttributes.minimum'));
+      if (configValue < min) return false;
+    }
+    if (this.get('config.stackConfigProperty.valueAttributes.maximum')) {
+      var max = parseInt(this.get('config.stackConfigProperty.valueAttributes.maximum'));
+      if (configValue > max) return false;
+    }
+    if (this.get('config.stackConfigProperty.valueAttributes.step')) {
+      if (configValue % this.get('config.stackConfigProperty.valueAttributes.increment_step') != 0) return false;
+    }
+    return true
   }
 });