open-nomad/ui/app/templates/components/drain-popover.hbs

<PopoverMenu
  data-test-drain-popover
  @isDisabled={{this.isDisabled}}
  @label={{if this.client.isDraining "Update Drain" "Drain"}}
  @tooltip={{if this.isDisabled "Not allowed to drain clients"}}
  @triggerClass={{concat
    "is-small "
    (if this.drain.isRunning "is-loading ")
    (if this.isDisabled "tooltip is-right-aligned"
  )}} as |m|>
  <form data-test-drain-popover-form onsubmit={{action (queue (action this.preventDefault) (perform this.drain m.actions.close))}} class="form is-small">
    <h4 class="group-heading">Drain Options</h4>
    <div class="field">
      <label class="label is-interactive">
        <Toggle
          data-test-drain-deadline-toggle
          @isActive={{this.deadlineEnabled}}
          @onToggle={{action (mut this.deadlineEnabled) value="target.checked"}}>
          Deadline
       </Toggle>
        <span class="tooltip multiline" aria-label="The amount of time a drain must complete within.">
          {{x-icon "info-circle-outline" class="is-faded"}}
        </span>
      </label>
    </div>
    {{#if this.deadlineEnabled}}
      <div class="field is-sub-field" data-test-drain-deadline-option-select-parent>
        <PowerSelect
          data-test-drain-deadline-option-select
          @tagName="div"
          @options={{this.durationQuickOptions}}
          @selected={{this.selectedDurationQuickOption}}
          @onChange={{action (mut this.selectedDurationQuickOption)}} as |opt|>
          {{opt.label}}
        </PowerSelect>
      </div>
      {{#if this.durationIsCustom}}
        <div class="field is-sub-field">
          <label class="label">Deadline</label>
          <input
            data-test-drain-custom-deadline
            type="text"
            class="input {{if this.parseError "is-danger"}}"
            placeholder="1h30m"
            oninput={{action (queue
              (action (mut this.parseError) '')
              (action (mut this.customDuration) value="target.value"))}} />
          {{#if this.parseError}}
            <em class="help is-danger">{{this.parseError}}</em>
          {{/if}}
        </div>
      {{/if}}
    {{/if}}
    <div class="field">
      <label class="label is-interactive">
        <Toggle
          data-test-force-drain-toggle
          @isActive={{this.forceDrain}}
          @onToggle={{action (mut this.forceDrain) value="target.checked"}}>
          Force Drain
       </Toggle>
        <span class="tooltip multiline" aria-label="Immediately remove allocations from the client.">
          {{x-icon "info-circle-outline" class="is-faded"}}
        </span>
      </label>
    </div>
    <div class="field">
      <label class="label is-interactive">
        <Toggle
          data-test-system-jobs-toggle
          @isActive={{this.drainSystemJobs}}
          @onToggle={{action (mut this.drainSystemJobs) value="target.checked"}}>
          Drain System Jobs
       </Toggle>
        <span class="tooltip multiline" aria-label="Stop allocations for system jobs.">
          {{x-icon "info-circle-outline" class="is-faded"}}
        </span>
      </label>
    </div>
    <div class="popover-actions">
      <button
        data-test-drain-submit
        type="button"
        class="popover-action is-primary"
        onclick={{perform this.drain m.actions.close}}>
        Drain
      </button>
      <button data-test-drain-cancel type="button" class="popover-action" onclick={{action m.actions.close}}>Cancel</button>
    </div>
  </form>
</PopoverMenu>