Merge pull request #1322 from marshmalien/fix/1293-delete-ig-infinite-spinner

Fix infinite Wait spinner when deleting instance group

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

@@ -9,6 +9,10 @@ function InstanceGroupsStrings (BaseString) {
         EDIT_BREADCRUMB_LABEL: t.s('EDIT INSTANCE GROUP')
     };
 
+    ns.list = {
+        PANEL_TITLE: t.s('INSTANCE GROUPS')
+    };
+
     ns.tab = {
         DETAILS: t.s('DETAILS'),
         INSTANCES: t.s('INSTANCES'),
@@ -27,6 +31,17 @@ function InstanceGroupsStrings (BaseString) {
     ns.jobs = {
         PANEL_TITLE: t.s('Jobs')
     };
+
+    ns.error = {
+        HEADER: this.error.HEADER,
+        CALL: this.error.CALL,
+        DELETE: t.s('Unable to delete instance group.'),
+    };
+
+    ns.alert  = {
+        MISSING_PARAMETER: t.s('Instance Group parameter is missing.'),
+    };
+
 }
 
 InstanceGroupsStrings.$inject = ['BaseStringService'];

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

@@ -1,10 +1,9 @@
-export default ['$scope', 'resolvedModels', 'Dataset', '$state', 'ComponentsStrings', 'ProcessErrors', 'Wait',
-    function($scope, resolvedModels, Dataset, $state, strings, ProcessErrors, Wait) {
+export default ['$scope', '$filter', '$state', 'Alert', 'resolvedModels', 'Dataset', 'InstanceGroupsStrings','ProcessErrors', 'Prompt', 'Wait',
+    function($scope, $filter, $state, Alert, resolvedModels, Dataset, strings, ProcessErrors, Prompt, Wait) {
         const vm = this;
         const { instanceGroup } = resolvedModels;
 
         vm.strings = strings;
-        $scope.selection = {};
 
         init();
 
@@ -33,31 +32,43 @@ export default ['$scope', 'resolvedModels', 'Dataset', '$state', 'ComponentsStri
             vm.activeId = parseInt($state.params.instance_group_id);
         });
 
-        vm.delete = () => {
-            Wait('start');
-            let deletables = $scope.selection;
-            deletables = Object.keys(deletables).filter((n) => deletables[n]);
+        vm.deleteInstanceGroup = instance_group => {
+            if (!instance_group) {
+                Alert(strings.get('error.DELETE'), strings.get('alert.MISSING_PARAMETER'));
+                return;
+            }
 
-            deletables.forEach((data) => {
-                let promise = instanceGroup.http.delete({resource: data});
-                Promise.resolve(promise).then(vm.onSaveSuccess)
-                    .catch(({data, status}) => {
-                        ProcessErrors($scope, data, status, null, {
-                            hdr: 'Error!',
-                            msg: 'Call failed. Return status: ' + status
-                        });
-                    })
-                    .finally(() => {
-                        Wait('stop');
-                    });
+            Prompt({
+                action() {
+                    $('#prompt-modal').modal('hide');
+                    Wait('start');
+                    instanceGroup
+                        .request('delete', instance_group.id)
+                        .then(() => handleSuccessfulDelete(instance_group))
+                        .catch(createErrorHandler('delete instance group', 'DELETE'))
+                        .finally(() => Wait('stop'));
+                },
+                hdr: strings.get('DELETE'),
+                resourceName: $filter('sanitize')(instance_group.name),
+                body: `${strings.get('deleteResource.CONFIRM', 'instance group')}`
             });
         };
 
-        vm.onSaveSuccess = () => {
-            $state.transitionTo($state.current, $state.params, {
-                reload: true, location: true, inherit: false, notify: true
-            });
-        };
+        function handleSuccessfulDelete(instance_group) {
+            if (parseInt($state.params.instance_group_id, 0) === instance_group.id) {
+                $state.go('instanceGroups', $state.params, { reload: true });
+            } else {
+                $state.go('.', $state.params, { reload: true });
+            }
+        }
+
+        function createErrorHandler(path, action) {
+            return ({ data, status }) => {
+                const hdr = strings.get('error.HEADER');
+                const msg = strings.get('error.CALL', { path, action, status });
+                ProcessErrors($scope, data, status, null, { hdr, msg });
+            };
+        }
 
         $scope.createInstanceGroup = () => {
             $state.go('instanceGroups.add');

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

@@ -1,6 +1,6 @@
 <at-panel>
     <at-panel-heading hide-dismiss="true">
-        {{ vm.strings.get('layout.INSTANCE_GROUPS') }}
+        {{ vm.strings.get('list.PANEL_TITLE') }}
         <span class="badge List-titleBadge">
             {{ instanceGroupCount }}
         </span>
@@ -19,10 +19,6 @@
                 search-tags="searchTags">
             </smart-search>
             <div class="at-List-toolbarAction">
-                <div ng-click="vm.delete()"
-                    class="at-RowAction at-RowAction--danger">
-                    <i class="fa fa-trash"></i>
-                </div>
                 <button
                     type="button"
                     ui-sref="instanceGroups.add"
@@ -37,10 +33,6 @@
             <at-row ng-repeat="instance_group in instance_groups"
                 ng-class="{'at-Row--active': (instance_group.id === vm.activeId)}">
 
-                <input type="checkbox"
-                class="at-Row-checkbox"
-                ng-model="selection[instance_group.id]"/>
-
                 <div class="at-Row-items">
                     <at-row-item
                         header-value="{{ instance_group.name }}"
@@ -67,6 +59,8 @@
 
                 <div class="at-Row-actions">
                     <capacity-bar label-value="Used Capacity" capacity="instance_group.consumed_capacity" total-capacity="instance_group.capacity"></capacity-bar>
+                    <at-row-action icon="fa-trash" ng-click="vm.deleteInstanceGroup(instance_group)">
+                    </at-row-action>
                 </div>
             </at-row>
         </at-list>