From 91900d5534853a795ef98703c774c816f1c55fa9 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Wed, 18 Jul 2018 13:01:13 -0400
Subject: [PATCH 1/2] Show fork value over capacity adjuster slider

---
 .../capacity-adjuster.directive.js            | 67 ++++++++++++-------
 .../capacity-adjuster.partial.html            |  4 +-
 .../instance-groups.strings.js                |  3 +-
 3 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.directive.js b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.directive.js
index 678b47d078..b7fa81f4be 100644
--- a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.directive.js
+++ b/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) => {
-                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');
-                    });
-            };
+            capacityAdjusterController.init();
         },
+        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'
     };
 }
diff --git a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.partial.html b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.partial.html
index f486745fae..66401d62d1 100644
--- a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.partial.html
+++ b/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
diff --git a/awx/ui/client/src/instance-groups/instance-groups.strings.js b/awx/ui/client/src/instance-groups/instance-groups.strings.js
index 50cd75a0d7..a353914059 100644
--- a/awx/ui/client/src/instance-groups/instance-groups.strings.js
+++ b/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 = {

From 4057df07bac7f77d781cc8362d84490a393cadb2 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Wed, 18 Jul 2018 15:59:04 -0400
Subject: [PATCH 2/2] Fix input slider styles in Firefox

---
 .../client/lib/components/input/_index.less   | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/awx/ui/client/lib/components/input/_index.less b/awx/ui/client/lib/components/input/_index.less
index 6c41607a27..1cc1c5f21d 100644
--- a/awx/ui/client/lib/components/input/_index.less
+++ b/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] {