From 78adb84030942b46b90904c7d71ea5bdb6851229 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 17 Jul 2019 09:00:29 -0600 Subject: [PATCH 01/10] Expose prettyDuration and commonDurationRanges --- src/components/date_picker/index.d.ts | 15 +++++++++++++++ src/components/date_picker/index.js | 7 ++++++- .../date_picker/super_date_picker/index.js | 2 ++ .../super_date_picker/pretty_duration.js | 11 +++++++++++ .../super_date_picker/super_date_picker.js | 19 ++++++++----------- src/components/index.js | 2 ++ 6 files changed, 44 insertions(+), 12 deletions(-) diff --git a/src/components/date_picker/index.d.ts b/src/components/date_picker/index.d.ts index 2647f4e4891..ff810cec0be 100644 --- a/src/components/date_picker/index.d.ts +++ b/src/components/date_picker/index.d.ts @@ -86,4 +86,19 @@ declare module '@elastic/eui' { export const ReactDatePicker: typeof _ReactDatePicker; export const ReactDatePickerProps: _ReactDatePickerProps; + + interface DurationRange { + start: string; + end: string; + label: string; + } + + export const commonDurationRanges: DurationRange[]; + + export function prettyDuration( + timeFrom: string, + timeTo: string, + quickRanges: DurationRange[], + dateFormat: string + ): string; } diff --git a/src/components/date_picker/index.js b/src/components/date_picker/index.js index 4cd12a69bf6..69a0ec433e7 100644 --- a/src/components/date_picker/index.js +++ b/src/components/date_picker/index.js @@ -2,4 +2,9 @@ export { EuiDatePicker } from './date_picker'; export { EuiDatePickerRange } from './date_picker_range'; -export { EuiSuperDatePicker, EuiSuperUpdateButton } from './super_date_picker'; +export { + EuiSuperDatePicker, + EuiSuperUpdateButton, + prettyDuration, + commonDurationRanges, +} from './super_date_picker'; diff --git a/src/components/date_picker/super_date_picker/index.js b/src/components/date_picker/super_date_picker/index.js index 148086735d8..978ec874cc6 100644 --- a/src/components/date_picker/super_date_picker/index.js +++ b/src/components/date_picker/super_date_picker/index.js @@ -1,3 +1,5 @@ export { EuiSuperDatePicker } from './super_date_picker'; export { EuiSuperUpdateButton } from './super_update_button'; + +export { prettyDuration, commonDurationRanges } from './pretty_duration'; diff --git a/src/components/date_picker/super_date_picker/pretty_duration.js b/src/components/date_picker/super_date_picker/pretty_duration.js index 86c6ac9a1e1..bbc05bede46 100644 --- a/src/components/date_picker/super_date_picker/pretty_duration.js +++ b/src/components/date_picker/super_date_picker/pretty_duration.js @@ -6,6 +6,17 @@ import { parseRelativeParts } from './relative_utils'; const ISO_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSZ'; +export const commonDurationRanges = [ + { start: 'now/d', end: 'now/d', label: 'Today' }, + { start: 'now/w', end: 'now/w', label: 'This week' }, + { start: 'now/M', end: 'now/M', label: 'This month' }, + { start: 'now/y', end: 'now/y', label: 'This year' }, + { start: 'now-1d/d', end: 'now-1d/d', label: 'Yesterday' }, + { start: 'now/w', end: 'now', label: 'Week to date' }, + { start: 'now/M', end: 'now', label: 'Month to date' }, + { start: 'now/y', end: 'now', label: 'Year to date' }, +]; + function cantLookup(timeFrom, timeTo, dateFormat) { const displayFrom = formatTimeString(timeFrom, dateFormat); const displayTo = formatTimeString(timeTo, dateFormat, true); diff --git a/src/components/date_picker/super_date_picker/super_date_picker.js b/src/components/date_picker/super_date_picker/super_date_picker.js index a2c0f75d0ec..45e0527fd8b 100644 --- a/src/components/date_picker/super_date_picker/super_date_picker.js +++ b/src/components/date_picker/super_date_picker/super_date_picker.js @@ -6,7 +6,11 @@ import { recentlyUsedRangeShape, quickSelectPanelShape, } from './types'; -import { prettyDuration, showPrettyDuration } from './pretty_duration'; +import { + prettyDuration, + showPrettyDuration, + commonDurationRanges, +} from './pretty_duration'; import { prettyInterval } from './pretty_interval'; import dateMath from '@elastic/datemath'; @@ -20,6 +24,8 @@ import { EuiFormControlLayout } from '../../form'; import { EuiFlexGroup, EuiFlexItem } from '../../flex'; import { AsyncInterval } from './async_interval'; +export { prettyDuration, commonDurationRanges }; + function isRangeInvalid(start, end) { if (start === 'now' && end === 'now') { return true; @@ -105,16 +111,7 @@ export class EuiSuperDatePicker extends Component { end: 'now', isPaused: true, refreshInterval: 0, - commonlyUsedRanges: [ - { start: 'now/d', end: 'now/d', label: 'Today' }, - { start: 'now/w', end: 'now/w', label: 'This week' }, - { start: 'now/M', end: 'now/M', label: 'This month' }, - { start: 'now/y', end: 'now/y', label: 'This year' }, - { start: 'now-1d/d', end: 'now-1d/d', label: 'Yesterday' }, - { start: 'now/w', end: 'now', label: 'Week to date' }, - { start: 'now/M', end: 'now', label: 'Month to date' }, - { start: 'now/y', end: 'now', label: 'Year to date' }, - ], + commonlyUsedRanges: commonDurationRanges, dateFormat: 'MMM D, YYYY @ HH:mm:ss.SSS', recentlyUsedRanges: [], showUpdateButton: true, diff --git a/src/components/index.js b/src/components/index.js index 2e93265dd77..9218bd62cdc 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -50,6 +50,8 @@ export { EuiDatePickerRange, EuiSuperDatePicker, EuiSuperUpdateButton, + prettyDuration, + commonDurationRanges, } from './date_picker'; export { EuiDelayHide } from './delay_hide'; From f6ff44145a67f31c964f962307e89894b667717c Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 17 Jul 2019 09:50:37 -0600 Subject: [PATCH 02/10] prettyDuration docs --- src-docs/src/routes.js | 3 + .../views/pretty_duration/pretty_duration.js | 74 +++++++++++++++++++ .../pretty_duration_example.js | 65 ++++++++++++++++ 3 files changed, 142 insertions(+) create mode 100644 src-docs/src/views/pretty_duration/pretty_duration.js create mode 100644 src-docs/src/views/pretty_duration/pretty_duration_example.js diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 1cb118d3e5e..90ec7b00241 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -29,6 +29,8 @@ import { ColorPaletteExample } from './views/color_palette/color_palette_example import { IsColorDarkExample } from './views/is_color_dark/is_color_dark_example'; +import { PrettyDurationExample } from './views/pretty_duration/pretty_duration_example'; + import { UtilityClassesExample } from './views/utility_classes/utility_classes_example'; // Component examples @@ -376,6 +378,7 @@ const navigation = [ InnerTextExample, I18nExample, IsColorDarkExample, + PrettyDurationExample, MutationObserverExample, OutsideClickDetectorExample, PortalExample, diff --git a/src-docs/src/views/pretty_duration/pretty_duration.js b/src-docs/src/views/pretty_duration/pretty_duration.js new file mode 100644 index 00000000000..57f04ef8889 --- /dev/null +++ b/src-docs/src/views/pretty_duration/pretty_duration.js @@ -0,0 +1,74 @@ +import React, { Fragment } from 'react'; + +import { + EuiSpacer, + EuiCodeBlock, + prettyDuration, +} from '../../../../src/components'; + +const examples = [ + { + start: '2018-01-17T18:57:57.149Z', + end: '2018-01-17T20:00:00.000Z', + quickRanges: [], + dateFormat: 'MMMM Do YYYY, HH:mm:ss.SSS', + }, + { + start: '2018-01-17T18:57:57.149Z', + end: '2018-01-17T20:00:00.000Z', + quickRanges: [], + dateFormat: 'MMMM Do YYYY @ HH:mm:ss.SSS', + }, + { + start: '2018-01-17T18:57:57.149Z', + end: 'now-2h', + quickRanges: [], + dateFormat: 'MMMM Do YYYY @ HH:mm:ss.SSS', + }, + { + start: 'now-17m', + end: 'now', + quickRanges: [], + dateFormat: 'MMMM Do YYYY @ HH:mm:ss.SSS', + }, + { + start: 'now-17m', + end: 'now-1m', + quickRanges: [], + dateFormat: 'MMMM Do YYYY @ HH:mm:ss.SSS', + }, + { + start: 'now-15m', + end: 'now', + quickRanges: [ + { + start: 'now-15m', + end: 'now', + label: 'quick range 15 minutes custom display', + }, + ], + dateFormat: 'MMMM Do YYYY, HH:mm:ss.SSS', + }, +]; + +export default function prettyDurationExample() { + return ( + + {examples.map(({ start, end, quickRanges, dateFormat }, idx) => ( +
+ + prettyDuration('{start}', '{end}',{' '} + {JSON.stringify(quickRanges)}, ' + {dateFormat}') + + + + + {prettyDuration(start, end, quickRanges, dateFormat)} + + +
+ ))} + + ); +} diff --git a/src-docs/src/views/pretty_duration/pretty_duration_example.js b/src-docs/src/views/pretty_duration/pretty_duration_example.js new file mode 100644 index 00000000000..12d308ee620 --- /dev/null +++ b/src-docs/src/views/pretty_duration/pretty_duration_example.js @@ -0,0 +1,65 @@ +import React, { Fragment } from 'react'; + +import { renderToHtml } from '../../services'; + +import { GuideSectionTypes } from '../../components'; + +import { + EuiAccordion, + EuiCode, + EuiCodeBlock, + commonDurationRanges, +} from '../../../../src/components'; + +import PrettyDuration from './pretty_duration'; +const prettyDurationSource = require('!!raw-loader!./pretty_duration'); +const prettyDurationHtml = renderToHtml(PrettyDuration); + +export const PrettyDurationExample = { + title: 'Pretty Duration', + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: prettyDurationSource, + }, + { + type: GuideSectionTypes.HTML, + code: prettyDurationHtml, + }, + ], + text: ( + +

+ Use prettyDuration to convert a start and end + date string to a human-friendly format. +

+ +

+ Start and end values for the duration are passed as the first and + second arguments, respectively. These can be timestamps ( + 2018-01-17T18:57:57.149Z) or relative times ( + now-15m). +

+ +

+ An array of quick range values is passed as the third argument. + These are used to pretty format custom ranges. EUI exports + commonDurationRanges which can be passed here. + + + {JSON.stringify(commonDurationRanges, null, 2)} + + +

+ +

+ The output date/time format is specified by the fourth argument. +

+ + ), + demo: , + }, + ], +}; From 88abe91e5697a251df58034440be80a7184a1f3e Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 17 Jul 2019 09:54:36 -0600 Subject: [PATCH 03/10] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 217a8248753..e325528916b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Centered the square of the `popout` glyph in the artboard ([#2120](https://github.com/elastic/eui/pull/2120)) - Added `useInnerText` and `EuiInnerText` component utilities for retrieving text content of elements ([#2100](https://github.com/elastic/eui/pull/2100)) +- Exported `prettyDuration` and `commonDurationRanges` for pretty printing date ranges outside `EuiSuperDatePicker` ([#2100](https://github.com/elastic/eui/pull/2100)) **Bug fixes** From 460a02bd0e8fa5241ff29e4a36998155e5e7f41d Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 17 Jul 2019 11:24:27 -0600 Subject: [PATCH 04/10] changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 679f00ab075..a0241c071a5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ - Added `useInnerText` and `EuiInnerText` component utilities for retrieving text content of elements ([#2100](https://github.com/elastic/eui/pull/2100)) - Converted `EuiRangeHightlight`, `EuiRangeLabel`, `EuiRangeLevels`, `EuiRangeSlider`, `EuiRangeThumb`, `EuiRangeTicks`, `EuiRangeTrack`, and `EuiRangeWrapper` to TypeScript ([#2124](https://github.com/elastic/eui/pull/2124)) - Converted `EuiAccordion` to TypeScript ([#2128](https://github.com/elastic/eui/pull/2128)) -- Exported `prettyDuration` and `commonDurationRanges` for pretty printing date ranges outside `EuiSuperDatePicker` ([#2100](https://github.com/elastic/eui/pull/2100)) +- Exported `prettyDuration` and `commonDurationRanges` for pretty printing date ranges outside `EuiSuperDatePicker` ([#2132](https://github.com/elastic/eui/pull/2132)) **Bug fixes** From 899e953281e96ada64d20f9825cfe6b62ef609ac Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 17 Jul 2019 11:26:09 -0600 Subject: [PATCH 05/10] Update src-docs/src/views/pretty_duration/pretty_duration.js Co-Authored-By: dave.snider@gmail.com --- src-docs/src/views/pretty_duration/pretty_duration.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/pretty_duration/pretty_duration.js b/src-docs/src/views/pretty_duration/pretty_duration.js index 57f04ef8889..77925c55c31 100644 --- a/src-docs/src/views/pretty_duration/pretty_duration.js +++ b/src-docs/src/views/pretty_duration/pretty_duration.js @@ -56,7 +56,7 @@ export default function prettyDurationExample() { {examples.map(({ start, end, quickRanges, dateFormat }, idx) => (
- + prettyDuration('{start}', '{end}',{' '} {JSON.stringify(quickRanges)}, ' {dateFormat}') From 5bfe17156f1ae28a4288c3bb2b48341e373810b2 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 17 Jul 2019 13:00:30 -0600 Subject: [PATCH 06/10] Update src-docs/src/views/pretty_duration/pretty_duration_example.js Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/pretty_duration/pretty_duration_example.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/pretty_duration/pretty_duration_example.js b/src-docs/src/views/pretty_duration/pretty_duration_example.js index 12d308ee620..eb06da74192 100644 --- a/src-docs/src/views/pretty_duration/pretty_duration_example.js +++ b/src-docs/src/views/pretty_duration/pretty_duration_example.js @@ -47,7 +47,8 @@ export const PrettyDurationExample = { An array of quick range values is passed as the third argument. These are used to pretty format custom ranges. EUI exports commonDurationRanges which can be passed here. - + + {JSON.stringify(commonDurationRanges, null, 2)} From f0fcd065b7820ce11dab8be46275289c1c52a768 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 17 Jul 2019 13:00:40 -0600 Subject: [PATCH 07/10] Update src-docs/src/views/pretty_duration/pretty_duration.js Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/pretty_duration/pretty_duration.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/pretty_duration/pretty_duration.js b/src-docs/src/views/pretty_duration/pretty_duration.js index 77925c55c31..fc06a41e672 100644 --- a/src-docs/src/views/pretty_duration/pretty_duration.js +++ b/src-docs/src/views/pretty_duration/pretty_duration.js @@ -62,7 +62,7 @@ export default function prettyDurationExample() { {dateFormat}') - + {prettyDuration(start, end, quickRanges, dateFormat)} From 10faccc0a20386e3dffd6c84088c23438cac6560 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 17 Jul 2019 13:00:48 -0600 Subject: [PATCH 08/10] Update src-docs/src/views/pretty_duration/pretty_duration.js Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/pretty_duration/pretty_duration.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/pretty_duration/pretty_duration.js b/src-docs/src/views/pretty_duration/pretty_duration.js index fc06a41e672..ce2a612b106 100644 --- a/src-docs/src/views/pretty_duration/pretty_duration.js +++ b/src-docs/src/views/pretty_duration/pretty_duration.js @@ -64,7 +64,7 @@ export default function prettyDurationExample() { - {prettyDuration(start, end, quickRanges, dateFormat)} +

{prettyDuration(start, end, quickRanges, dateFormat)}
From 389449cdd948c76c0e417d02191ebb457b242177 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 17 Jul 2019 13:10:53 -0600 Subject: [PATCH 09/10] docs tweaks --- .../views/pretty_duration/pretty_duration.js | 1 + .../pretty_duration/pretty_duration_example.js | 17 +++++++++++------ 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/pretty_duration/pretty_duration.js b/src-docs/src/views/pretty_duration/pretty_duration.js index ce2a612b106..2097c0d9ab9 100644 --- a/src-docs/src/views/pretty_duration/pretty_duration.js +++ b/src-docs/src/views/pretty_duration/pretty_duration.js @@ -3,6 +3,7 @@ import React, { Fragment } from 'react'; import { EuiSpacer, EuiCodeBlock, + EuiText, prettyDuration, } from '../../../../src/components'; diff --git a/src-docs/src/views/pretty_duration/pretty_duration_example.js b/src-docs/src/views/pretty_duration/pretty_duration_example.js index eb06da74192..e28292a2f12 100644 --- a/src-docs/src/views/pretty_duration/pretty_duration_example.js +++ b/src-docs/src/views/pretty_duration/pretty_duration_example.js @@ -8,6 +8,7 @@ import { EuiAccordion, EuiCode, EuiCodeBlock, + EuiSpacer, commonDurationRanges, } from '../../../../src/components'; @@ -47,14 +48,18 @@ export const PrettyDurationExample = { An array of quick range values is passed as the third argument. These are used to pretty format custom ranges. EUI exports commonDurationRanges which can be passed here. - - - - {JSON.stringify(commonDurationRanges, null, 2)} - -

+ + + {JSON.stringify(commonDurationRanges, null, 2)} + + + + +

The output date/time format is specified by the fourth argument.

From 7213fc1f332f50114f11395b099abc5652b377ab Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 17 Jul 2019 21:55:59 -0600 Subject: [PATCH 10/10] lint fix --- src-docs/src/views/pretty_duration/pretty_duration.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/pretty_duration/pretty_duration.js b/src-docs/src/views/pretty_duration/pretty_duration.js index 2097c0d9ab9..791a3bfaf2f 100644 --- a/src-docs/src/views/pretty_duration/pretty_duration.js +++ b/src-docs/src/views/pretty_duration/pretty_duration.js @@ -65,7 +65,9 @@ export default function prettyDurationExample() { -

{prettyDuration(start, end, quickRanges, dateFormat)}

 + +

{prettyDuration(start, end, quickRanges, dateFormat)}

+