/usr/share/grafana/public/app/features/transformers/extractFields
import { ChangeEvent } from 'react'; import { DataTransformerID, TransformerRegistryItem, TransformerUIProps, FieldNamePickerConfigSettings, SelectableValue, StandardEditorsRegistryItem, TransformerCategory, } from '@grafana/data'; import { t } from '@grafana/i18n'; import { InlineField, InlineFieldRow, Select, InlineSwitch, Input, Combobox, ComboboxOption } from '@grafana/ui'; import { FieldNamePicker } from '@grafana/ui/internal'; import { getTransformationContent } from '../docs/getTransformationContent'; import darkImage from '../images/dark/extractFields.svg'; import lightImage from '../images/light/extractFields.svg'; import { JSONPathEditor } from './components/JSONPathEditor'; import { extractFieldsTransformer } from './extractFields'; import { fieldExtractors } from './fieldExtractors'; import { ExtractFieldsOptions, FieldExtractorID, JSONPath } from './types'; export const extractFieldsTransformerEditor = ({ input, options = { delimiter: ',' }, onChange, }: TransformerUIProps<ExtractFieldsOptions>) => { const fieldNamePickerSettings: StandardEditorsRegistryItem<string, FieldNamePickerConfigSettings> = { settings: { width: 30, placeholderText: t( 'transformers.extract-fields-transformer-editor.field-name-picker-settings.placeholderText.select-field', 'Select field' ), }, name: '', id: '', editor: () => null, }; const onPickSourceField = (source?: string) => { onChange({ ...options, source, }); }; const onFormatChange = (format?: SelectableValue<FieldExtractorID>) => { onChange({ ...options, format: format?.value, }); }; const onJSONPathsChange = (jsonPaths: JSONPath[]) => { onChange({ ...options, jsonPaths, }); }; const onRegexpChange = (e: ChangeEvent<HTMLInputElement>) => { onChange({ ...options, regExp: e.target.value, }); }; const onDelimiterChange = (val: ComboboxOption) => { onChange({ ...options, delimiter: val.value, }); }; const onToggleReplace = () => { if (options.replace) { options.keepTime = false; } onChange({ ...options, replace: !options.replace, }); }; const onToggleKeepTime = () => { onChange({ ...options, keepTime: !options.keepTime, }); }; const format = fieldExtractors.selectOptions(options.format ? [options.format] : undefined); return ( <div> <InlineFieldRow> <InlineField label={t('transformers.extract-fields-transformer-editor.label-source', 'Source')} labelWidth={16}> <FieldNamePicker context={{ data: input }} value={options.source ?? ''} onChange={onPickSourceField} item={fieldNamePickerSettings} /> </InlineField> </InlineFieldRow> <InlineFieldRow> <InlineField label={t('transformers.extract-fields-transformer-editor.label-format', 'Format')} labelWidth={16}> <Select value={format.current[0] as any} options={format.options as any} onChange={onFormatChange} width={24} placeholder={t('transformers.extract-fields-transformer-editor.placeholder-auto', 'Auto')} /> </InlineField> </InlineFieldRow> {options.format === FieldExtractorID.RegExp && ( <InlineFieldRow> <InlineField // eslint-disable-next-line @grafana/i18n/no-untranslated-strings label="RegExp" labelWidth={16} interactive={true} tooltip={t('transformers.extract-fields-transformer-editor.tooltip-regexp', 'Example: {{regexExample}}', { regexExample: '/(?<NewField>.*)/', interpolation: { escapeValue: false }, })} > <Input // eslint-disable-next-line @grafana/i18n/no-untranslated-strings placeholder="/(?<NewField>.*)/" value={options.regExp} onChange={onRegexpChange} /> </InlineField> </InlineFieldRow> )} {options.format === FieldExtractorID.JSON && ( <JSONPathEditor options={options.jsonPaths ?? []} onChange={onJSONPathsChange} /> )} {options.format === FieldExtractorID.Delimiter && ( <InlineFieldRow> <InlineField label={t('transformers.extract-fields-transformer-editor.label-delimiter', 'Delimiter')} labelWidth={16} > <Combobox value={options.delimiter} options={[{ value: ',' }, { value: ';' }, { value: '|' }]} onChange={onDelimiterChange} placeholder={t( 'transformers.extract-fields-transformer-editor.placeholder-select-delimiter', 'Select delimiter...' )} width={24} /> </InlineField> </InlineFieldRow> )} <InlineFieldRow> <InlineField label={t('transformers.extract-fields-transformer-editor.label-replace-all-fields', 'Replace all fields')} labelWidth={16} > <InlineSwitch value={options.replace ?? false} onChange={onToggleReplace} /> </InlineField> </InlineFieldRow> {options.replace && ( <InlineFieldRow> <InlineField label={t('transformers.extract-fields-transformer-editor.label-keep-time', 'Keep time')} labelWidth={16} > <InlineSwitch value={options.keepTime ?? false} onChange={onToggleKeepTime} /> </InlineField> </InlineFieldRow> )} </div> ); }; export const getExtractFieldsTransformRegistryItem: () => TransformerRegistryItem<ExtractFieldsOptions> = () => ({ id: DataTransformerID.extractFields, editor: extractFieldsTransformerEditor, transformation: extractFieldsTransformer, name: t('transformers.extract-fields-transformer-editor.name.extract-fields', 'Extract fields'), description: t( 'transformers.extract-fields-transformer-editor.description.parse-fields-from-content', 'Parse fields from content (JSON, labels, etc).' ), categories: new Set([TransformerCategory.Reformat]), help: getTransformationContent(DataTransformerID.extractFields).helperDocs, imageDark: darkImage, imageLight: lightImage, });
.
Edit
..
Edit
ExtractFieldsTransformerEditor.tsx
Edit
components
Edit
extractFields.test.ts
Edit
extractFields.ts
Edit
fieldExtractor.test.ts
Edit
fieldExtractors.ts
Edit
types.ts
Edit