update instance capacity bar to be grey when instance or group is offline

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

@@ -23,4 +23,12 @@ capacity-bar {
     .CapacityBar-consumed {
         flex: 0 0 auto;
     }
+
+    .CapacityBar--offline {
+        border-color: @d7grey;
+
+        .CapacityBar-remaining {
+            background-color: @d7grey;
+        }
+    }
 }

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

@@ -2,11 +2,22 @@ export default ['templateUrl',
     function (templateUrl) {
         return {
             scope: {
-                capacity: '='
+                capacity: '=',
+                totalCapacity: '='
             },
             templateUrl: templateUrl('instance-groups/capacity-bar/capacity-bar'),
             restrict: 'E',
             link: function(scope) {
+                scope.isOffline = false;
+
+                scope.$watch('totalCapacity', function(val) {
+                    if (val === 0) {
+                        scope.isOffline = true;
+                    } else {
+                        scope.isOffline = false;
+                    }
+                }, true);
+
                 scope.$watch('capacity', function() {
                     scope.CapacityStyle = {
                         'flex-grow': scope.capacity * 0.01

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

@@ -1,4 +1,5 @@
-<div class="CapacityBar">
-    <div class="CapacityBar-remaining" ng-style="CapacityStyle"></div>
-    <div class="CapacityBar-consumed"></div>
-</div>
+<div class="CapacityBar"
+    ng-class="{'CapacityBar--offline': isOffline">
+        <div class="CapacityBar-remaining" ng-style="CapacityStyle"></div>
+        <div class="CapacityBar-consumed"></div>
+</div>

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

@@ -8,7 +8,7 @@
                 <div class="List-details">
                     <div class="Capacity-details">
                         <p class="Capacity-details--label" translate>Used Capacity</p>
-                        <capacity-bar capacity="instanceGroupCapacity"></capacity-bar>
+                        <capacity-bar capacity="instanceGroupCapacity" total-capacity="instanceGroupTotalCapacity"></capacity-bar>
                         <span class="Capacity-details--percentage">{{ instanceGroupCapacity }}%</span>
                     </div>
                     <div class="RunningJobs-details">
@@ -31,4 +31,4 @@
         </div>
     </div>
     <div ui-view="list"></div>
-</div>
+</div>

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

@@ -8,7 +8,7 @@
                 <div class="List-details">
                     <div class="Capacity-details">
                         <p class="Capacity-details--label" translate>Used Capacity</p>
-                        <capacity-bar capacity="instanceCapacity"></capacity-bar>
+                        <capacity-bar capacity="instanceCapacity" total-capacity="instanceTotalCapacity"></capacity-bar>
                         <span class="Capacity-details--percentage">{{ instanceCapacity }}%</span>
                     </div>
                     <div class="RunningJobs-details">
@@ -30,4 +30,4 @@
         </div>
     </div>
     <div class="instance-jobs-list" ui-view="list"></div>
-</div>
+</div>

awx/ui/client/src/instance-groups/instances/instance-jobs/instance-jobs.route.js

@@ -13,6 +13,7 @@ export default {
             controller: function($scope, $rootScope, instance) {
                 $scope.instanceName = instance.hostname;
                 $scope.instanceCapacity = instance.consumed_capacity;
+                $scope.instanceTotalCapacity = instance.capacity;
                 $scope.instanceJobsRunning = instance.jobs_running;
                 $rootScope.breadcrumb.instance_name = instance.hostname;
             }
@@ -34,4 +35,4 @@ export default {
             });
         }]
     }
-};
+};

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"></capacity-bar><span>{{ instance.consumed_capacity }}%</span>
+                        <capacity-bar capacity="instance.consumed_capacity" total-capacity="instance.capacity"></capacity-bar><span>{{ instance.consumed_capacity }}%</span>
                     </td>
                 </tr>
             </tbody>

awx/ui/client/src/instance-groups/instances/instances.route.js

@@ -10,6 +10,7 @@ export default {
             controller: function($scope, $rootScope, instanceGroup) {
                 $scope.instanceGroupName = instanceGroup.name;
                 $scope.instanceGroupCapacity = instanceGroup.consumed_capacity;
+                $scope.instanceGroupTotalCapacity = instanceGroup.capacity;
                 $scope.instanceGroupJobsRunning = instanceGroup.jobs_running;
                 $rootScope.breadcrumb.instance_group_name = instanceGroup.name;
             }
@@ -31,4 +32,4 @@ export default {
                 });
         }]
     }
-};
+};

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"></capacity-bar><span>{{ instance_group.consumed_capacity }}%</span>
+                    <capacity-bar capacity="instance_group.consumed_capacity" total-capacity="instance_group.capacity"></capacity-bar><span>{{ instance_group.consumed_capacity }}%</span>
                 </td>
             </tr>
         </tbody>