Merge pull request #6819 from hashicorp/f-ui-node-drain

UI: Invoke Node Drains

ui/app/adapters/node.js

@@ -1,3 +1,59 @@
 import Watchable from './watchable';
+import addToPath from 'nomad-ui/utils/add-to-path';
 
-export default Watchable.extend();
+export default Watchable.extend({
+  setEligible(node) {
+    return this.setEligibility(node, true);
+  },
+
+  setIneligible(node) {
+    return this.setEligibility(node, false);
+  },
+
+  setEligibility(node, isEligible) {
+    const url = addToPath(this.urlForFindRecord(node.id, 'node'), '/eligibility');
+    return this.ajax(url, 'POST', {
+      data: {
+        NodeID: node.id,
+        Eligibility: isEligible ? 'eligible' : 'ineligible',
+      },
+    });
+  },
+
+  // Force: -1s deadline
+  // No Deadline: 0 deadline
+  drain(node, drainSpec) {
+    const url = addToPath(this.urlForFindRecord(node.id, 'node'), '/drain');
+    return this.ajax(url, 'POST', {
+      data: {
+        NodeID: node.id,
+        DrainSpec: Object.assign(
+          {
+            Deadline: 0,
+            IgnoreSystemJobs: true,
+          },
+          drainSpec
+        ),
+      },
+    });
+  },
+
+  forceDrain(node, drainSpec) {
+    return this.drain(
+      node,
+      Object.assign({}, drainSpec, {
+        Deadline: -1,
+      })
+    );
+  },
+
+  cancelDrain(node) {
+    const url = addToPath(this.urlForFindRecord(node.id, 'node'), '/drain');
+    return this.ajax(url, 'POST', {
+      data: {
+        NodeID: node.id,
+        DrainSpec: null,
+      },
+    });
+  },
+});

ui/app/components/drain-popover.js

@@ -0,0 +1,84 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { equal } from '@ember/object/computed';
+import { computed as overridable } from 'ember-overridable-computed';
+import { task } from 'ember-concurrency';
+import Duration from 'duration-js';
+
+export default Component.extend({
+  tagName: '',
+
+  client: null,
+
+  onError() {},
+  onDrain() {},
+
+  parseError: '',
+
+  deadlineEnabled: false,
+  forceDrain: false,
+  drainSystemJobs: true,
+
+  selectedDurationQuickOption: overridable(function() {
+    return this.durationQuickOptions[0];
+  }),
+
+  durationIsCustom: equal('selectedDurationQuickOption.value', 'custom'),
+  customDuration: '',
+
+  durationQuickOptions: computed(() => [
+    { label: '1 Hour', value: '1h' },
+    { label: '4 Hours', value: '4h' },
+    { label: '8 Hours', value: '8h' },
+    { label: '12 Hours', value: '12h' },
+    { label: '1 Day', value: '1d' },
+    { label: 'Custom', value: 'custom' },
+  ]),
+
+  deadline: computed(
+    'deadlineEnabled',
+    'durationIsCustom',
+    'customDuration',
+    'selectedDurationQuickOption.value',
+    function() {
+      if (!this.deadlineEnabled) return 0;
+      if (this.durationIsCustom) return this.customDuration;
+      return this.selectedDurationQuickOption.value;
+    }
+  ),
+
+  drain: task(function*(close) {
+    if (!this.client) return;
+    const isUpdating = this.client.isDraining;
+
+    let deadline;
+    try {
+      deadline = new Duration(this.deadline).nanoseconds();
+    } catch (err) {
+      this.set('parseError', err.message);
+      return;
+    }
+
+    const spec = {
+      Deadline: deadline,
+      IgnoreSystemJobs: !this.drainSystemJobs,
+    };
+
+    close();
+
+    try {
+      if (this.forceDrain) {
+        yield this.client.forceDrain(spec);
+      } else {
+        yield this.client.drain(spec);
+      }
+      this.onDrain(isUpdating);
+    } catch (err) {
+      this.onError(err);
+    }
+  }),
+
+  preventDefault(e) {
+    e.preventDefault();
+  },
+});

ui/app/components/popover-menu.js

@@ -0,0 +1,56 @@
+import Component from '@ember/component';
+import { run } from '@ember/runloop';
+
+const TAB = 9;
+const ARROW_DOWN = 40;
+const FOCUSABLE = [
+  'a:not([disabled])',
+  'button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([disabled]):not([tabindex="-1"])',
+].join(', ');
+
+export default Component.extend({
+  classnames: ['popover'],
+
+  triggerClass: '',
+  isOpen: false,
+  label: '',
+
+  dropdown: null,
+
+  capture(dropdown) {
+    // It's not a good idea to grab a dropdown reference like this, but it's necessary
+    // in order to invoke dropdown.actions.close in traverseList as well as
+    // dropdown.actions.reposition when the label or selection length changes.
+    this.set('dropdown', dropdown);
+  },
+
+  didReceiveAttrs() {
+    const dropdown = this.dropdown;
+    if (this.isOpen && dropdown) {
+      run.scheduleOnce('afterRender', () => {
+        dropdown.actions.reposition();
+      });
+    }
+  },
+
+  actions: {
+    openOnArrowDown(dropdown, e) {
+      if (!this.isOpen && e.keyCode === ARROW_DOWN) {
+        dropdown.actions.open(e);
+        e.preventDefault();
+      } else if (this.isOpen && (e.keyCode === TAB || e.keyCode === ARROW_DOWN)) {
+        const optionsId = this.element.querySelector('.popover-trigger').getAttribute('aria-owns');
+        const popoverContentEl = document.querySelector(`#${optionsId}`);
+        const firstFocusableElement = popoverContentEl.querySelector(FOCUSABLE);
+
+        if (firstFocusableElement) {
+          firstFocusableElement.focus();
+          e.preventDefault();
+        }
+      }
+    },
+  },
+});

ui/app/components/toggle.js

@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: 'label',
+  classNames: ['toggle'],
+  classNameBindings: ['isDisabled:is-disabled', 'isActive:is-active'],
+
+  'data-test-label': true,
+
+  isActive: false,
+  isDisabled: false,
+  onToggle() {},
+});

ui/app/components/two-step-button.js

@@ -13,6 +13,8 @@ export default Component.extend({
   confirmationMessage: '',
   awaitingConfirmation: false,
   disabled: false,
+  alignRight: false,
+  isInfoAction: false,
   onConfirm() {},
   onCancel() {},
 

ui/app/controllers/clients/client.js

@@ -1,8 +1,10 @@
 import { alias } from '@ember/object/computed';
 import Controller from '@ember/controller';
-import { computed } from '@ember/object';
+import { computed, observer } from '@ember/object';
+import { task } from 'ember-concurrency';
 import Sortable from 'nomad-ui/mixins/sortable';
 import Searchable from 'nomad-ui/mixins/searchable';
+import messageFromAdapterError from 'nomad-ui/utils/message-from-adapter-error';
 
 export default Controller.extend(Sortable, Searchable, {
   queryParams: {
@@ -13,6 +15,9 @@ export default Controller.extend(Sortable, Searchable, {
     onlyPreemptions: 'preemptions',
   },
 
+  // Set in the route
+  flagAsDraining: false,
+
   currentPage: 1,
   pageSize: 8,
 
@@ -36,6 +41,13 @@ export default Controller.extend(Sortable, Searchable, {
   listToSearch: alias('listSorted'),
   sortedAllocations: alias('listSearched'),
 
+  eligibilityError: null,
+  stopDrainError: null,
+  drainError: null,
+  showDrainNotification: false,
+  showDrainUpdateNotification: false,
+  showDrainStoppedNotification: false,
+
   preemptions: computed('model.allocations.@each.wasPreempted', function() {
     return this.model.allocations.filterBy('wasPreempted');
   }),
@@ -50,6 +62,46 @@ export default Controller.extend(Sortable, Searchable, {
     return this.get('model.drivers').sortBy('name');
   }),
 
+  setEligibility: task(function*(value) {
+    try {
+      yield value ? this.model.setEligible() : this.model.setIneligible();
+    } catch (err) {
+      const error = messageFromAdapterError(err) || 'Could not set eligibility';
+      this.set('eligibilityError', error);
+    }
+  }).drop(),
+
+  stopDrain: task(function*() {
+    try {
+      this.set('flagAsDraining', false);
+      yield this.model.cancelDrain();
+      this.set('showDrainStoppedNotification', true);
+    } catch (err) {
+      this.set('flagAsDraining', true);
+      const error = messageFromAdapterError(err) || 'Could not stop drain';
+      this.set('stopDrainError', error);
+    }
+  }).drop(),
+
+  forceDrain: task(function*() {
+    try {
+      yield this.model.forceDrain({
+        IgnoreSystemJobs: this.model.drainStrategy.ignoreSystemJobs,
+      });
+    } catch (err) {
+      const error = messageFromAdapterError(err) || 'Could not force drain';
+      this.set('drainError', error);
+    }
+  }).drop(),
+
+  triggerDrainNotification: observer('model.isDraining', function() {
+    if (!this.model.isDraining && this.flagAsDraining) {
+      this.set('showDrainNotification', true);
+    }
+
+    this.set('flagAsDraining', this.model.isDraining);
+  }),
+
   actions: {
     gotoAllocation(allocation) {
       this.transitionToRoute('allocations.allocation', allocation);
@@ -58,5 +110,14 @@ export default Controller.extend(Sortable, Searchable, {
     setPreemptionFilter(value) {
       this.set('onlyPreemptions', value);
     },
+
+    drainNotify(isUpdating) {
+      this.set('showDrainUpdateNotification', isUpdating);
+    },
+
+    drainError(err) {
+      const error = messageFromAdapterError(err) || 'Could not run drain';
+      this.set('drainError', error);
+    },
   },
 });

ui/app/models/allocation.js

@@ -41,6 +41,7 @@ export default Model.extend({
   }),
 
   isRunning: equal('clientStatus', 'running'),
+  isMigrating: attr('boolean'),
 
   // When allocations are server-side rescheduled, a paper trail
   // is left linking all reschedule attempts.

ui/app/models/node.js

@@ -4,6 +4,7 @@ import Model from 'ember-data/model';
 import attr from 'ember-data/attr';
 import { hasMany } from 'ember-data/relationships';
 import { fragment, fragmentArray } from 'ember-data-model-fragments/attributes';
+import RSVP from 'rsvp';
 import shortUUIDProperty from '../utils/properties/short-uuid';
 import ipParts from '../utils/ip-parts';
 
@@ -43,6 +44,25 @@ export default Model.extend({
   }),
 
   allocations: hasMany('allocations', { inverse: 'node' }),
+  completeAllocations: computed('allocations.@each.clientStatus', function() {
+    return this.allocations.filterBy('clientStatus', 'complete');
+  }),
+  runningAllocations: computed('allocations.@each.isRunning', function() {
+    return this.allocations.filterBy('isRunning');
+  }),
+  migratingAllocations: computed('allocations.@each.{isMigrating,isRunning}', function() {
+    return this.allocations.filter(alloc => alloc.isRunning && alloc.isMigrating);
+  }),
+  lastMigrateTime: computed('allocations.@each.{isMigrating,isRunning,modifyTime}', function() {
+    const allocation = this.allocations
+      .filterBy('isRunning', false)
+      .filterBy('isMigrating')
+      .sortBy('modifyTime')
+      .reverse()[0];
+    if (allocation) {
+      return allocation.modifyTime;
+    }
+  }),
 
   drivers: fragmentArray('node-driver'),
   events: fragmentArray('node-event'),
@@ -70,4 +90,30 @@ export default Model.extend({
       return this.status;
     }
   }),
+
+  setEligible() {
+    if (this.isEligible) return RSVP.resolve();
+    // Optimistically update schedulingEligibility for immediate feedback
+    this.set('schedulingEligibility', 'eligible');
+    return this.store.adapterFor('node').setEligible(this);
+  },
+
+  setIneligible() {
+    if (!this.isEligible) return RSVP.resolve();
+    // Optimistically update schedulingEligibility for immediate feedback
+    this.set('schedulingEligibility', 'ineligible');
+    return this.store.adapterFor('node').setIneligible(this);
+  },
+
+  drain(drainSpec) {
+    return this.store.adapterFor('node').drain(this, drainSpec);
+  },
+
+  forceDrain(drainSpec) {
+    return this.store.adapterFor('node').forceDrain(this, drainSpec);
+  },
+
+  cancelDrain() {
+    return this.store.adapterFor('node').cancelDrain(this);
+  },
 });