From 9cb0670b748e72d318f4d33b06d96c69bdc5aa69 Mon Sep 17 00:00:00 2001 From: Poff Poffenberger Date: Fri, 28 Jun 2019 13:11:52 -0500 Subject: [PATCH 1/9] Converting time filter (and children) component to typescript and adding to storybook Mocking the datepicker dep to avoid rendering huge snapshots Updating moments in examples to be timezone agnostic Updating snapshots for time picker --- .../canvas/.storybook/storyshots.test.js | 18 + .../datetime_calendar.examples.storyshot | 335 ++++++++++++++++++ .../datetime_calendar.examples.tsx | 55 +++ .../datetime_calendar/datetime_calendar.js | 47 --- .../datetime_calendar/datetime_calendar.tsx | 64 ++++ .../index.js => datetime_calendar/index.ts} | 5 +- .../datetime_input.examples.storyshot | 67 ++++ .../__examples__/datetime_input.examples.tsx | 20 ++ .../{datetime_input.js => datetime_input.tsx} | 22 +- .../components/datetime_input/index.js | 22 -- .../components/datetime_input/index.ts | 34 ++ .../datetime_quick_list.examples.storyshot | 219 ++++++++++++ .../datetime_quick_list.examples.tsx | 21 ++ .../datetime_quick_list.js | 35 -- .../datetime_quick_list.tsx | 56 +++ .../index.js => datetime_quick_list/index.ts} | 5 +- ...datetime_range_absolute.examples.storyshot | 122 +++++++ .../datetime_range_absolute.examples.tsx | 18 + ...bsolute.js => datetime_range_absolute.tsx} | 27 +- .../datetime_range_absolute/index.js | 10 - .../index.ts} | 5 +- .../pretty_duration.examples.storyshot | 13 + .../__examples__/pretty_duration.examples.tsx | 13 + .../pretty_duration/{index.js => index.ts} | 0 ...{format_duration.js => format_duration.ts} | 23 +- .../lib/{quick_ranges.js => quick_ranges.ts} | 9 +- .../lib/{time_units.js => time_units.ts} | 2 +- .../pretty_duration/pretty_duration.js | 16 - .../pretty_duration/pretty_duration.tsx | 25 ++ .../time_filter.examples.storyshot | 267 ++++++++++++++ .../__examples__/time_filter.examples.tsx | 25 ++ .../time_filter/{index.js => index.ts} | 0 .../{time_filter.js => time_filter.tsx} | 31 +- .../time_picker.examples.storyshot | 241 +++++++++++++ .../__examples__/time_picker.examples.tsx | 18 + .../components/time_picker/index.js | 21 -- .../components/time_picker/index.ts | 7 + .../components/time_picker/time_picker.js | 64 ---- .../components/time_picker/time_picker.tsx | 91 +++++ .../time_picker_mini.examples.storyshot | 27 ++ .../time_picker_mini.examples.tsx | 18 + .../components/time_picker_mini/index.ts | 7 + ...me_picker_mini.js => time_picker_mini.tsx} | 22 +- 43 files changed, 1881 insertions(+), 266 deletions(-) create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/__examples__/__snapshots__/datetime_calendar.examples.storyshot create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/__examples__/datetime_calendar.examples.tsx delete mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.js create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.tsx rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/{time_picker_mini/index.js => datetime_calendar/index.ts} (60%) create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/__examples__/__snapshots__/datetime_input.examples.storyshot create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/__examples__/datetime_input.examples.tsx rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/{datetime_input.js => datetime_input.tsx} (65%) delete mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/index.js create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/index.ts create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/__examples__/__snapshots__/datetime_quick_list.examples.storyshot create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/__examples__/datetime_quick_list.examples.tsx delete mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/datetime_quick_list.js create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/datetime_quick_list.tsx rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/{datetime_calendar/index.js => datetime_quick_list/index.ts} (60%) create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/__examples__/__snapshots__/datetime_range_absolute.examples.storyshot create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/__examples__/datetime_range_absolute.examples.tsx rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/{datetime_range_absolute.js => datetime_range_absolute.tsx} (65%) delete mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/index.js rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/{datetime_quick_list/index.js => datetime_range_absolute/index.ts} (59%) create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/__examples__/__snapshots__/pretty_duration.examples.storyshot create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/__examples__/pretty_duration.examples.tsx rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/{index.js => index.ts} (100%) rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/{format_duration.js => format_duration.ts} (68%) rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/{quick_ranges.js => quick_ranges.ts} (94%) rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/{time_units.js => time_units.ts} (86%) delete mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/pretty_duration.js create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/pretty_duration.tsx create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/__snapshots__/time_filter.examples.storyshot create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/time_filter.examples.tsx rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/{index.js => index.ts} (100%) rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/{time_filter.js => time_filter.tsx} (53%) create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/__examples__/__snapshots__/time_picker.examples.storyshot create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/__examples__/time_picker.examples.tsx delete mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/index.js create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/index.ts delete mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.js create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.tsx create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/__examples__/__snapshots__/time_picker_mini.examples.storyshot create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/__examples__/time_picker_mini.examples.tsx create mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/index.ts rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/{time_picker_mini.js => time_picker_mini.tsx} (60%) diff --git a/x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js b/x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js index 39aafafd78210..736e5a5a252ce 100644 --- a/x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js +++ b/x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js @@ -25,6 +25,24 @@ jest.mock('../canvas_plugin_src/renderers/shape/shapes', () => ({ }, })); +// Mock datetime parsing so we can get stable results for tests (even while using the `now` format) +jest.mock('@elastic/datemath', () => { + return { + parse: (d, opts) => { + const dateMath = jest.requireActual('@elastic/datemath'); + return dateMath.parse(d, {...opts, forceNow: new Date('June 1, 2019')}); + } + } +}); + +// Mock react-datepicker dep used by eui to avoid rendering the entire large component +jest.mock('@elastic/eui/packages/react-datepicker', () => { + return { + __esModule: true, + default: 'ReactDatePicker', + } +}); + addSerializer(styleSheetSerializer); // Initialize Storyshots and build the Jest Snapshots diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/__examples__/__snapshots__/datetime_calendar.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/__examples__/__snapshots__/datetime_calendar.examples.storyshot new file mode 100644 index 0000000000000..f6b14e98b5fad --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/__examples__/__snapshots__/datetime_calendar.examples.storyshot @@ -0,0 +1,335 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots renderers/TimeFilter/components/DatetimeCalendar default 1`] = ` +
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+`; + +exports[`Storyshots renderers/TimeFilter/components/DatetimeCalendar invalid date 1`] = ` +
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+`; + +exports[`Storyshots renderers/TimeFilter/components/DatetimeCalendar with max date 1`] = ` +
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+`; + +exports[`Storyshots renderers/TimeFilter/components/DatetimeCalendar with min date 1`] = ` +
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+`; + +exports[`Storyshots renderers/TimeFilter/components/DatetimeCalendar with start and end date 1`] = ` +
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+`; + +exports[`Storyshots renderers/TimeFilter/components/DatetimeCalendar with value 1`] = ` +
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+`; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/__examples__/datetime_calendar.examples.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/__examples__/datetime_calendar.examples.tsx new file mode 100644 index 0000000000000..19004e6fdcc5a --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/__examples__/datetime_calendar.examples.tsx @@ -0,0 +1,55 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { action } from '@storybook/addon-actions'; +import { storiesOf } from '@storybook/react'; +import moment from 'moment'; +import React from 'react'; +import { DatetimeCalendar } from '..'; + +const startDate = moment.utc('2019-06-27'); +const endDate = moment.utc('2019-07-04'); + +storiesOf('renderers/TimeFilter/components/DatetimeCalendar', module) + .add('default', () => ( + + )) + .add('with value', () => ( + + )) + .add('with start and end date', () => ( + + )) + .add('with min date', () => ( + + )) + .add('with max date', () => ( + + )) + .add('invalid date', () => ( + + )); diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.js deleted file mode 100644 index ba50c8838f531..0000000000000 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.js +++ /dev/null @@ -1,47 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import dateMath from '@elastic/datemath'; -import { EuiDatePicker } from '@elastic/eui'; -import { DatetimeInput } from '../datetime_input'; - -export const DatetimeCalendar = ({ - value, - onValueChange, - onSelect, - startDate, - endDate, - minDate, - maxDate, -}) => ( -
- - -
-); - -DatetimeCalendar.propTypes = { - value: PropTypes.object, - onSelect: PropTypes.func, - onValueChange: PropTypes.func, // Called with a moment - startDate: PropTypes.object, // a moment - endDate: PropTypes.object, // a moment - minDate: PropTypes.object, // a moment - maxDate: PropTypes.object, // a moment -}; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.tsx new file mode 100644 index 0000000000000..2c84424a4c724 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.tsx @@ -0,0 +1,64 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { FunctionComponent } from 'react'; +import PropTypes from 'prop-types'; +import { Moment } from 'moment'; +import { EuiDatePicker } from '@elastic/eui'; +import { DatetimeInput } from '../datetime_input'; + +export interface Props { + /** Selected date (Moment date object) */ + value?: Moment; + /** Function invoked when a date is selected from the datepicker */ + onSelect: (date: Moment | null) => void; + /** Function invoked when the date text input changes */ + onValueChange: (moment: Moment) => void; // Called with a moment + /** Start date of selected date range (Moment date object) */ + startDate?: Moment; + /** End date of selected date range (Moment date object) */ + endDate?: Moment; + /** Earliest selectable date (Moment date object) */ + minDate?: Moment; + /** Latest selectable date (Moment date object) */ + maxDate?: Moment; +} + +export const DatetimeCalendar: FunctionComponent = ({ + value, + onValueChange, + onSelect, + startDate, + endDate, + minDate, + maxDate, +}) => ( +
+ + +
+); + +DatetimeCalendar.propTypes = { + value: PropTypes.object, + onSelect: PropTypes.func.isRequired, + onValueChange: PropTypes.func.isRequired, // Called with a moment + startDate: PropTypes.object, // a moment + endDate: PropTypes.object, // a moment + minDate: PropTypes.object, // a moment + maxDate: PropTypes.object, // a moment +}; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/index.ts similarity index 60% rename from x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/index.js rename to x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/index.ts index 9146778c243d6..7f64e2b89df03 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/index.js +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/index.ts @@ -4,7 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { compose } from 'recompose'; -import { TimePickerMini as Component } from './time_picker_mini'; - -export const TimePickerMini = compose()(Component); +export { DatetimeCalendar } from './datetime_calendar'; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/__examples__/__snapshots__/datetime_input.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/__examples__/__snapshots__/datetime_input.examples.storyshot new file mode 100644 index 0000000000000..1bda4b5246991 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/__examples__/__snapshots__/datetime_input.examples.storyshot @@ -0,0 +1,67 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots renderers/TimeFilter/components/DatetimeInput default 1`] = ` +
+
+ +
+
+`; + +exports[`Storyshots renderers/TimeFilter/components/DatetimeInput invalid date 1`] = ` +
+
+ +
+
+`; + +exports[`Storyshots renderers/TimeFilter/components/DatetimeInput with date 1`] = ` +
+
+ +
+
+`; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/__examples__/datetime_input.examples.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/__examples__/datetime_input.examples.tsx new file mode 100644 index 0000000000000..060f04da88f99 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/__examples__/datetime_input.examples.tsx @@ -0,0 +1,20 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { action } from '@storybook/addon-actions'; +import { storiesOf } from '@storybook/react'; +import moment from 'moment'; +import React from 'react'; +import { DatetimeInput } from '..'; + +storiesOf('renderers/TimeFilter/components/DatetimeInput', module) + .add('default', () => ) + .add('with date', () => ( + + )) + .add('invalid date', () => ( + + )); diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/datetime_input.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/datetime_input.tsx similarity index 65% rename from x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/datetime_input.js rename to x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/datetime_input.tsx index c48fcf110111b..097df66dadccc 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/datetime_input.js +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/datetime_input.tsx @@ -4,13 +4,27 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { FunctionComponent, ChangeEvent } from 'react'; import PropTypes from 'prop-types'; import { EuiFieldText } from '@elastic/eui'; -import moment from 'moment'; +import moment, { Moment } from 'moment'; -export const DatetimeInput = ({ strValue, setStrValue, setMoment, valid, setValid }) => { - function check(e) { +export interface Props { + strValue: string; + setStrValue: (value: string) => void; + setMoment: (value: Moment) => void; + valid: boolean; + setValid: (valid: boolean) => void; +} + +export const DatetimeInput: FunctionComponent = ({ + strValue, + setStrValue, + setMoment, + valid, + setValid, +}) => { + function check(e: ChangeEvent) { const parsed = moment(e.target.value, 'YYYY-MM-DD HH:mm:ss', true); if (parsed.isValid()) { setMoment(parsed); diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/index.js deleted file mode 100644 index 66fb062c73a61..0000000000000 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/index.js +++ /dev/null @@ -1,22 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import { compose, withState, lifecycle } from 'recompose'; -import { DatetimeInput as Component } from './datetime_input'; - -export const DatetimeInput = compose( - withState('valid', 'setValid', () => true), - withState('strValue', 'setStrValue', ({ moment }) => moment.format('YYYY-MM-DD HH:mm:ss')), - lifecycle({ - componentWillReceiveProps({ moment, setStrValue, setValid }) { - if (this.props.moment.isSame(moment)) { - return; - } - setStrValue(moment.format('YYYY-MM-DD HH:mm:ss')); - setValid(true); - }, - }) -)(Component); diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/index.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/index.ts new file mode 100644 index 0000000000000..d708bf5769bd7 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/index.ts @@ -0,0 +1,34 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { Moment } from 'moment'; +import { compose, withState, lifecycle } from 'recompose'; +import { DatetimeInput as Component, Props as ComponentProps } from './datetime_input'; + +export interface Props { + /** Input value (Moment date object) */ + moment?: Moment; + /** Function to invoke when the input changes */ + setMoment: (m: Moment) => void; +} + +export const DatetimeInput = compose( + withState('valid', 'setValid', () => true), + withState('strValue', 'setStrValue', ({ moment }) => + moment ? moment.format('YYYY-MM-DD HH:mm:ss') : '' + ), + lifecycle({ + componentWillReceiveProps({ moment, setStrValue, setValid }) { + if (!moment) return; + + if (this.props.moment && this.props.moment.isSame(moment)) { + return; + } + setStrValue(moment.format('YYYY-MM-DD HH:mm:ss')); + setValid(true); + }, + }) +)(Component); diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/__examples__/__snapshots__/datetime_quick_list.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/__examples__/__snapshots__/datetime_quick_list.examples.storyshot new file mode 100644 index 0000000000000..7eda243dd39a6 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/__examples__/__snapshots__/datetime_quick_list.examples.storyshot @@ -0,0 +1,219 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots renderers/TimeFilter/components/DatetimeQuickList with children 1`] = ` +
+ + + + + + + +
+`; + +exports[`Storyshots renderers/TimeFilter/components/DatetimeQuickList with start and end dates 1`] = ` +
+ + + + + + +
+`; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/__examples__/datetime_quick_list.examples.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/__examples__/datetime_quick_list.examples.tsx new file mode 100644 index 0000000000000..68ef3cf1300bc --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/__examples__/datetime_quick_list.examples.tsx @@ -0,0 +1,21 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { EuiButtonEmpty } from '@elastic/eui'; +import { action } from '@storybook/addon-actions'; +import { storiesOf } from '@storybook/react'; +import React from 'react'; +import { DatetimeQuickList } from '..'; + +storiesOf('renderers/TimeFilter/components/DatetimeQuickList', module) + .add('with start and end dates', () => ( + + )) + .add('with children', () => ( + + Apply + + )); diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/datetime_quick_list.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/datetime_quick_list.js deleted file mode 100644 index b58e38c49fef6..0000000000000 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/datetime_quick_list.js +++ /dev/null @@ -1,35 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import { EuiButton, EuiButtonEmpty } from '@elastic/eui'; -import 'react-datetime/css/react-datetime.css'; - -export const DatetimeQuickList = ({ from, to, ranges, onSelect, children }) => ( -
- {ranges.map((range, i) => - from === range.from && to === range.to ? ( - onSelect(range.from, range.to)}> - {range.display} - - ) : ( - onSelect(range.from, range.to)}> - {range.display} - - ) - )} - {children} -
-); - -DatetimeQuickList.propTypes = { - from: PropTypes.string, - to: PropTypes.string, - ranges: PropTypes.array, - onSelect: PropTypes.func, - children: PropTypes.node, -}; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/datetime_quick_list.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/datetime_quick_list.tsx new file mode 100644 index 0000000000000..2c8d644b98db7 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/datetime_quick_list.tsx @@ -0,0 +1,56 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { ReactNode, FunctionComponent } from 'react'; +import PropTypes from 'prop-types'; +import { EuiButton, EuiButtonEmpty } from '@elastic/eui'; +import 'react-datetime/css/react-datetime.css'; + +interface Props { + /** Initial start date string */ + from: string; + /** Initial end date string */ + to: string; + + /** Function invoked when a date range is clicked */ + onSelect: (from: string, to: string) => void; + + /** Nodes to display under the date range buttons */ + children?: ReactNode; +} + +const quickRanges = [ + { from: 'now-24h', to: 'now', display: 'Last 24 hours' }, + { from: 'now-7d', to: 'now', display: 'Last 7 days' }, + { from: 'now-14d', to: 'now', display: 'Last 2 weeks' }, + { from: 'now-30d', to: 'now', display: 'Last 30 days' }, + { from: 'now-90d', to: 'now', display: 'Last 90 days' }, + { from: 'now-1y', to: 'now', display: 'Last 1 year' }, +]; + +export const DatetimeQuickList: FunctionComponent = ({ from, to, onSelect, children }) => ( +
+ {quickRanges.map((range, i) => + from === range.from && to === range.to ? ( + onSelect(range.from, range.to)}> + {range.display} + + ) : ( + onSelect(range.from, range.to)}> + {range.display} + + ) + )} + {children} +
+); + +DatetimeQuickList.propTypes = { + from: PropTypes.string.isRequired, + to: PropTypes.string.isRequired, + onSelect: PropTypes.func.isRequired, + children: PropTypes.node, +}; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/index.ts similarity index 60% rename from x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/index.js rename to x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/index.ts index 9ac576db0cc8a..5780f0f89c00a 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/index.js +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/index.ts @@ -4,7 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { compose } from 'recompose'; -import { DatetimeCalendar as Component } from './datetime_calendar'; - -export const DatetimeCalendar = compose()(Component); +export { DatetimeQuickList } from './datetime_quick_list'; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/__examples__/__snapshots__/datetime_range_absolute.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/__examples__/__snapshots__/datetime_range_absolute.examples.storyshot new file mode 100644 index 0000000000000..7bf08c3d6f24e --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/__examples__/__snapshots__/datetime_range_absolute.examples.storyshot @@ -0,0 +1,122 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots renderers/TimeFilter/components/DatetimeRangeAbsolute default 1`] = ` +
+
+
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+`; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/__examples__/datetime_range_absolute.examples.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/__examples__/datetime_range_absolute.examples.tsx new file mode 100644 index 0000000000000..01d2fe49e29e8 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/__examples__/datetime_range_absolute.examples.tsx @@ -0,0 +1,18 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { action } from '@storybook/addon-actions'; +import { storiesOf } from '@storybook/react'; +import moment from 'moment'; +import React from 'react'; +import { DatetimeRangeAbsolute } from '..'; + +const startDate = moment.utc('2019-06-21'); +const endDate = moment.utc('2019-07-05'); + +storiesOf('renderers/TimeFilter/components/DatetimeRangeAbsolute', module).add('default', () => ( + +)); diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.tsx similarity index 65% rename from x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.js rename to x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.tsx index fd4ed0f80eae9..f0843b5f12c75 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.js +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.tsx @@ -4,12 +4,21 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { FunctionComponent } from 'react'; import PropTypes from 'prop-types'; -import moment from 'moment'; +import { Moment } from 'moment'; import { DatetimeCalendar } from '../datetime_calendar'; -export const DatetimeRangeAbsolute = ({ from, to, onSelect }) => ( +interface Props { + /** Optional initial start date moment */ + from?: Moment; + /** Optional initial end date moment */ + to?: Moment; + + onSelect: (from?: Moment, to?: Moment) => void; +} + +export const DatetimeRangeAbsolute: FunctionComponent = ({ from, to, onSelect }) => (
( maxDate={to} onValueChange={val => onSelect(val, to)} onSelect={val => { + if (!val || !from) return; + // sets the time to start of day if only the date was selected - if (moment(from).format('hh:mm:ss a') === val.format('hh:mm:ss a')) { + if (from.format('hh:mm:ss a') === val.format('hh:mm:ss a')) { onSelect(val.startOf('day'), to); } else { onSelect(val, to); @@ -36,9 +47,11 @@ export const DatetimeRangeAbsolute = ({ from, to, onSelect }) => ( minDate={from} onValueChange={val => onSelect(from, val)} onSelect={val => { + if (!val || !to) return; + // set the time to end of day if only the date was selected - if (moment(to).format('hh:mm:ss a') === val.format('hh:mm:ss a')) { - onSelect(from, moment(val).endOf('day')); + if (to.format('hh:mm:ss a') === val.format('hh:mm:ss a')) { + onSelect(from, val.endOf('day')); } else { onSelect(from, val); } @@ -51,5 +64,5 @@ export const DatetimeRangeAbsolute = ({ from, to, onSelect }) => ( DatetimeRangeAbsolute.propTypes = { from: PropTypes.object, // a moment to: PropTypes.object, // a moment - onSelect: PropTypes.func, + onSelect: PropTypes.func.isRequired, }; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/index.js deleted file mode 100644 index 75ee8685b3e8a..0000000000000 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/index.js +++ /dev/null @@ -1,10 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import { compose } from 'recompose'; -import { DatetimeRangeAbsolute as Component } from './datetime_range_absolute'; - -export const DatetimeRangeAbsolute = compose()(Component); diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/index.ts similarity index 59% rename from x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/index.js rename to x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/index.ts index 85de3de8d04ed..c6e5a77ca8af8 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/index.js +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/index.ts @@ -4,7 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import { compose } from 'recompose'; -import { DatetimeQuickList as Component } from './datetime_quick_list'; - -export const DatetimeQuickList = compose()(Component); +export { DatetimeRangeAbsolute } from './datetime_range_absolute'; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/__examples__/__snapshots__/pretty_duration.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/__examples__/__snapshots__/pretty_duration.examples.storyshot new file mode 100644 index 0000000000000..06c7daea2fdd3 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/__examples__/__snapshots__/pretty_duration.examples.storyshot @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots renderers/TimeFilter/components/PrettyDuration with absolute dates 1`] = ` + + ~ 6 months ago to ~ 5 months ago + +`; + +exports[`Storyshots renderers/TimeFilter/components/PrettyDuration with relative dates 1`] = ` + + Last 7 days + +`; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/__examples__/pretty_duration.examples.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/__examples__/pretty_duration.examples.tsx new file mode 100644 index 0000000000000..951776f8a9558 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/__examples__/pretty_duration.examples.tsx @@ -0,0 +1,13 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { storiesOf } from '@storybook/react'; +import React from 'react'; +import { PrettyDuration } from '..'; + +storiesOf('renderers/TimeFilter/components/PrettyDuration', module) + .add('with relative dates', () => ) + .add('with absolute dates', () => ); diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/index.ts similarity index 100% rename from x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/index.js rename to x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/index.ts diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/format_duration.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/format_duration.ts similarity index 68% rename from x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/format_duration.js rename to x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/format_duration.ts index 848072e1ee4ec..fd2e6793fdb6a 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/format_duration.js +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/format_duration.ts @@ -5,16 +5,16 @@ */ import dateMath from '@elastic/datemath'; -import moment from 'moment'; -import { quickRanges } from './quick_ranges'; +import moment, { Moment } from 'moment'; +import { quickRanges, QuickRange } from './quick_ranges'; import { timeUnits } from './time_units'; -const lookupByRange = {}; -quickRanges.forEach(function(frame) { - lookupByRange[frame.from + ' to ' + frame.to] = frame; +const lookupByRange: { [key: string]: QuickRange } = {}; +quickRanges.forEach(frame => { + lookupByRange[`${frame.from} to ${frame.to}`] = frame; }); -function formatTime(time, roundUp = false) { +function formatTime(time: string | Moment, roundUp = false) { if (moment.isMoment(time)) { return time.format('lll'); } else { @@ -27,24 +27,23 @@ function formatTime(time, roundUp = false) { } } -function cantLookup(from, to) { +function cantLookup(from: string, to: string) { return `${formatTime(from)} to ${formatTime(to)}`; } -export function formatDuration(from, to) { - let text; +export function formatDuration(from: string, to: string) { // If both parts are date math, try to look up a reasonable string if (from && to && !moment.isMoment(from) && !moment.isMoment(to)) { - const tryLookup = lookupByRange[from.toString() + ' to ' + to.toString()]; + const tryLookup = lookupByRange[`${from.toString()} to ${to.toString()}`]; if (tryLookup) { return tryLookup.display; } else { const fromParts = from.toString().split('-'); if (to.toString() === 'now' && fromParts[0] === 'now' && fromParts[1]) { const rounded = fromParts[1].split('/'); - text = 'Last ' + rounded[0]; + let text = `Last ${rounded[0]}`; if (rounded[1]) { - text = text + ' rounded to the ' + timeUnits[rounded[1]]; + text = `${text} rounded to the ${timeUnits[rounded[1]]}`; } return text; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/quick_ranges.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/quick_ranges.ts similarity index 94% rename from x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/quick_ranges.js rename to x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/quick_ranges.ts index 4d01628725637..3f0ad402ab230 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/quick_ranges.js +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/quick_ranges.ts @@ -4,7 +4,14 @@ * you may not use this file except in compliance with the Elastic License. */ -export const quickRanges = [ +export interface QuickRange { + from: string; + to: string; + display: string; + section: number; +} + +export const quickRanges: QuickRange[] = [ { from: 'now/d', to: 'now/d', display: 'Today', section: 0 }, { from: 'now/w', to: 'now/w', display: 'This week', section: 0 }, { from: 'now/M', to: 'now/M', display: 'This month', section: 0 }, diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/time_units.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/time_units.ts similarity index 86% rename from x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/time_units.js rename to x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/time_units.ts index 5f602e38b4979..7e55af90157a9 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/time_units.js +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/time_units.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -export const timeUnits = { +export const timeUnits: { [key: string]: string } = { s: 'second', m: 'minute', h: 'hour', diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/pretty_duration.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/pretty_duration.js deleted file mode 100644 index 743aa69feaa4f..0000000000000 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/pretty_duration.js +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; -import { PropTypes } from 'prop-types'; -import { formatDuration } from './lib/format_duration'; - -export const PrettyDuration = ({ from, to }) => {formatDuration(from, to)}; - -PrettyDuration.propTypes = { - from: PropTypes.any.isRequired, - to: PropTypes.any.isRequired, -}; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/pretty_duration.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/pretty_duration.tsx new file mode 100644 index 0000000000000..f1b65c586ff0c --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/pretty_duration.tsx @@ -0,0 +1,25 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { FunctionComponent } from 'react'; +import PropTypes from 'prop-types'; +import { formatDuration } from './lib/format_duration'; + +interface Props { + /** Initial start date string */ + from: string; + /** Initial end date string */ + to: string; +} + +export const PrettyDuration: FunctionComponent = ({ from, to }) => ( + {formatDuration(from, to)} +); + +PrettyDuration.propTypes = { + from: PropTypes.string.isRequired, + to: PropTypes.string.isRequired, +}; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/__snapshots__/time_filter.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/__snapshots__/time_filter.examples.storyshot new file mode 100644 index 0000000000000..121f5d6993f96 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/__snapshots__/time_filter.examples.storyshot @@ -0,0 +1,267 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots renderers/TimeFilter compact mode 1`] = ` +
+
+ +
+
+`; + +exports[`Storyshots renderers/TimeFilter default 1`] = ` +
+
+
+
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+
+ + + + + + + +
+
+`; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/time_filter.examples.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/time_filter.examples.tsx new file mode 100644 index 0000000000000..b6b94bf3e4a05 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/time_filter.examples.tsx @@ -0,0 +1,25 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { action } from '@storybook/addon-actions'; +import { storiesOf } from '@storybook/react'; +import React from 'react'; +import { TimeFilter } from '..'; + +storiesOf('renderers/TimeFilter', module) + .add('default', () => ( + + )) + .add('compact mode', () => ( + + )); diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/index.ts similarity index 100% rename from x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/index.js rename to x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/index.ts diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/time_filter.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/time_filter.tsx similarity index 53% rename from x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/time_filter.js rename to x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/time_filter.tsx index 4b67c906823bc..c4613b42a1d00 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/time_filter.js +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/time_filter.tsx @@ -11,16 +11,31 @@ import { fromExpression } from '@kbn/interpreter/common'; import { TimePicker } from '../time_picker'; import { TimePickerMini } from '../time_picker_mini'; -function getFilterMeta(filter) { +export interface FilterMeta { + column: string; + from: string; + to: string; +} + +function getFilterMeta(filter: string): FilterMeta { const ast = fromExpression(filter); - const column = get(ast, 'chain[0].arguments.column[0]'); - const from = get(ast, 'chain[0].arguments.from[0]'); - const to = get(ast, 'chain[0].arguments.to[0]'); + const column = get(ast, 'chain[0].arguments.column[0]'); + const from = get(ast, 'chain[0].arguments.from[0]'); + const to = get(ast, 'chain[0].arguments.to[0]'); return { column, from, to }; } -export const TimeFilter = ({ filter, commit, compact }) => { - const setFilter = column => (from, to) => { +export interface Props { + /** Initial value of the filter */ + filter: string; + /** Function invoked when the filter changes */ + commit: (filter: string) => void; + /** Determines if compact or full-sized time picker is displayed */ + compact?: boolean; +} + +export const TimeFilter = ({ filter, commit, compact }: Props) => { + const setFilter = (column: string) => (from: string, to: string) => { commit(`timefilter from="${from}" to=${to} column=${column}`); }; @@ -34,7 +49,7 @@ export const TimeFilter = ({ filter, commit, compact }) => { }; TimeFilter.propTypes = { - filter: PropTypes.string, - commit: PropTypes.func, // Canvas filter + filter: PropTypes.string.isRequired, + commit: PropTypes.func.isRequired, // Canvas filter compact: PropTypes.bool, }; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/__examples__/__snapshots__/time_picker.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/__examples__/__snapshots__/time_picker.examples.storyshot new file mode 100644 index 0000000000000..04f844d1ebf27 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/__examples__/__snapshots__/time_picker.examples.storyshot @@ -0,0 +1,241 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots renderers/TimeFilter/components/TimePicker default 1`] = ` +
+
+
+
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+
+ + + + + + + +
+
+`; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/__examples__/time_picker.examples.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/__examples__/time_picker.examples.tsx new file mode 100644 index 0000000000000..e34d2d5f58561 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/__examples__/time_picker.examples.tsx @@ -0,0 +1,18 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { action } from '@storybook/addon-actions'; +import { storiesOf } from '@storybook/react'; +import moment from 'moment'; +import React from 'react'; +import { TimePicker } from '..'; + +const startDate = moment.utc('2018-04-04').toISOString(); +const endDate = moment.utc('2019-04-04').toISOString(); + +storiesOf('renderers/TimeFilter/components/TimePicker', module).add('default', () => ( + +)); diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/index.js deleted file mode 100644 index 9ec8fc5752435..0000000000000 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/index.js +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import { compose, withState, lifecycle } from 'recompose'; -import { TimePicker as Component } from './time_picker'; - -export const TimePicker = compose( - withState('range', 'setRange', ({ from, to }) => ({ from, to })), - withState('dirty', 'setDirty', false), - lifecycle({ - componentWillReceiveProps({ from, to }) { - if (from !== this.props.from || to !== this.props.to) { - this.props.setRange({ from, to }); - this.props.setDirty(false); - } - }, - }) -)(Component); diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/index.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/index.ts new file mode 100644 index 0000000000000..a220bd5eebc21 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { TimePicker } from './time_picker'; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.js deleted file mode 100644 index 9a726f2ae8f3c..0000000000000 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.js +++ /dev/null @@ -1,64 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import dateMath from '@elastic/datemath'; -import { EuiButton } from '@elastic/eui'; -import moment from 'moment'; -import { DatetimeRangeAbsolute } from '../datetime_range_absolute'; -import { DatetimeQuickList } from '../datetime_quick_list'; - -export const quickRanges = [ - { from: 'now/d', to: 'now', display: 'Today' }, - { from: 'now-24h', to: 'now', display: 'Last 24 hours' }, - { from: 'now-7d', to: 'now', display: 'Last 7 days' }, - { from: 'now-14d', to: 'now', display: 'Last 2 weeks' }, - { from: 'now-30d', to: 'now', display: 'Last 30 days' }, - { from: 'now-90d', to: 'now', display: 'Last 90 days' }, - { from: 'now-1y', to: 'now', display: 'Last 1 year' }, -]; - -export const TimePicker = ({ range, setRange, dirty, setDirty, onSelect }) => { - const { from, to } = range; - - function absoluteSelect(from, to) { - setDirty(true); - setRange({ from: moment(from).toISOString(), to: moment(to).toISOString() }); - } - - return ( -
- - - { - setDirty(false); - onSelect(range.from, range.to); - }} - > - Apply - - -
- ); -}; - -TimePicker.propTypes = { - range: PropTypes.object, - setRange: PropTypes.func, - dirty: PropTypes.bool, - setDirty: PropTypes.func, - onSelect: PropTypes.func, -}; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.tsx new file mode 100644 index 0000000000000..3e7bc2d85da34 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.tsx @@ -0,0 +1,91 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import dateMath from '@elastic/datemath'; +import { EuiButton } from '@elastic/eui'; +import moment from 'moment'; +import { DatetimeQuickList } from '../datetime_quick_list'; +import { DatetimeRangeAbsolute } from '../datetime_range_absolute'; + +export interface Props { + /** Start date string */ + from: string; + /** End date string */ + to: string; + /** Function invoked when date range is changed */ + onSelect: (from: string, to: string) => void; +} + +export interface State { + range: { + from: string; + to: string; + }; + isDirty: boolean; +} + +export class TimePicker extends Component { + static propTypes = { + from: PropTypes.string.isRequired, + to: PropTypes.string.isRequired, + onSelect: PropTypes.func.isRequired, + }; + + state = { + range: { from: this.props.from, to: this.props.to }, + isDirty: false, + }; + + componentWillReceiveProps({ from, to }: Props) { + if (from !== this.props.from || to !== this.props.to) { + this.setState({ + range: { from, to }, + isDirty: false, + }); + } + } + + absoluteSelect = (from?: moment.Moment, to?: moment.Moment) => { + if (from && to) { + this.setState({ + range: { from: moment(from).toISOString(), to: moment(to).toISOString() }, + isDirty: true, + }); + } + }; + + render() { + const { onSelect } = this.props; + const { range, isDirty } = this.state; + const { from, to } = range; + + return ( +
+ + + { + this.setState({ isDirty: false }); + onSelect(from, to); + }} + > + Apply + + +
+ ); + } +} diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/__examples__/__snapshots__/time_picker_mini.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/__examples__/__snapshots__/time_picker_mini.examples.storyshot new file mode 100644 index 0000000000000..848d6a21997df --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/__examples__/__snapshots__/time_picker_mini.examples.storyshot @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots renderers/TimeFilter/components/TimePickerMini default 1`] = ` +
+
+ +
+
+`; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/__examples__/time_picker_mini.examples.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/__examples__/time_picker_mini.examples.tsx new file mode 100644 index 0000000000000..4b222f84ac4d6 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/__examples__/time_picker_mini.examples.tsx @@ -0,0 +1,18 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { action } from '@storybook/addon-actions'; +import { storiesOf } from '@storybook/react'; +import moment from 'moment'; +import React from 'react'; +import { TimePickerMini } from '..'; + +const startDate = moment.utc('2019-05-04').toISOString(); +const endDate = moment.utc('2019-06-04').toISOString(); + +storiesOf('renderers/TimeFilter/components/TimePickerMini', module).add('default', () => ( + +)); diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/index.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/index.ts new file mode 100644 index 0000000000000..800ba44bd6851 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { TimePickerMini } from './time_picker_mini'; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/time_picker_mini.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/time_picker_mini.tsx similarity index 60% rename from x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/time_picker_mini.js rename to x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/time_picker_mini.tsx index 3e2f36bc41bc9..d2bdfc72b10f5 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/time_picker_mini.js +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker_mini/time_picker_mini.tsx @@ -4,14 +4,24 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { FunctionComponent, MouseEvent } from 'react'; import PropTypes from 'prop-types'; +// @ts-ignore untyped local import { Popover } from '../../../../../public/components/popover'; import { PrettyDuration } from '../pretty_duration'; import { TimePicker } from '../time_picker'; -export const TimePickerMini = ({ from, to, onSelect }) => { - const button = handleClick => ( +export interface Props { + /** Start date string */ + from: string; + /** End date string */ + to: string; + /** Function invoked when date range is changed */ + onSelect: (from: string, to: string) => void; +} + +export const TimePickerMini: FunctionComponent = ({ from, to, onSelect }) => { + const button = (handleClick: (event: MouseEvent) => void) => ( @@ -30,7 +40,7 @@ export const TimePickerMini = ({ from, to, onSelect }) => { }; TimePickerMini.propTypes = { - from: PropTypes.string, - to: PropTypes.string, - onSelect: PropTypes.func, + from: PropTypes.string.isRequired, + to: PropTypes.string.isRequired, + onSelect: PropTypes.func.isRequired, }; From fa651ddfb98e8a32f5d09daa1c3d99ae7cfca0bf Mon Sep 17 00:00:00 2001 From: Poff Poffenberger Date: Mon, 8 Jul 2019 10:58:03 -0500 Subject: [PATCH 2/9] Setting default timezone for storyshot and updating snapshots --- .../plugins/canvas/.storybook/storyshots.test.js | 8 +++++++- .../__snapshots__/time_filter.examples.storyshot | 16 ++++++++-------- .../__snapshots__/time_picker.examples.storyshot | 4 ++-- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js b/x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js index 736e5a5a252ce..f9ce4ad89c084 100644 --- a/x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js +++ b/x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js @@ -5,10 +5,16 @@ */ import path from 'path'; +import moment from 'moment'; +import 'moment-timezone'; + import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots'; import styleSheetSerializer from 'jest-styled-components/src/styleSheetSerializer'; import { addSerializer } from 'jest-specific-snapshot'; +// Set our default timezone to UTC for tests so we can generate predictable snapshots +moment.tz.setDefault('UTC'); + // Mock EUI generated ids to be consistently predictable for snapshots. jest.mock(`@elastic/eui/lib/components/form/form_row/make_id`, () => () => `generated-id`); @@ -30,7 +36,7 @@ jest.mock('@elastic/datemath', () => { return { parse: (d, opts) => { const dateMath = jest.requireActual('@elastic/datemath'); - return dateMath.parse(d, {...opts, forceNow: new Date('June 1, 2019')}); + return dateMath.parse(d, {...opts, forceNow: new Date(Date.UTC(2019, 5, 1))}); // June 1 2019 } } }); diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/__snapshots__/time_filter.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/__snapshots__/time_filter.examples.storyshot index 121f5d6993f96..3ea1af1c94bf3 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/__snapshots__/time_filter.examples.storyshot +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/__snapshots__/time_filter.examples.storyshot @@ -71,16 +71,16 @@ exports[`Storyshots renderers/TimeFilter default 1`] = ` adjustDateOnChange={true} className="euiDatePicker euiFieldText" dateFormat="MM/DD/YYYY hh:mm A" - endDate={"2019-05-25T05:00:00.000Z"} + endDate={"2019-05-25T00:00:00.000Z"} inline={true} - maxDate={"2019-05-25T05:00:00.000Z"} + maxDate={"2019-05-25T00:00:00.000Z"} onChange={[Function]} - selected={"2018-06-01T05:00:00.000Z"} + selected={"2018-06-01T00:00:00.000Z"} shouldCloseOnSelect={false} showMonthDropdown={true} showTimeSelect={true} showYearDropdown={true} - startDate={"2018-06-01T05:00:00.000Z"} + startDate={"2018-06-01T00:00:00.000Z"} timeFormat="hh:mm A" yearDropdownItemNumber={7} /> @@ -128,16 +128,16 @@ exports[`Storyshots renderers/TimeFilter default 1`] = ` adjustDateOnChange={true} className="euiDatePicker euiFieldText" dateFormat="MM/DD/YYYY hh:mm A" - endDate={"2019-05-25T05:00:00.000Z"} + endDate={"2019-05-25T00:00:00.000Z"} inline={true} - minDate={"2018-06-01T05:00:00.000Z"} + minDate={"2018-06-01T00:00:00.000Z"} onChange={[Function]} - selected={"2019-05-25T05:00:00.000Z"} + selected={"2019-05-25T00:00:00.000Z"} shouldCloseOnSelect={false} showMonthDropdown={true} showTimeSelect={true} showYearDropdown={true} - startDate={"2018-06-01T05:00:00.000Z"} + startDate={"2018-06-01T00:00:00.000Z"} timeFormat="hh:mm A" yearDropdownItemNumber={7} /> diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/__examples__/__snapshots__/time_picker.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/__examples__/__snapshots__/time_picker.examples.storyshot index 04f844d1ebf27..d67fca2776e81 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/__examples__/__snapshots__/time_picker.examples.storyshot +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/__examples__/__snapshots__/time_picker.examples.storyshot @@ -26,7 +26,7 @@ exports[`Storyshots renderers/TimeFilter/components/TimePicker default 1`] = ` } } type="text" - value="2018-04-03 19:00:00" + value="2018-04-04 00:00:00" />
@@ -83,7 +83,7 @@ exports[`Storyshots renderers/TimeFilter/components/TimePicker default 1`] = ` } } type="text" - value="2019-04-03 19:00:00" + value="2019-04-04 00:00:00" /> From 26a9d5f70132b56402b7b7ab83b0da5bf378561b Mon Sep 17 00:00:00 2001 From: Poff Poffenberger Date: Wed, 10 Jul 2019 16:44:02 -0500 Subject: [PATCH 3/9] Rename TimePickerMini component to TimePickerPopover --- .../__snapshots__/time_filter.examples.storyshot | 6 +++--- .../time_filter/components/time_filter/time_filter.tsx | 4 ++-- .../time_picker_popover.examples.storyshot} | 8 ++++---- .../__examples__/time_picker_popover.examples.tsx} | 6 +++--- .../{time_picker_mini => time_picker_popover}/index.ts | 2 +- .../time_picker_popover.scss} | 6 +++--- .../time_picker_popover.tsx} | 10 +++++----- .../canvas_plugin_src/templates/dashboard_report.json | 2 +- 8 files changed, 22 insertions(+), 22 deletions(-) rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/{time_picker_mini/__examples__/__snapshots__/time_picker_mini.examples.storyshot => time_picker_popover/__examples__/__snapshots__/time_picker_popover.examples.storyshot} (67%) rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/{time_picker_mini/__examples__/time_picker_mini.examples.tsx => time_picker_popover/__examples__/time_picker_popover.examples.tsx} (70%) rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/{time_picker_mini => time_picker_popover}/index.ts (80%) rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/{time_picker_mini/time_picker_mini.scss => time_picker_popover/time_picker_popover.scss} (72%) rename x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/{time_picker_mini/time_picker_mini.tsx => time_picker_popover/time_picker_popover.tsx} (80%) diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/__snapshots__/time_filter.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/__snapshots__/time_filter.examples.storyshot index 3ea1af1c94bf3..efd98f8a85e76 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/__snapshots__/time_filter.examples.storyshot +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/__snapshots__/time_filter.examples.storyshot @@ -2,7 +2,7 @@ exports[`Storyshots renderers/TimeFilter compact mode 1`] = `
); @@ -30,8 +30,8 @@ export const TimePickerMini: FunctionComponent = ({ from, to, onSelect }) return ( {() => } @@ -39,7 +39,7 @@ export const TimePickerMini: FunctionComponent = ({ from, to, onSelect }) ); }; -TimePickerMini.propTypes = { +TimePickerPopover.propTypes = { from: PropTypes.string.isRequired, to: PropTypes.string.isRequired, onSelect: PropTypes.func.isRequired, diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/templates/dashboard_report.json b/x-pack/legacy/plugins/canvas/canvas_plugin_src/templates/dashboard_report.json index eebce96f1935d..31c0d2076ea5a 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/templates/dashboard_report.json +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/templates/dashboard_report.json @@ -289,7 +289,7 @@ "angle": 0, "parent": null }, - "expression": "timefilterControl compact=true column=\"@timestamp\"\n| render css=\".canvasTimePickerMini__button {\n border: none !important;\n}\"", + "expression": "timefilterControl compact=true column=\"@timestamp\"\n| render css=\".canvasTimePickerPopover__button {\n border: none !important;\n}\"", "filter": "timefilter from=\"now-14d\" to=now column=@timestamp" }, { From e4f5a0cff5864607a6955ca9cf5b83669d161296 Mon Sep 17 00:00:00 2001 From: Poff Poffenberger Date: Wed, 10 Jul 2019 17:14:18 -0500 Subject: [PATCH 4/9] other various small changes --- .../datetime_calendar/datetime_calendar.tsx | 11 ++++---- .../datetime_range_absolute.tsx | 9 ++++--- .../pretty_duration/lib/format_duration.ts | 2 +- .../pretty_duration/lib/time_units.ts | 15 ----------- .../plugins/canvas/common/lib/time_units.ts | 25 +++++++++++++++++++ x-pack/package.json | 1 + 6 files changed, 39 insertions(+), 24 deletions(-) delete mode 100644 x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/time_units.ts create mode 100644 x-pack/legacy/plugins/canvas/common/lib/time_units.ts diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.tsx index 2c84424a4c724..8c189682c959c 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.tsx +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.tsx @@ -7,6 +7,7 @@ import React, { FunctionComponent } from 'react'; import PropTypes from 'prop-types'; import { Moment } from 'moment'; +import { momentObj } from 'react-moment-proptypes'; import { EuiDatePicker } from '@elastic/eui'; import { DatetimeInput } from '../datetime_input'; @@ -54,11 +55,11 @@ export const DatetimeCalendar: FunctionComponent = ({ ); DatetimeCalendar.propTypes = { - value: PropTypes.object, + value: PropTypes.oneOfType([momentObj, PropTypes.object]), // Handle both valid and invalid moment objects onSelect: PropTypes.func.isRequired, onValueChange: PropTypes.func.isRequired, // Called with a moment - startDate: PropTypes.object, // a moment - endDate: PropTypes.object, // a moment - minDate: PropTypes.object, // a moment - maxDate: PropTypes.object, // a moment + startDate: momentObj, + endDate: momentObj, + minDate: momentObj, + maxDate: momentObj, }; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.tsx index f0843b5f12c75..2a8ce46b64e19 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.tsx +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.tsx @@ -7,6 +7,7 @@ import React, { FunctionComponent } from 'react'; import PropTypes from 'prop-types'; import { Moment } from 'moment'; +import { momentObj } from 'react-moment-proptypes'; import { DatetimeCalendar } from '../datetime_calendar'; interface Props { @@ -28,7 +29,9 @@ export const DatetimeRangeAbsolute: FunctionComponent = ({ from, to, onSe maxDate={to} onValueChange={val => onSelect(val, to)} onSelect={val => { - if (!val || !from) return; + if (!val || !from) { + return; + } // sets the time to start of day if only the date was selected if (from.format('hh:mm:ss a') === val.format('hh:mm:ss a')) { @@ -62,7 +65,7 @@ export const DatetimeRangeAbsolute: FunctionComponent = ({ from, to, onSe ); DatetimeRangeAbsolute.propTypes = { - from: PropTypes.object, // a moment - to: PropTypes.object, // a moment + from: momentObj, + to: momentObj, onSelect: PropTypes.func.isRequired, }; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/format_duration.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/format_duration.ts index fd2e6793fdb6a..ddb590fdad488 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/format_duration.ts +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/format_duration.ts @@ -7,7 +7,7 @@ import dateMath from '@elastic/datemath'; import moment, { Moment } from 'moment'; import { quickRanges, QuickRange } from './quick_ranges'; -import { timeUnits } from './time_units'; +import { timeUnits } from '../../../../../../common/lib/time_units'; const lookupByRange: { [key: string]: QuickRange } = {}; quickRanges.forEach(frame => { diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/time_units.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/time_units.ts deleted file mode 100644 index 7e55af90157a9..0000000000000 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/time_units.ts +++ /dev/null @@ -1,15 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -export const timeUnits: { [key: string]: string } = { - s: 'second', - m: 'minute', - h: 'hour', - d: 'day', - w: 'week', - M: 'month', - y: 'year', -}; diff --git a/x-pack/legacy/plugins/canvas/common/lib/time_units.ts b/x-pack/legacy/plugins/canvas/common/lib/time_units.ts new file mode 100644 index 0000000000000..fe5e1d3831a9a --- /dev/null +++ b/x-pack/legacy/plugins/canvas/common/lib/time_units.ts @@ -0,0 +1,25 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export enum TimeUnit { + SECONDS = 's', + MINUTES = 'm', + HOURS = 'h', + DAYS = 'd', + WEEKS = 'w', + MONTHS = 'M', + YEARS = 'y', +} + +export const timeUnits: Record = { + [TimeUnit.SECONDS]: 'second', + [TimeUnit.MINUTES]: 'minute', + [TimeUnit.HOURS]: 'hour', + [TimeUnit.DAYS]: 'day', + [TimeUnit.WEEKS]: 'week', + [TimeUnit.MONTHS]: 'month', + [TimeUnit.YEARS]: 'year', +}; diff --git a/x-pack/package.json b/x-pack/package.json index 52300b8d0e43b..9e85d210dda5c 100644 --- a/x-pack/package.json +++ b/x-pack/package.json @@ -304,6 +304,7 @@ "react-fast-compare": "^2.0.4", "react-markdown": "^3.4.1", "react-markdown-renderer": "^1.4.0", + "react-moment-proptypes": "^1.6.0", "react-portal": "^3.2.0", "react-redux": "^5.0.7", "react-redux-request": "^1.5.6", From 391c0f15b05c8f29adea75524a12662be2cdc59f Mon Sep 17 00:00:00 2001 From: Poff Poffenberger Date: Thu, 11 Jul 2019 09:56:37 -0500 Subject: [PATCH 5/9] Adding react-moment-proptypes to yarn.lock --- yarn.lock | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 5c77118e2fd47..3feec89a730a5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -19567,7 +19567,7 @@ moment@2.22.2, moment@>=2.14.0: resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66" integrity sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y= -moment@2.24.0: +moment@2.24.0, moment@>=1.6.0: version "2.24.0" resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b" integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg== @@ -23062,6 +23062,13 @@ react-modal@^3.8.1: react-lifecycles-compat "^3.0.0" warning "^3.0.0" +react-moment-proptypes@^1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/react-moment-proptypes/-/react-moment-proptypes-1.6.0.tgz#8ec266ee392a08ba3412d2df2eebf833ab1046df" + integrity sha512-4h7EuhDMTzQqZ+02KUUO+AVA7PqhbD88yXB740nFpNDyDS/bj9jiPyn2rwr9sa8oDyaE1ByFN9+t5XPyPTmN6g== + dependencies: + moment ">=1.6.0" + react-motion@^0.4.8: version "0.4.8" resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.4.8.tgz#23bb2dd27c2d8e00d229e45572d105efcf40a35e" From 9e01d49b354599b24debc0f1688e22b98297125c Mon Sep 17 00:00:00 2001 From: Poff Poffenberger Date: Thu, 11 Jul 2019 15:49:46 -0500 Subject: [PATCH 6/9] Missed one place with the time picker mini -> popover --- x-pack/legacy/plugins/canvas/public/style/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/legacy/plugins/canvas/public/style/index.scss b/x-pack/legacy/plugins/canvas/public/style/index.scss index 58a468e0a53a8..c679186b9e4a6 100644 --- a/x-pack/legacy/plugins/canvas/public/style/index.scss +++ b/x-pack/legacy/plugins/canvas/public/style/index.scss @@ -67,5 +67,5 @@ @import '../../canvas_plugin_src/renderers/time_filter/components/datetime_calendar/datetime_calendar.scss'; @import '../../canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.scss'; @import '../../canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.scss'; -@import '../../canvas_plugin_src/renderers/time_filter/components/time_picker_mini/time_picker_mini.scss'; +@import '../../canvas_plugin_src/renderers/time_filter/components/time_picker_popover/time_picker_popover.scss'; @import '../../canvas_plugin_src/uis/arguments/image_upload/image_upload.scss'; From a6419df1b258a57fe8810f5ebc0889854925e375 Mon Sep 17 00:00:00 2001 From: Poff Poffenberger Date: Thu, 11 Jul 2019 17:07:52 -0500 Subject: [PATCH 7/9] Type fixing --- .../components/pretty_duration/lib/format_duration.ts | 5 +++-- .../plugins/canvas/types/react_moment_prototypes.d.ts | 7 +++++++ 2 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 x-pack/legacy/plugins/canvas/types/react_moment_prototypes.d.ts diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/format_duration.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/format_duration.ts index ddb590fdad488..b713eb4d7cd5e 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/format_duration.ts +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/format_duration.ts @@ -7,7 +7,7 @@ import dateMath from '@elastic/datemath'; import moment, { Moment } from 'moment'; import { quickRanges, QuickRange } from './quick_ranges'; -import { timeUnits } from '../../../../../../common/lib/time_units'; +import { timeUnits, TimeUnit } from '../../../../../../common/lib/time_units'; const lookupByRange: { [key: string]: QuickRange } = {}; quickRanges.forEach(frame => { @@ -43,7 +43,8 @@ export function formatDuration(from: string, to: string) { const rounded = fromParts[1].split('/'); let text = `Last ${rounded[0]}`; if (rounded[1]) { - text = `${text} rounded to the ${timeUnits[rounded[1]]}`; + const unit = rounded[1] as TimeUnit; + text = `${text} rounded to the ${timeUnits[unit]}`; } return text; diff --git a/x-pack/legacy/plugins/canvas/types/react_moment_prototypes.d.ts b/x-pack/legacy/plugins/canvas/types/react_moment_prototypes.d.ts new file mode 100644 index 0000000000000..a53127ff4e431 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/types/react_moment_prototypes.d.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +declare module 'react-moment-proptypes'; From abd3bb446689bd6643ad7202f2ca9e08a49d14d7 Mon Sep 17 00:00:00 2001 From: Poff Poffenberger Date: Fri, 12 Jul 2019 09:22:17 -0500 Subject: [PATCH 8/9] Linting fix --- .../datetime_range_absolute/datetime_range_absolute.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.tsx index 2a8ce46b64e19..e8f38b10a89b6 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.tsx +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.tsx @@ -50,7 +50,9 @@ export const DatetimeRangeAbsolute: FunctionComponent = ({ from, to, onSe minDate={from} onValueChange={val => onSelect(from, val)} onSelect={val => { - if (!val || !to) return; + if (!val || !to) { + return; + } // set the time to end of day if only the date was selected if (to.format('hh:mm:ss a') === val.format('hh:mm:ss a')) { From 74054e1635f15bd87c4c8dad12482129525b5c0e Mon Sep 17 00:00:00 2001 From: Poff Poffenberger Date: Fri, 12 Jul 2019 15:38:40 -0500 Subject: [PATCH 9/9] Updating per feedback --- .../datetime_input/datetime_input.tsx | 5 ++ .../components/datetime_input/index.ts | 1 + .../datetime_range_absolute.tsx | 1 + .../pretty_duration/lib/quick_ranges.ts | 60 ++++++++++--------- .../components/time_filter/time_filter.tsx | 3 + .../components/time_picker/time_picker.tsx | 8 ++- 6 files changed, 47 insertions(+), 31 deletions(-) diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/datetime_input.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/datetime_input.tsx index 097df66dadccc..32bdcde5ddda0 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/datetime_input.tsx +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/datetime_input.tsx @@ -10,10 +10,15 @@ import { EuiFieldText } from '@elastic/eui'; import moment, { Moment } from 'moment'; export interface Props { + /** Selected string value of input */ strValue: string; + /** Function invoked with string when input is changed */ setStrValue: (value: string) => void; + /** Function invoked with moment when input is changed with valid datetime */ setMoment: (value: Moment) => void; + /** Boolean denotes whether current input value is valid date */ valid: boolean; + /** Function invoked with value validity when input is changed */ setValid: (valid: boolean) => void; } diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/index.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/index.ts index d708bf5769bd7..db4fd1aaf0468 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/index.ts +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_input/index.ts @@ -21,6 +21,7 @@ export const DatetimeInput = compose( moment ? moment.format('YYYY-MM-DD HH:mm:ss') : '' ), lifecycle({ + // TODO: Refactor to no longer use componentWillReceiveProps since it is being deprecated componentWillReceiveProps({ moment, setStrValue, setValid }) { if (!moment) return; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.tsx index e8f38b10a89b6..ddd755b4a12f4 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.tsx +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/datetime_range_absolute.tsx @@ -16,6 +16,7 @@ interface Props { /** Optional initial end date moment */ to?: Moment; + /** Function invoked when a date is selected from the datetime calendar */ onSelect: (from?: Moment, to?: Moment) => void; } diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/quick_ranges.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/quick_ranges.ts index 3f0ad402ab230..448f6e50de523 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/quick_ranges.ts +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/pretty_duration/lib/quick_ranges.ts @@ -5,42 +5,44 @@ */ export interface QuickRange { + /** Start date string of range */ from: string; + /** Start date string of range */ to: string; + /** Display name describing date range */ display: string; - section: number; } export const quickRanges: QuickRange[] = [ - { from: 'now/d', to: 'now/d', display: 'Today', section: 0 }, - { from: 'now/w', to: 'now/w', display: 'This week', section: 0 }, - { from: 'now/M', to: 'now/M', display: 'This month', section: 0 }, - { from: 'now/y', to: 'now/y', display: 'This year', section: 0 }, - { from: 'now/d', to: 'now', display: 'The day so far', section: 0 }, - { from: 'now/w', to: 'now', display: 'Week to date', section: 0 }, - { from: 'now/M', to: 'now', display: 'Month to date', section: 0 }, - { from: 'now/y', to: 'now', display: 'Year to date', section: 0 }, + { from: 'now/d', to: 'now/d', display: 'Today' }, + { from: 'now/w', to: 'now/w', display: 'This week' }, + { from: 'now/M', to: 'now/M', display: 'This month' }, + { from: 'now/y', to: 'now/y', display: 'This year' }, + { from: 'now/d', to: 'now', display: 'The day so far' }, + { from: 'now/w', to: 'now', display: 'Week to date' }, + { from: 'now/M', to: 'now', display: 'Month to date' }, + { from: 'now/y', to: 'now', display: 'Year to date' }, - { from: 'now-1d/d', to: 'now-1d/d', display: 'Yesterday', section: 1 }, - { from: 'now-2d/d', to: 'now-2d/d', display: 'Day before yesterday', section: 1 }, - { from: 'now-7d/d', to: 'now-7d/d', display: 'This day last week', section: 1 }, - { from: 'now-1w/w', to: 'now-1w/w', display: 'Previous week', section: 1 }, - { from: 'now-1M/M', to: 'now-1M/M', display: 'Previous month', section: 1 }, - { from: 'now-1y/y', to: 'now-1y/y', display: 'Previous year', section: 1 }, + { from: 'now-1d/d', to: 'now-1d/d', display: 'Yesterday' }, + { from: 'now-2d/d', to: 'now-2d/d', display: 'Day before yesterday' }, + { from: 'now-7d/d', to: 'now-7d/d', display: 'This day last week' }, + { from: 'now-1w/w', to: 'now-1w/w', display: 'Previous week' }, + { from: 'now-1M/M', to: 'now-1M/M', display: 'Previous month' }, + { from: 'now-1y/y', to: 'now-1y/y', display: 'Previous year' }, - { from: 'now-15m', to: 'now', display: 'Last 15 minutes', section: 2 }, - { from: 'now-30m', to: 'now', display: 'Last 30 minutes', section: 2 }, - { from: 'now-1h', to: 'now', display: 'Last 1 hour', section: 2 }, - { from: 'now-4h', to: 'now', display: 'Last 4 hours', section: 2 }, - { from: 'now-12h', to: 'now', display: 'Last 12 hours', section: 2 }, - { from: 'now-24h', to: 'now', display: 'Last 24 hours', section: 2 }, - { from: 'now-7d', to: 'now', display: 'Last 7 days', section: 2 }, + { from: 'now-15m', to: 'now', display: 'Last 15 minutes' }, + { from: 'now-30m', to: 'now', display: 'Last 30 minutes' }, + { from: 'now-1h', to: 'now', display: 'Last 1 hour' }, + { from: 'now-4h', to: 'now', display: 'Last 4 hours' }, + { from: 'now-12h', to: 'now', display: 'Last 12 hours' }, + { from: 'now-24h', to: 'now', display: 'Last 24 hours' }, + { from: 'now-7d', to: 'now', display: 'Last 7 days' }, - { from: 'now-30d', to: 'now', display: 'Last 30 days', section: 3 }, - { from: 'now-60d', to: 'now', display: 'Last 60 days', section: 3 }, - { from: 'now-90d', to: 'now', display: 'Last 90 days', section: 3 }, - { from: 'now-6M', to: 'now', display: 'Last 6 months', section: 3 }, - { from: 'now-1y', to: 'now', display: 'Last 1 year', section: 3 }, - { from: 'now-2y', to: 'now', display: 'Last 2 years', section: 3 }, - { from: 'now-5y', to: 'now', display: 'Last 5 years', section: 3 }, + { from: 'now-30d', to: 'now', display: 'Last 30 days' }, + { from: 'now-60d', to: 'now', display: 'Last 60 days' }, + { from: 'now-90d', to: 'now', display: 'Last 90 days' }, + { from: 'now-6M', to: 'now', display: 'Last 6 months' }, + { from: 'now-1y', to: 'now', display: 'Last 1 year' }, + { from: 'now-2y', to: 'now', display: 'Last 2 years' }, + { from: 'now-5y', to: 'now', display: 'Last 5 years' }, ]; diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/time_filter.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/time_filter.tsx index 06328a1f9db00..cbe9793c806e1 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/time_filter.tsx +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_filter/time_filter.tsx @@ -12,8 +12,11 @@ import { TimePicker } from '../time_picker'; import { TimePickerPopover } from '../time_picker_popover'; export interface FilterMeta { + /** Name of datetime column to be filtered */ column: string; + /** Start date string of filtered date range */ from: string; + /** End date string of filtered date range */ to: string; } diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.tsx index 3e7bc2d85da34..8fbd25efbee9d 100644 --- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.tsx +++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.tsx @@ -23,9 +23,12 @@ export interface Props { export interface State { range: { + /** Start date string of selected date range */ from: string; + /** End date string of selected date range */ to: string; }; + /** Boolean denoting whether selected date range has been applied */ isDirty: boolean; } @@ -41,6 +44,7 @@ export class TimePicker extends Component { isDirty: false, }; + // TODO: Refactor to no longer use componentWillReceiveProps since it is being deprecated componentWillReceiveProps({ from, to }: Props) { if (from !== this.props.from || to !== this.props.to) { this.setState({ @@ -50,7 +54,7 @@ export class TimePicker extends Component { } } - absoluteSelect = (from?: moment.Moment, to?: moment.Moment) => { + _absoluteSelect = (from?: moment.Moment, to?: moment.Moment) => { if (from && to) { this.setState({ range: { from: moment(from).toISOString(), to: moment(to).toISOString() }, @@ -69,7 +73,7 @@ export class TimePicker extends Component {