From c156a0af999024343292565bc42cc7d94c884706 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Thu, 15 Mar 2018 12:08:46 -0400
Subject: [PATCH] Add capacity adjustment slider label

---
 .../client/lib/components/input/lookup.partial.html | 13 +++++++------
 .../capacity-adjuster/capacity-adjuster.block.less  | 13 ++++++++++++-
 .../capacity-adjuster.partial.html                  |  1 +
 awx/ui/client/src/shared/directives.js              |  8 ++------
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/awx/ui/client/lib/components/input/lookup.partial.html b/awx/ui/client/lib/components/input/lookup.partial.html
index e3633aa743..e74c516ab6 100644
--- a/awx/ui/client/lib/components/input/lookup.partial.html
+++ b/awx/ui/client/lib/components/input/lookup.partial.html
@@ -23,12 +23,13 @@
             <span class="form-control Form-textInput Form-textInput--variableHeight LabelList-lookupTags"
                 ng-if="state._lookupTags">
                 <div class="LabelList-tagContainer" ng-repeat="tag in state._value track by $index">
-                <div class="LabelList-deleteContainer" ng-click="vm.removeTag(tag)">
-                    <i class="fa fa-times LabelList-tagDelete"></i>
-                </div>
-                <div class="LabelList-tag LabelList-tag--deletable">
-                    <span ng-if="tag.hostname" class="LabelList-name">{{ tag.hostname }}</span>
-                    <span ng-if="!tag.hostname" class="LabelList-name">{{ tag }}</span>
+                    <div class="LabelList-tag LabelList-tag--deletable">
+                        <span ng-if="tag.hostname" class="LabelList-name">{{ tag.hostname }}</span>
+                        <span ng-if="!tag.hostname" class="LabelList-name">{{ tag }}</span>
+                    </div>
+                    <div class="LabelList-deleteContainer" ng-click="vm.removeTag(tag)">
+                        <i class="fa fa-times LabelList-tagDelete"></i>
+                    </div>
                 </div>
             </span>
         </div>
diff --git a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less
index 251124f6d2..a524c3b1a8 100644
--- a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less
+++ b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less
@@ -1,7 +1,18 @@
 .CapacityAdjuster {
+    margin-right: @at-space-4x;
+    position: relative;
+
+    &-valueLabel {
+        bottom: @at-space-5x;
+        color: @at-color-body-text;
+        font-size: @at-font-size;
+        position: absolute;
+        text-align: center;
+        width: 100%;
+    }
+
     .at-InputSlider {
         align-items: center;
-        margin-right: @at-space-4x;
     }
 
     .at-InputSlider p {
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 ebadbe8461..c6a5bca81b 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,4 +1,5 @@
 <div class="CapacityAdjuster">
+    <span class="CapacityAdjuster-valueLabel">{{ state.capacity_adjustment }}</span>
     <div class="at-InputSlider">
         <p>{{min_capacity.label}} {{min_capacity.value}}</p>
             <input string-to-number
diff --git a/awx/ui/client/src/shared/directives.js b/awx/ui/client/src/shared/directives.js
index 5df24c2450..494b2a7da8 100644
--- a/awx/ui/client/src/shared/directives.js
+++ b/awx/ui/client/src/shared/directives.js
@@ -75,12 +75,8 @@ angular.module('AWDirectives', ['RestServices', 'Utilities'])
         require: 'ngModel',
         restrict: 'A',
         link: function(scope, element, attrs, ngModel) {
-            ngModel.$parsers.push(function(value) {
-                return '' + value;
-            });
-            ngModel.$formatters.push(function(value) {
-                return parseFloat(value);
-            });
+            ngModel.$parsers.push(value => value.toFixed(2));
+            ngModel.$formatters.push(value => parseFloat(value));
         }
     };
 })