feat(host-details): update node availability

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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,21 @@
+<div class="input-group input-group-sm">
+  <select name="nodeAvailability" class="selectpicker form-control" ng-model="$ctrl.availability"
+    ng-change="$ctrl.onChange($event)">
+    <option value="active">Active</option>
+    <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-availability-select/node-availability-select.js

@@ -0,0 +1,10 @@
+angular.module('portainer.docker').component('nodeAvailabilitySelect', {
+  templateUrl:
+    'app/docker/components/host-view-panels/node-availability-select/node-availability-select.html',
+  controller: 'NodeAvailabilitySelectController',
+  bindings: {
+    availability: '<',
+    originalValue: '<',
+    onSave: '&'
+  }
+});

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

@@ -5,23 +5,18 @@ angular
       this.state = {
         managerAddress: ''
       };
-      this.$onInit = initView;
       this.$onChanges = $onChanges;
       this.addLabel = addLabel;
       this.updateNodeLabels = updateNodeLabels;
+      this.updateNodeAvailability = updateNodeAvailability;
       var managerRole = 'manager';
 
-      function initView() {
-        
-      }
-
       function $onChanges() {
         if (!this.details) {
           return;
         }
         if (this.details.role === managerRole) {
-          this.state.managerAddress =
+          this.state.managerAddress = '(' + this.details.managerAddress + ')';
-            '(' + this.details.managerAddress + ')';
         }
       }
 
@@ -35,7 +30,11 @@ angular
       }
 
       function updateNodeLabels(labels) {
-        this.onChangedLabels({labels: labels});
+        this.onChangedLabels({ labels: labels });
+      }
+
+      function updateNodeAvailability(availability) {
+        this.onChangedAvailability({ availability: availability });
       }
     }
   ]);

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

@@ -15,11 +15,16 @@
             </tr>
             <tr>
               <td>Availability</td>
-              <td>{{ $ctrl.details.availability }}</td>
+              <td>
+                <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>{{ $ctrl.details.status }}</td>
+              <td><span class="label label-{{ $ctrl.details.status | nodestatusbadge }}">{{ $ctrl.details.status }}</span></td>
             </tr>
             <tr>
               <td>Engine Labels</td>

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

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

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

@@ -6,6 +6,8 @@ angular.module('portainer.docker').controller('NodeDetailsViewController', [
     
     ctrl.$onInit = initView;
     ctrl.updateLabels = updateLabels;
+    ctrl.updateAvailability = updateAvailability;
+
     ctrl.state = {
       isAgent: false
     };
@@ -65,6 +67,11 @@ angular.module('portainer.docker').controller('NodeDetailsViewController', [
       updateNode(originalNode);
     }
 
+    function updateAvailability(availability) {
+      originalNode.Availability = availability;
+      updateNode(originalNode);
+    }
+
     function updateNode(node) {
       var config = {
         Name: node.Name,

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

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