Merge pull request #443 from jlmitch5/instanceCapacityBarOffline

update instance capacity bar to be grey when instance or group is off…

awx/ui/client/lib/components/components.strings.js

@@ -46,7 +46,11 @@ function ComponentsStrings (BaseString) {
     ns.truncate = {
         DEFAULT: t.s('Copy full revision to clipboard.'),
         COPIED: t.s('Copied to clipboard.')
-    }
+    };
+
+    ns.capacityBar = {
+        IS_OFFLINE: t.s('Unavailable to run jobs.')
+    };
 }
 
 ComponentsStrings.$inject = ['BaseStringService'];

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 {
@@ -23,4 +26,16 @@ capacity-bar {
     .CapacityBar-consumed {
         flex: 0 0 auto;
     }
+
+    .CapacityBar--offline {
+        border-color: @d7grey;
+
+        .CapacityBar-remaining {
+            background-color: @d7grey;
+        }
+    }
+
+    .Capacity-details--percentage {
+        color: @default-data-txt;
+    }
 }

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

@@ -1,16 +1,39 @@
-export default ['templateUrl',
-    function (templateUrl) {
+export default ['templateUrl', 'ComponentsStrings',
+    function (templateUrl, strings) {
         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;
+                        scope.offlineTip = strings.get(`capacityBar.IS_OFFLINE`);
+                    } else {
+                        scope.isOffline = false;
+                        scope.offlineTip = null;
+                    }
+                }, true);
+
                 scope.$watch('capacity', function() {
-                    scope.CapacityStyle = {
-                        'flex-grow': scope.capacity * 0.01
-                    };
+                    if (scope.totalCapacity !== 0) {
+                        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,4 +1,11 @@
-<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}"
+    aw-tool-tip="{{ offlineTip }}"
+    data-tip-watch="offlineTip"
+    data-placement="top"
+    data-trigger="hover"
+    data-container="body">
+        <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

@@ -8,8 +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>
-                        <span class="Capacity-details--percentage">{{ instanceGroupCapacity }}%</span>
+                        <capacity-bar capacity="instanceGroupCapacity" total-capacity="instanceGroupTotalCapacity"></capacity-bar>
                     </div>
                     <div class="RunningJobs-details">
                         <p class="RunningJobs-details--label" translate>Running Jobs</p>
@@ -31,4 +30,4 @@
         </div>
     </div>
     <div ui-view="list"></div>
-</div>
+</div>

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

@@ -8,8 +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>
-                        <span class="Capacity-details--percentage">{{ instanceCapacity }}%</span>
+                        <capacity-bar capacity="instanceCapacity" total-capacity="instanceTotalCapacity"></capacity-bar>
                     </div>
                     <div class="RunningJobs-details">
                         <p class="RunningJobs-details--label" translate>Running Jobs</p>
@@ -30,4 +29,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">
                     </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>
                 </td>
             </tr>
         </tbody>