tweaks to styling of capacity bar

awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less

@@ -1,8 +1,10 @@
 capacity-bar {
 
     width: 50%;
-    margin-right: 10px;
+    margin-right: 25px;
     min-width: 100px;
+    display: flex;
+    align-items: center;
 
     .CapacityBar {
         background-color: @default-bg;
@@ -13,6 +15,7 @@ capacity-bar {
         width: 100%;
         border-radius: 100vw;
         overflow: hidden;
+        margin-right: 10px;
     }
 
     .CapacityBar-remaining {
@@ -31,4 +34,8 @@ capacity-bar {
             background-color: @d7grey;
         }
     }
+
+    .Capacity-details--percentage {
+        color: @default-data-txt;
+    }
 }

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

@@ -19,9 +19,19 @@ export default ['templateUrl',
                 }, true);
 
                 scope.$watch('capacity', function() {
-                    scope.CapacityStyle = {
+                    if (scope.totalCapacity !== 0) {
-                        'flex-grow': scope.capacity * 0.01
+                        scope.CapacityStyle = {
-                    };
+                            'flex-grow': scope.capacity * 0.01
+                        };
+
+                        scope.consumedCapacity = `${scope.capacity}%`;
+                    } else {
+                        scope.CapacityStyle = {
+                            'flex-grow': 1
+                        };
+
+                        scope.consumedCapacity = null;
+                    }
                 }, true);
             }
         };

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

@@ -1,5 +1,6 @@
 <div class="CapacityBar"
-    ng-class="{'CapacityBar--offline': isOffline">
+    ng-class="{'CapacityBar--offline': isOffline}">
         <div class="CapacityBar-remaining" ng-style="CapacityStyle"></div>
         <div class="CapacityBar-consumed"></div>
 </div>
+<span class="Capacity-details--percentage" ng-show="consumedCapacity">{{ consumedCapacity }}</span>

awx/ui/client/src/instance-groups/instance-group.block.less

@@ -24,10 +24,6 @@
             margin: 0 10px 0 0;
             width: 100px;
         }
-
-        .Capacity-details--percentage {
-            color: @default-data-txt;
-        }
     }
 
     .RunningJobs-details {

awx/ui/client/src/instance-groups/instance-group.partial.html

@@ -9,7 +9,6 @@
                     <div class="Capacity-details">
                         <p class="Capacity-details--label" translate>Used Capacity</p>
                         <capacity-bar capacity="instanceGroupCapacity" total-capacity="instanceGroupTotalCapacity"></capacity-bar>
-                        <span class="Capacity-details--percentage">{{ instanceGroupCapacity }}%</span>
                     </div>
                     <div class="RunningJobs-details">
                         <p class="RunningJobs-details--label" translate>Running Jobs</p>

awx/ui/client/src/instance-groups/instances/instance-jobs/instance-jobs.partial.html

@@ -9,7 +9,6 @@
                     <div class="Capacity-details">
                         <p class="Capacity-details--label" translate>Used Capacity</p>
                         <capacity-bar capacity="instanceCapacity" total-capacity="instanceTotalCapacity"></capacity-bar>
-                        <span class="Capacity-details--percentage">{{ instanceCapacity }}%</span>
                     </div>
                     <div class="RunningJobs-details">
                         <p class="RunningJobs-details--label" translate>Running Jobs</p>

awx/ui/client/src/instance-groups/instances/instances-list.partial.html

@@ -35,7 +35,7 @@
                         </a>
                     </td>
                     <td class="List-tableCell List-tableCell--capacityColumn ng-binding">
-                        <capacity-bar capacity="instance.consumed_capacity" total-capacity="instance.capacity"></capacity-bar><span>{{ instance.consumed_capacity }}%</span>
+                        <capacity-bar capacity="instance.consumed_capacity" total-capacity="instance.capacity">
                     </td>
                 </tr>
             </tbody>

awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html

@@ -47,7 +47,7 @@
                     </a>
                 </td>
                 <td class="List-tableCell List-tableCell--capacityColumn ng-binding">
-                    <capacity-bar capacity="instance_group.consumed_capacity" total-capacity="instance_group.capacity"></capacity-bar><span>{{ instance_group.consumed_capacity }}%</span>
+                    <capacity-bar capacity="instance_group.consumed_capacity" total-capacity="instance_group.capacity"></capacity-bar>
                 </td>
             </tr>
         </tbody>