@ember-eui/core 5.8.5 → 5.10.2

package/addon/components/eui-super-date-picker/eui-quick-select-popover/eui-commonly-used-time-ranges.hbs

@@ -0,0 +1,42 @@
+{{#let (unique-id) as |legendId|}}
+  <fieldset>
+    <EuiTitle
+      id={{legendId}}
+      @tagName="legend"
+      @size="xxxs"
+    >
+      <EuiI18n
+        @token="euiCommonlyUsedTimeRanges.legend"
+        @default="Commonly used"
+        as |Token|
+      >
+        <Token as |value|>
+          {{value}}
+        </Token>
+      </EuiI18n>
+    </EuiTitle>
+    <div class="euiQuickSelectPopover__section">
+      <EuiFlexGrid
+        aria-labelledby={{legendId}}
+        @gutterSize="s"
+        @columns="2"
+        @direction="column"
+        @responsive={{false}}
+        @tagName="ul"
+      >
+        {{#each @commonlyUsedRanges as |range|}}
+          <EuiFlexItem
+            class="euiQuickSelectPopover__sectionItem"
+            @tagName="li"
+          >
+            <EuiLink
+              {{on "click" (fn @applyTime (hash start=range.start end=range.end))}}
+            >
+              {{range.label}}
+            </EuiLink>
+          </EuiFlexItem>
+        {{/each}}
+      </EuiFlexGrid>
+    </div>
+  </fieldset>
+{{/let}}

package/addon/components/eui-super-date-picker/eui-quick-select-popover/eui-quick-select.hbs

@@ -0,0 +1,154 @@
+{{#let (unique-id) as |legendId|}}
+  <fieldset>
+    {{!-- <EuiI18n
+      token="euiQuickSelect.legendText"
+      default="Quick select a time range"
+    >
+      {(legendText: string) => (
+        // Legend needs to be the first thing in a fieldset, but we want the visible title within the flex.
+        // So we hide it, but allow screen readers to see it
+        <EuiScreenReaderOnly>
+          <legend id={{legendId}} class="euiFormLabel">
+            {legendText}
+          </legend>
+        </EuiScreenReaderOnly>
+      )}
+    </EuiI18n> --}}
+    <EuiFlexGroup
+      @responsive={{false}}
+      @alignItems="center"
+      @justifyContent="spaceBetween"
+      @gutterSize="s"
+    >
+      <EuiFlexItem @grow={{false}}>
+        <EuiI18n
+          @token="euiQuickSelect.quickSelectTitle"
+          @default="Quick select"
+          as |Token|
+        >
+           <Token as |quickSelectTitle|>
+            <div aria-hidden class="euiFormLabel">
+              {{quickSelectTitle}}
+            </div>
+          </Token>
+        </EuiI18n>
+      </EuiFlexItem>
+      <EuiFlexItem @grow={{false}}>
+        <EuiFlexGroup @alignItems="center" @gutterSize="s" @responsive={{false}}>
+          <EuiFlexItem @grow={{false}}>
+            <EuiI18n
+              @token="euiQuickSelect.previousLabel"
+              @default="Previous time window"
+              as |Token|
+            >
+              <Token as |previousLabel|>
+                <EuiToolTip @content={{previousLabel}}>
+                  <EuiButtonIcon
+                    aria-label={{previousLabel}}
+                    @iconType="arrowLeft"
+                    {{on "click" this.stepBackward}}
+                  />
+                </EuiToolTip>
+              </Token>
+            </EuiI18n>
+          </EuiFlexItem>
+          <EuiFlexItem @grow={{false}}>
+            <EuiI18n
+              @token="euiQuickSelect.nextLabel"
+              @default="Next time window"
+              as |Token|
+            >
+              <Token as |nextLabel|>
+                <EuiToolTip @content={{nextLabel}}>
+                  <EuiButtonIcon
+                    aria-label={{nextLabel}}
+                    @iconType="arrowRight"
+                    {{on "click" this.stepForward}}
+                  />
+                </EuiToolTip>
+              </Token>
+            </EuiI18n>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    <EuiSpacer @size="s" />
+    <EuiFlexGroup @gutterSize="s" @responsive={{false}}>
+      <EuiFlexItem>
+        <EuiI18n
+          @token="euiQuickSelect.tenseLabel"
+          @default="Time tense"
+          as |Token|
+        >
+          <Token as |tenseLabel|>
+            <EuiSelect
+              @compressed={{true}}
+              @onKeyDown={{this.handleKeyDown}}
+              aria-label={{tenseLabel}}
+              aria-describedby={{concat this.timeSelectionId " " legendId}}
+              @value={{this.timeTense}}
+              @options={{@timeOptions.timeTenseOptions}}
+              {{on "change" (pick "target.value" (set this "timeTense"))}}
+            />
+          </Token>
+        </EuiI18n>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiI18n
+          @token="euiQuickSelect.valueLabel"
+          @default="Time value"
+          as |Token|
+        >
+          <Token as |valueLabel|>
+            <EuiFieldNumber
+              @compressed={{true}}
+              @onKeyDown={{this.handleKeyDown}}
+              aria-describedby={{concat this.timeSelectionId " " legendId}}
+              aria-label={{valueLabel}}
+              @value={{this.timeValue}}
+              @onChange={{this.onTimeValueChange}}
+            />
+          </Token>
+        </EuiI18n>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiI18n
+          @token="euiQuickSelect.unitLabel"
+          @default="Time unit"
+          as |Token|
+        >
+          <Token as |unitLabel|>
+            <EuiSelect
+              @compressed={{true}}
+              @onKeyDown={{this.handleKeyDown}}
+              aria-label={{unitLabel}}
+              aria-describedby={{concat this.timeSelectionId " " legendId}}
+              @value={{this.timeUnits}}
+              @options={{@timeOptions.timeUnitsOptions}}
+              {{on "change" (pick "target.value" (set this "timeUnits"))}}
+            />
+          </Token>
+        </EuiI18n>
+      </EuiFlexItem>
+      <EuiFlexItem @grow={{false}}>
+        <EuiButton
+          aria-describedby={{concat this.timeSelectionId " " legendId}}
+          class="euiQuickSelect__applyButton"
+          @size="s"
+          @disabled={{lte this.timeValue 0}}
+          {{on "click" this.applyQuickSelect}}
+        >
+          <EuiI18n
+            @token="euiQuickSelect.applyButton"
+            @default="Apply"
+            as |Token|
+          >
+            <Token as |value|>
+              {{value}}
+            </Token>
+          </EuiI18n>
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </fieldset>
+{{/let}}

package/addon/components/eui-super-date-picker/eui-quick-select-popover/eui-quick-select.ts

@@ -0,0 +1,103 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { ApplyTime, TimeUnitId } from '../types/global';
+import { parseTimeParts } from '../utils/quick-select';
+import { NEXT, TimeOptions } from '../utils/time-options';
+import moment from 'moment';
+import dateMath from '@elastic/datemath';
+
+interface EuiQuickSelectState {
+  timeTense: string;
+  timeValue: number;
+  timeUnits: TimeUnitId;
+}
+
+interface EuiQuickSelectArgs {
+  applyTime: ApplyTime;
+  start: string;
+  end: string;
+  prevQuickSelect?: EuiQuickSelectState;
+  timeOptions: TimeOptions;
+}
+
+export default class EuiQuickSelect extends Component<EuiQuickSelectArgs> {
+  @tracked timeTense: string;
+  @tracked timeValue: number;
+  @tracked timeUnits: TimeUnitId;
+
+  constructor(owner: unknown, args: EuiQuickSelectArgs) {
+    super(owner, args);
+
+    const {
+      timeTense: timeTenseDefault,
+      timeUnits: timeUnitsDefault,
+      timeValue: timeValueDefault
+    } = parseTimeParts(this.args.start, this.args.end);
+
+    this.timeTense =
+      this.args.prevQuickSelect && this.args.prevQuickSelect.timeTense
+        ? this.args.prevQuickSelect.timeTense
+        : timeTenseDefault;
+    this.timeValue =
+      this.args.prevQuickSelect && this.args.prevQuickSelect.timeValue
+        ? this.args.prevQuickSelect.timeValue
+        : timeValueDefault;
+    this.timeUnits =
+      this.args.prevQuickSelect && this.args.prevQuickSelect.timeUnits
+        ? this.args.prevQuickSelect.timeUnits
+        : timeUnitsDefault;
+  }
+
+  getBounds() {
+    const startMoment = dateMath.parse(this.args.start);
+    const endMoment = dateMath.parse(this.args.end, { roundUp: true });
+    return {
+      min:
+        startMoment && startMoment.isValid()
+          ? startMoment
+          : moment().subtract(15, 'minute'),
+      max: endMoment && endMoment.isValid() ? endMoment : moment()
+    };
+  }
+
+  @action applyQuickSelect() {
+    if (this.timeTense === NEXT) {
+      this.args.applyTime({
+        start: 'now',
+        end: `now+${this.timeValue}${this.timeUnits}`
+        // quickSelect: { ...this.state },
+      });
+    } else {
+      this.args.applyTime({
+        start: `now-${this.timeValue}${this.timeUnits}`,
+        end: 'now'
+        // quickSelect: { ...this.state },
+      });
+    }
+  }
+
+  @action stepForward() {
+    const { min, max } = this.getBounds();
+    const diff = max.diff(min);
+    this.args.applyTime({
+      start: moment(max).add(1, 'ms').toISOString(),
+      end: moment(max)
+        .add(diff + 1, 'ms')
+        .toISOString(),
+      keepPopoverOpen: true
+    });
+  }
+
+  @action stepBackward() {
+    const { min, max } = this.getBounds();
+    const diff = max.diff(min);
+    this.args.applyTime({
+      start: moment(min)
+        .subtract(diff + 1, 'ms')
+        .toISOString(),
+      end: moment(min).subtract(1, 'ms').toISOString(),
+      keepPopoverOpen: true
+    });
+  }
+}

package/addon/components/eui-super-date-picker/eui-quick-select-popover/eui-recently-used.hbs

@@ -0,0 +1,48 @@
+{{#let (unique-id) as |legendId|}}
+  <fieldset>
+    <EuiTitle
+      id={{legendId}}
+      @tagName="legend"
+      @size="xxxs"
+    >
+      <EuiI18n
+        @token="euiRecentlyUsed.legend"
+        @default="Recently used date ranges"
+        as |Token|
+      >
+        <Token as |value|>
+          {{value}}
+        </Token>
+      </EuiI18n>
+    </EuiTitle>
+    <div class="euiQuickSelectPopover__section">
+      <EuiFlexGrid
+        aria-labelledby={{legendId}}
+        @gutterSize="s"
+        @columns="2"
+        @direction="column"
+        @responsive={{false}}
+        @tagName="ul"
+      >
+        {{#each @recentlyUsedRanges as |range|}}
+          <EuiFlexItem
+            class="euiQuickSelectPopover__sectionItem"
+            @tagName="li"
+          >
+            <EuiLink
+              {{on "click" (fn @applyTime (hash start=range.start end=range.end))}}
+            >
+              {{!-- <PrettyDuration
+                timeFrom={start}
+                timeTo={end}
+                @quickRanges={{@commonlyUsedRanges}}
+                @dateFormat={{@dateFormat}}
+              /> --}}
+              {{range.label}}
+            </EuiLink>
+          </EuiFlexItem>
+        {{/each}}
+      </EuiFlexGrid>
+    </div>
+  </fieldset>
+{{/let}}

package/addon/components/eui-super-date-picker/eui-quick-select-popover/index.hbs

@@ -0,0 +1,60 @@
+<EuiPopover
+  @isOpen={{this.isOpen}}
+  @closePopover={{set this "isOpen" false}}
+  @anchorPosition="downLeft"
+  @anchorClassName="euiQuickSelectPopover__anchor"
+>
+  <:button>
+    <EuiButtonEmpty
+      class="euiFormControlLayout__prepend"
+      @textClasses="euiQuickSelectPopover__buttonText"
+      @size="xs"
+      @iconType="arrowDown"
+      @iconSide="right"
+      @isDisabled={{@isDisabled}}
+      {{on "click" (set this "isOpen" (not this.isOpen))}}
+    >
+      <EuiIcon @type="calendar" />
+    </EuiButtonEmpty>
+  </:button>
+
+  <:content>
+    <div
+      class="euiQuickSelectPopover__content"
+    >
+      <EuiSuperDatePicker::EuiQuickSelectPopover::EuiQuickSelect
+        @applyTime={{this.applyTime}}
+        @start={{@start}}
+        @end={{@end}}
+        @timeOptions={{@timeOptions}}
+        {{!-- prevQuickSelect={prevQuickSelect} --}}
+      />
+
+      {{#if (gt @commonlyUsedRanges.length 0)}}
+        <EuiHorizontalRule @margin="s" />
+        <EuiSuperDatePicker::EuiQuickSelectPopover::EuiCommonlyUsedTimeRanges
+          @applyTime={{this.applyTime}}
+          @commonlyUsedRanges={{@commonlyUsedRanges}}
+        />
+      {{/if}}
+
+      {{#if (gt @recentlyUsedRanges.length 0)}}
+        <EuiHorizontalRule @margin="s" />
+        <EuiSuperDatePicker::EuiQuickSelectPopover::EuiRecentlyUsed
+          @applyTime={{this.applyTime}}
+          @commonlyUsedRanges={{@commonlyUsedRanges}}
+          @dateFormat={{@dateFormat}}
+          @recentlyUsedRanges={{@recentlyUsedRanges}}
+        />
+      {{/if}}
+
+      {{!-- {this.renderCustomQuickSelectPanels()} --}}
+      {{!-- <EuiHorizontalRule @margin="s" />
+      <EuiRefreshInterval
+        onRefreshChange={applyRefreshInterval}
+        isPaused={isPaused}
+        refreshInterval={refreshInterval}
+      /> --}}
+    </div>
+  </:content>
+</EuiPopover>

package/addon/components/eui-super-date-picker/eui-quick-select-popover/index.ts

@@ -0,0 +1,34 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { ApplyTime } from '../types/global';
+
+interface EuiQuickSelectPopoverArgs {
+  applyTime: ApplyTime;
+}
+
+export default class EuiQuickSelectPopover extends Component<EuiQuickSelectPopoverArgs> {
+  @tracked isOpen = false;
+
+  @action applyTime({
+    start,
+    end,
+    keepPopoverOpen = false
+  }: {
+    start: string;
+    end: string;
+    quickSelect?: { timeTense: string; timeValue: number; timeUnits: string };
+    keepPopoverOpen?: boolean;
+  }) {
+    this.args.applyTime({
+      start,
+      end
+    });
+    // if (quickSelect) {
+    //   this.setState({ prevQuickSelect: quickSelect });
+    // }
+    if (!keepPopoverOpen) {
+      this.isOpen = false;
+    }
+  }
+}

package/addon/components/eui-super-date-picker/eui-super-update-button.hbs

@@ -0,0 +1,43 @@
+{{#if @iconOnly}}
+  <EuiButtonIcon
+    class={{class-names
+      "euiSuperUpdateButton"
+      @className
+    }}
+    @display={{if @fill "fill"}}
+    @color={{if (or @needsUpdate @isLoading) "success" "primary"}}
+    @iconType={{if (or @needsUpdate @isLoading) "kqlFunction" "refresh"}}
+    @isDisabled={{@isDisabled}}
+    @isLoading={{@isLoading}}
+    @size={{@size}}
+    {{style minWidth="0px"}}
+    {{on "click" @onClick}}
+    ...attributes
+  />
+{{else}}
+  <EuiButton
+    class={{class-names
+      "euiSuperUpdateButton"
+      @className
+    }}
+    @fill={{@fill}}
+    @textClasses={{@textClasses}}
+    @color={{if (or @needsUpdate @isLoading) "success" "primary"}}
+    @iconType={{if (or @needsUpdate @isLoading) "kqlFunction" "refresh"}}
+    @isDisabled={{@isDisabled}}
+    @isLoading={{@isLoading}}
+    @size={{@size}}
+    {{on "click" @onClick}}
+    ...attributes
+  >
+    {{#if (or @needsUpdate @isLoading)}}
+      {{#if @isLoading}}
+        Updating
+      {{else}}
+        Update
+      {{/if}}
+    {{else}}
+      Refresh
+    {{/if}}
+  </EuiButton>
+{{/if}}

package/addon/components/eui-super-date-picker/index.hbs

@@ -0,0 +1,123 @@
+<EuiFlexGroup
+  @gutterSize="s"
+  @responsive={{false}}
+  class={{class-names
+    "euiSuperDatePicker__flexWrapper"
+    (unless this.showUpdateButton "euiSuperDatePicker__flexWrapper--noUpdateButton")
+    (if this.isAutoRefreshOnly "euiSuperDatePicker__flexWrapper--isAutoRefreshOnly")
+    (if @isQuickSelectOnly "euiSuperDatePicker__flexWrapper--isQuickSelectOnly")
+    (if (eq this.width "full") "euiSuperDatePicker__flexWrapper--fullWidth")
+    (if (eq this.width "auto") "euiSuperDatePicker__flexWrapper--autoWidth")
+  }}
+>
+  <EuiFlexItem>
+    <EuiFormControlLayout
+      class="euiSuperDatePicker"
+      @compressed={{@compressed}}
+      @isDisabled={{@isDisabled}}
+      @useGroup={{true}}
+      {{!-- @fullWidth={{this.fullWidth}} --}}
+      {{!-- @readOnly={{@readOnly}} --}}
+    >
+      <:prepend>
+        <EuiSuperDatePicker::EuiQuickSelectPopover
+          @start={{this.start}}
+          @end={{this.end}}
+          @applyTime={{this.applyQuickTime}}
+          @timeOptions={{this.timeOptions}}
+          @isDisabled={{@isDisabled}}
+          @dateFormat={{this.dateFormat}}
+          @commonlyUsedRanges={{arg-or-default
+            @commonlyUsedRanges
+            this.timeOptions.commonDurationRanges
+          }}
+          {{!-- @applyRefreshInterval={{if @onRefreshChange this.onRefreshChange}} --}}
+          {{!-- commonlyUsedRanges={commonlyUsedRanges}
+          customQuickSelectPanels={customQuickSelectPanels}
+          isPaused={isPaused}
+          recentlyUsedRanges={recentlyUsedRanges}
+          refreshInterval={refreshInterval} --}}
+        />
+      </:prepend>
+
+      <:field>
+        <EuiSuperDatePicker::EuiDatePickerRange
+          @className="euiDatePickerRange--inGroup"
+          @iconType={{false}}
+          @isInvalid={{this.isInvalid}}
+          @disabled={{@isDisabled}}
+          @isCustom={{true}}
+        >
+          <:startDateControl>
+            <EuiSuperDatePicker::DatePopover::EuiDatePopoverButton
+              @className="euiSuperDatePicker__startPopoverButton"
+              @value={{this.start}}
+              @compressed={{@compressed}}
+              @position="start"
+              @isDisabled={{@isDisabled}}
+              @dateFormat={{this.dateFormat}}
+              @onChange={{this.setStart}}
+              @isInvalid={{this.isInvalid}}
+              @timeOptions={{this.timeOptions}}
+              @needsUpdating={{this.hasChanged}}
+              @locale={{@locale}}
+              {{!--
+              isInvalid={isInvalid}
+              utcOffset={utcOffset}
+              timeFormat={timeFormat}
+              isOpen={this.state.isStartDatePopoverOpen}
+              onPopoverToggle={this.onStartDatePopoverToggle}
+              onPopoverClose={this.onStartDatePopoverClose}
+              --}}
+            />
+          </:startDateControl>
+
+          <:endDateControl>
+            <EuiSuperDatePicker::DatePopover::EuiDatePopoverButton
+              @className="euiSuperDatePicker__startPopoverButton"
+              @value={{this.end}}
+              @compressed={{@compressed}}
+              @position="end"
+              @isDisabled={{@isDisabled}}
+              @dateFormat={{this.dateFormat}}
+              @onChange={{this.setEnd}}
+              @isInvalid={{this.isInvalid}}
+              @timeOptions={{this.timeOptions}}
+              @roundUp={{true}}
+              @needsUpdating={{this.hasChanged}}
+              @locale={{@locale}}
+              {{!--
+              utcOffset={utcOffset}
+              timeFormat={timeFormat}
+              isOpen={this.state.isStartDatePopoverOpen}
+              onPopoverToggle={this.onStartDatePopoverToggle}
+              onPopoverClose={this.onStartDatePopoverClose}
+              --}}
+            />
+          </:endDateControl>
+        </EuiSuperDatePicker::EuiDatePickerRange>
+      </:field>
+    </EuiFormControlLayout>
+  </EuiFlexItem>
+
+  {{#if this.showUpdateButton}}
+    <EuiFlexItem @grow={{false}}>
+      <EuiSuperDatePicker::EuiSuperUpdateButton
+        @size={{if @compressed "s" "m"}}
+        @onClick={{this.handleClickUpdateButton}}
+        @isLoading={{@isLoading}}
+        @isDisabled={{or @isDisabled this.isInvalid}}
+        @needsUpdate={{this.hasChanged}}
+        @fill={{true}}
+        @iconOnly={{eq this.showUpdateButton "iconOnly"}}
+        {{!--
+        showTooltip={
+          !this.state.isStartDatePopoverOpen &&
+          !this.state.isEndDatePopoverOpen
+        }
+        responsive
+        --}}
+      />
+    </EuiFlexItem>
+  {{/if}}
+</EuiFlexGroup>