Fix UI bugs related to instance groups views

* Fix bug where capacity_adjustment sets to "1.00" when instance is toggled
* Hookup websockets for instance group jobs and instance jobs
* Add Wait spinner to Capacity_Adjuster, Instance association modal, and Instance group delete
* Add updateDataset event listener to update instance and instanceGroups list after smartSearch query

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

@@ -1,4 +1,4 @@
-function CapacityAdjuster (templateUrl) {
+function CapacityAdjuster (templateUrl, ProcessErrors, Wait) {
     return {
         scope: {
             state: '='
@@ -23,6 +23,7 @@ function CapacityAdjuster (templateUrl) {
             const vm = this || {};
 
             vm.slide = (state) => {
+                Wait('start');
                 const data = {
                     "capacity_adjustment": `${state.capacity_adjustment}`
                 };
@@ -31,7 +32,16 @@ function CapacityAdjuster (templateUrl) {
                     url: state.url,
                     data
                 };
-                $http(req);
+                $http(req)
+                    .catch(({data, status}) => {
+                        ProcessErrors(data, status, null, {
+                            hdr: 'Error!',
+                            msg: 'Call failed. Return status: ' + status
+                        });
+                    })
+                    .finally(() => {
+                        Wait('stop');
+                    });
             };
         },
         controllerAs: 'vm'
@@ -39,7 +49,9 @@ function CapacityAdjuster (templateUrl) {
 }
 
 CapacityAdjuster.$inject = [
-    'templateUrl'
+    'templateUrl',
+    'ProcessErrors',
+    'Wait'
 ];
 
 export default CapacityAdjuster;

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

@@ -1,7 +1,8 @@
 
-function InstanceJobsController ($scope, $filter, $state, model, strings, jobStrings) {
+function InstanceJobsController ($scope, $filter, $state, model, strings, jobStrings, Instance) {
     const vm = this || {};
-    const { instance } = model;
+    let { instance } = model;
+    const instance_id = instance.get('id');
 
     init();
 
@@ -62,6 +63,17 @@ function InstanceJobsController ($scope, $filter, $state, model, strings, jobStr
         }
     };
 
+    $scope.$on('ws-jobs', () => {
+        new Instance(['get', 'options'], [instance_id, instance_id])
+            .then((data) =>  {
+                return data.extend('get', 'jobs', {params: {page_size: "10", order_by: "-finished"}});
+            })
+            .then((data) => {
+                instance = data;
+                init();
+            });
+    });
+
 }
 
 InstanceJobsController.$inject = [
@@ -70,7 +82,8 @@ InstanceJobsController.$inject = [
     '$state',
     'resolvedModels',
     'InstanceGroupsStrings',
-    'JobStrings'
+    'JobStrings',
+    'InstanceModel'
 ];
 
 export default InstanceJobsController;

awx/ui/client/src/instance-groups/instances/instance-modal.controller.js

@@ -1,4 +1,4 @@
-function InstanceModalController ($scope, $state, models, strings, ProcessErrors) {
+function InstanceModalController ($scope, $state, models, strings, ProcessErrors, Wait) {
     const { instance, instanceGroup } = models;
     const vm = this || {};
 
@@ -39,6 +39,7 @@ function InstanceModalController ($scope, $state, models, strings, ProcessErrors
      }, true);
 
     vm.submit = () => {
+        Wait('start');
         const associate = vm.selectedRows
             .map(instance => ({id: instance.id}));
         const disassociate = vm.deselectedRows
@@ -60,6 +61,9 @@ function InstanceModalController ($scope, $state, models, strings, ProcessErrors
                     hdr: 'Error!',
                     msg: 'Call failed. Return status: ' + status
                 });
+            })
+            .finally(() => {
+                Wait('stop');
             });
     };
 
@@ -73,7 +77,8 @@ InstanceModalController.$inject = [
     '$state',
     'resolvedModels',
     'InstanceGroupsStrings',
-    'ProcessErrors'
+    'ProcessErrors',
+    'Wait'
 ];
 
 export default InstanceModalController;

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

@@ -14,10 +14,10 @@
             <smart-search
                 class="at-List-search"
                 django-model="instances"
-                base-path="instances"
+                base-path="{{list.basePath}}"
                 iterator="instance"
                 list="list"
-                dataset="vm.instances"
+                dataset="instance_dataset"
                 collection="collection"
                 search-tags="searchTags">
             </smart-search>

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

@@ -10,15 +10,25 @@ function InstancesController ($scope, $state, $http, models, Instance, strings,
 
     function init() {
         $scope.list = {
+            name: 'instances',
             iterator: 'instance',
-            name: 'instances'
+            basePath: `/api/v2/instance_groups/${vm.instance_group_id}/instances/`
         };
+
         $scope.collection = {
-            basepath: 'instances',
+            iterator: 'instance',
-            iterator: 'instance'
+            basePath: `/api/v2/instance_groups/${vm.instance_group_id}/instances/`
         };
+
         $scope[`${$scope.list.iterator}_dataset`] = Dataset.data;
         $scope[$scope.list.name] = $scope[`${$scope.list.iterator}_dataset`].results;
+        $scope.instances = vm.instances;
+
+        $scope.$on('updateDataset', function(e, dataset) {
+            $scope[`${$scope.list.iterator}_dataset`] = dataset;
+            $scope[$scope.list.name] = dataset.results;
+            vm.instances = dataset.results;
+        });
     }
 
     vm.tab = {
@@ -42,6 +52,7 @@ function InstancesController ($scope, $state, $http, models, Instance, strings,
         instance.enabled = !instance.enabled;
 
         const data = {
+            "capacity_adjustment": instance.capacity_adjustment,
             "enabled": instance.enabled
         };
 

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

@@ -27,11 +27,8 @@
                 ng-class="{'at-Row--active': (job.id === vm.activeId)}"
                 job-id="{{ job.id }}">
                 <div class="at-RowStatus">
-                    <a href="{{ job.detailsUrl }}" ng-if="isSuccessful(job.status)" aw-tool-tip="Job successful. Click for details." aw-tip-placement="right">
+                    <a ng-click="vm.viewJobResults(job)" aw-tool-tip="{{ job.status_tip }}" data-tip-watch="job.status_tip" aw-tip-placement="right" >
-                        <i class="fa DashboardList-status DashboardList-status--success icon-job-successful"></i>
+                        <i class="fa icon-job-{{ job.status }}"></i>
-                    </a>
-                    <a href="{{ job.detailsUrl }}" ng-if="!isSuccessful(job.status)" aw-tool-tip="Job failed. Click for details." aw-tip-placement="right">
-                        <i class="fa DashboardList-status DashboardList-status--failed icon-job-failed"></i>
                     </a>
                 </div>
                 <div class="at-Row-items">

awx/ui/client/src/instance-groups/jobs/jobs.controller.js

@@ -1,12 +1,12 @@
 
-function InstanceGroupJobsController ($scope, $filter, $state, model, strings, jobStrings) {
+function InstanceGroupJobsController ($scope, $filter, $state, model, strings, jobStrings, InstanceGroup) {
     const vm = this || {};
-    const { instanceGroup } = model;
+    let { instanceGroup } = model;
+    const instance_group_id = instanceGroup.get('id');
 
     init();
 
     function init(){
-        const instance_group_id = instanceGroup.get('id');
         vm.strings = strings;
         vm.jobStrings = jobStrings;
         vm.queryset = { page_size: '10', order_by: '-finished', instance_group_id: instance_group_id };
@@ -72,8 +72,19 @@ function InstanceGroupJobsController ($scope, $filter, $state, model, strings, j
                 goTojobResults('workflowResults');
                 break;
         }
-
     };
+
+    $scope.$on('ws-jobs', () => {
+        new InstanceGroup(['get', 'options'], [instance_group_id, instance_group_id])
+            .then((instance_group) =>  {
+                return instance_group.extend('get', 'jobs', {params: {page_size: "10", order_by: "-finished"}});
+            })
+            .then((instance_group) => {
+                instanceGroup = instance_group;
+                init();
+            });
+    });
+
 }
 
 InstanceGroupJobsController.$inject = [
@@ -82,7 +93,8 @@ InstanceGroupJobsController.$inject = [
     '$state',
     'resolvedModels',
     'InstanceGroupsStrings',
-    'JobStrings'
+    'JobStrings',
+    'InstanceGroupModel'
 ];
 
 export default InstanceGroupJobsController;

awx/ui/client/src/instance-groups/list/instance-groups-list.controller.js

@@ -1,27 +1,40 @@
-export default ['$scope', 'InstanceGroupList', 'resolvedModels', 'Dataset', '$state', 'ComponentsStrings', 'ProcessErrors',
+export default ['$scope', 'resolvedModels', 'Dataset', '$state', 'ComponentsStrings', 'ProcessErrors', 'Wait',
-    function($scope, InstanceGroupList, resolvedModels, Dataset, $state, strings, ProcessErrors) {
+    function($scope, resolvedModels, Dataset, $state, strings, ProcessErrors, Wait) {
-        const list = InstanceGroupList;
         const vm = this;
         const { instanceGroup } = resolvedModels;
 
         vm.strings = strings;
+        $scope.selection = {};
 
         init();
 
         function init(){
-            $scope.list = list;
+            $scope.list = {
-            $scope[`${list.iterator}_dataset`] = Dataset.data;
+                iterator: 'instance_group',
-            $scope[list.name] = $scope[`${list.iterator}_dataset`].results;
+                name: 'instance_groups'
-            $scope.instanceGroupCount = Dataset.data.count;
+            };
-        }
 
-        $scope.selection = {};
+            $scope.collection = {
+                basePath: 'instance_groups',
+                iterator: 'instance_group'
+            };
+
+            $scope[`${$scope.list.iterator}_dataset`] = Dataset.data;
+            $scope[$scope.list.name] = $scope[`${$scope.list.iterator}_dataset`].results;
+            $scope.instanceGroupCount = Dataset.data.count;
+
+            $scope.$on('updateDataset', function(e, dataset) {
+                $scope[`${$scope.list.iterator}_dataset`] = dataset;
+                $scope[$scope.list.name] = dataset.results;
+            });
+        }
 
         $scope.$watch('$state.params.instance_group_id', () => {
             vm.activeId = parseInt($state.params.instance_group_id);
         });
 
         vm.delete = () => {
+            Wait('start');
             let deletables = $scope.selection;
             deletables = Object.keys(deletables).filter((n) => deletables[n]);
 
@@ -33,6 +46,9 @@ export default ['$scope', 'InstanceGroupList', 'resolvedModels', 'Dataset', '$st
                             hdr: 'Error!',
                             msg: 'Call failed. Return status: ' + status
                         });
+                    })
+                    .finally(() => {
+                        Wait('stop');
                     });
             });
         };

awx/ui/client/src/instance-groups/main.js

@@ -278,6 +278,13 @@ function InstanceGroupsRun ($stateExtender, strings, ComponentsStrings) {
                 dynamic: true
             },
         },
+        data: {
+            socket: {
+                "groups": {
+                    "jobs": ["status_changed"],
+                }
+            }
+        },
         resolvedModels: InstanceGroupsResolve
     });
 
@@ -297,6 +304,13 @@ function InstanceGroupsRun ($stateExtender, strings, ComponentsStrings) {
                 dynamic: true
             }
         },
+        data: {
+            socket: {
+                "groups": {
+                    "jobs": ["status_changed"],
+                }
+            }
+        },
         views: {
             'jobs@instanceGroups': {
                 templateUrl: JobsTemplate,