AMBARI-10512. Action buttons should be on the right side of the widgets (onechiporenko)

ambari-web/app/controllers/wizard/step7_controller.js

@@ -1081,7 +1081,7 @@ App.WizardStep7Controller = Em.Controller.extend(App.ServerValidatorMixin, App.E
     var newSCP = App.ServiceConfigProperty.create(serviceConfigProperty);
     var group = this.get('selectedService.configGroups').findProperty('name', this.get('selectedConfigGroup.name'));
     newSCP.set('group', group);
-    newSCP.set('value', '');
+    newSCP.set('value', serviceConfigProperty.get('widget') ? serviceConfigProperty.get('value') : '');
     newSCP.set('isOriginalSCP', false); // indicated this is overridden value,
     newSCP.set('parentSCP', serviceConfigProperty);
     newSCP.set('isEditable', true);

ambari-web/app/styles/widgets.less

@@ -51,13 +51,10 @@
   }
   .widget-config-controls {
     display: inline-block;
-    margin-left: 20px;
+    margin-left: 10px;
     .widget-action {
       text-decoration: none;
       display: block;
-      &.not-show {
-          display: none;
-      }
     }
     .widget-action-final {
       color: @widget-config-override-action-color;
@@ -193,7 +190,9 @@
       line-height: 35px;
     }
   }
-
+  .overrideField {
+    margin-top: 30px;
+  }
 }
 .slider-disabled {
   .slider-track-high {

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

@@ -1,23 +0,0 @@
-{{!
-* 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/widgets/checkbox_config_widget.hbs

@@ -15,7 +15,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-<div>
+<div class="pull-left">
   <label>
     {{view view.configView class="pull-left"}}
     {{#if view.isOriginalSCP}}

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

@@ -18,7 +18,7 @@
 {{#if view.isOriginalSCP}}
   <p class="widget-config-label">{{view.configLabel}}</p>
 {{/if}}
-<div {{bindAttr class="view.isOriginalSCP:original-widget"}}>
+<div {{bindAttr class=":pull-left view.isOriginalSCP:original-widget"}}>
   <div class="input-append">
     <div class="dropdown btn-group">
       {{view Em.TextField valueBinding="view.content.value" disabled="disabled"}}
@@ -35,4 +35,4 @@
     </div>
   </div>
 </div>
-{{template "templates/common/configs/widgets/controls"}}
+{{template "templates/common/configs/widgets/controls"}}

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

@@ -15,11 +15,12 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
+
 {{#if view.canEdit}}
   <div class="widget-config-controls">
     {{#if view.config.supportsFinal}}
       <a href="#" data-toggle="tooltip"
-        {{bindAttr class=":widget-action :widget-action-final view.config.isFinal:active view.showFinalConfig:show:not-show" disabled="view.config.isNotEditable"}}
+        {{bindAttr class=":widget-action :widget-action-final view.config.isFinal:active view.showFinalConfig:show:hide" disabled="view.config.isNotEditable"}}
         {{action "toggleFinalFlag" view.config target="view"}}
         {{translateAttr data-original-title="services.service.config.final"}}>
         <i class="icon-lock"></i>
@@ -27,7 +28,7 @@
     {{/if}}
     {{#if view.overrideAllowed}}
       {{#isAccessible ADMIN}}
-        <div {{bindAttr class=":widget-action :widget-action-override view.isHover:show:not-show"}}>
+        <div {{bindAttr class=":widget-action :widget-action-override view.isHover:show:hide"}}>
           <a class="widget-action widget-action-override" href="#" data-toggle="tooltip"
             {{action "createOverrideProperty" view.config target="view.parentView"}}
             {{translateAttr data-original-title="common.override"}}>
@@ -36,11 +37,35 @@
         </div>
       {{/isAccessible}}
     {{/if}}
-    {{#if view.isOriginalSCP}}
-      {{view App.RestoreConfigView visibleBinding="view.undoAllowed"}}
+    {{#unless view.isOriginalSCP}}
+      {{#isAccessible ADMIN}}
+        <a {{bindAttr class=":widget-action :widget-action-remove view.isHover:show:hide"}} href="#" data-toggle="tooltip"
+          {{action "removeOverride" view.config target="view.parentView"}}
+          {{translateAttr data-original-title="common.remove"}}>
+          <i class="icon-minus-sign"></i>
+        </a>
+      {{/isAccessible}}
+    {{/unless}}
+    {{#if view.config.isNotDefaultValue}}
+      {{#if view.undoAllowed}}
+        <a class="btn btn-small" href="#" {{action "restoreValue" target="view"}}>
+          <i class="icon-undo"></i>
+        </a>
+      {{/if}}
     {{/if}}
   </div>
+  <div class="clearfix"></div>
 {{/if}}
+
+{{#if controller.selectedConfigGroup.isDefault}}
+  {{#if view.configGroup}}
+    <a href="#" data-toggle="tooltip" {{bindAttr data-original-title="view.configGroup.switchGroupTextFull" }}
+       class="action" {{action selectConfigGroup view.configGroup target="controller"}}>
+      {{view.configGroup.switchGroupTextShort}}
+    </a>
+  {{/if}}
+{{/if}}
+
 {{#if view.isComparison}}
   <div class="widget-config-controls">
   {{#if controller.selectedConfigGroup.isDefault}}
@@ -55,6 +80,8 @@
   {{/if}}
   </div>
 {{/if}}
+
+
 {{#if view.isOriginalSCP}}
   {{view App.ConfigWidgetOverrideView
   serviceConfigPropertyBinding="view.config"

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

@@ -20,15 +20,8 @@
   {{#if view.isOriginalSCP}}
     <p class="widget-config-label">{{view.configLabel}}</p>
   {{/if}}
-  <div class="btn-group">
+  <div class="pull-left btn-group">
     <a class="btn dropdown-toggle" data-toggle="dropdown">{{view.displayVal}} <span class="caret"></span></a>
-    {{#if view.valueIsChanged}}
-      <div class="undo-button">
-        <a class="btn btn-small" href="#" {{action "restoreValue" target="view"}}>
-          <i class="icon-undo"></i>
-        </a>
-      </div>
-    {{/if}}
     <ul class="dropdown-menu">
       {{#each option in view.options}}
         <li>
@@ -41,4 +34,5 @@
       {{/each}}
     </ul>
   </div>
-{{template "templates/common/configs/widgets/controls"}}
+  {{template "templates/common/configs/widgets/controls"}}
+</div>

ambari-web/app/templates/common/configs/widgets/overrides/config_widget_override.hbs

@@ -19,48 +19,9 @@
 {{! Here serviceConfigBinding should ideally be serviceConfigPropertyBinding }}
   <div {{bindAttr class="overriddenSCP.errorMessage:error: :control-group :overrideField"}}>
     {{view view.serviceConfigProperty.widget configBinding="overriddenSCP" isPopoverEnabled="false"}}
-    <div {{bindAttr class=":widget-config-controls view.parentView.isHover:show:not-show"}}>
-      {{#if overriddenSCP.supportsFinal}}
-        <a href="#" data-toggle="tooltip"
-          {{bindAttr class=":widget-action :widget-action-final overriddenSCP.isFinal:active overriddenSCP.hideFinalIcon:hidden" disabled="overriddenSCP.isNotEditable"}}
-          {{action "toggleFinalFlag" overriddenSCP target="view"}}
-          {{translateAttr data-original-title="services.service.config.final"}}>
-          <i class="icon-lock"></i>
-        </a>
-      {{/if}}
-      {{#if view.isDefaultGroupSelected}}
-        {{#if overriddenSCP.group}}
-          <a href="#" data-toggle="tooltip" {{bindAttr data-original-title="overriddenSCP.group.switchGroupTextFull" }}
-             class="action" {{action selectConfigGroup overriddenSCP.group target="controller"}}>
-            {{overriddenSCP.group.switchGroupTextShort}}
-          </a>
-        {{/if}}
-      {{else}}
-        {{#if overriddenSCP.isEditable}}
-          {{#if isNotDefaultValue}}
-            <a class="btn btn-small" href="#" data-toggle="tooltip"
-              {{action "doRestoreDefaultValue" overriddenSCP target="view"}}
-              {{translateAttr data-original-title="common.undo"}}>
-              <i class="icon-undo"></i>
-            </a>
-          {{/if}}
-          {{#isAccessible ADMIN}}
-            <a class="widget-action widget-action-remove" href="#" data-toggle="tooltip"
-              {{action "removeOverride" overriddenSCP target="view"}}
-              {{translateAttr data-original-title="common.remove"}}>
-              <i class="icon-minus-sign"></i>
-            </a>
-            <div class="clearfix"></div>
-          {{/isAccessible}}
-        {{else}}
-          <a class="action">{{overriddenSCP.group.switchGroupTextShort}}</a> <i class="icon-spinner"></i>
-        {{/if}}
-      {{/if}}
-    </div>
     {{#if overriddenSCP.isEditable}}
       {{#if overriddenSCP.errorMessage}}
-        <div class="clearfix"></div>
-        <span class="help-inline">{{overriddenSCP.errorMessage}}</span>
+        <p class="text-error">{{overriddenSCP.errorMessage}}</p>
       {{/if}}
     {{/if}}
   </div>

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

@@ -22,8 +22,6 @@
   {{/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>
-    {{#if view.isOriginalSCP}}
-      {{template "templates/common/configs/widgets/controls"}}
-    {{/if}}
+    {{template "templates/common/configs/widgets/controls"}}
   </div>
 </div>

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

@@ -19,10 +19,10 @@
 {{#if view.isOriginalSCP}}
   <p class="widget-config-label">{{view.configLabel}}</p>
 {{/if}}
-<div {{bindAttr class="view.isOriginalSCP:original-widget"}}>
+<div {{bindAttr class=":pull-left view.isOriginalSCP:original-widget"}}>
   {{#each spinnerContent in view.content}}
     {{view App.SpinnerInputView contentBinding="spinnerContent" disabledBinding="view.disabled"}}
   {{/each}}
   <div class="clearfix"></div>
 </div>
-{{template "templates/common/configs/widgets/controls"}}
+{{template "templates/common/configs/widgets/controls"}}

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

@@ -19,7 +19,7 @@
 {{#if view.isOriginalSCP}}
   <p class="widget-config-label">{{view.configLabel}}</p>
 {{/if}}
-<div {{bindAttr class="view.isOriginalSCP:original-widget"}}>
+<div {{bindAttr class=":pull-left view.isOriginalSCP:original-widget"}}>
   {{view Ember.Checkbox checkedBinding="view.switcherValue"}}
 </div>
-{{template "templates/common/configs/widgets/controls"}}
+{{template "templates/common/configs/widgets/controls"}}

ambari-web/app/views.js

@@ -50,7 +50,6 @@ 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/selectable_popup_body_view');
 require('views/common/configs/custom_category_views/notification_configs_view');
 require('views/common/configs/widgets/config_widget_view');

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

@@ -1,30 +0,0 @@
-/**
- * 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',
-  classNameBindings: ['parentView.isHover:show:not-show']
-});

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

@@ -133,8 +133,9 @@ App.ConfigWidgetView = Em.View.extend(App.SupportsDependentConfigs, App.WidgetPo
   undoAllowed: function () {
     var config = this.get('config');
     if (!config) return false;
+    if (!this.get('isOriginalSCP') || this.get('disabled')) return false;
     return !config.get('cantBeUndone') && config.get('isNotDefaultValue');
-  }.property('config.cantBeUndone', 'config.isNotDefaultValue'),
+  }.property('config.cantBeUndone', 'config.isNotDefaultValue', 'isOriginalSCP', 'disabled'),
 
   showFinalConfig: function () {
     var config = this.get('config');
@@ -176,5 +177,15 @@ App.ConfigWidgetView = Em.View.extend(App.SupportsDependentConfigs, App.WidgetPo
    * for now used in slider widget
    * @abstract
    */
-  setValue: Em.K
+  setValue: Em.K,
+
+  /**
+   * Config group bound property. Needed for correct render process in template.
+   *
+   * @returns {App.ConfigGroup|Boolean}
+   */
+  configGroup: function() {
+    return !this.get('config.group') || this.get('config.group.isDefault') ? false : this.get('config.group');
+  }.property('config.group.name')
+
 });

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

@@ -20,7 +20,7 @@ var App = require('app');
 
 App.RadioButtonConfigWidgetView = App.ConfigWidgetView.extend({
   templateName: require('templates/common/configs/widgets/radio_button_config'),
-  classNames: ['widget', 'radio-button-widget'],
+  classNames: ['widget-config', 'radio-button-widget'],
 
   /**
    * Content for radio buttons has following structure:

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

@@ -269,7 +269,10 @@ App.SliderConfigWidgetView = App.ConfigWidgetView.extend({
       ticks: ticks,
       tooltip: 'always',
       ticks_labels: ticksLabels,
-      step: this.get('mirrorStep')
+      step: this.get('mirrorStep'),
+      formatter: function(val) {
+        return val + self.get('unitLabel');
+      }
     });
 
     slider.on('change', function (obj) {

ambari-web/test/views/common/configs/widgets/config_widget_view_test.js

@@ -41,6 +41,10 @@ describe('App.ConfigWidgetView', function () {
           cantBeUndone: false,
           isNotDefaultValue: false
         },
+        view: {
+          disabled: false,
+          isOriginalSCP: false
+        },
         e: false
       },
       {
@@ -48,6 +52,10 @@ describe('App.ConfigWidgetView', function () {
           cantBeUndone: true,
           isNotDefaultValue: false
         },
+        view: {
+          disabled: false,
+          isOriginalSCP: false
+        },
         e: false
       },
       {
@@ -55,6 +63,10 @@ describe('App.ConfigWidgetView', function () {
           cantBeUndone: false,
           isNotDefaultValue: true
         },
+        view: {
+          disabled: false,
+          isOriginalSCP: true
+        },
         e: true
       },
       {
@@ -62,11 +74,16 @@ describe('App.ConfigWidgetView', function () {
           cantBeUndone: true,
           isNotDefaultValue: true
         },
+        view: {
+          disabled: true,
+          isOriginalSCP: false
+        },
         e: false
       }
     ]).forEach(function (test, index) {
         it('test #' + index, function () {
           view.get('config').setProperties(test.cfg);
+          view.setProperties(test.view);
           expect(view.get('undoAllowed')).to.equal(test.e);
         });
       });