Merge pull request #2585 from marshmalien/fix/2545/forks-capacity-adjuster-slider

Show fork value on capacity adjuster slider

awx/ui/client/lib/components/input/_index.less

@@ -278,9 +278,10 @@
             height: 1px;
             width: 100%;
         }
+
         &::-webkit-slider-thumb {
             -webkit-appearance: none;
-            background: @at-color-input-slider-thumb;
+            background-color: @at-color-input-slider-thumb;
             border-radius: 50%;
             border: none;
             cursor: pointer;
@@ -288,6 +289,24 @@
             margin-top: -7px;
             width: 16px;
         }
+
+    }
+
+    input[type=range]::-moz-range-thumb {
+        -webkit-appearance: none;
+        background-color: @at-color-input-slider-thumb;
+        border-radius: 50%;
+        border: none;
+        cursor: pointer;
+        height: 16px;
+        width: 16px;
+    }
+
+    input[type=range]::-moz-range-track {
+        background: @at-color-input-slider-track;
+        cursor: pointer;
+        height: 1px;
+        width: 100%;
     }
 
     input[type=range][disabled] {

awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.directive.js

@@ -7,7 +7,8 @@ function CapacityAdjuster (templateUrl, ProcessErrors, Wait, strings) {
         templateUrl: templateUrl('instance-groups/capacity-adjuster/capacity-adjuster'),
         restrict: 'E',
         replace: true,
-        link: function(scope) {
+        link: function(scope, el, attrs, controller) {
+            const capacityAdjusterController = controller;
             const adjustment_values = [{
                 label: strings.get('capacityAdjuster.CPU'),
                 value: scope.state.cpu_capacity,
@@ -18,32 +19,48 @@ function CapacityAdjuster (templateUrl, ProcessErrors, Wait, strings) {
 
             scope.min_capacity = _.min(adjustment_values, 'value');
             scope.max_capacity = _.max(adjustment_values, 'value');
-        },
-        controller: function($http) {
-            const vm = this || {};
 
-            vm.slide = (state) => {
+            capacityAdjusterController.init();
-                Wait('start');
-                const data = {
-                    "capacity_adjustment": `${state.capacity_adjustment}`
-                };
-                const req = {
-                    method: 'PUT',
-                    url: state.url,
-                    data
-                };
-                $http(req)
-                    .catch(({data, status}) => {
-                        ProcessErrors(data, status, null, {
-                            hdr: 'Error!',
-                            msg: 'Call failed. Return status: ' + status
-                        });
-                    })
-                    .finally(() => {
-                        Wait('stop');
-                    });
-            };
         },
+        controller: ['$scope', '$http', 'InstanceGroupsStrings',
+            function($scope, $http, strings) {
+                const vm = this || {};
+                vm.strings = strings;
+
+                function computeForks () {
+                    $scope.forks = Math.floor($scope.min_capacity.value + ($scope.max_capacity.value - $scope.min_capacity.value) * $scope.state.capacity_adjustment);
+                }
+
+                vm.init = () => {
+                    computeForks();
+                };
+
+                vm.slide = (state) => {
+                    Wait('start');
+
+                    computeForks();
+
+                    const data = {
+                        "capacity_adjustment": `${state.capacity_adjustment}`
+                    };
+                    const req = {
+                        method: 'PUT',
+                        url: state.url,
+                        data
+                    };
+                    $http(req)
+                        .catch(({data, status}) => {
+                            ProcessErrors(data, status, null, {
+                                hdr: 'Error!',
+                                msg: 'Call failed. Return status: ' + status
+                            });
+                        })
+                        .finally(() => {
+                            Wait('stop');
+                        });
+                };
+            }
+        ],
         controllerAs: 'vm'
     };
 }

awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.partial.html

@@ -1,5 +1,7 @@
 <div class="CapacityAdjuster">
-    <span class="CapacityAdjuster-valueLabel">{{ state.capacity_adjustment }}</span>
+    <span class="CapacityAdjuster-valueLabel">
+        {{ forks }} {{:: vm.strings.get('capacityAdjuster.FORKS')}}
+    </span>
     <div class="at-InputSlider">
         <p>{{min_capacity.label}} {{min_capacity.value}}</p>
             <input string-to-number

awx/ui/client/src/instance-groups/instance-groups.strings.js

@@ -44,7 +44,8 @@ function InstanceGroupsStrings (BaseString) {
 
     ns.capacityAdjuster = {
         CPU: t.s('CPU'),
-        RAM: t.s('RAM')
+        RAM: t.s('RAM'),
+        FORKS: t.s('Forks')
     };
 
     ns.jobs = {