feat(service-creation): add support for container labels (#365)

app/components/createService/createServiceController.js

@@ -13,6 +13,7 @@ function ($scope, $state, Service, Volume, Network, ImageHelper, Messages) {
     User: '',
     Env: [],
     Labels: [],
+    ContainerLabels: [],
     Volumes: [],
     Network: '',
     ExtraNetworks: [],
@@ -59,6 +60,14 @@ function ($scope, $state, Service, Volume, Network, ImageHelper, Messages) {
     $scope.formValues.Labels.splice(index, 1);
   };
 
+  $scope.addContainerLabel = function() {
+    $scope.formValues.ContainerLabels.push({ name: '', value: ''});
+  };
+
+  $scope.removeContainerLabel = function(index) {
+    $scope.formValues.ContainerLabels.splice(index, 1);
+  };
+
   function prepareImageConfig(config, input) {
     var imageConfig = ImageHelper.createImageConfig(input.Image, input.Registry);
     config.TaskTemplate.ContainerSpec.Image = imageConfig.repo + ':' + imageConfig.tag;
@@ -113,7 +122,15 @@ function ($scope, $state, Service, Volume, Network, ImageHelper, Messages) {
           labels[label.name] = label.value;
       }
     });
-    config.TaskTemplate.ContainerSpec.Labels = labels;
+    config.Labels = labels;
+
+    var containerLabels = {};
+    input.ContainerLabels.forEach(function (label) {
+      if (label.name && label.value) {
+          containerLabels[label.name] = label.value;
+      }
+    });
+    config.TaskTemplate.ContainerSpec.Labels = containerLabels;
   }
 
   function prepareVolumes(config, input) {

app/components/createService/createservice.html

@@ -284,6 +284,35 @@
                 <!-- !labels-input-list -->
               </div>
               <!-- !labels-->
+              <!-- container-labels -->
+              <div class="form-group">
+                <label for="service_env" class="col-sm-1 control-label text-left">Container labels</label>
+                <div class="col-sm-11">
+                  <span class="label label-default interactive" ng-click="addContainerLabel()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> container label
+                  </span>
+                </div>
+                <!-- container-labels-input-list -->
+                <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="label in formValues.ContainerLabels" style="margin-top: 2px;">
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">name</span>
+                      <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
+                    </div>
+                    <div class="input-group col-sm-5 input-group-sm">
+                      <span class="input-group-addon">value</span>
+                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar">
+                      <span class="input-group-btn">
+                        <button class="btn btn-default" type="button" ng-click="removeContainerLabel($index)">
+                          <i class="fa fa-minus" aria-hidden="true"></i>
+                        </button>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <!-- !container-labels-input-list -->
+              </div>
+              <!-- !container-labels-->
             </form>
           </div>
           <!-- !tab-labels -->

app/components/service/service.html

@@ -137,6 +137,37 @@
                 </div>
               </td>
             </tr>
+            <tr>
+              <td>Container labels</td>
+              <td>
+                <div class="form-group">
+                  <div class="col-sm-11 nopadding">
+                    <span class="label label-default interactive fit-text-size" ng-click="addContainerLabel(service)">
+                      <i class="fa fa-plus-circle" aria-hidden="true"></i> container label
+                    </span>
+                  </div>
+                  <!-- labels-input-list -->
+                  <div class="col-sm-11 form-inline nopadding" style="margin-top: 10px;">
+                    <div ng-repeat="label in service.ServiceContainerLabels" style="margin-top: 2px;">
+                      <div class="input-group col-sm-5 input-group-sm">
+                        <span class="input-group-addon fit-text-size">name</span>
+                        <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" ng-change="updateLabel(service, label)">
+                      </div>
+                      <div class="input-group col-sm-5 input-group-sm">
+                        <span class="input-group-addon fit-text-size">value</span>
+                        <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateLabel(service, label)">
+                        <span class="input-group-btn">
+                          <button class="btn btn-default" type="button" ng-click="removeContainerLabel(service, $index)">
+                            <i class="fa fa-minus" aria-hidden="true"></i>
+                          </button>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- !labels-input-list -->
+                </div>
+              </td>
+            </tr>
           </tbody>
         </table>
       </rd-widget-body>

app/components/service/serviceController.js

@@ -51,6 +51,14 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Mess
   $scope.updateLabel = function updateLabel(service, label) {
     service.hasChanges = service.hasChanges || label.value !== label.originalValue;
   };
+  $scope.addContainerLabel = function addContainerLabel(service) {
+    service.hasChanges = true;
+    service.ServiceContainerLabels.push({ key: '', value: '', originalValue: '' });
+  };
+  $scope.removeContainerLabel = function removeContainerLabel(service, index) {
+    var removedElement = service.ServiceContainerLabels.splice(index, 1);
+    service.hasChanges = service.hasChanges || removedElement !== null;
+  };
 
   $scope.cancelChanges = function changeServiceImage(service) {
     Object.keys(previousServiceValues).forEach(function(attribute) {
@@ -61,6 +69,7 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Mess
     // clear out environment variable changes
     service.EnvironmentVariables = translateEnvironmentVariables(service.Env);
     service.ServiceLabels = translateLabelsToServiceLabels(service.Labels);
+    service.ServiceContainerLabels = translateLabelsToServiceLabels(service.ContainerLabels);
 
     service.hasChanges = false;
   };
@@ -69,8 +78,9 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Mess
     $('#loadServicesSpinner').show();
     var config = ServiceHelper.serviceToConfig(service.Model);
     config.Name = service.newServiceName;
+    config.Labels = translateServiceLabelsToLabels(service.ServiceLabels);
     config.TaskTemplate.ContainerSpec.Env = translateEnvironmentVariablesToEnv(service.EnvironmentVariables);
-    config.TaskTemplate.ContainerSpec.Labels = translateServiceLabelsToLabels(service.ServiceLabels);
+    config.TaskTemplate.ContainerSpec.Labels = translateServiceLabelsToLabels(service.ServiceContainerLabels);
     config.TaskTemplate.ContainerSpec.Image = service.newServiceImage;
     if (service.Mode === 'replicated') {
       config.Mode.Replicated.Replicas = service.Replicas;
@@ -113,6 +123,7 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Mess
       service.newServiceReplicas = service.Replicas;
       service.EnvironmentVariables = translateEnvironmentVariables(service.Env);
       service.ServiceLabels = translateLabelsToServiceLabels(service.Labels);
+      service.ServiceContainerLabels = translateLabelsToServiceLabels(service.ContainerLabels);
 
       $scope.service = service;
       Task.query({filters: {service: [service.Name]}}, function (tasks) {

app/shared/helpers.js

@@ -41,8 +41,10 @@ angular.module('portainer.helpers', [])
     serviceToConfig: function(service) {
       return {
         Name: service.Spec.Name,
+        Labels: service.Spec.Labels,
         TaskTemplate: service.Spec.TaskTemplate,
         Mode: service.Spec.Mode,
+        UpdateConfig: service.Spec.UpdateConfig,
         Networks: service.Spec.Networks,
         EndpointSpec: service.Spec.EndpointSpec
       };

app/shared/viewmodel.js

@@ -35,8 +35,9 @@ function ServiceViewModel(data) {
   } else {
     this.Mode = 'global';
   }
+  this.Labels = data.Spec.Labels;
   if (data.Spec.TaskTemplate.ContainerSpec) {
-    this.Labels = data.Spec.TaskTemplate.ContainerSpec.Labels;
+    this.ContainerLabels = data.Spec.TaskTemplate.ContainerSpec.Labels;
   }
   if (data.Spec.TaskTemplate.ContainerSpec.Env) {
     this.Env = data.Spec.TaskTemplate.ContainerSpec.Env;