#280 feat(service-creation): add labels to service creation (#306)

app/components/createService/createServiceController.js

@@ -12,6 +12,7 @@ function ($scope, $state, Service, Volume, Network, ImageHelper, Messages) {
     WorkingDir: '',
     User: '',
     Env: [],
+    Labels: [],
     Volumes: [],
     Network: '',
     ExtraNetworks: [],
@@ -50,6 +51,14 @@ function ($scope, $state, Service, Volume, Network, ImageHelper, Messages) {
     $scope.formValues.Env.splice(index, 1);
   };
 
+  $scope.addLabel = function() {
+    $scope.formValues.Labels.push({ name: '', value: ''});
+  };
+
+  $scope.removeLabel = function(index) {
+    $scope.formValues.Labels.splice(index, 1);
+  };
+
   function prepareImageConfig(config, input) {
     var imageConfig = ImageHelper.createImageConfig(input.Image, input.Registry);
     config.TaskTemplate.ContainerSpec.Image = imageConfig.repo + ':' + imageConfig.tag;
@@ -97,6 +106,16 @@ function ($scope, $state, Service, Volume, Network, ImageHelper, Messages) {
     config.TaskTemplate.ContainerSpec.Env = env;
   }
 
+  function prepareLabelsConfig(config, input) {
+    var labels = {};
+    input.Labels.forEach(function (label) {
+      if (label.name && label.value) {
+          labels[label.name] = label.value;
+      }
+    });
+    config.TaskTemplate.ContainerSpec.Labels = labels;
+  }
+
   function prepareVolumes(config, input) {
     input.Volumes.forEach(function (volume) {
       if (volume.Source && volume.Target) {
@@ -138,6 +157,7 @@ function ($scope, $state, Service, Volume, Network, ImageHelper, Messages) {
     preparePortsConfig(config, input);
     prepareCommandConfig(config, input);
     prepareEnvConfig(config, input);
+    prepareLabelsConfig(config, input);
     prepareVolumes(config, input);
     prepareNetworks(config, input);
     return config;

app/components/createService/createservice.html

@@ -101,6 +101,7 @@
           <li class="active interactive"><a data-target="#command" data-toggle="tab">Command</a></li>
           <li class="interactive"><a data-target="#volumes" data-toggle="tab">Volumes</a></li>
           <li class="interactive"><a data-target="#network" data-toggle="tab">Network</a></li>
+          <li class="interactive"><a data-target="#labels" data-toggle="tab">Labels</a></li>
         </ul>
         <!-- tab-content -->
         <div class="tab-content">
@@ -251,6 +252,42 @@
             </form>
           </div>
           <!-- !tab-network -->
+          <!-- tab-labels -->
+          <div class="tab-pane" id="labels">
+            <form class="form-horizontal" style="margin-top: 15px;">
+              <!-- labels -->
+              <div class="form-group">
+                <label for="service_env" class="col-sm-1 control-label text-left">Labels</label>
+                <div class="col-sm-11">
+                  <span class="label label-default interactive" ng-click="addLabel()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> label
+                  </span>
+                </div>
+                <!-- labels-input-list -->
+                <div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
+                  <div ng-repeat="label in formValues.Labels" 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="removeLabel($index)">
+                          <i class="fa fa-minus" aria-hidden="true"></i>
+                        </button>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <!-- !labels-input-list -->
+              </div>
+              <!-- !labels-->
+            </form>
+          </div>
+          <!-- !tab-labels -->
+
           <!-- tab-security -->
           <div class="tab-pane" id="security">
           </div>