AMBARI-10231 Implement checkbox and other existing controls for enhanced-configs. (ababiichuk)

ambari-web/app/styles/application.less

@@ -5586,6 +5586,9 @@ input[type="checkbox"].align-checkbox {
           border-spacing: 5px;
           border-collapse: separate;
           table-layout: fixed;
+          .config-subsection {
+            vertical-align: top;
+          }
         }
       }
     }

ambari-web/app/styles/widgets.less

@@ -151,3 +151,9 @@
     margin-left: @undo-btn-margin;
   }
 }
+
+.checkbox-widget {
+  .widget-config-label {
+    margin-left: 10px;
+  }
+}

ambari-web/app/templates/common/configs/restore_config.hbs

@@ -0,0 +1,23 @@
+{{!
+* 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.
+}}
+
+{{#if view.visible}}
+  <a class="btn btn-small" href="#" {{action "restoreValue" target="view.parentView"}}>
+    <i class="icon-undo"></i>
+  </a>
+{{/if}}

ambari-web/app/templates/common/configs/service_config_layout_tab.hbs

@@ -31,7 +31,6 @@
                       {{#each config in subsection.configs}}
                         {{#if config.view}}
                           {{#unless config.isHiddenByFilter}}
-                            <p>{{config.name}}</p>
                             {{view config.widget configBinding="config"}}
                           {{/unless}}
                         {{/if}}
@@ -46,4 +45,4 @@
       </tr>
     {{/each}}
   </table>
-</div>
+</div>

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

@@ -0,0 +1,24 @@
+{{!
+* 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.
+}}
+
+<label class="pull-left">
+  {{view view.configView class="pull-left"}}
+  <span class="widget-config-label">{{view.configLabel}}</span>
+</label>
+{{view App.RestoreConfigView}}
+<div class="clearfix"></div>

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

@@ -16,7 +16,7 @@
 * limitations under the License.
 }}
 
-<p>{{view.config.name}}</p>
+<p>{{view.configLabel}}</p>
 <div class="input-append pull-left">
   {{view Em.TextField valueBinding="view.content.value" disabled="disabled"}}
   <div class="dropdown btn-group">
@@ -32,11 +32,5 @@
     </ul>
   </div>
 </div>
-{{#if view.valueIsChanged}}
-  <div class="action-button pull-left">
-    <a class="btn btn-small" href="#" {{action "restoreValue" target="view"}}>
-      <i class="icon-undo"></i>
-    </a>
-  </div>
-{{/if}}
+{{view App.RestoreConfigView}}
 <div class="clearfix"></div>

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

@@ -0,0 +1,26 @@
+{{!
+* 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.
+}}
+<div class="span10">
+  <span class="widget-config-label">{{view.config.displayName}}</span>
+  {{view view.configView}}
+</div>
+{{view App.RestoreConfigView}}
+<div class="clearfix"></div>
+{{#if view.configErrorMessage}}
+  <p class="text-error">{{view.configErrorMessage}}</p>
+{{/if}}

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

@@ -17,7 +17,7 @@
 }}
 
 <div class="widget list-widget">
-  {{view.config.name}}
+  {{view.configLabel}}
   <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/slider_config_widget.hbs

@@ -17,6 +17,9 @@
 }}
 
 <div class="widget slider-widget">
+  {{#if view.config.isOriginalSCP}}
+    <p>{{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"}}>
@@ -26,13 +29,7 @@
         {{/if}}
       </div>
     </div>
-    {{#if view.undoAllowed}}
-      <div class="pull-left action-button">
-        <a class="btn btn-small" href="#" {{action "restoreValue" target="view"}}>
-          <i class="icon-undo"></i>
-        </a>
-      </div>
-    {{/if}}
+    {{view App.RestoreConfigView visibleBinding="view.undoAllowed"}}
     {{#if view.overrideAllowed}}
       {{#isAccessible ADMIN}}
         <div class="pull-left action-button">
@@ -56,4 +53,4 @@
     }}
   {{/if}}
   <div class="clearfix"></div>
-</div>
+</div>

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

@@ -0,0 +1,26 @@
+{{!
+* 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.
+}}
+
+<div class="pull-left">
+  <p class="widget-config-label">{{view.configLabel}}</p>
+  {{view view.configView}}
+</div>
+{{view App.RestoreConfigView}}
+{{#if view.configErrorMessage}}
+  <p class="text-error">{{view.configErrorMessage}}</p>
+{{/if}}

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

@@ -15,7 +15,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-
+<p class="widget-config-label">{{view.configLabel}}</p>
 {{#each spinnerContent in view.content}}
   {{view App.SpinnerInputView contentBinding="spinnerContent" disabledBinding="view.disabled"}}
 {{/each}}

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

@@ -16,15 +16,9 @@
 * limitations under the License.
 }}
 
-<p>{{view.config.name}}</p>
+<p>{{view.configLabel}}</p>
 <div class="pull-left">
   {{view Ember.Checkbox checkedBinding="view.switcherValue"}}
 </div>
-{{#if view.valueIsChanged}}
-  <div class="pull-left action-button">
-    <a class="btn btn-small" href="#" {{action "restoreValue" target="view"}}>
-      <i class="icon-undo"></i>
-    </a>
-  </div>
-{{/if}}
+{{view App.RestoreConfigView}}
 <div class="clearfix"></div>

ambari-web/app/views.js

@@ -51,11 +51,15 @@ require('views/common/configs/service_config_tab_view');
 require('views/common/configs/overriddenProperty_view');
 require('views/common/configs/compare_property_view');
 require('views/common/configs/config_history_flow');
+require('views/common/configs/restore_config_view');
 require('views/common/configs/custom_category_views/notification_configs_view');
 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');
 require('views/common/configs/widgets/combo_config_widget_view');
 require('views/common/configs/widgets/list_config_widget_view');
 require('views/common/configs/widgets/slider_config_widget_view');
+require('views/common/configs/widgets/string_config_widget_view');
 require('views/common/configs/widgets/time_interval_spinner_view');
 require('views/common/configs/widgets/toggle_config_widget_view');
 require('views/common/configs/widgets/overrides/slider_config_widget_override_view');

ambari-web/app/views/common/configs/restore_config_view.js

@@ -0,0 +1,29 @@
+/**
+ * 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');
+
+/**
+ * Restore config button view.
+ * @type {Em.View}
+ */
+App.RestoreConfigView = Em.View.extend({
+  templateName: require('templates/common/configs/restore_config'),
+  classNames: ['pull-left', 'action-button'],
+  visibleBinding: 'parentView.valueIsChanged'
+});

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

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+
+require('views/common/controls_view');
+
+var App = require('app');
+/**
+ * Checkbox config widget for enhanced configs.
+ * @type {Em.View}
+ */
+App.CheckboxConfigWidgetView = App.ConfigWidgetView.extend({
+  templateName: require('templates/common/configs/widgets/checkbox_config_widget'),
+  classNames: ['widget-config', 'checkbox-widget'],
+
+  configView: App.ServiceConfigCheckbox.extend({
+    serviceConfigBinding: 'parentView.config',
+    // @TODO maybe find use case of this method for widget
+    focusIn: function() {}
+  })
+});

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

@@ -29,6 +29,23 @@ App.ConfigWidgetView = Em.View.extend({
    */
   config: null,
 
+  /**
+   * Config name to display.
+   * @type {String}
+   */
+  configLabel: function() {
+    return this.get('config.displayName') || this.get('config.name');
+  }.property('config.name', 'config.displayName'),
+
+
+  /**
+   * Error message computed in config property model
+   * @type {String|Boolean}
+   */
+  configErrorMessage: function() {
+    return this.get('config.errorMessage') || false;
+  }.property('config.errorMessage'),
+
   /**
    * Determines if config-value was changed
    * @type {boolean}

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

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+
+require('views/common/controls_view');
+
+var App = require('app');
+
+App.DirectoryConfigWidgetView = App.ConfigWidgetView.extend({
+  templateName: require('templates/common/configs/widgets/directory_config_widget'),
+  classNames: ['widget-config', 'directory-widget'],
+
+  /**
+   * Control to edit value.
+   *
+   * @type {App.ServiceConfigTextArea}
+   * @property configView
+   */
+  configView: App.ServiceConfigTextArea.extend({
+    widthClass: 'span12',
+    serviceConfigBinding: 'parentView.config',
+    popoverPlacement: 'top'
+  }),
+
+  didInsertElement: function() {
+    this.set('config.displayType', 'directories');
+  }
+
+
+});

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

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+
+require('views/common/controls_view');
+
+var App = require('app');
+
+App.StringConfigWidgetView = App.ConfigWidgetView.extend({
+  templateName: require('templates/common/configs/widgets/string_config_widget'),
+  classNames: ['widget-config', 'string-widget'],
+
+  /**
+   * Control to edit value.
+   *
+   * @type {App.ServiceConfigTextArea}
+   * @property configView
+   */
+  configView: App.ServiceConfigTextArea.extend({
+    widthClass: 'span12',
+    serviceConfigBinding: 'parentView.config',
+    popoverPlacement: 'top'
+  })
+});

ambari-web/app/views/common/controls_view.js

@@ -30,6 +30,7 @@ App.ServiceConfigPopoverSupport = Ember.Mixin.create({
   serviceConfig: null,
   attributeBindings:['readOnly'],
   isPopoverEnabled: true,
+  popoverPlacement: 'right',
 
   didInsertElement: function () {
     $('body').tooltip({
@@ -44,7 +45,7 @@ App.ServiceConfigPopoverSupport = Ember.Mixin.create({
           (this.get('serviceConfig.displayName') == this.get('serviceConfig.name')) ? '' : this.get('serviceConfig.name')
         ),
         content: this.get('serviceConfig.description'),
-        placement: 'right',
+        placement: this.get('popoverPlacement'),
         trigger: 'hover'
       });
     }
@@ -205,7 +206,9 @@ App.ServiceConfigTextArea = Ember.TextArea.extend(App.ServiceConfigPopoverSuppor
 
   valueBinding: 'serviceConfig.value',
   rows: 4,
-  classNames: ['span9', 'directories']
+  classNames: ['directories'],
+  classNameBindings: ['widthClass'],
+  widthClass: 'span9'
 });
 
 /**
@@ -1442,4 +1445,3 @@ App.BaseUrlTextField = Ember.TextField.extend({
   }
 
 });
-