feat(services): add support for placement preferences (#1003)

app/components/service/includes/placementPreferences.html

@@ -0,0 +1,57 @@
+<div ng-if="service.ServicePreferences && applicationState.endpoint.apiVersion >= 1.30" id="service-placement-preferences">
+  <rd-widget>
+    <rd-widget-header icon="fa-tasks" title="Placement preferences">
+      <div class="nopadding">
+        <a class="btn btn-default btn-sm pull-right" ng-click="isUpdating || addPlacementPreference(service)" ng-disabled="isUpdating">
+          <i class="fa fa-plus-circle" aria-hidden="true"></i> placement preference
+        </a>
+      </div>
+    </rd-widget-header>
+    <rd-widget-body ng-if="service.ServicePreferences.length === 0">
+      <p>There are no placement preferences for this service.</p>
+    </rd-widget-body>
+    <rd-widget-body ng-if="service.ServicePreferences.length > 0" classes="no-padding">
+      <table class="table" >
+        <thead>
+          <tr>
+            <th>Strategy</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="preference in service.ServicePreferences">
+            <td>
+              <div class="input-group input-group-sm">
+                <input type="text" class="form-control" ng-model="preference.strategy" placeholder="e.g. node.role" ng-change="updatePlacementPreference(service, preference)" ng-disabled="isUpdating">
+              </div>
+            </td>
+            <td>
+              <div class="input-group input-group-sm">
+                <input type="text" class="form-control" ng-model="preference.value" placeholder="e.g. manager" ng-change="updatePlacementPreference(service, preference)" ng-disabled="isUpdating">
+                <span class="input-group-btn">
+                  <button class="btn btn-sm btn-danger" type="button" ng-click="removePlacementPreference(service, $index)" ng-disabled="isUpdating">
+                    <i class="fa fa-trash" aria-hidden="true"></i>
+                  </button>
+                </span>
+              </div>
+            </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, ['ServicePreferences'])" 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, ['ServicePreferences'])">Reset changes</a></li>
+            <li><a ng-click="cancelChanges(service)">Reset all changes</a></li>
+          </ul>
+        </div>
+      </div>
+    </rd-widget-footer>
+  </rd-widget>
+</div>

app/components/service/service.html

@@ -113,6 +113,7 @@
           <li><a href ng-click="goToItem('service-network-specs')">Network &amp; published ports</a></li>
           <li><a href ng-click="goToItem('service-resources')">Resource limits &amp; reservations</a></li>
           <li><a href ng-click="goToItem('service-placement-constraints')">Placement constraints</a></li>
+          <li><a href ng-click="goToItem('service-placement-preferences')" ng-if="applicationState.endpoint.apiVersion >= 1.30">Placement preferences</a></li>
           <li><a href ng-click="goToItem('service-restart-policy')">Restart policy</a></li>
           <li><a href ng-click="goToItem('service-update-config')">Update configuration</a></li>
           <li><a href ng-click="goToItem('service-labels')">Service labels</a></li>
@@ -152,6 +153,7 @@
     <h3 id="service-specs">Service specification</h3>
     <div id="service-resources" class="padding-top" ng-include="'app/components/service/includes/resources.html'"></div>
     <div id="service-placement-constraints" class="padding-top" ng-include="'app/components/service/includes/constraints.html'"></div>
+    <div id="service-placement-preferences" class="padding-top" ng-include="'app/components/service/includes/placementPreferences.html'"></div>
     <div id="service-restart-policy" class="padding-top" ng-include="'app/components/service/includes/restart.html'"></div>
     <div id="service-update-config" class="padding-top" ng-include="'app/components/service/includes/updateconfig.html'"></div>
     <div id="service-labels" class="padding-top" ng-include="'app/components/service/includes/servicelabels.html'"></div>

app/components/service/serviceController.js

@@ -1,6 +1,6 @@
 angular.module('service', [])
-.controller('ServiceController', ['$q', '$scope', '$stateParams', '$state', '$location', '$timeout', '$anchorScroll', 'ServiceService', 'Secret', 'SecretHelper', 'Service', 'ServiceHelper', 'TaskService', 'NodeService', 'Notifications', 'Pagination', 'ModalService', 'ControllerDataPipeline',
-function ($q, $scope, $stateParams, $state, $location, $timeout, $anchorScroll, ServiceService, Secret, SecretHelper, Service, ServiceHelper, TaskService, NodeService, Notifications, Pagination, ModalService, ControllerDataPipeline) {
+.controller('ServiceController', ['$q', '$scope', '$stateParams', '$state', '$location', '$timeout', '$anchorScroll', 'ServiceService', 'Secret', 'SecretHelper', 'Service', 'ServiceHelper', 'LabelHelper', 'TaskService', 'NodeService', 'Notifications', 'Pagination', 'ModalService', 'ControllerDataPipeline',
+function ($q, $scope, $stateParams, $state, $location, $timeout, $anchorScroll, ServiceService, Secret, SecretHelper, Service, ServiceHelper, LabelHelper, TaskService, NodeService, Notifications, Pagination, ModalService, ControllerDataPipeline) {
 
   $scope.state = {};
   $scope.state.pagination_count = Pagination.getPaginationCount('service_tasks');
@@ -124,10 +124,24 @@ function ($q, $scope, $stateParams, $state, $location, $timeout, $anchorScroll,
       updateServiceArray(service, 'ServiceConstraints', service.ServiceConstraints);
     }
   };
-  $scope.updatePlacementConstraint = function updatePlacementConstraint(service, constraint) {
+  $scope.updatePlacementConstraint = function(service, constraint) {
     updateServiceArray(service, 'ServiceConstraints', service.ServiceConstraints);
   };
 
+  $scope.addPlacementPreference = function(service) {
+    service.ServicePreferences.push({ strategy: 'spread', value: '' });
+    updateServiceArray(service, 'ServicePreferences', service.ServicePreferences);
+  };
+  $scope.removePlacementPreference = function(service, index) {
+    var removedElement = service.ServicePreferences.splice(index, 1);
+    if (removedElement !== null) {
+      updateServiceArray(service, 'ServicePreferences', service.ServicePreferences);
+    }
+  };
+  $scope.updatePlacementPreference = function(service, constraint) {
+    updateServiceArray(service, 'ServicePreferences', service.ServicePreferences);
+  };
+
   $scope.addPublishedPort = function addPublishedPort(service) {
     if (!service.Ports) {
       service.Ports = [];
@@ -174,9 +188,9 @@ function ($q, $scope, $stateParams, $state, $location, $timeout, $anchorScroll,
     $('#loadingViewSpinner').show();
     var config = ServiceHelper.serviceToConfig(service.Model);
     config.Name = service.Name;
-    config.Labels = translateServiceLabelsToLabels(service.ServiceLabels);
-    config.TaskTemplate.ContainerSpec.Env = translateEnvironmentVariablesToEnv(service.EnvironmentVariables);
-    config.TaskTemplate.ContainerSpec.Labels = translateServiceLabelsToLabels(service.ServiceContainerLabels);
+    config.Labels = LabelHelper.fromKeyValueToLabelHash(service.ServiceLabels);
+    config.TaskTemplate.ContainerSpec.Env = ServiceHelper.translateEnvironmentVariablesToEnv(service.EnvironmentVariables);
+    config.TaskTemplate.ContainerSpec.Labels = LabelHelper.fromKeyValueToLabelHash(service.ServiceContainerLabels);
     config.TaskTemplate.ContainerSpec.Image = service.Image;
     config.TaskTemplate.ContainerSpec.Secrets = service.ServiceSecrets ? service.ServiceSecrets.map(SecretHelper.secretConfig) : [];
 
@@ -188,6 +202,7 @@ function ($q, $scope, $stateParams, $state, $location, $timeout, $anchorScroll,
       config.TaskTemplate.Placement = {};
     }
     config.TaskTemplate.Placement.Constraints = ServiceHelper.translateKeyValueToPlacementConstraints(service.ServiceConstraints);
+    config.TaskTemplate.Placement.Preferences = ServiceHelper.translateKeyValueToPlacementPreferences(service.ServicePreferences);
 
     config.TaskTemplate.Resources = {
       Limits: {
@@ -263,11 +278,12 @@ function ($q, $scope, $stateParams, $state, $location, $timeout, $anchorScroll,
 
   function translateServiceArrays(service) {
     service.ServiceSecrets = service.Secrets ? service.Secrets.map(SecretHelper.flattenSecret) : [];
-    service.EnvironmentVariables = translateEnvironmentVariables(service.Env);
-    service.ServiceLabels = translateLabelsToServiceLabels(service.Labels);
-    service.ServiceContainerLabels = translateLabelsToServiceLabels(service.ContainerLabels);
+    service.EnvironmentVariables = ServiceHelper.translateEnvironmentVariables(service.Env);
+    service.ServiceLabels = LabelHelper.fromLabelHashToKeyValue(service.Labels);
+    service.ServiceContainerLabels = LabelHelper.fromLabelHashToKeyValue(service.ContainerLabels);
     service.ServiceMounts = angular.copy(service.Mounts);
-    service.ServiceConstraints = translateConstraintsToKeyValue(service.Constraints);
+    service.ServiceConstraints = ServiceHelper.translateConstraintsToKeyValue(service.Constraints);
+    service.ServicePreferences = ServiceHelper.translatePreferencesToKeyValue(service.Preferences);
   }
 
   function initView() {
@@ -310,7 +326,6 @@ function ($q, $scope, $stateParams, $state, $location, $timeout, $anchorScroll,
       Notifications.error('Failure', err, 'Unable to retrieve service details');
     })
     .finally(function final() {
-
       $('#loadingViewSpinner').hide();
     });
   }
@@ -341,80 +356,5 @@ function ($q, $scope, $stateParams, $state, $location, $timeout, $anchorScroll,
     service.hasChanges = true;
   }
 
-  function translateEnvironmentVariables(env) {
-    if (env) {
-      var variables = [];
-      env.forEach(function(variable) {
-        var idx = variable.indexOf('=');
-        var keyValue = [variable.slice(0,idx), variable.slice(idx+1)];
-        var originalValue = (keyValue.length > 1) ? keyValue[1] : '';
-        variables.push({ key: keyValue[0], value: originalValue, originalKey: keyValue[0], originalValue: originalValue, added: true});
-      });
-      return variables;
-    }
-    return [];
-  }
-  function translateEnvironmentVariablesToEnv(env) {
-    if (env) {
-      var variables = [];
-      env.forEach(function(variable) {
-        if (variable.key && variable.key !== '') {
-          variables.push(variable.key + '=' + variable.value);
-        }
-      });
-      return variables;
-    }
-    return [];
-  }
-
-  function translateLabelsToServiceLabels(Labels) {
-    var labels = [];
-    if (Labels) {
-      Object.keys(Labels).forEach(function(key) {
-        labels.push({ key: key, value: Labels[key], originalKey: key, originalValue: Labels[key], added: true});
-      });
-    }
-    return labels;
-  }
-  function translateServiceLabelsToLabels(labels) {
-    var Labels = {};
-    if (labels) {
-      labels.forEach(function(label) {
-        Labels[label.key] = label.value;
-      });
-    }
-    return Labels;
-  }
-
-  function translateConstraintsToKeyValue(constraints) {
-    function getOperator(constraint) {
-      var indexEquals = constraint.indexOf('==');
-      if (indexEquals >= 0) {
-        return [indexEquals, '=='];
-      }
-      return [constraint.indexOf('!='), '!='];
-    }
-    if (constraints) {
-      var keyValueConstraints = [];
-      constraints.forEach(function(constraint) {
-        var operatorIndices = getOperator(constraint);
-
-        var key = constraint.slice(0, operatorIndices[0]);
-        var operator = operatorIndices[1];
-        var value = constraint.slice(operatorIndices[0] + 2);
-
-        keyValueConstraints.push({
-          key: key,
-          value: value,
-          operator: operator,
-          originalKey: key,
-          originalValue: value
-        });
-      });
-      return keyValueConstraints;
-    }
-    return [];
-  }
-
   initView();
 }]);