Fixes #20244: add a task progress bar to manifest page.

Show the status of manifest related operations on the manifest page so as to eliminate confusion as to whether or not a manifest related action is complete. http://projects.theforeman.org/issues/20244
Katello · Jul 13, 2017 · a60923a · a60923a
1 parent a45d8c4
commit a60923a
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 32 deletions.
diff --git a/...p/assets/javascripts/bastion_katello/subscriptions/manifest/manifest-import.controller.js b/...p/assets/javascripts/bastion_katello/subscriptions/manifest/manifest-import.controller.js
@@ -43,6 +43,11 @@ angular.module('Bastion.subscriptions').controller('ManifestImportController',
             }
         }
 
+        function getInitialTask() {
+            return {pending: true};
+
+        }
+
         $scope.uploadErrorMessages = [];
         $scope.progress = {uploading: false};
         $scope.uploadURL = '/katello/api/v2/organizations/' + CurrentOrganization + '/subscriptions/upload';
@@ -58,11 +63,7 @@ angular.module('Bastion.subscriptions').controller('ManifestImportController',
         });
 
         $scope.isTaskPending = function () {
-            var pending = false;
-            if (($scope.task && $scope.task.pending) || ($scope.deleteTask && $scope.deleteTask.pending)) {
-                pending = true;
-            }
-            return pending;
+            return $scope.task && $scope.task.pending;
         };
 
         $scope.unregisterSearch = function () {
@@ -99,20 +100,22 @@ angular.module('Bastion.subscriptions').controller('ManifestImportController',
         };
 
         $scope.deleteManifest = function () {
+            $scope.task = getInitialTask();
+            $scope.taskStatusText = translate('Removing Manifest');
             Subscription.deleteManifest({}, function (returnData) {
-                $scope.deleteTask = returnData;
-                $scope.searchId = Task.registerSearch({'type': 'task', 'task_id': $scope.deleteTask.id}, $scope.deleteManifestTask);
+                $scope.task = returnData;
+                $scope.searchId = Task.registerSearch({'type': 'task', 'task_id': $scope.task.id}, $scope.deleteManifestTask);
             }, function (response) {
                 $scope.saveError = true;
                 $scope.errors = response.data.errors;
             });
         };
 
         $scope.deleteManifestTask = function (task) {
-            $scope.deleteTask = task;
-            if (!$scope.deleteTask.pending) {
+            $scope.task = task;
+            if (!$scope.task.pending) {
                 $scope.unregisterSearch();
-                if ($scope.deleteTask.result === 'success') {
+                if ($scope.task.result === 'success') {
                     $scope.saveSuccess = true;
                     GlobalNotification.setSuccessMessage(translate("Manifest successfully deleted."));
                     $scope.refreshOrganizationInfo();
@@ -131,20 +134,22 @@ angular.module('Bastion.subscriptions').controller('ManifestImportController',
         };
 
         $scope.refreshManifest = function () {
+            $scope.task = getInitialTask();
+            $scope.taskStatusText = translate('Refreshing Manifest');
             Subscription.refreshManifest({}, function (returnData) {
-                $scope.refreshTask = returnData;
-                $scope.searchId = Task.registerSearch({'type': 'task', 'task_id': $scope.refreshTask.id}, $scope.refreshManifestTask);
+                $scope.task = returnData;
+                $scope.searchId = Task.registerSearch({'type': 'task', 'task_id': $scope.task.id}, $scope.refreshManifestTask);
             }, function (response) {
                 $scope.saveError = true;
                 $scope.errors = response.data.errors;
             });
         };
 
         $scope.refreshManifestTask = function (task) {
-            $scope.refreshTask = task;
-            if (!$scope.refreshTask.pending) {
+            $scope.task = task;
+            if (!$scope.task.pending) {
                 $scope.unregisterSearch();
-                if ($scope.refreshTask.result === 'success') {
+                if ($scope.task.result === 'success') {
                     $scope.saveSuccess = true;
                     GlobalNotification.setSuccessMessage(translate("Manifest successfully refreshed."));
                     $scope.refreshOrganizationInfo();
@@ -184,6 +189,9 @@ angular.module('Bastion.subscriptions').controller('ManifestImportController',
         $scope.uploadManifest = function (content) {
             var returnData;
             if (content) {
+                $scope.task = getInitialTask();
+                $scope.taskStatusText = translate('Uploading Manifest');
+
                 try {
                     returnData = angular.fromJson(angular.element(content).html());
                 } catch (err) {

diff --git a/.../app/assets/javascripts/bastion_katello/subscriptions/manifest/views/manifest-import.html b/.../app/assets/javascripts/bastion_katello/subscriptions/manifest/views/manifest-import.html
@@ -17,6 +17,17 @@ <h4 translate>Red Hat Provider Details</h4>
   <div class="details">
     <h4 translate>Subscription Manifest</h4>
 
+    <div ng-show="isTaskPending()">
+      <a ng-href="/foreman_tasks/tasks/{{ task.id }}">
+
+        <div ng-class="{ active: isTaskPending() }"
+             class="progress progress-striped">
+          <span uib-progressbar animate="false" value="task.progressbar.value" type="{{task.progressbar.type}}"></span>
+        </div>
+      </a>
+      {{ taskStatusText }}
+    </div>
+
     <div class="detail">
       <span class="info-label" translate>Upstream Subscription Management Application</span>
       <span class="info-value" ng-show="upstream.uuid != undefined">
@@ -30,18 +41,13 @@ <h4 translate>Subscription Manifest</h4>
               ng-hide="denied('delete_manifest')"
               ng-click="openModal()">
          <span bst-modal="deleteManifest()" template-url="subscriptions/manifest/views/manifest-delete-modal.html"></span>
-         <i class="fa fa-spinner fa-spin" ng-show="deleteTask.pending"></i>
-          <span ng-show="deleteTask.pending" translate>Deleting Manifest...</span>
-          <span ng-hide="deleteTask.pending" translate>Delete Manifest</span>
+          <span translate>Delete Manifest</span>
       </button>
-      <button type="button" class="btn btn-default" ng-disabled="upstream.idCert == undefined || upstream.idCert.cert == undefined"
+      <button type="button" class="btn btn-default" ng-disabled="isTaskPending() || upstream.idCert == undefined || upstream.idCert.cert == undefined"
         ng-click="refreshManifest()">
-         <i class="fa fa-spinner fa-spin" ng-show="refreshTask.pending"></i>
-          <span ng-show="refreshTask.pending" translate>Refreshing Manifest...</span>
-          <span ng-hide="refreshTask.pending" translate>Refresh Manifest</span>
+          <span translate>Refresh Manifest</span>
       </button>
-      <span ng-show="upstream.idCert == undefined || upstream.idCert.cert == undefined"
-        translate>
+      <span ng-show="upstream.idCert == undefined || upstream.idCert.cert == undefined" translate>
         Refreshing manifest not supported by this manifest.
       </span>
     </div>
@@ -66,9 +72,7 @@ <h4 translate>Subscription Manifest</h4>
 
     <div class="form-group">
       <button type="button" class="btn btn-primary" ng-disabled="isTaskPending()" upload-submit>
-        <i class="fa fa-spinner fa-spin" ng-show="task.pending"></i>
-        <span ng-show="task.pending" translate>Uploading...</span>
-        <span ng-hide="task.pending" translate>Upload</span>
+        <span translate>Upload</span>
       </button>
     </div>
 

diff --git a/engines/bastion_katello/test/subscriptions/manifest/manifest-import.controller.test.js b/engines/bastion_katello/test/subscriptions/manifest/manifest-import.controller.test.js
@@ -71,14 +71,10 @@ describe('Controller: ManifestImportController', function() {
     });
 
     it('should provide a method to determine if a task is pending', function () {
-        expect($scope.isTaskPending()).toBe(false);
+        expect($scope.isTaskPending()).toBeFalsy();
 
         $scope.task = {pending: true};
         expect($scope.isTaskPending()).toBe(true);
-
-        $scope.task = null;
-        $scope.deleteTask = {pending: true};
-        expect($scope.isTaskPending()).toBe(true);
     });
 
     it('should provide a method for getting manifest history info', function() {