feat(node-details): move labels table and save button

app/docker/components/host-view-panels/node-availability-select/node-availability-select-controller.js

@@ -2,26 +2,10 @@ angular
   .module('portainer.docker')
   .controller('NodeAvailabilitySelectController', [
     function NodeAvailabilitySelectController() {
-      this.state = {
-        hasChanges: false
-      };
       this.onChange = onChange;
-      this.save = save;
-      this.cancelChanges = cancelChanges;
 
       function onChange() {
-        this.state.hasChanges = this.originalValue !== this.availability;
-      }
-
-      function save() {
         this.onSave({ availability: this.availability });
       }
-
-      function cancelChanges() {
-        this.state.hasChanges = false;
-        this.availability = this.originalValue;
-      }
-
-      
     }
   ]);

app/docker/components/host-view-panels/node-availability-select/node-availability-select.html

@@ -5,17 +5,4 @@
     <option value="pause">Pause</option>
     <option value="drain">Drain</option>
   </select>
-  <div class="btn-toolbar" role="toolbar">
-    <div class="btn-group" role="group">
-      <button type="button" class="btn btn-primary btn-sm" ng-disabled="!$ctrl.state.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()">Reset changes</a></li>
-      </ul>
-    </div>
-  </div>
 </div>

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

@@ -3,14 +3,11 @@ 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 label = ctrl.labels.splice(index, 1);
       if (label !== null) {
-        ctrl.hasChanges = true;
+      ctrl.onChangedLabels({ labels: ctrl.labels });
       }
     }
 
@@ -19,13 +16,11 @@ angular.module('portainer.docker').controller('NodeLabelsTableController', [
         label.value !== label.originalValue ||
         label.key !== label.originalKey
       ) {
-        ctrl.hasChanges = true;
+        ctrl.onChangedLabels({ labels: ctrl.labels });
       }
     }
 
-    function save() {
+   
-      ctrl.onChangedLabels({ labels: ctrl.labels });
-    }
 
     function cancelChanges() {
       ctrl.labels = ctrl.labels

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

@@ -31,23 +31,5 @@
         </div>
       </td>
     </tr>
-    <tr>
-      <td></td>
-      <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"
-              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()">Reset changes</a></li>
-            </ul>
-          </div>
-        </div>
-      </td>
-    </tr>
   </tbody>
 </table>

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

@@ -1,27 +1,33 @@
 angular
   .module('portainer.docker')
   .controller('SwarmNodeDetailsPanelController', [
-    function SwarmNodeDetailsPanelController() {
+    'NodeService', 'LabelHelper', 'Notifications', '$state',
-      this.state = {
+    function SwarmNodeDetailsPanelController(NodeService, LabelHelper, Notifications, $state) {
-        managerAddress: ''
+      var ctrl = this;
+      ctrl.state = {
+        managerAddress: '',
+        hasChanges: false
       };
-      this.$onChanges = $onChanges;
+      ctrl.$onChanges = $onChanges;
-      this.addLabel = addLabel;
+      ctrl.addLabel = addLabel;
-      this.updateNodeLabels = updateNodeLabels;
+      ctrl.updateNodeLabels = updateNodeLabels;
-      this.updateNodeAvailability = updateNodeAvailability;
+      ctrl.updateNodeAvailability = updateNodeAvailability;
+      ctrl.saveChanges = saveChanges;
+      ctrl.cancelChanges = cancelChanges;
+
       var managerRole = 'manager';
 
       function $onChanges() {
-        if (!this.details) {
+        if (!ctrl.details) {
           return;
         }
-        if (this.details.role === managerRole) {
+        if (ctrl.details.role === managerRole) {
-          this.state.managerAddress = '(' + this.details.managerAddress + ')';
+          ctrl.state.managerAddress = '(' + ctrl.details.managerAddress + ')';
         }
       }
 
       function addLabel() {
-        this.details.nodeLabels.push({
+        ctrl.details.nodeLabels.push({
           key: '',
           value: '',
           originalValue: '',
@@ -30,11 +36,61 @@ angular
       }
 
       function updateNodeLabels(labels) {
-        this.onChangedLabels({ labels: labels });
+        ctrl.details.nodeLabels = labels;
+        ctrl.state.hasChanges = true;
       }
 
       function updateNodeAvailability(availability) {
-        this.onChangedAvailability({ availability: availability });
+        ctrl.details.availability = availability;
+        ctrl.state.hasChanges = true;
+      }
+
+      function saveChanges() {
+        var originalNode = ctrl.originalNode;
+        var config = {
+          Name: originalNode.Name,
+          Availability: ctrl.details.availability,
+          Role: originalNode.Role,
+          Labels: LabelHelper.fromKeyValueToLabelHash(ctrl.details.nodeLabels),
+          Id: originalNode.Id,
+          Version: originalNode.Version
+        };
+
+        NodeService.updateNode(config)
+          .then(onUpdateSuccess)
+          .catch(notifyOnError);
+
+        function onUpdateSuccess() {
+          Notifications.success('Node successfully updated', 'Node updated');
+          $state.go(
+            'docker.nodes.node',
+            { id: originalNode.Id },
+            { reload: true }
+          );
+        }
+
+        function notifyOnError(error) {
+          Notifications.error('Failure', error, 'Failed to update node');
+        }
+      }
+
+      function cancelChanges() {
+        cancelLabelChanges();
+        ctrl.details.availability = ctrl.originalNode.Availability;
+        ctrl.state.hasChanges = false;
+      }
+
+      function cancelLabelChanges() {
+        ctrl.details.nodeLabels = ctrl.details.nodeLabels
+          .filter(function(label) {
+            return label.originalValue || label.originalKey;
+          })
+          .map(function(label) {
+            return Object.assign(label, {
+              value: label.originalValue,
+              key: label.originalKey
+            });
+          });
       }
     }
   ]);

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

@@ -16,15 +16,15 @@
             <tr>
               <td>Availability</td>
               <td>
-                <node-availability-select 
+                <node-availability-select on-save="$ctrl.updateNodeAvailability(availability)"
-                  on-save="$ctrl.updateNodeAvailability(availability)"
+                  availability="$ctrl.details.availability" original-value="$ctrl.details.availability">
-                  availability="$ctrl.details.availability"
+                </node-availability-select>
-                  original-value="$ctrl.details.availability"></node-availability-select>
               </td>
             </tr>
             <tr>
               <td>Status</td>
-              <td><span class="label label-{{ $ctrl.details.status | nodestatusbadge }}">{{ $ctrl.details.status }}</span></td>
+              <td><span class="label label-{{ $ctrl.details.status | nodestatusbadge }}">{{
+                  $ctrl.details.status }}</span></td>
             </tr>
             <tr ng-if=" $ctrl.details.engineLabels.length">
               <td>Engine Labels</td>
@@ -39,14 +39,36 @@
                 </div>
                 Node Labels
               </td>
-              <td>
+              <td></td>
-                <node-labels-table 
+            </tr>
-                  labels="$ctrl.details.nodeLabels"
+            <tr>
+              <td colspan="2">
+                <node-labels-table labels="$ctrl.details.nodeLabels"
                   on-changed-labels="$ctrl.updateNodeLabels(labels)"></node-labels-table>
               </td>
             </tr>
+            <tr>
+              <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.state.hasChanges" ng-click="$ctrl.saveChanges()">
+                      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()">Reset changes</a></li>
+                    </ul>
+                  </div>
+                </div>
+              </td>
+            </tr>
           </tbody>
         </table>
+
       </rd-widget-body>
     </rd-widget>
   </div>

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

@@ -4,7 +4,6 @@ angular.module('portainer.docker').component('swarmNodeDetailsPanel', {
   controller: 'SwarmNodeDetailsPanelController',
   bindings: {
     details: '<',
-    onChangedLabels: '&',
+    originalNode: '<'
-    onChangedAvailability: '&'
   }
 });

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

@@ -1,12 +1,9 @@
 angular.module('portainer.docker').controller('NodeDetailsViewController', [
-  '$stateParams', 'NodeService', 'LabelHelper', 'Notifications', '$state', 'StateManager', 'AgentService',
+  '$stateParams', 'NodeService', 'StateManager', 'AgentService',
-  function NodeDetailsViewController($stateParams, NodeService, LabelHelper, Notifications, $state, StateManager, AgentService) {
+  function NodeDetailsViewController($stateParams, NodeService, StateManager, AgentService) {
     var ctrl = this;
-    var originalNode;
 
     ctrl.$onInit = initView;
-    ctrl.updateLabels = updateLabels;
-    ctrl.updateAvailability = updateAvailability;
 
     ctrl.state = {
       isAgent: false
@@ -18,7 +15,7 @@ angular.module('portainer.docker').controller('NodeDetailsViewController', [
 
       var nodeId = $stateParams.id;
       NodeService.node(nodeId).then(function(node) {
-        originalNode = node;
+        ctrl.originalNode = node;
         ctrl.hostDetails = buildHostDetails(node);
         ctrl.engineDetails = buildEngineDetails(node);
         ctrl.nodeDetails = buildNodeDetails(node);
@@ -76,39 +73,9 @@ angular.module('portainer.docker').controller('NodeDetailsViewController', [
       };
     }
 
-    function updateLabels(labels) {
+    
-      originalNode.Labels = labels;
-      updateNode(originalNode);
-    }
 
-    function updateAvailability(availability) {
+   
-      originalNode.Availability = availability;
-      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 transformPlugins(pluginsList, type) {
       return pluginsList

app/docker/views/nodes/node-details/node-details-view.html

@@ -5,7 +5,6 @@
 >
   <swarm-node-details-panel
     details="$ctrl.nodeDetails"
-    on-changed-labels="$ctrl.updateLabels(labels)"
+    original-node="$ctrl.originalNode"
-    on-changed-availability="$ctrl.updateAvailability(availability)"
   ></swarm-node-details-panel>
 </host-overview>