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

{{#popover-menu
  data-test-drain-popover
  isDisabled=isDisabled
  label=(if client.isDraining "Update Drain" "Drain")
  tooltip=(if isDisabled "Not allowed to drain clients")
  triggerClass=(concat
    "is-small "
    (if drain.isRunning "is-loading ")
    (if isDisabled "tooltip is-right-aligned")
  ) as |m|}}
  <form data-test-drain-popover-form onsubmit={{action (queue (action preventDefault) (perform 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=deadlineEnabled
          onToggle=(action (mut 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 deadlineEnabled}}
      <div class="field is-sub-field">
        {{#power-select
          data-test-drain-deadline-option-select
          tagName="div"
          options=durationQuickOptions
          selected=selectedDurationQuickOption
          onChange=(action (mut selectedDurationQuickOption)) as |opt|}}
          {{opt.label}}
        {{/power-select}}
      </div>
      {{#if durationIsCustom}}
        <div class="field is-sub-field">
          <label class="label">Deadline</label>
          <input
            data-test-drain-custom-deadline
            type="text"
            class="input {{if parseError "is-danger"}}"
            placeholder="1h30m"
            oninput={{action (queue
              (action (mut parseError) '')
              (action (mut customDuration) value="target.value"))}} />
          {{#if parseError}}
            <em class="help is-danger">{{parseError}}</em>
          {{/if}}
        </div>
      {{/if}}
    {{/if}}
    <div class="field">
      <label class="label is-interactive">
        {{#toggle
          data-test-force-drain-toggle
          isActive=forceDrain
          onToggle=(action (mut 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=drainSystemJobs
          onToggle=(action (mut 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 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>
{{/popover-menu}}