From 34c4e9dad0719546fe5f89b700842e4337da1deb Mon Sep 17 00:00:00 2001 From: Bart Van Remortele Date: Thu, 1 Aug 2019 16:45:44 +0200 Subject: [PATCH 1/4] Add custom formatting for Date Nanos format --- .../editors/date_nanos/date_nanos.js | 28 +++++++++++++++++++ .../editors/date_nanos/index.js | 20 +++++++++++++ .../field_format_editor/register.js | 2 ++ 3 files changed, 50 insertions(+) create mode 100644 src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js create mode 100644 src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/index.js diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js new file mode 100644 index 0000000000000..8a9e1f7a6e092 --- /dev/null +++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js @@ -0,0 +1,28 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { DateFormatEditor } from '../date'; + +export class DateNanosFormatEditor extends DateFormatEditor { + static formatId = 'date_nanos'; + + constructor(props) { + super(props); + } +} diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/index.js b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/index.js new file mode 100644 index 0000000000000..b82541a21c8ba --- /dev/null +++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/index.js @@ -0,0 +1,20 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export { DateNanosFormatEditor } from './date_nanos'; diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/register.js b/src/legacy/ui/public/field_editor/components/field_format_editor/register.js index 78dea8f952dbc..3062a3ba8ac14 100644 --- a/src/legacy/ui/public/field_editor/components/field_format_editor/register.js +++ b/src/legacy/ui/public/field_editor/components/field_format_editor/register.js @@ -21,6 +21,7 @@ import { RegistryFieldFormatEditorsProvider } from 'ui/registry/field_format_edi import { BytesFormatEditor } from './editors/bytes'; import { ColorFormatEditor } from './editors/color'; import { DateFormatEditor } from './editors/date'; +import { DateNanosFormatEditor } from './editors/date_nanos'; import { DurationFormatEditor } from './editors/duration'; import { NumberFormatEditor } from './editors/number'; import { PercentFormatEditor } from './editors/percent'; @@ -32,6 +33,7 @@ import { UrlFormatEditor } from './editors/url/url'; RegistryFieldFormatEditorsProvider.register(() => BytesFormatEditor); RegistryFieldFormatEditorsProvider.register(() => ColorFormatEditor); RegistryFieldFormatEditorsProvider.register(() => DateFormatEditor); +RegistryFieldFormatEditorsProvider.register(() => DateNanosFormatEditor); RegistryFieldFormatEditorsProvider.register(() => DurationFormatEditor); RegistryFieldFormatEditorsProvider.register(() => NumberFormatEditor); RegistryFieldFormatEditorsProvider.register(() => PercentFormatEditor); From 2ef978b0e9ec396a7f8456bf3e0f0fd736c42b8e Mon Sep 17 00:00:00 2001 From: Bart Van Remortele Date: Tue, 6 Aug 2019 16:46:52 +0200 Subject: [PATCH 2/4] remove extending from DateFormatEditor and duplicate DateFormatEditor code for date nanos --- .../editors/date_nanos/date_nanos.js | 73 ++++++++++++++++++- 1 file changed, 71 insertions(+), 2 deletions(-) diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js index 8a9e1f7a6e092..12baa00c62579 100644 --- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js +++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js @@ -17,12 +17,81 @@ * under the License. */ -import { DateFormatEditor } from '../date'; +import React, { Fragment } from 'react'; +import moment from 'moment'; -export class DateNanosFormatEditor extends DateFormatEditor { +import { + EuiCode, + EuiFieldText, + EuiFormRow, + EuiIcon, + EuiLink, +} from '@elastic/eui'; + +import { + DefaultFormatEditor +} from '../default'; + +import { + FormatEditorSamples +} from '../../samples'; + +import { FormattedMessage } from '@kbn/i18n/react'; + +export class DateNanosFormatEditor extends DefaultFormatEditor { static formatId = 'date_nanos'; constructor(props) { super(props); + this.state.sampleInputs = [ + Date.now(), + moment().startOf('year').valueOf(), + moment().endOf('year').valueOf() + ]; + } + + render() { + const { format, formatParams } = this.props; + const { error, samples } = this.state; + const defaultPattern = format.getParamDefaults().pattern; + + return ( + + {defaultPattern} + }} + /> + } + isInvalid={!!error} + error={error} + helpText={ + + +   + + + + } + > + { + this.onChange({ pattern: e.target.value }); + }} + isInvalid={!!error} + /> + + + + ); } } From 083f0165ec7e879f0419161f60de4d41286afa31 Mon Sep 17 00:00:00 2001 From: Bart Van Remortele Date: Tue, 6 Aug 2019 17:35:31 +0200 Subject: [PATCH 3/4] add date nanoseconds samples --- .../field_format_editor/editors/date_nanos/date_nanos.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js index 12baa00c62579..62f6e8742326b 100644 --- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js +++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js @@ -18,7 +18,6 @@ */ import React, { Fragment } from 'react'; -import moment from 'moment'; import { EuiCode, @@ -44,9 +43,9 @@ export class DateNanosFormatEditor extends DefaultFormatEditor { constructor(props) { super(props); this.state.sampleInputs = [ - Date.now(), - moment().startOf('year').valueOf(), - moment().endOf('year').valueOf() + '2015-01-01T12:10:30.123456789Z', + '2019-05-08T06:55:21.567891234Z', + '2019-08-06T17:22:30.987654321Z' ]; } From df9094bd44e5a7549b93321cefceafb1ff0afb92 Mon Sep 17 00:00:00 2001 From: Bart Van Remortele Date: Tue, 6 Aug 2019 17:36:09 +0200 Subject: [PATCH 4/4] add jest test for DateNanosFormatEditor --- .../__snapshots__/date_nanos.test.js.snap | 75 +++++++++++++++++++ .../editors/date_nanos/date_nanos.test.js | 54 +++++++++++++ 2 files changed, 129 insertions(+) create mode 100644 src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.js.snap create mode 100644 src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.test.js diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.js.snap new file mode 100644 index 0000000000000..fe2f35f502d75 --- /dev/null +++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.js.snap @@ -0,0 +1,75 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DateFormatEditor should render normally 1`] = ` + + + + +   + + + + } + isInvalid={false} + label={ + + MMM D, YYYY @ HH:mm:ss.SSSSSSSSS + , + } + } + /> + } + labelType="label" + > + + + + +`; diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.test.js b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.test.js new file mode 100644 index 0000000000000..a0ffecef3c34c --- /dev/null +++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.test.js @@ -0,0 +1,54 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { shallow } from 'enzyme'; + +import { DateNanosFormatEditor } from './date_nanos'; + +const fieldType = 'date_nanos'; +const format = { + getConverterFor: jest.fn().mockImplementation(() => (input) => `converted date for ${input}`), + getParamDefaults: jest.fn().mockImplementation(() => { + return { pattern: 'MMM D, YYYY @ HH:mm:ss.SSSSSSSSS' }; + }), +}; +const formatParams = {}; +const onChange = jest.fn(); +const onError = jest.fn(); + +describe('DateFormatEditor', () => { + it('should have a formatId', () => { + expect(DateNanosFormatEditor.formatId).toEqual('date_nanos'); + }); + + it('should render normally', async () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); +});