From 2306c346893c76df344818986985c43631541eee Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Wed, 20 Sep 2017 17:49:02 -0400
Subject: [PATCH 1/3] update instance capacity bar to be grey when instance or
 group is offline

---
 .../capacity-bar/capacity-bar.block.less            |  8 ++++++++
 .../capacity-bar/capacity-bar.directive.js          | 13 ++++++++++++-
 .../capacity-bar/capacity-bar.partial.html          |  9 +++++----
 .../src/instance-groups/instance-group.partial.html |  4 ++--
 .../instance-jobs/instance-jobs.partial.html        |  4 ++--
 .../instances/instance-jobs/instance-jobs.route.js  |  3 ++-
 .../instances/instances-list.partial.html           |  2 +-
 .../instance-groups/instances/instances.route.js    |  3 ++-
 .../list/instance-groups-list.partial.html          |  2 +-
 9 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less
index 06b595066e..ec84fa959c 100644
--- a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less
+++ b/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;
+        }
+    }
 }
diff --git a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.directive.js b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.directive.js
index 76dcf08323..4999afa3e9 100644
--- a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.directive.js
+++ b/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
diff --git a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.partial.html b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.partial.html
index b1b925fb06..c759bbebd1 100644
--- a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.partial.html
+++ b/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>
\ No newline at end of file
+<div class="CapacityBar"
+    ng-class="{'CapacityBar--offline': isOffline">
+        <div class="CapacityBar-remaining" ng-style="CapacityStyle"></div>
+        <div class="CapacityBar-consumed"></div>
+</div>
diff --git a/awx/ui/client/src/instance-groups/instance-group.partial.html b/awx/ui/client/src/instance-groups/instance-group.partial.html
index 9acec0d42f..04c9554e25 100644
--- a/awx/ui/client/src/instance-groups/instance-group.partial.html
+++ b/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>
\ No newline at end of file
+</div>
diff --git a/awx/ui/client/src/instance-groups/instances/instance-jobs/instance-jobs.partial.html b/awx/ui/client/src/instance-groups/instances/instance-jobs/instance-jobs.partial.html
index 6076c7f886..6db925c943 100644
--- a/awx/ui/client/src/instance-groups/instances/instance-jobs/instance-jobs.partial.html
+++ b/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>
\ No newline at end of file
+</div>
diff --git a/awx/ui/client/src/instance-groups/instances/instance-jobs/instance-jobs.route.js b/awx/ui/client/src/instance-groups/instances/instance-jobs/instance-jobs.route.js
index def896523a..7e9be9a9de 100644
--- a/awx/ui/client/src/instance-groups/instances/instance-jobs/instance-jobs.route.js
+++ b/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 {
             });
         }]
     }
-};
\ No newline at end of file
+};
diff --git a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
index fa408780b6..eed226a5ce 100644
--- a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
+++ b/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>
diff --git a/awx/ui/client/src/instance-groups/instances/instances.route.js b/awx/ui/client/src/instance-groups/instances/instances.route.js
index 43153cb9fc..8890171b58 100644
--- a/awx/ui/client/src/instance-groups/instances/instances.route.js
+++ b/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 {
                 });
         }]
     }
-};
\ No newline at end of file
+};
diff --git a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
index 1a5f8bad1a..d036d666de 100644
--- a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
+++ b/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>

From 25e503219f1e24ab0fb95492e4f817352de91845 Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Thu, 21 Sep 2017 11:07:50 -0400
Subject: [PATCH 2/3] tweaks to styling of capacity bar

---
 .../capacity-bar/capacity-bar.block.less         |  9 ++++++++-
 .../capacity-bar/capacity-bar.directive.js       | 16 +++++++++++++---
 .../capacity-bar/capacity-bar.partial.html       |  3 ++-
 .../instance-groups/instance-group.block.less    |  4 ----
 .../instance-groups/instance-group.partial.html  |  1 -
 .../instance-jobs/instance-jobs.partial.html     |  1 -
 .../instances/instances-list.partial.html        |  2 +-
 .../list/instance-groups-list.partial.html       |  2 +-
 8 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less
index ec84fa959c..1caba245f0 100644
--- a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less
+++ b/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;
+    }
 }
diff --git a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.directive.js b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.directive.js
index 4999afa3e9..a0616bb646 100644
--- a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.directive.js
+++ b/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 = {
-                        '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);
             }
         };
diff --git a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.partial.html b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.partial.html
index c759bbebd1..ab4bc5b5a5 100644
--- a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.partial.html
+++ b/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>
diff --git a/awx/ui/client/src/instance-groups/instance-group.block.less b/awx/ui/client/src/instance-groups/instance-group.block.less
index 4fa4a1b49d..22b81417ea 100644
--- a/awx/ui/client/src/instance-groups/instance-group.block.less
+++ b/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 {
diff --git a/awx/ui/client/src/instance-groups/instance-group.partial.html b/awx/ui/client/src/instance-groups/instance-group.partial.html
index 04c9554e25..df3be6f2ca 100644
--- a/awx/ui/client/src/instance-groups/instance-group.partial.html
+++ b/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>
diff --git a/awx/ui/client/src/instance-groups/instances/instance-jobs/instance-jobs.partial.html b/awx/ui/client/src/instance-groups/instances/instance-jobs/instance-jobs.partial.html
index 6db925c943..9c40fe931f 100644
--- a/awx/ui/client/src/instance-groups/instances/instance-jobs/instance-jobs.partial.html
+++ b/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>
diff --git a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
index eed226a5ce..da8f052423 100644
--- a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
+++ b/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>
diff --git a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
index d036d666de..f3d470afd9 100644
--- a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
+++ b/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>

From 46eb1727adb376376712f7b5d3b950163f045a95 Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Fri, 22 Sep 2017 10:07:51 -0400
Subject: [PATCH 3/3] add tooltip

---
 awx/ui/client/lib/components/components.strings.js         | 6 +++++-
 .../instance-groups/capacity-bar/capacity-bar.directive.js | 6 ++++--
 .../instance-groups/capacity-bar/capacity-bar.partial.html | 7 ++++++-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/awx/ui/client/lib/components/components.strings.js b/awx/ui/client/lib/components/components.strings.js
index 07346e966b..0299111786 100644
--- a/awx/ui/client/lib/components/components.strings.js
+++ b/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'];
diff --git a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.directive.js b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.directive.js
index a0616bb646..872e2ac0be 100644
--- a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.directive.js
+++ b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.directive.js
@@ -1,5 +1,5 @@
-export default ['templateUrl',
-    function (templateUrl) {
+export default ['templateUrl', 'ComponentsStrings',
+    function (templateUrl, strings) {
         return {
             scope: {
                 capacity: '=',
@@ -13,8 +13,10 @@ export default ['templateUrl',
                 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);
 
diff --git a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.partial.html b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.partial.html
index ab4bc5b5a5..d80ff84bc0 100644
--- a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.partial.html
+++ b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.partial.html
@@ -1,5 +1,10 @@
 <div class="CapacityBar"
-    ng-class="{'CapacityBar--offline': isOffline}">
+    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>