feat(UX): improve UX for service update (#1558)

app/components/service/service.html

@@ -38,8 +38,6 @@
               <td>ID</td>
               <td>
                 {{ service.Id }}
-                <button class="btn btn-xs btn-primary" ng-click="forceUpdateService(service)"><i class="fa fa-refresh space-right" aria-hidden="true" ng-disabled="isUpdating" ng-if="applicationState.endpoint.apiVersion >= 1.25"></i>Force update this service</button>
-                <button class="btn btn-xs btn-danger" ng-click="removeService()"><i class="fa fa-trash space-right" aria-hidden="true" ng-disabled="isUpdating"></i>Delete this service</button>
               </td>
             </tr>
             <tr ng-if="service.CreatedAt">
@@ -73,11 +71,17 @@
                     ng-model="service.Image" ng-change="updateServiceAttribute(service, 'Image')" id="image_name" ng-disabled="isUpdating">
               </td>
             </tr>
-            <tr ng-if="applicationState.endpoint.apiVersion >= 1.30">
+            <tr>
               <td colspan="2">
-                <div class="btn-group" role="group" aria-label="...">
+                <a ng-if="applicationState.endpoint.apiVersion >= 1.30" class="btn btn-primary btn-sm" type="button" ui-sref="servicelogs({id: service.Id})"><i class="fa fa-exclamation-circle space-right" aria-hidden="true"></i>Service logs</a>
-                  <a class="btn" type="button" ui-sref="servicelogs({id: service.Id})"><i class="fa fa-exclamation-circle space-right" aria-hidden="true"></i>Logs</a>
+                <button type="button" class="btn btn-primary btn-sm" ng-disabled="state.updateInProgress || isUpdating" ng-click="forceUpdateService(service)" button-spinner="state.updateInProgress" ng-if="applicationState.endpoint.apiVersion >= 1.25">
-                </div>
+                  <span ng-hide="state.updateInProgress"><i class="fa fa-refresh space-right" aria-hidden="true"></i>Update the service</span>
+                  <span ng-show="state.updateInProgress">Update in progress...</span>
+                </button>
+                <button type="button" class="btn btn-danger btn-sm" ng-disabled="state.deletionInProgress || isUpdating" ng-click="removeService()" button-spinner="state.deletionInProgress">
+                  <span ng-hide="state.deletionInProgress"><i class="fa fa-trash space-right" aria-hidden="true"></i>Delete the service</span>
+                  <span ng-show="state.deletionInProgress">Deletion in progress...</span>
+                </button>
               </td>
             </tr>
           </tbody>

app/components/service/serviceController.js

@@ -2,7 +2,11 @@ angular.module('service', [])
 .controller('ServiceController', ['$q', '$scope', '$transition$', '$state', '$location', '$timeout', '$anchorScroll', 'ServiceService', 'ConfigService', 'ConfigHelper', 'SecretService', 'ImageService', 'SecretHelper', 'Service', 'ServiceHelper', 'LabelHelper', 'TaskService', 'NodeService', 'Notifications', 'ModalService', 'PluginService',
 function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll, ServiceService, ConfigService, ConfigHelper, SecretService, ImageService, SecretHelper, Service, ServiceHelper, LabelHelper, TaskService, NodeService, Notifications, ModalService, PluginService) {
 
-  $scope.state = {};
+  $scope.state = {
+    updateInProgress: false,
+    deletionInProgress: false
+  };
+
   $scope.tasks = [];
   $scope.availableImages = [];
 
@@ -328,6 +332,7 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
   };
 
   function removeService() {
+    $scope.state.deletionInProgress = true;
     ServiceService.remove($scope.service)
     .then(function success(data) {
       Notifications.success('Service successfully deleted');
@@ -335,6 +340,9 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
     })
     .catch(function error(err) {
       Notifications.error('Failure', err, 'Unable to remove service');
+    })
+    .finally(function final() {
+      $scope.state.deletionInProgress = false;
     });
   }
 
@@ -353,6 +361,7 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
     // As explained in https://github.com/docker/swarmkit/issues/2364 ForceUpdate can accept a random
     // value or an increment of the counter value to force an update.
     config.TaskTemplate.ForceUpdate++;
+    $scope.state.updateInProgress = true;
     ServiceService.update(service, config)
     .then(function success(data) {
       Notifications.success('Service successfully updated', service.Name);
@@ -361,6 +370,9 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
     })
     .catch(function error(err) {
       Notifications.error('Failure', err, 'Unable to force update service', service.Name);
+    })
+    .finally(function final() {
+      $scope.state.updateInProgress = false;
     });
   }
 

app/directives/ui/datatables/services-datatable/servicesDatatable.html

@@ -12,14 +12,16 @@
         </div>
       </div>
       <div class="actionBar">
-        <button type="button" class="btn btn-sm btn-danger"
+        <div class="btn-group" role="group" aria-label="...">
-          ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
+          <button ng-if="$ctrl.showForceUpdateButton" type="button" class="btn btn-sm btn-primary"
-          <i class="fa fa-trash space-right" aria-hidden="true"></i>Remove
+            ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.forceUpdateAction($ctrl.state.selectedItems)">
-        </button>
+            <i class="fa fa-refresh space-right" aria-hidden="true"></i>Update
-        <button ng-if="$ctrl.showForceUpdateButton" type="button" class="btn btn-sm btn-primary"
+          </button>
-          ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.forceUpdateAction($ctrl.state.selectedItems)">
+          <button type="button" class="btn btn-sm btn-danger"
-          <i class="fa fa-refresh space-right" aria-hidden="true"></i>Force update
+            ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
-        </button>
+            <i class="fa fa-trash space-right" aria-hidden="true"></i>Remove
+          </button>
+        </div>
         <button type="button" class="btn btn-sm btn-primary" ui-sref="actions.create.service">
           <i class="fa fa-plus space-right" aria-hidden="true"></i>Add service
         </button>