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

{{! template-lint-disable require-input-label }}
<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"
            value={{if (eq this.customDuration 0) "" this.customDuration}}
            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>