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

2018-09-16 15:25:59 +03:00 · 2018-09-16 15:25:59 +03:00 · e09f653155
parent 21fece80da
commit e09f653155
9 changed files with 109 additions and 118 deletions
--- a/app/docker/components/host-view-panels/node-availability-select/node-availability-select-controller.js
+++ b/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;
-      }
-
-      
    }
  ]);
--- a/app/docker/components/host-view-panels/node-availability-select/node-availability-select.html
+++ b/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>
--- a/app/docker/components/host-view-panels/node-labels-table/node-labels-table-controller.js
+++ b/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
--- a/app/docker/components/host-view-panels/node-labels-table/node-labels-table.html
+++ b/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>
--- a/app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel-controller.js
+++ b/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() {
-      this.state = {
-        managerAddress: ''
+    'NodeService', 'LabelHelper', 'Notifications', '$state',
+    function SwarmNodeDetailsPanelController(NodeService, LabelHelper, Notifications, $state) {
+      var ctrl = this;
+      ctrl.state = {
+        managerAddress: '',
+        hasChanges: false
      };
-      this.$onChanges = $onChanges;
-      this.addLabel = addLabel;
-      this.updateNodeLabels = updateNodeLabels;
-      this.updateNodeAvailability = updateNodeAvailability;
+      ctrl.$onChanges = $onChanges;
+      ctrl.addLabel = addLabel;
+      ctrl.updateNodeLabels = updateNodeLabels;
+      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) {
-          this.state.managerAddress = '(' + this.details.managerAddress + ')';
+        if (ctrl.details.role === managerRole) {
+          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
+            });
+          });
      }
    }
  ]);
--- a/app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel.html
+++ b/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 
-                  on-save="$ctrl.updateNodeAvailability(availability)"
-                  availability="$ctrl.details.availability"
-                  original-value="$ctrl.details.availability"></node-availability-select>
+                <node-availability-select on-save="$ctrl.updateNodeAvailability(availability)"
+                  availability="$ctrl.details.availability" 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>
-                <node-labels-table 
-                  labels="$ctrl.details.nodeLabels"
+              <td></td>
+            </tr>
+            <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>
--- a/app/docker/components/host-view-panels/swarm-node-details-panel/swarm-node-details-panel.js
+++ b/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: '&',
-    onChangedAvailability: '&'
+    originalNode: '<'
  }
 });
--- a/app/docker/views/nodes/node-details/node-details-view-controller.js
+++ b/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',
-  function NodeDetailsViewController($stateParams, NodeService, LabelHelper, Notifications, $state, StateManager, AgentService) {
+  '$stateParams', 'NodeService', '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
--- a/app/docker/views/nodes/node-details/node-details-view.html
+++ b/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)"
-    on-changed-availability="$ctrl.updateAvailability(availability)"
+    original-node="$ctrl.originalNode"
  ></swarm-node-details-panel>
 </host-overview>