feat(service-details): add the ability to edit the labels associated to a service

app/components/service/service.html

@@ -106,15 +106,35 @@
                 </div>
               </td>
             </tr>
-            <tr ng-if="service.Labels">
+            <tr>
               <td>Labels</td>
               <td>
-                <table class="table table-bordered table-condensed">
-                  <tr ng-repeat="(k, v) in service.Labels">
-                    <td>{{ k }}</td>
-                    <td>{{ v }}</td>
-                  </tr>
-                </table>
+                <div class="form-group">
+                  <div class="col-sm-11">
+                    <span class="label label-default interactive" ng-click="addLabel(service)">
+                      <i class="fa fa-plus-circle" aria-hidden="true"></i> label
+                    </span>
+                  </div>
+                  <!-- labels-input-list -->
+                  <div class="col-sm-11 form-inline" style="margin-top: 10px;">
+                    <div ng-repeat="label in service.ServiceLabels" 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.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">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="removeLabel(service, $index)">
+                            <i class="fa fa-minus" aria-hidden="true"></i>
+                          </button>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- !labels-input-list -->
+                </div>
               </td>
             </tr>
           </tbody>

app/components/service/serviceController.js

@@ -39,6 +39,17 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Mess
   $scope.updateEnvironmentVariable = function updateEnvironmentVariable(service, variable) {
     service.hasChanges = service.hasChanges || variable.value !== variable.originalValue;
   };
+  $scope.addLabel = function addLabel(service) {
+    service.hasChanges = true;
+    service.ServiceLabels.push({ key: '', value: '', originalValue: '' });
+  };
+  $scope.removeLabel = function removeLabel(service, index) {
+    var removedElement = service.ServiceLabels.splice(index, 1);
+    service.hasChanges = service.hasChanges || removedElement !== null;
+  };
+  $scope.updateLabel = function updateLabel(service, label) {
+    service.hasChanges = service.hasChanges || label.value !== label.originalValue;
+  };
 
   $scope.cancelChanges = function changeServiceImage(service) {
     Object.keys(previousServiceValues).forEach(function(attribute) {
@@ -48,7 +59,8 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Mess
     previousServiceValues = {}; // clear out all changes
     // clear out environment variable changes
     service.EnvironmentVariables = translateEnvironmentVariables(service.Env);
-    
+    service.ServiceLabels = translateLabelsToServiceLabels(service.Labels);
+
     service.hasChanges = false;
   };
 
@@ -57,6 +69,7 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Mess
     var config = ServiceHelper.serviceToConfig(service.Model);
     config.Name = service.newServiceName;
     config.TaskTemplate.ContainerSpec.Env = translateEnvironmentVariablesToEnv(service.EnvironmentVariables);
+    config.TaskTemplate.ContainerSpec.Labels = translateServiceLabelsToLabels(service.ServiceLabels);
     config.TaskTemplate.ContainerSpec.Image = service.newServiceImage;
     config.Mode.Replicated.Replicas = service.Replicas;
 
@@ -96,6 +109,7 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Mess
       service.newServiceImage = service.Image;
       service.newServiceReplicas = service.Replicas;
       service.EnvironmentVariables = translateEnvironmentVariables(service.Env);
+      service.ServiceLabels = translateLabelsToServiceLabels(service.Labels);
 
       $scope.service = service;
       Task.query({filters: {service: [service.Name]}}, function (tasks) {
@@ -157,5 +171,24 @@ function ($scope, $stateParams, $state, Service, ServiceHelper, Task, Node, Mess
     return [];
   }
 
+  function translateLabelsToServiceLabels(Labels) {
+    var labels = [];
+    if (Labels) {
+      Object.keys(Labels).forEach(function(key) {
+        labels.push({ key: key, value: Labels[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;
+  }
+
   fetchServiceDetails();
 }]);