AMBARI-10375. Editing configs in config-group running into weird situations - Slider widget enhancement

ambari-web/app/controllers/main/service/manage_config_groups_controller.js

@@ -846,19 +846,6 @@ App.ManageConfigGroupsController = Em.Controller.extend(App.ConfigOverridable, {
 
       didInsertElement: Em.K
     });
-  },
-
-  /**
-   * Persist config groups created in step7 wizard controller
-   * @method persistConfigGroups
-   */
-  persistConfigGroups: function () {
-    var installerController = App.router.get('installerController');
-    var step7Controller = App.router.get('wizardStep7Controller');
-    installerController.saveServiceConfigGroups(step7Controller, step7Controller.get('content.controllerName') == 'addServiceController');
-    App.clusterStatus.setClusterStatus({
-      localdb: App.db.data
-    });
   }
 
 });

ambari-web/app/mixins/main/service/configs/config_overridable.js

@@ -429,6 +429,19 @@ App.ConfigOverridable = Em.Mixin.create({
         this.hide();
       }
     });
+  },
+
+  /**
+   * Persist config groups created in step7 wizard controller
+   * @method persistConfigGroups
+   */
+  persistConfigGroups: function () {
+    var installerController = App.router.get('installerController');
+    var step7Controller = App.router.get('wizardStep7Controller');
+    installerController.saveServiceConfigGroups(step7Controller, step7Controller.get('content.controllerName') == 'addServiceController');
+    App.clusterStatus.setClusterStatus({
+      localdb: App.db.data
+    });
   }
 
-});
+});

ambari-web/app/mixins/unit_convert/convert_unit_widget_view_mixin.js

@@ -37,11 +37,11 @@ App.ConvertUnitWidgetViewMixin = Em.Mixin.create(App.BaseUnitConvertMixin, {
    * Get converted value according to config property unit format from specified widget value.
    *
    * @param {String|Number|Object[]} value - widget value to convert
-   * @returns {Number}
+   * @returns {String}
    * @method configValueByWidget
    */
   configValueByWidget: function(value) {
-    return this.convertValue(value, this._converterGetWidgetUnits(), this._converterGetPropertyAttributes());
+    return '' + this.convertValue(value, this._converterGetWidgetUnits(), this._converterGetPropertyAttributes());
   },
 
   /**

ambari-web/app/styles/widgets.less

@@ -19,19 +19,53 @@
 
 @undo-btn-margin: 10px;
 @combo-widget-width: 100px;
+@green: #6ebd45;
 
-.widget-config {
+@slider-widget-border-color: #999;
+@slider-widget-width: 220px;
+@slider-widget-tooltip-background-color: @green;
+@slider-widget-selection-background-color: @green;
+@slider-widget-body-height: 10px;
+@slider-widget-body-background-color: #ccc;
+@slider-widget-tick-height: 8px;
+@slider-widget-tick-width: 1px;
+@slider-widget-tick-background-color: #808080;
+@slider-widget-tick-label-color: #aaa;
+@slider-widget-tooltip-background: @slider-widget-tooltip-background-color;
+@slider-widget-disabled-selection-background-color: lighten(@slider-widget-selection-background-color, 20%);
+@widget-config-override-action-color: #cbcbcb;
+@widget-config-override-action-active-color: #acacac;
 
+.widget-config {
   .widget-config {
     margin-bottom: 0;
   }
-
   .widget-config-label {
     font-size: 90%;
+    &.text-success {
+      color: @green;
+    }
   }
   .action-button {
     margin-right: @undo-btn-margin;
   }
+  .widget-config-controls {
+    display: inline-block;
+    margin-left: 20px;
+    .widget-action {
+      text-decoration: none;
+      display: block;
+      &.not-show {
+          display: none;
+      }
+    }
+    .widget-action-final {
+      color: @widget-config-override-action-color;
+      &.active {
+        color: @widget-config-override-action-active-color;
+      }
+    }
+  }
 }
 
 .list-widget {
@@ -46,75 +80,110 @@
 
 .slider-widget {
 
-  @slider-widget-border-color: #999;
-
+  .widget-config-label {
+    display: inline-block;
+    margin-bottom: 15px;
+  }
   .slider-track {
-    height: 20px !important;
-    border: 1px solid @slider-widget-border-color;
-    border-radius: 10px;
-  }
-  .slider-tick {
-    margin-top: 6px !important;
-    width: 0px;
-    font-size: 8px;
-    margin-left: 0px !important;
-    &:before {
-      content: '|';
-    }
-    &:nth-of-type(1):before {
-      content: '$$$' !important;
-    }
-    &.slider-tick-default {
-      &:after {
-        content: "default";
-        width: 0;
-        height: 0;
+    height: @slider-widget-body-height !important;
+    border-radius: 0;
+
+    .slider-track-high {
+      background-color: @slider-widget-body-background-color;
+      border-radius: 0;
+    }
+  }
+  .slider.slider-horizontal {
+    width: @slider-widget-width;
+    .tooltip {
+      margin-top: -23px;
+      opacity: 1;
+      font-size: 10px;
+      line-height: 14px;
+      min-width: 30px;
+      z-index: 2;
+      &.tooltip-min,
+      &.tooltip-max {
+        display: none;
+      }
+      .tooltip-inner {
+        padding: 0px 2px;
+        background-color: @slider-widget-tooltip-background-color;
+        text-align: center;
+      }
+      .tooltip-arrow {
+        bottom: 2px;
+        margin-left: -4px;
+        border-top-color: @slider-widget-tooltip-background-color;
+        border-width: 4px 4px 0;
+      }
+    }
+    .slider-tick {
+      width: 0px;
+      margin-top: 10px;
+      margin-left: 0px;
+      font-size: 8px;
+      &:before,
+      &.in-selection:before {
+        content: '';
         display: block;
-        position: absolute;
-        left: -2px;
-        top: 14px;
-        border-style: solid;
-        border-width: 0 3px 6px 3px;
-        border-color: transparent transparent #5bb75b transparent;
-        color: #d1d1d1;
-        font-size: 10px;
-        text-indent: -14px;
-        line-height: 25px;
+        width: 1px;
+        height: 8px;
+        background-color: @slider-widget-tick-background-color;
+      }
+      &.last {
+        margin-left: -1px;
+      }
+      &.slider-tick-default {
+        margin-top: -22px;
+        &:before {
+          height: 53px;
+        }
+        > span {
+          color: @slider-widget-tick-label-color;
+          font-size: 10px;
+        }
+      }
+    }
+    &.slider-disabled {
+      .tooltip-arrow {
+        border-top-color: @slider-widget-body-background-color;
+      }
+      .tooltip-inner {
+        background-color: @slider-widget-body-background-color;
       }
     }
   }
   .slider-handle {
-    margin-top: -2px !important;
-    height: 22px;
-    width: 22px;
-    margin-left: -12px !important;
-    background-color: transparent !important;
-    background-image: radial-gradient(#aaa 5px, #eee 5px) !important;
-    border: 1px solid @slider-widget-border-color;
+    margin-top: -4px !important;
+    height: 14px;
+    width: 2px;
+    margin-left: -1px !important;
+    background-color: @slider-widget-selection-background-color;
+    background-image: none;
+    border-radius: 0;
   }
   .slider-tick-label-container {
-    margin-top: 5px;
+    margin-top: 0;
   }
   .slider-tick-label {
-    color: #aaa;
+    color: @slider-widget-tick-label-color;
     font-size: 10px;
     .slider-tick-reset-label {
-      color: #d7d7d7;
+      color: @slider-widget-tick-label-color;
       margin-left: 6px;
     }
   }
   .slider-selection {
     background-image: none;
-    background-color: lighten(@blue, 20%);
-    border-radius: 11px;
+    background-color: @slider-widget-selection-background-color;
+    border-radius: 0;
     box-shadow: none;
   }
 
   .ui-slider-wrapper {
-    height: 40px;
     .ui-slider-wrapper-inner {
       width: 75%;
-      margin-right: 10px;
       .slider.slider-horizontal {
         width: 100%;
       }
@@ -128,12 +197,12 @@
 }
 .slider-disabled {
   .slider-track-high {
-    background-color: #ccc;
+    background-color: @slider-widget-disabled-selection-background-color;
     border-bottom-right-radius: 12px;
     border-top-right-radius: 12px;
   }
   .slider-selection {
-    background-color: @gray-blue;
+    background-color: @slider-widget-disabled-selection-background-color;
   }
 }
 
@@ -219,6 +288,7 @@
     &>button.btn {
       padding: 0;
       margin-top: -7px;
+      color: @green;
       &:focus {
         border-color: none;
         box-shadow: 0;

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

@@ -15,13 +15,15 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-
 <div>
   <label>
     {{view view.configView class="pull-left"}}
     {{#if view.isOriginalSCP}}
       <span class="widget-config-label">{{view.configLabel}}</span>
+    {{else}}
+      <span class="widget-config-label text-success">{{t common.override}}</span>
     {{/if}}
+    <div class="clearfix"></div>
   </label>
 </div>
-{{template "templates/common/configs/widgets/controls"}}
+{{template "templates/common/configs/widgets/controls"}}

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

@@ -16,10 +16,10 @@
 * limitations under the License.
 }}
 {{#if view.canEdit}}
-  <div class="clearfix">
+  <div class="widget-config-controls">
     {{#if view.config.supportsFinal}}
       <a href="#" data-toggle="tooltip"
-        {{bindAttr class=":btn :btn-small :btn-final :pull-left 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:not-show" disabled="view.config.isNotEditable"}}
         {{action "toggleFinalFlag" view.config target="view"}}
         {{translateAttr data-original-title="services.service.config.final"}}>
         <i class="icon-lock"></i>
@@ -27,8 +27,8 @@
     {{/if}}
     {{#if view.overrideAllowed}}
       {{#isAccessible ADMIN}}
-        <div {{bindAttr class=":pull-left :action-button view.isHover:show:not-show"}}>
-          <a class="btn btn-small" href="#" data-toggle="tooltip"
+        <div {{bindAttr class=":widget-action :widget-action-override view.isHover:show:not-show"}}>
+          <a class="widget-action widget-action-override" href="#" data-toggle="tooltip"
             {{action "createOverrideProperty" view.config target="view.parentView"}}
             {{translateAttr data-original-title="common.override"}}>
             <i class="icon-plus-sign"></i>
@@ -42,7 +42,7 @@
   </div>
 {{/if}}
 {{#if view.isComparison}}
-  <div class="clearfix">
+  <div class="widget-config-controls">
   {{#if controller.selectedConfigGroup.isDefault}}
     <span
         class="label label-info">{{t dashboard.configHistory.table.version.prefix}}{{controller.selectedVersion}}</span>
@@ -64,4 +64,4 @@
 
 {{#if view.isComparison}}
   {{view App.ConfigWidgetComparisonView serviceConfigPropertyBinding="view.config"}}
-{{/if}}
+{{/if}}

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

@@ -19,10 +19,10 @@
 {{! 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="view.parentView.isHover:show:not-show"}}>
+    <div {{bindAttr class=":widget-config-controls view.parentView.isHover:show:not-show"}}>
       {{#if overriddenSCP.supportsFinal}}
         <a href="#" data-toggle="tooltip"
-          {{bindAttr class=":btn :btn-small :btn-final overriddenSCP.isFinal:active overriddenSCP.hideFinalIcon:hidden" disabled="overriddenSCP.isNotEditable"}}
+          {{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>
@@ -45,17 +45,24 @@
             </a>
           {{/if}}
           {{#isAccessible ADMIN}}
-            <a class="btn btn-small" href="#" data-toggle="tooltip"
+            <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}}
-          <span class="help-inline">{{overriddenSCP.errorMessage}}</span>
         {{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>
+      {{/if}}
+    {{/if}}
   </div>
-{{/each}}
+  <div class="clearfix"></div>
+{{/each}}

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

@@ -22,7 +22,8 @@
   {{/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>
-    <div class="pull-right ui-slider-label">{{view.mirrorValue}} {{view.unitLabel}}</div>
+    {{#if view.isOriginalSCP}}
+      {{template "templates/common/configs/widgets/controls"}}
+    {{/if}}
   </div>
-  {{template "templates/common/configs/widgets/controls"}}
 </div>

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

@@ -54,6 +54,8 @@ App.SliderConfigWidgetView = App.ConfigWidgetView.extend({
    */
   unitLabel: '',
 
+  undoAllowed: false,
+
   /**
    * Function used to parse config value (based on <code>config.stackConfigProperty.valueAttributes.type</code>)
    * For integer - parseInt, for float - parseFloat
@@ -235,7 +237,7 @@ App.SliderConfigWidgetView = App.ConfigWidgetView.extend({
     var slider = new Slider(this.$('input.slider-input')[0], {
       value: this.widgetValueByConfigAttributes(parseFunction(this.get('config.value'))),
       ticks: ticks,
-      tooltip: 'hide',
+      tooltip: 'always',
       ticks_labels: ticksLabels,
       ticks_snap_bounds: Em.get(valueAttributes, 'type') === 'int' ? 1 : 0.1,
       step: increment_step ? this.widgetValueByConfigAttributes(increment_step) : (Em.get(valueAttributes, 'type') === 'int' ? 1 : 0.1)
@@ -255,27 +257,23 @@ App.SliderConfigWidgetView = App.ConfigWidgetView.extend({
     });
     this.set('slider', slider);
     var sliderTicks = this.$('.ui-slider-wrapper:eq(0) .slider-tick');
+    var defaultSliderTick = sliderTicks.eq(defaultValueId);
 
     sliderTicks.eq(defaultValueId).addClass('slider-tick-default').on('mousedown', function(e) {
       if (self.get('disabled')) return false;
       self.restoreValue();
       e.stopPropagation();
+      return false;
     });
+    // create label for default value and align it
+    defaultSliderTick.append('<span>{0}</span>'.format(defaultValue + this.get('unitLabel')));
+    defaultSliderTick.find('span').css('marginLeft', -defaultSliderTick.find('span').width()/2 + 'px');
     // if mirrored value was added need to hide the tick for it
     if (defaultValueMirroredId) {
       sliderTicks.eq(defaultValueMirroredId).hide();
     }
-    // hide some ticks. can't do this via css
-    if (defaultValueId == 0) {
-      sliderTicks.last().hide();
-    } else
-      if (defaultValueId == ticks.length - 1) {
-        sliderTicks.first().hide();
-      }
-      else {
-        sliderTicks.first().hide();
-        sliderTicks.last().hide();
-      }
+    // mark last tick to fix it style
+    sliderTicks.last().addClass('last');
   },
 
   /**