Skip to content

Commit 0dc89cb

Browse files
cjcenizalcjcenizal
authored
Add support for runtime field types to mappings editor. (elastic#77420)
* Add support for runtime field types to mappings editor. * Add tests for getTypeLabelFromField util. * Refine callout appearance in term vector and alias parameters.
1 parent a88c272 commit 0dc89cb

27 files changed

+552
-74
lines changed

‎x-pack/plugins/index_management/public/application/app_context.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import React, { createContext, useContext } from 'react';
88
import { ScopedHistory } from 'kibana/public';
99
import { ManagementAppMountParams } from 'src/plugins/management/public';
1010
import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
11-
import { CoreStart } from '../../../../../src/core/public';
11+
import { CoreSetup, CoreStart } from '../../../../../src/core/public';
1212

1313
import { IngestManagerSetup } from '../../../ingest_manager/public';
1414
import { IndexMgmtMetricsType } from '../types';
@@ -34,6 +34,7 @@ export interface AppDependencies {
3434
};
3535
history: ScopedHistory;
3636
setBreadcrumbs: ManagementAppMountParams['setBreadcrumbs'];
37+
uiSettings: CoreSetup['uiSettings'];
3738
}
3839

3940
export const AppContextProvider = ({

‎x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,10 @@ export * from './meta_parameter';
7373

7474
export * from './ignore_above_parameter';
7575

76+
export { RuntimeTypeParameter } from './runtime_type_parameter';
77+
78+
export { PainlessScriptParameter } from './painless_script_parameter';
79+
7680
export const PARAMETER_SERIALIZERS = [relationsSerializer, dynamicSerializer];
7781

7882
export const PARAMETER_DESERIALIZERS = [relationsDeserializer, dynamicDeserializer];

‎x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/painless_script_parameter.tsx

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import React from 'react';
8+
import { i18n } from '@kbn/i18n';
9+
import { EuiFormRow, EuiDescribedFormGroup } from '@elastic/eui';
10+
11+
import { CodeEditor, UseField } from '../../../shared_imports';
12+
import { getFieldConfig } from '../../../lib';
13+
import { EditFieldFormRow } from '../fields/edit_field';
14+
15+
interface Props {
16+
stack?: boolean;
17+
}
18+
19+
export const PainlessScriptParameter = ({ stack }: Props) => {
20+
return (
21+
<UseField path="script.source" config={getFieldConfig('script')}>
22+
{(scriptField) => {
23+
const error = scriptField.getErrorsMessages();
24+
const isInvalid = error ? Boolean(error.length) : false;
25+
26+
const field = (
27+
<EuiFormRow label={scriptField.label} error={error} isInvalid={isInvalid} fullWidth>
28+
<CodeEditor
29+
languageId="painless"
30+
// 99% width allows the editor to resize horizontally. 100% prevents it from resizing.
31+
width="99%"
32+
height="400px"
33+
value={scriptField.value as string}
34+
onChange={scriptField.setValue}
35+
options={{
36+
fontSize: 12,
37+
minimap: {
38+
enabled: false,
39+
},
40+
scrollBeyondLastLine: false,
41+
wordWrap: 'on',
42+
wrappingIndent: 'indent',
43+
automaticLayout: true,
44+
}}
45+
/>
46+
</EuiFormRow>
47+
);
48+
49+
const fieldTitle = i18n.translate('xpack.idxMgmt.mappingsEditor.painlessScript.title', {
50+
defaultMessage: 'Emitted value',
51+
});
52+
53+
const fieldDescription = i18n.translate(
54+
'xpack.idxMgmt.mappingsEditor.painlessScript.description',
55+
{
56+
defaultMessage: 'Use emit() to define the value of this runtime field.',
57+
}
58+
);
59+
60+
if (stack) {
61+
return (
62+
<EditFieldFormRow title={fieldTitle} description={fieldDescription} withToggle={false}>
63+
{field}
64+
</EditFieldFormRow>
65+
);
66+
}
67+
68+
return (
69+
<EuiDescribedFormGroup
70+
title={<h3>{fieldTitle}</h3>}
71+
description={fieldDescription}
72+
fullWidth={true}
73+
>
74+
{field}
75+
</EuiDescribedFormGroup>
76+
);
77+
}}
78+
</UseField>
79+
);
80+
};

‎x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/path_parameter.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -93,17 +93,17 @@ export const PathParameter = ({ field, allFields }: Props) => {
9393
<>
9494
{!Boolean(suggestedFields.length) && (
9595
<>
96-
<EuiCallOut color="warning">
97-
<p>
98-
{i18n.translate(
99-
'xpack.idxMgmt.mappingsEditor.aliasType.noFieldsAddedWarningMessage',
100-
{
101-
defaultMessage:
102-
'You need to add at least one field before creating an alias.',
103-
}
104-
)}
105-
</p>
106-
</EuiCallOut>
96+
<EuiCallOut
97+
size="s"
98+
color="warning"
99+
title={i18n.translate(
100+
'xpack.idxMgmt.mappingsEditor.aliasType.noFieldsAddedWarningMessage',
101+
{
102+
defaultMessage:
103+
'You need to add at least one field before creating an alias.',
104+
}
105+
)}
106+
/>
107107
<EuiSpacer />
108108
</>
109109
)}

‎x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/runtime_type_parameter.tsx

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import React from 'react';
8+
import { i18n } from '@kbn/i18n';
9+
import {
10+
EuiFormRow,
11+
EuiComboBox,
12+
EuiComboBoxOptionOption,
13+
EuiDescribedFormGroup,
14+
EuiSpacer,
15+
} from '@elastic/eui';
16+
17+
import { UseField } from '../../../shared_imports';
18+
import { DataType } from '../../../types';
19+
import { getFieldConfig } from '../../../lib';
20+
import { RUNTIME_FIELD_OPTIONS, TYPE_DEFINITION } from '../../../constants';
21+
import { EditFieldFormRow, FieldDescriptionSection } from '../fields/edit_field';
22+
23+
interface Props {
24+
stack?: boolean;
25+
}
26+
27+
export const RuntimeTypeParameter = ({ stack }: Props) => {
28+
return (
29+
<UseField path="runtime_type" config={getFieldConfig('runtime_type')}>
30+
{(runtimeTypeField) => {
31+
const { label, value, setValue } = runtimeTypeField;
32+
const typeDefinition =
33+
TYPE_DEFINITION[(value as EuiComboBoxOptionOption[])[0]!.value as DataType];
34+
35+
const field = (
36+
<>
37+
<EuiFormRow label={label} fullWidth>
38+
<EuiComboBox
39+
placeholder={i18n.translate(
40+
'xpack.idxMgmt.mappingsEditor.runtimeType.placeholderLabel',
41+
{
42+
defaultMessage: 'Select a type',
43+
}
44+
)}
45+
singleSelection={{ asPlainText: true }}
46+
options={RUNTIME_FIELD_OPTIONS}
47+
selectedOptions={value as EuiComboBoxOptionOption[]}
48+
onChange={setValue}
49+
isClearable={false}
50+
fullWidth
51+
/>
52+
</EuiFormRow>
53+
54+
<EuiSpacer size="m" />
55+
56+
{/* Field description */}
57+
{typeDefinition && (
58+
<FieldDescriptionSection isMultiField={false}>
59+
{typeDefinition.description?.() as JSX.Element}
60+
</FieldDescriptionSection>
61+
)}
62+
</>
63+
);
64+
65+
const fieldTitle = i18n.translate('xpack.idxMgmt.mappingsEditor.runtimeType.title', {
66+
defaultMessage: 'Emitted type',
67+
});
68+
69+
const fieldDescription = i18n.translate(
70+
'xpack.idxMgmt.mappingsEditor.runtimeType.description',
71+
{
72+
defaultMessage: 'Select the type of value emitted by the runtime field.',
73+
}
74+
);
75+
76+
if (stack) {
77+
return (
78+
<EditFieldFormRow title={fieldTitle} description={fieldDescription} withToggle={false}>
79+
{field}
80+
</EditFieldFormRow>
81+
);
82+
}
83+
84+
return (
85+
<EuiDescribedFormGroup
86+
title={<h3>{fieldTitle}</h3>}
87+
description={fieldDescription}
88+
fullWidth={true}
89+
>
90+
{field}
91+
</EuiDescribedFormGroup>
92+
);
93+
}}
94+
</UseField>
95+
);
96+
};

‎x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/term_vector_parameter.tsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -56,14 +56,17 @@ export const TermVectorParameter = ({ field, defaultToggleValue }: Props) => {
5656
{formData.term_vector === 'with_positions_offsets' && (
5757
<>
5858
<EuiSpacer size="s" />
59-
<EuiCallOut color="warning">
60-
<p>
61-
{i18n.translate('xpack.idxMgmt.mappingsEditor.termVectorFieldWarningMessage', {
59+
<EuiCallOut
60+
size="s"
61+
color="warning"
62+
title={i18n.translate(
63+
'xpack.idxMgmt.mappingsEditor.termVectorFieldWarningMessage',
64+
{
6265
defaultMessage:
6366
'Setting "With positions and offsets" will double the size of a field’s index.',
64-
})}
65-
</p>
66-
</EuiCallOut>
67+
}
68+
)}
69+
/>
6770
</>
6871
)}
6972
</>

‎x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx

+17-6
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,17 @@ import {
1414
EuiFlexGroup,
1515
EuiFlexItem,
1616
EuiOutsideClickDetector,
17+
EuiSpacer,
1718
} from '@elastic/eui';
1819

1920
import { useForm, Form, FormDataProvider } from '../../../../shared_imports';
20-
import { EUI_SIZE } from '../../../../constants';
21+
import { EUI_SIZE, TYPE_DEFINITION } from '../../../../constants';
2122
import { useDispatch } from '../../../../mappings_state_context';
2223
import { fieldSerializer } from '../../../../lib';
23-
import { Field, NormalizedFields } from '../../../../types';
24+
import { Field, NormalizedFields, MainType } from '../../../../types';
2425
import { NameParameter, TypeParameter, SubTypeParameter } from '../../field_parameters';
25-
import { getParametersFormForType } from './required_parameters_forms';
26+
import { FieldBetaBadge } from '../field_beta_badge';
27+
import { getRequiredParametersFormForType } from './required_parameters_forms';
2628

2729
const formWrapper = (props: any) => <form {...props} />;
2830

@@ -195,18 +197,27 @@ export const CreateField = React.memo(function CreateFieldComponent({
195197

196198
<FormDataProvider pathsToWatch={['type', 'subType']}>
197199
{({ type, subType }) => {
198-
const ParametersForm = getParametersFormForType(
200+
const RequiredParametersForm = getRequiredParametersFormForType(
199201
type?.[0].value,
200202
subType?.[0].value
201203
);
202204

203-
if (!ParametersForm) {
205+
if (!RequiredParametersForm) {
204206
return null;
205207
}
206208

209+
const typeDefinition = TYPE_DEFINITION[type?.[0].value as MainType];
210+
207211
return (
208212
<div className="mappingsEditor__createFieldRequiredProps">
209-
<ParametersForm key={subType ?? type} allFields={allFields} />
213+
{typeDefinition.isBeta ? (
214+
<>
215+
<FieldBetaBadge />
216+
<EuiSpacer size="m" />
217+
</>
218+
) : null}
219+
220+
<RequiredParametersForm key={subType ?? type} allFields={allFields} />
210221
</div>
211222
);
212223
}}

‎x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/index.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { AliasTypeRequiredParameters } from './alias_type';
1111
import { TokenCountTypeRequiredParameters } from './token_count_type';
1212
import { ScaledFloatTypeRequiredParameters } from './scaled_float_type';
1313
import { DenseVectorRequiredParameters } from './dense_vector_type';
14+
import { RuntimeTypeRequiredParameters } from './runtime_type';
1415

1516
export interface ComponentProps {
1617
allFields: NormalizedFields['byId'];
@@ -21,9 +22,10 @@ const typeToParametersFormMap: { [key in DataType]?: ComponentType<any> } = {
2122
token_count: TokenCountTypeRequiredParameters,
2223
scaled_float: ScaledFloatTypeRequiredParameters,
2324
dense_vector: DenseVectorRequiredParameters,
25+
runtime: RuntimeTypeRequiredParameters,
2426
};
2527

26-
export const getParametersFormForType = (
28+
export const getRequiredParametersFormForType = (
2729
type: MainType,
2830
subType?: SubType
2931
): ComponentType<ComponentProps> | undefined =>

‎x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/runtime_type.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import React from 'react';
8+
9+
import { RuntimeTypeParameter, PainlessScriptParameter } from '../../../field_parameters';
10+
11+
export const RuntimeTypeRequiredParameters = () => {
12+
return (
13+
<>
14+
<RuntimeTypeParameter />
15+
<PainlessScriptParameter />
16+
</>
17+
);
18+
};

0 commit comments

Comments
 (0)