@ember-eui/core 5.8.5 → 5.9.2

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>

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

@@ -0,0 +1,220 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
+import { LocaleSpecifier } from 'moment';
+import {
+  ApplyRefreshInterval,
+  DurationRange,
+  Milliseconds,
+  ShortDate
+} from './types/global';
+import { isRangeInvalid } from './utils';
+import { useI18nTimeOptions } from './utils/time-options';
+import { OnRefreshProps, OnTimeChangeProps } from '@elastic/eui';
+import type EuiI18n from '../../services/eui-i18n';
+import { inject as service } from '@ember/service';
+
+interface EuiSuperDatePickerArgs {
+  commonlyUsedRanges?: DurationRange[];
+  // customQuickSelectPanels?: QuickSelectPanel[];
+  /**
+   * Specifies the formatted used when displaying dates and/or datetimes
+   */
+  dateFormat?: string;
+  /**
+   * Set isAutoRefreshOnly to true to limit the component to only display auto refresh content.
+   */
+  isAutoRefreshOnly?: boolean;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  isPaused?: boolean;
+  /**
+   * Sets the overall width by adding sensible min and max widths.
+   * - `auto`: fits width to internal content / time string.
+   * - `restricted`: static width that fits the longest possible time string.
+   * - `full`: expands to 100% of the container.
+   */
+  width?: 'restricted' | 'full' | 'auto';
+  /**
+   * Reduces overall height to compressed form size
+   */
+  compressed?: boolean;
+  /**
+   * Used to localize e.g. month names, passed to `moment`
+   */
+  locale?: LocaleSpecifier;
+  /**
+   * Callback for when the refresh interval is fired.
+   * EuiSuperDatePicker will only manage a refresh interval timer when onRefresh callback is supplied
+   * If a promise is returned, the next refresh interval will not start until the promise has resolved.
+   * If the promise rejects the refresh interval will stop and the error thrown
+   */
+  onRefresh?: (props: OnRefreshProps) => void;
+  /**
+   * Callback for when the refresh interval changes.
+   * Supply onRefreshChange to show refresh interval inputs in quick select popover
+   */
+  onRefreshChange?: ApplyRefreshInterval;
+  /**
+   * Callback for when the time changes.
+   */
+  onTimeChange: (props: OnTimeChangeProps) => void;
+  // recentlyUsedRanges?: DurationRange[];
+  /**
+   * Refresh interval in milliseconds
+   */
+  refreshInterval?: Milliseconds;
+  start?: ShortDate;
+  end?: ShortDate;
+  /**
+   * Specifies the formatted used when displaying times
+   */
+  timeFormat?: string;
+  utcOffset?: number;
+  /**
+   * Set showUpdateButton to false to immediately invoke onTimeChange for all start and end changes.
+   */
+  showUpdateButton?: boolean | 'iconOnly';
+  /**
+   * Hides the actual input reducing to just the quick select button.
+   */
+  isQuickSelectOnly?: boolean;
+  /**
+   * Props passed to the update button #EuiSuperUpdateButtonProps
+   */
+  // updateButtonProps?: EuiSuperUpdateButtonProps;
+}
+
+export default class EuiSuperDatePicker extends Component<EuiSuperDatePickerArgs> {
+  @argOrDefault('MMM D, YYYY @ HH:mm:ss.SSS') dateFormat!: string;
+  @argOrDefault('HH:mm') timeFormat!: string;
+  // @argOrDefault('now-15m') start!: ShortDate;
+  // @argOrDefault('now') end!: ShortDate;
+  @argOrDefault(false) isAutoRefreshOnly!: boolean;
+  @argOrDefault(false) isDisabled!: boolean;
+  @argOrDefault(true) isPaused!: boolean;
+  @argOrDefault(true) showUpdateButton!: boolean;
+  @argOrDefault('restricted') width!: string;
+  // recentlyUsedRanges: [],
+  @argOrDefault(1000) refreshInterval!: Milliseconds;
+
+  @service declare euiI18n: EuiI18n;
+
+  @tracked start: ShortDate;
+  @tracked end: ShortDate;
+  @tracked isInvalid = false;
+  @tracked hasChanged = false;
+
+  constructor(owner: any, args: EuiSuperDatePickerArgs) {
+    super(owner, args);
+
+    this.start = this.args.start ?? 'now-15m';
+    this.end = this.args.end ?? 'now';
+
+    // if (this.args.start === undefined || this.args.end === undefined) {
+    //   this.setTime({
+    //     start: this.args.start ?? 'now-15m',
+    //     end: this.args.end ?? 'now'
+    //   });
+    // }
+  }
+
+  get timeOptions() {
+    return useI18nTimeOptions(this.euiI18n);
+  }
+
+  setTime({ start, end }: DurationRange) {
+    this.hasChanged = !(this.start === start && this.end === end);
+    this.start = start;
+    this.end = end;
+    this.isInvalid = isRangeInvalid(start, end);
+
+    if (!this.showUpdateButton) {
+      this.args.onTimeChange({
+        start,
+        end,
+        isQuickSelection: false,
+        isInvalid: this.isInvalid
+      } as OnTimeChangeProps);
+    }
+  }
+
+  applyTime() {
+    this.args.onTimeChange({
+      start: this.start,
+      end: this.end,
+      isQuickSelection: false,
+      isInvalid: false
+    });
+  }
+
+  // stopInterval() {
+  //   if (this.asyncInterval) {
+  //     this.asyncInterval.stop();
+  //   }
+  // }
+
+  // startInterval(refreshInterval: number) {
+  //   if (this.args.onRefresh) {
+  //     const handler = () => {
+  //       const { start, end } = this.props;
+  //       this.args.onRefresh({ start, end, refreshInterval });
+  //     };
+  //     this.asyncInterval = new AsyncInterval(handler, refreshInterval);
+  //   }
+  // }
+
+  @action applyQuickTime({ start, end }: DurationRange) {
+    // this.setState({
+    //   showPrettyDuration: showPrettyDuration(
+    //     start,
+    //     end,
+    //     this.props.commonlyUsedRanges
+    //   )
+    // });
+
+    // Update the internal state
+    this.start = start;
+    this.end = end;
+
+    this.args.onTimeChange({
+      start,
+      end,
+      isQuickSelection: true,
+      isInvalid: false
+    });
+  }
+
+  @action setStart(start: ShortDate) {
+    this.setTime({ start, end: this.end });
+  }
+
+  @action setEnd(end: ShortDate) {
+    this.setTime({ start: this.start, end });
+  }
+
+  @action handleClickUpdateButton() {
+    if (!this.hasChanged && this.args.onRefresh) {
+      // const { start, end, refreshInterval } = this.args;
+      this.args.onRefresh({
+        start: this.start,
+        end: this.end,
+        refreshInterval: this.refreshInterval
+      });
+    } else {
+      this.applyTime();
+    }
+    this.hasChanged = false;
+  }
+
+  // @action onRefreshChange({ refreshInterval, isPaused }) {
+  //   this.stopInterval();
+  //   if (!isPaused) {
+  //     this.startInterval(refreshInterval);
+  //   }
+  //   if (this.props.onRefreshChange) {
+  //     this.props.onRefreshChange({ refreshInterval, isPaused });
+  //   }
+  // }
+}

package/addon/components/eui-super-date-picker/types/global.d.ts

@@ -0,0 +1,52 @@
+import { Moment } from 'moment';
+
+export interface DurationRange {
+  end: ShortDate;
+  label?: string;
+  start: ShortDate;
+}
+
+export type ShortDate = NowDateMode | string;
+
+export type NowDateMode = 'now';
+
+export type TimeUnitId = 's' | 'm' | 'h' | 'd' | 'w' | 'M' | 'y';
+
+export type TimeUnitFromNowId = 's+' | 'm+' | 'h+' | 'd+' | 'w+' | 'M+' | 'y+';
+
+export interface RelativeParts {
+  count: number;
+  round: boolean;
+  roundUnit?: TimeUnitId;
+  unit: string;
+}
+
+export type Milliseconds = number;
+
+export interface RelativeOption {
+  text: string;
+  value: TimeUnitAllId;
+}
+
+export type TimeUnitAllId = TimeUnitId | TimeUnitFromNowId;
+
+export type OnRefreshChangeArgs = {
+  isPaused: boolean;
+  refreshInterval: number;
+};
+
+export type ApplyRefreshInterval = (args: OnRefreshChangeArgs) => void;
+
+interface ApplyTimeArgs extends DurationRange {
+  start: string;
+  end: string;
+  keepPopoverOpen?: boolean;
+  quickSelect?: QuickSelect;
+}
+export type ApplyTime = (args: ApplyTimeArgs) => void;
+
+export interface QuickSelect {
+  timeTense: string;
+  timeValue: number;
+  timeUnits: TimeUnitId;
+}

package/addon/components/eui-super-date-picker/utils/date-utils.ts

@@ -0,0 +1,59 @@
+import { Moment } from 'moment';
+
+export function isSameDay(moment1: Moment, moment2: Moment) {
+  if (moment1 && moment2) {
+    return moment1.isSame(moment2, 'day');
+  } else {
+    return !moment1 && !moment2;
+  }
+}
+
+export function isSameTime(moment1: Moment, moment2: Moment) {
+  if (moment1 && moment2) {
+    return moment1.isSame(moment2, 'second');
+  } else {
+    return !moment1 && !moment2;
+  }
+}
+
+export function isDayDisabled(
+  day: Moment,
+  {
+    minDate,
+    maxDate,
+    excludeDates,
+    includeDates,
+    filterDate
+  }: {
+    minDate?: Moment;
+    maxDate?: Moment;
+    excludeDates?: Moment[];
+    includeDates?: Moment[];
+    filterDate?: (day: Moment) => boolean;
+  } = {}
+) {
+  return (
+    (minDate && day.isBefore(minDate, 'day')) ||
+    (maxDate && day.isAfter(maxDate, 'day')) ||
+    (excludeDates &&
+      excludeDates.some((excludeDate: Moment) =>
+        isSameDay(day, excludeDate)
+      )) ||
+    (includeDates &&
+      !includeDates.some((includeDate: Moment) =>
+        isSameDay(day, includeDate)
+      )) ||
+    (filterDate && !filterDate(day.clone())) ||
+    false
+  );
+}
+
+export function isOutOfBounds(
+  day: Moment,
+  { minDate, maxDate }: { minDate?: Moment; maxDate?: Moment } = {}
+) {
+  return (
+    (minDate && day.isBefore(minDate, 'day')) ||
+    (maxDate && day.isAfter(maxDate, 'day'))
+  );
+}