feat(engine-details): add update label functionality

app/docker/components/host-view-panels/node-labels-table/node-labels-table-controller.js

@@ -3,12 +3,14 @@ angular.module('portainer.docker').controller('NodeLabelsTableController', [
     var ctrl = this;
     ctrl.removeLabel = removeLabel;
     ctrl.updateLabel = updateLabel;
+    ctrl.save = save;
+    ctrl.hasChanges = false;
+    ctrl.cancelChanges = cancelChanges;
 
     function removeLabel(index) {
-      var removedElement = ctrl.labels.splice(index, 1);
-      if (removedElement !== null) {
-        console.log(ctrl.labels);
-        ctrl.onChangedLabels({labels: ctrl.labels});
+      var label = ctrl.labels.splice(index, 1);
+      if (label !== null) {
+        ctrl.hasChanges = true;
       }
     }
 
@@ -17,8 +19,26 @@ angular.module('portainer.docker').controller('NodeLabelsTableController', [
         label.value !== label.originalValue ||
         label.key !== label.originalKey
       ) {
-        ctrl.onChangedLabels({labels: ctrl.labels});
+        ctrl.hasChanges = true;
       }
     }
+
+    function save() {
+      ctrl.onChangedLabels({ labels: ctrl.labels });
+    }
+
+    function cancelChanges() {
+      ctrl.labels = ctrl.labels
+        .filter(function(label) {
+          return label.originalValue || label.originalKey;
+        })
+        .map(function(label) {
+          return Object.assign(label, {
+            value: label.originalValue,
+            key: label.originalKey
+          });
+        });
+      ctrl.hasChanges = false;
+    }
   }
 ]);

app/docker/components/host-view-panels/node-labels-table/node-labels-table.html

@@ -36,14 +36,14 @@
       <td>
         <div class="btn-toolbar" role="toolbar">
           <div class="btn-group" role="group">
-            <button type="button" class="btn btn-primary btn-sm" ng-disabled="!$ctrl.hasChanges()"
+            <button type="button" class="btn btn-primary btn-sm" ng-disabled="!$ctrl.hasChanges"
               ng-click="$ctrl.save()">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="$ctrl.cancelChanges(node)">Reset changes</a></li>
+              <li><a ng-click="$ctrl.cancelChanges()">Reset changes</a></li>
             </ul>
           </div>
         </div>

app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel-controller.js

@@ -2,18 +2,40 @@ angular
   .module('portainer.docker')
   .controller('SwarmNodeDetailsPanelController', [
     function SwarmNodeDetailsPanelController() {
-      this.$onInit = initView;
       this.state = {
         managerAddress: ''
       };
-
+      this.$onInit = initView;
+      this.$onChanges = $onChanges;
+      this.addLabel = addLabel;
+      this.updateNodeLabels = updateNodeLabels;
       var managerRole = 'manager';
 
       function initView() {
+        
+      }
+
+      function $onChanges() {
+        if (!this.details) {
+          return;
+        }
         if (this.details.role === managerRole) {
           this.state.managerAddress =
             '(Manager address: ' + this.details.managerAddress + ')';
         }
       }
+
+      function addLabel() {
+        this.details.nodeLabels.push({
+          key: '',
+          value: '',
+          originalValue: '',
+          originalKey: ''
+        });
+      }
+
+      function updateNodeLabels(labels) {
+        this.onChangedLabels({labels: labels});
+      }
     }
   ]);

app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel.html

@@ -26,8 +26,19 @@
               <td>{{ $ctrl.details.engineLabels | commaSeperated }}</td>
             </tr>
             <tr>
-              <td>Node Labels</td>
-              <td>{{ $ctrl.details.nodeLabels | commaSeperated }} </td>
+              <td>
+                <div class="nopadding">
+                  <a class="btn btn-default btn-sm pull-right" ng-click="$ctrl.addLabel(node)">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i> label
+                  </a>
+                </div>
+                Node Labels
+              </td>
+              <td>
+                <node-labels-table 
+                  labels="$ctrl.details.nodeLabels"
+                  on-changed-labels="$ctrl.onChangedLabels(labels)"></node-labels-table>
+              </td>
             </tr>
           </tbody>
         </table>

app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel.js

@@ -3,6 +3,7 @@ angular.module('portainer.docker').component('swarmNodeDetailsPanel', {
     'app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel.html',
   controller: 'SwarmNodeDetailsPanelController',
   bindings: {
-    details: '<'
+    details: '<',
+    onChangedLabels: '&'
   }
 });

app/docker/views/nodes/node-details/node-details-view-controller.js

@@ -1,13 +1,26 @@
 angular.module('portainer.docker').controller('NodeDetailsViewController', [
   '$stateParams',
   'NodeService',
-  function NodeDetailsViewController($stateParams, NodeService) {
+  'NodeHelper',
+  'LabelHelper',
+  'Notifications',
+  '$state',
+  function NodeDetailsViewController(
+    $stateParams,
+    NodeService,
+    NodeHelper,
+    LabelHelper,
+    Notifications,
+    $state
+  ) {
     var ctrl = this;
-
+    var originalNode;
     ctrl.$onInit = initView;
+    ctrl.updateLabels = updateLabels;
 
     function initView() {
       NodeService.node($stateParams.id).then(function(node) {
+        originalNode = node;
         ctrl.hostDetails = buildHostDetails(node);
         ctrl.engineDetails = buildEngineDetails(node);
         ctrl.nodeDetails = buildNodeDetails(node);
@@ -52,6 +65,35 @@ angular.module('portainer.docker').controller('NodeDetailsViewController', [
       };
     }
 
+    function updateLabels(labels) {
+      originalNode.labels = labels;
+      updateNode(originalNode);
+    }
+
+    function updateNode(node) {
+      var config = {
+        Name: node.Name,
+        Availability: node.Availability,
+        Role: node.Role,
+        Labels: LabelHelper.fromKeyValueToLabelHash(node.Labels),
+        Id: node.Id,
+        Version: node.Version
+      };
+      
+      NodeService.updateNode(config)
+        .then(onUpdateSuccess)
+        .catch(notifyOnError);
+
+      function onUpdateSuccess() {
+        Notifications.success('Node successfully updated', 'Node updated');
+        $state.go('docker.nodes.node', { id: node.Id }, { reload: true });
+      }
+
+      function notifyOnError(error) {
+        Notifications.error('Failure', error, 'Failed to update node');
+      }
+    }
+
     function getPlugins(pluginsList, type) {
       return pluginsList
         .filter(function(plugin) {