Skip to content

Commit

Permalink
[Field formats] Fix switching away from duration formatter (#93818) (#…
Browse files Browse the repository at this point in the history
…94631)

* simplify field format editor rendering, fixes switching away from duration formatter
  • Loading branch information
mattkime authored Mar 15, 2021
1 parent a7f7705 commit 3ed0a00
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 38 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {
KBN_FIELD_TYPES,
ES_FIELD_TYPES,
DataPublicPluginStart,
FieldFormat,
} from 'src/plugins/data/public';
import { CoreStart } from 'src/core/public';
import { castEsToKbnFieldTypeName } from '../../../../data/public';
Expand Down Expand Up @@ -45,7 +44,6 @@ export interface FormatSelectEditorState {
fieldTypeFormats: FieldTypeFormat[];
fieldFormatId?: string;
fieldFormatParams?: { [key: string]: unknown };
format: FieldFormat;
kbnType: KBN_FIELD_TYPES;
}

Expand Down Expand Up @@ -81,67 +79,48 @@ export class FormatSelectEditor extends PureComponent<
> {
constructor(props: FormatSelectEditorProps) {
super(props);
const { fieldFormats, esTypes, value } = props;
const { fieldFormats, esTypes } = props;
const kbnType = castEsToKbnFieldTypeName(esTypes[0] || 'keyword');

// get current formatter for field, provides default if none exists
const format = value?.id
? fieldFormats.getInstance(value?.id, value?.params)
: fieldFormats.getDefaultInstance(kbnType, esTypes);

this.state = {
fieldTypeFormats: getFieldTypeFormatsList(
kbnType,
fieldFormats.getDefaultType(kbnType, esTypes) as FieldFormatInstanceType,
fieldFormats
),
format,
kbnType,
};
}
onFormatChange = (formatId: string, params?: any) => {
const { fieldTypeFormats } = this.state;
const { fieldFormats, uiSettings } = this.props;

const FieldFormatClass = fieldFormats.getType(
formatId || (fieldTypeFormats[0] as InitialFieldTypeFormat).defaultFieldFormat.id
) as FieldFormatInstanceType;

const newFormat = new FieldFormatClass(params, (key: string) => uiSettings.get(key));

this.setState(
{
fieldFormatId: formatId,
fieldFormatParams: params,
format: newFormat,
},
() => {
this.props.onChange(
formatId
? {
id: formatId,
params: params || {},
}
: undefined
);
}
onFormatChange = (formatId: string, params?: any) =>
this.props.onChange(
formatId
? {
id: formatId,
params: params || {},
}
: undefined
);
};

onFormatParamsChange = (newParams: { fieldType: string; [key: string]: any }) => {
const { fieldFormatId } = this.state;
this.onFormatChange(fieldFormatId as string, newParams);
};

render() {
const { fieldFormatEditors, onError, value } = this.props;
const { fieldFormatEditors, onError, value, fieldFormats, esTypes } = this.props;
const fieldFormatId = value?.id;
const fieldFormatParams = value?.params;
const { kbnType } = this.state;

const { fieldTypeFormats, format } = this.state;
const { fieldTypeFormats } = this.state;

const defaultFormat = (fieldTypeFormats[0] as InitialFieldTypeFormat).defaultFieldFormat.title;

// get current formatter for field, provides default if none exists
const format = value?.id
? fieldFormats.getInstance(value?.id, value?.params)
: fieldFormats.getDefaultInstance(kbnType, esTypes);

const label = defaultFormat ? (
<FormattedMessage
id="indexPatternFieldEditor.defaultFormatHeader"
Expand Down
53 changes: 53 additions & 0 deletions test/functional/apps/management/_field_formatter.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

export default function ({ getService, getPageObjects }) {
const esArchiver = getService('esArchiver');
const kibanaServer = getService('kibanaServer');
const browser = getService('browser');
const PageObjects = getPageObjects(['settings']);
const testSubjects = getService('testSubjects');

describe('field formatter', function () {
this.tags(['skipFirefox']);

before(async function () {
await browser.setWindowSize(1200, 800);
await esArchiver.load('discover');
await kibanaServer.uiSettings.replace({});
await kibanaServer.uiSettings.update({});
});

after(async function afterAll() {
await PageObjects.settings.navigateTo();
await esArchiver.emptyKibanaIndex();
});

describe('set and change field formatter', function describeIndexTests() {
// addresses https://github.com/elastic/kibana/issues/93349
it('can change format more than once', async function () {
await PageObjects.settings.navigateTo();
await PageObjects.settings.clickKibanaIndexPatterns();
await PageObjects.settings.clickIndexPatternLogstash();
await PageObjects.settings.clickAddField();
await PageObjects.settings.setFieldType('Long');
const formatRow = await testSubjects.find('formatRow');
const formatRowToggle = (
await formatRow.findAllByCssSelector('[data-test-subj="toggle"]')
)[0];

await formatRowToggle.click();
await PageObjects.settings.setFieldFormat('duration');
await PageObjects.settings.setFieldFormat('bytes');
await PageObjects.settings.setFieldFormat('duration');
await testSubjects.click('euiFlyoutCloseButton');
await PageObjects.settings.closeIndexPatternFieldEditor();
});
});
});
}
1 change: 1 addition & 0 deletions test/functional/apps/management/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
loadTestFile(require.resolve('./_index_patterns_empty'));
loadTestFile(require.resolve('./_scripted_fields'));
loadTestFile(require.resolve('./_runtime_fields'));
loadTestFile(require.resolve('./_field_formatter'));
});

describe('', function () {
Expand Down

0 comments on commit 3ed0a00

Please sign in to comment.