AMBARI-10685 'dfs.datanode.failed.volumes.tolerated' has confusing ticks when range is 0-1. (ababiichuk)

ambari-web/app/styles/widgets.less

@@ -105,7 +105,7 @@
       font-size: 10px;
       line-height: 14px;
       min-width: 30px;
-      z-index: 2;
+      z-index: 1;
       &.tooltip-min,
       &.tooltip-max {
         display: none;

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

@@ -242,18 +242,23 @@ App.SliderConfigWidgetView = App.ConfigWidgetView.extend({
       ticks = [this.get('minMirrorValue')],
       ticksLabels = [],
       defaultValue = this.valueForTick(+this.get('widgetDefaultValue')),
+      range = this.get('maxMirrorValue') - this.get('minMirrorValue'),
+      // for little odd numbers in range 4..23 and widget type 'int' use always 4 ticks
+      isSmallInt = this.get('unitType') == 'int' && range > 4 && range < 23 && range % 2 == 1,
       defaultValueMirroredId,
       defaultValueId;
 
     // ticks and labels
     for (var i = 1; i <= 3; i++) {
-      var val = this.get('minMirrorValue') + (this.get('maxMirrorValue') - this.get('minMirrorValue')) * (i / 4);
+      var val = this.get('minMirrorValue') + range * (i / (isSmallInt ? 3 : 4));
       // if value's type is float, ticks may be float too
       ticks.push(this.valueForTick(val));
     }
+
     ticks.push(this.get('maxMirrorValue'));
-    ticks.forEach(function (tick, index) {
-      ticksLabels.push(index % 2 === 0 ? tick + ' ' + self.get('unitLabel') : '');
+    ticks = ticks.uniq();
+    ticks.forEach(function (tick, index, items) {
+      ticksLabels.push((items.length < 5 || index % 2 === 0 || items.length - 1 == index) ? tick + ' ' + self.get('unitLabel') : '');
     });
 
     // default-value marker should be added only if defaultValue is in range [min, max]

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

@@ -222,6 +222,108 @@ describe('App.SliderConfigWidgetView', function () {
           ticks: [5, 16, 22, 28, 35, 39, 50],
           ticksLabels: ['5 ','', '', '28 ', '', '', '50 ']
         }
+      },
+      {
+        viewSetup: {
+          minMirrorValue: 1,
+          maxMirrorValue: 2,
+          widgetDefaultValue: 2,
+          config: Em.Object.create({
+            stackConfigProperty: Em.Object.create({
+              valueAttributes: { type: 'int', increment_step: 1 },
+              widget: { units: [ { 'unit-name': "int"}]}
+            })
+          })
+        },
+        e: {
+          ticks: [1,2],
+          ticksLabels: ['1 ', '2 ']
+        }
+      },
+      {
+        viewSetup: {
+          minMirrorValue: 1,
+          maxMirrorValue: 3,
+          widgetDefaultValue: 2,
+          config: Em.Object.create({
+            stackConfigProperty: Em.Object.create({
+              valueAttributes: { type: 'int', increment_step: 1 },
+              widget: { units: [ { 'unit-name': "int"}]}
+            })
+          })
+        },
+        e: {
+          ticks: [1,2,3],
+          ticksLabels: ['1 ', '2 ', '3 ']
+        }
+      },
+      {
+        viewSetup: {
+          minMirrorValue: 0,
+          maxMirrorValue: 3,
+          widgetDefaultValue: 2,
+          config: Em.Object.create({
+            stackConfigProperty: Em.Object.create({
+              valueAttributes: { type: 'int', increment_step: 1 },
+              widget: { units: [ { 'unit-name': "int"}]}
+            })
+          })
+        },
+        e: {
+          ticks: [0,1,2,3],
+          ticksLabels: ['0 ', '1 ', '2 ', '3 ']
+        }
+      },
+      {
+        viewSetup: {
+          minMirrorValue: 1,
+          maxMirrorValue: 5,
+          widgetDefaultValue: 2,
+          config: Em.Object.create({
+            stackConfigProperty: Em.Object.create({
+              valueAttributes: { type: 'int', increment_step: 1 },
+              widget: { units: [ { 'unit-name': "int"}]}
+            })
+          })
+        },
+        e: {
+          ticks: [1,2,3,4,5],
+          ticksLabels: ['1 ', '', '3 ', '', '5 ']
+        }
+      },
+      {
+        viewSetup: {
+          minMirrorValue: 0,
+          maxMirrorValue: 5,
+          widgetDefaultValue: 2,
+          config: Em.Object.create({
+            stackConfigProperty: Em.Object.create({
+              valueAttributes: { type: 'int', increment_step: 1 },
+              widget: { units: [ { 'unit-name': "int"}]}
+            })
+          })
+        },
+        e: {
+          ticks: [0,2,3,5],
+          ticksLabels: ['0 ', '2 ', '3 ', '5 ']
+        }
+      },
+      {
+        viewSetup: {
+          minMirrorValue: 0,
+          maxMirrorValue: 23,
+          widgetDefaultValue: 2,
+          config: Em.Object.create({
+            stackConfigProperty: Em.Object.create({
+              valueAttributes: { type: 'int', increment_step: 1 },
+              widget: { units: [ { 'unit-name': "int"}]}
+            })
+          })
+        },
+        e: {
+          ticks: [0,2,6,12,17,20,23],
+          ticksLabels: ['0 ', '', '', '12 ', '', '', '23 ']
+        }
       }
     ];