feat(service): support the Order field for Update Configuration (#1101)

app/components/createService/createServiceController.js

@@ -25,6 +25,7 @@ function ($q, $scope, $state, Service, ServiceHelper, SecretHelper, SecretServic
     PlacementConstraints: [],
     PlacementPreferences: [],
     UpdateDelay: 0,
+    UpdateOrder: 'stop-first',
     FailureAction: 'pause',
     Secrets: [],
     AccessControlData: new AccessControlFormData()
@@ -199,7 +200,8 @@ function ($q, $scope, $state, Service, ServiceHelper, SecretHelper, SecretServic
     config.UpdateConfig = {
       Parallelism: input.Parallelism || 0,
       Delay: input.UpdateDelay || 0,
-      FailureAction: input.FailureAction
+      FailureAction: input.FailureAction,
+      Order: input.UpdateOrder
     };
   }
 

app/components/createService/createservice.html

@@ -377,12 +377,12 @@
             <form class="form-horizontal" style="margin-top: 15px;">
               <!-- parallelism-input -->
               <div class="form-group">
-                <label for="parallelism" class="col-sm-2 col-lg-1 control-label text-left">Parallelism</label>
-                <div class="col-sm-2">
+                <label for="parallelism" class="col-sm-3 col-lg-1 control-label text-left">Parallelism</label>
+                <div class="col-sm-4 col-lg-3">
                   <input type="number" class="form-control" ng-model="formValues.Parallelism" id="parallelism" placeholder="e.g. 1">
                 </div>
-                <div class="col-sm-8">
-                  <p class="small text-muted" style="margin-top: 10px;">
+                <div class="col-sm-5">
+                  <p class="small text-muted">
                     Maximum number of tasks to be updated simultaneously (0 to update all at once).
                   </p>
                 </div>
@@ -390,12 +390,12 @@
               <!-- !parallelism-input -->
               <!-- delay-input -->
               <div class="form-group">
-                <label for="update-delay" class="col-sm-2 col-lg-1 control-label text-left">Delay</label>
-                <div class="col-sm-2">
+                <label for="update-delay" class="col-sm-3 col-lg-1 control-label text-left">Delay</label>
+                <div class="col-sm-4 col-lg-3">
                   <input type="number" class="form-control" ng-model="formValues.UpdateDelay" id="update-delay" placeholder="e.g. 10">
                 </div>
-                <div class="col-sm-8">
-                  <p class="small text-muted" style="margin-top: 10px;">
+                <div class="col-sm-5">
+                  <p class="small text-muted">
                     Amount of time between updates.
                   </p>
                 </div>
@@ -403,15 +403,39 @@
               <!-- !delay-input -->
               <!-- failureAction-input -->
               <div class="form-group">
-                <div class="col-sm-12">
-                  <label class="control-label text-left">Failure action</label>
-                  <div class="btn-group btn-group-sm" style="margin-left: 20px;">
+                <label for="failure-action" class="col-sm-3 col-lg-1 control-label text-left">Failure action</label>
+                <div class="col-sm-4 col-lg-3">
+                  <div class="btn-group btn-group-sm">
                     <label class="btn btn-primary" ng-model="formValues.FailureAction" uib-btn-radio="'continue'">Continue</label>
                     <label class="btn btn-primary" ng-model="formValues.FailureAction" uib-btn-radio="'pause'">Pause</label>
                   </div>
                 </div>
+                <div class="col-sm-5">
+                  <p class="small text-muted">
+                    Action taken on failure to start after update.
+                  </p>
+                </div>
+
               </div>
               <!-- !failureAction-input -->
+              <!-- order-input -->
+              <div class="form-group" ng-if="applicationState.endpoint.apiVersion >= 1.29">
+
+                <label for="update-order" class="col-sm-3 col-lg-1 control-label text-left">Order</label>
+                <div class="col-sm-4 col-lg-3">
+                  <div class="btn-group btn-group-sm">
+                    <label class="btn btn-primary" ng-model="formValues.UpdateOrder" uib-btn-radio="'start-first'">start-first</label>
+                    <label class="btn btn-primary" ng-model="formValues.UpdateOrder" uib-btn-radio="'stop-first'">stop-first</label>
+                  </div>
+                </div>
+                <div class="col-sm-5">
+                  <p class="small text-muted">
+                    Operation order on failure.
+                  </p>
+                </div>
+
+              </div>
+              <!-- !order-input -->
             </form>
           </div>
           <!-- !tab-update-config -->

app/components/service/includes/updateconfig.html

@@ -47,18 +47,38 @@
               </p>
             </td>
           </tr>
+          <tr ng-if="applicationState.endpoint.apiVersion >= 1.29">
+            <td>Order</td>
+            <td>
+              <div class="form-group">
+                <label class="radio-inline">
+                  <input type="radio" name="updateconfig_order" ng-model="service.UpdateOrder" value="start-first" ng-change="updateServiceAttribute(service, 'UpdateOrder')" ng-disabled="isUpdating">
+                  start-first
+                </label>
+                <label class="radio-inline">
+                  <input type="radio" name="updateconfig_order" ng-model="service.UpdateOrder" value="stop-first" ng-change="updateServiceAttribute(service, 'UpdateOrder')" ng-disabled="isUpdating">
+                  stop-first
+                </label>
+              </div>
+            </td>
+            <td>
+              <p class="small text-muted" style="margin-top: 10px;">
+                Operation order on failure.
+              </p>
+            </td>
+          </tr>
         </tbody>
       </table>
     </rd-widget-body>
     <rd-widget-footer>
       <div class="btn-toolbar" role="toolbar">
         <div class="btn-group" role="group">
-          <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['UpdateFailureAction', 'UpdateDelay', 'UpdateParallelism'])" ng-click="updateService(service)">Apply changes</button>
+          <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['UpdateFailureAction', 'UpdateDelay', 'UpdateParallelism', 'UpdateOrder'])" ng-click="updateService(service)">Apply changes</button>
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <span class="caret"></span>
           </button>
           <ul class="dropdown-menu">
-            <li><a ng-click="cancelChanges(service, ['UpdateFailureAction', 'UpdateDelay', 'UpdateParallelism'])">Reset changes</a></li>
+            <li><a ng-click="cancelChanges(service, ['UpdateFailureAction', 'UpdateDelay', 'UpdateParallelism', 'UpdateOrder'])">Reset changes</a></li>
             <li><a ng-click="cancelChanges(service)">Reset all changes</a></li>
           </ul>
         </div>

app/components/service/serviceController.js

@@ -218,8 +218,10 @@ function ($q, $scope, $stateParams, $state, $location, $timeout, $anchorScroll,
     config.UpdateConfig = {
       Parallelism: service.UpdateParallelism,
       Delay: service.UpdateDelay,
-      FailureAction: service.UpdateFailureAction
+      FailureAction: service.UpdateFailureAction,
+      Order: service.UpdateOrder
     };
+
     config.TaskTemplate.RestartPolicy = {
       Condition: service.RestartCondition,
       Delay: service.RestartDelay,

app/models/docker/service.js

@@ -79,10 +79,12 @@ function ServiceViewModel(data, runningTasks, nodes) {
     this.UpdateParallelism = (typeof data.Spec.UpdateConfig.Parallelism !== undefined) ? data.Spec.UpdateConfig.Parallelism || 0 : 1;
     this.UpdateDelay = data.Spec.UpdateConfig.Delay || 0;
     this.UpdateFailureAction = data.Spec.UpdateConfig.FailureAction || 'pause';
+    this.UpdateOrder = data.Spec.UpdateConfig.Order || 'stop-first';
   } else {
     this.UpdateParallelism = 1;
     this.UpdateDelay = 0;
     this.UpdateFailureAction = 'pause';
+    this.UpdateOrder = 'stop-first';
   }
 
   this.RollbackConfig = data.Spec.RollbackConfig;