@ember-eui/core 5.8.5 → 5.10.2

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'))
+  );
+}

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

@@ -0,0 +1,181 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import moment, { LocaleSpecifier } from 'moment';
+import dateMath from '@elastic/datemath';
+import { RelativeParts, ShortDate } from '../types/global';
+import type EuiI18n from '../../../services/eui-i18n';
+
+/**
+ * Reusable format time string util
+ */
+export const ISO_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
+export const INVALID_DATE = 'invalid_date';
+export const ROUND_DELIMETER = '/';
+export const relativeUnitsFromLargestToSmallest = [
+  'y',
+  'M',
+  'w',
+  'd',
+  'h',
+  'm',
+  's'
+];
+export type AbsoluteDateMode = 'absolute';
+export type RelativeDateMode = 'relative';
+export type NowDateMode = 'now';
+export type DateMode = AbsoluteDateMode | RelativeDateMode | NowDateMode;
+export const DATE_MODES: {
+  ABSOLUTE: AbsoluteDateMode;
+  RELATIVE: RelativeDateMode;
+  NOW: NowDateMode;
+} = {
+  ABSOLUTE: 'absolute',
+  RELATIVE: 'relative',
+  NOW: 'now'
+};
+
+export const useFormatTimeString = (
+  timeString: string,
+  dateFormat: string,
+  roundUp = false,
+  locale: LocaleSpecifier = 'en',
+  euiI18nService: EuiI18n
+): string => {
+  let lookupToken = euiI18nService.lookupToken;
+
+  // i18n'd strings
+  const nowDisplay = lookupToken('euiPrettyDuration.now', 'now');
+  const invalidDateDisplay = lookupToken(
+    'euiPrettyDuration.invalid',
+    'Invalid date'
+  );
+
+  const timeAsMoment = moment(timeString, ISO_FORMAT, true);
+  if (timeAsMoment.isValid()) {
+    return timeAsMoment.locale(locale).format(dateFormat);
+  }
+
+  if (timeString === 'now') {
+    return nowDisplay as string;
+  }
+
+  const tryParse = dateMath.parse(timeString, { roundUp: roundUp });
+  if (!moment(tryParse).isValid()) {
+    return invalidDateDisplay as string;
+  }
+
+  if (moment.isMoment(tryParse)) {
+    return `~ ${tryParse.locale(locale).fromNow()}`;
+  }
+
+  return timeString;
+};
+
+export function toAbsoluteString(value: string, roundUp: boolean = false) {
+  const valueAsMoment = dateMath.parse(value, { roundUp });
+  if (!valueAsMoment) {
+    return value;
+  }
+  if (!moment(valueAsMoment).isValid()) {
+    return INVALID_DATE;
+  }
+  return valueAsMoment.toISOString();
+}
+
+export function parseRelativeParts(value: string): {
+  count: number;
+  unit: string;
+  round: boolean;
+  roundUnit?: string;
+} {
+  const matches =
+    typeof value === 'string' &&
+    value.match(/now(([-+])([0-9]+)([smhdwMy])(\/[smhdwMy])?)?/);
+
+  const operator = matches && matches[2];
+  const count = matches && matches[3];
+  const unit = matches && matches[4];
+  const roundBy = matches && matches[5];
+
+  if (count && unit) {
+    const isRounded = roundBy ? true : false;
+    const roundUnit =
+      isRounded && roundBy ? roundBy.replace(ROUND_DELIMETER, '') : undefined;
+    return {
+      count: parseInt(count, 10),
+      unit: operator === '+' ? `${unit}+` : unit,
+      round: isRounded,
+      ...(roundUnit ? { roundUnit } : {})
+    };
+  }
+
+  const results = { count: 0, unit: 's', round: false };
+  const duration = moment.duration(moment().diff(dateMath.parse(value)));
+  let unitOp = '';
+  for (let i = 0; i < relativeUnitsFromLargestToSmallest.length; i++) {
+    // @ts-expect-error this is a string with the accepted time units
+    const asRelative = duration.as(relativeUnitsFromLargestToSmallest[i]);
+    if (asRelative < 0) unitOp = '+';
+    if (Math.abs(asRelative) > 1) {
+      results.count = Math.round(Math.abs(asRelative));
+      results.unit = relativeUnitsFromLargestToSmallest[i] + unitOp;
+      results.round = false;
+      break;
+    }
+  }
+  return results;
+}
+
+export function toRelativeStringFromParts(relativeParts: RelativeParts) {
+  const count = relativeParts.count ?? 0;
+  const isRounded = relativeParts.round ?? false;
+
+  if (count === 0 && !isRounded) {
+    return 'now';
+  }
+
+  const matches = (relativeParts.unit ?? 's').match(/([smhdwMy])(\+)?/);
+  const unit = matches?.[1];
+  const operator = matches && matches[2] ? matches[2] : '-';
+  const round = isRounded ? `${ROUND_DELIMETER}${unit}` : '';
+
+  return `now${operator}${count}${unit}${round}`;
+}
+
+export function isRangeInvalid(start: ShortDate, end: ShortDate) {
+  if (start === 'now' && end === 'now') {
+    return true;
+  }
+
+  const startMoment = dateMath.parse(start);
+  const endMoment = dateMath.parse(end, { roundUp: true });
+
+  const isInvalid =
+    !startMoment ||
+    !endMoment ||
+    !startMoment.isValid() ||
+    !endMoment.isValid() ||
+    !moment(startMoment).isValid() ||
+    !moment(endMoment).isValid() ||
+    startMoment.isAfter(endMoment);
+
+  return isInvalid;
+}
+
+export function getDateMode(value: ShortDate) {
+  if (value === 'now') {
+    return DATE_MODES.NOW;
+  }
+
+  if (value.includes('now')) {
+    return DATE_MODES.RELATIVE;
+  }
+
+  return DATE_MODES.ABSOLUTE;
+}

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

@@ -0,0 +1,131 @@
+import type EuiI18n from '../../../services/eui-i18n';
+import { DATE_MODES, getDateMode } from '.';
+import { DurationRange, ShortDate } from '../types/global';
+
+/**
+ * Pretty duration i18n strings
+ * Units should not be simply concatenated because different languages
+ * will have different grammar/positions for time than English
+ */
+
+export const useRelativeDurationI18n = <T extends number = number>(
+  duration: T,
+  euiI18n: EuiI18n
+) => {
+  const lookupToken = euiI18n.lookupToken;
+  return {
+    s: lookupToken(
+      'euiPrettyDuration.lastDurationSeconds',
+      ({ duration }: { duration: T }) =>
+        `Last ${duration} second${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    's+': lookupToken(
+      'euiPrettyDuration.nextDurationSeconds',
+      ({ duration }: { duration: T }) =>
+        `Next ${duration} second${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    m: lookupToken(
+      'euiPrettyDuration.lastDurationMinutes',
+      ({ duration }: { duration: T }) =>
+        `Last ${duration} minute${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    'm+': lookupToken(
+      'euiPrettyDuration.nextDurationMinutes',
+      ({ duration }: { duration: T }) =>
+        `Next ${duration} minute${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    h: lookupToken(
+      'euiPrettyDuration.lastDurationHours',
+      ({ duration }: { duration: T }) =>
+        `Last ${duration} hour${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    'h+': lookupToken(
+      'euiPrettyDuration.nextDurationHours',
+      ({ duration }: { duration: T }) =>
+        `Next ${duration} hour${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    d: lookupToken(
+      'euiPrettyDuration.lastDurationDays',
+      ({ duration }: { duration: T }) =>
+        `Last ${duration} day${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    'd+': lookupToken(
+      'euiPrettyDuration.nexttDurationDays',
+      ({ duration }: { duration: T }) =>
+        `Next ${duration} day${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    w: lookupToken(
+      'euiPrettyDuration.lastDurationWeeks',
+      ({ duration }: { duration: T }) =>
+        `Last ${duration} week${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    'w+': lookupToken(
+      'euiPrettyDuration.nextDurationWeeks',
+      ({ duration }: { duration: T }) =>
+        `Next ${duration} week${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    M: lookupToken(
+      'euiPrettyDuration.lastDurationMonths',
+      ({ duration }: { duration: T }) =>
+        `Last ${duration} month${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    'M+': lookupToken(
+      'euiPrettyDuration.nextDurationMonths',
+      ({ duration }: { duration: T }) =>
+        `Next ${duration} month${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    y: lookupToken(
+      'euiPrettyDuration.lastDurationYears',
+      ({ duration }: { duration: T }) =>
+        `Last ${duration} year${duration === 1 ? '' : 's'}`,
+      { duration }
+    ),
+    'y+': lookupToken(
+      'euiPrettyDuration.nextDurationYears',
+      ({ duration }: { duration: T }) =>
+        `Next ${duration} year${duration === 1 ? '' : 's'}`,
+      { duration }
+    )
+  };
+};
+
+const hasRangeMatch = (
+  timeFrom: ShortDate,
+  timeTo: ShortDate,
+  ranges: DurationRange[]
+) => {
+  return ranges.find(({ start, end }) => timeFrom === start && timeTo === end);
+};
+
+const isRelativeToNow = (timeFrom: ShortDate, timeTo: ShortDate): boolean => {
+  const fromDateMode = getDateMode(timeFrom);
+  const toDateMode = getDateMode(timeTo);
+  const isLast =
+    fromDateMode === DATE_MODES.RELATIVE && toDateMode === DATE_MODES.NOW;
+  const isNext =
+    fromDateMode === DATE_MODES.NOW && toDateMode === DATE_MODES.RELATIVE;
+  return isLast || isNext;
+};
+
+export const showPrettyDuration = (
+  timeFrom: ShortDate,
+  timeTo: ShortDate,
+  quickRanges: DurationRange[]
+): boolean => {
+  if (hasRangeMatch(timeFrom, timeTo, quickRanges)) {
+    return true;
+  }
+  return isRelativeToNow(timeFrom, timeTo);
+};