diff --git a/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx b/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx index d9c70c9b0b7..b144209f226 100644 --- a/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx +++ b/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/css'; +import { isArray } from 'lodash'; import { FieldMatcherID, @@ -11,10 +12,11 @@ import { } from '@grafana/data'; import { t } from '@grafana/i18n'; import { Checkbox, fieldMatchersUI, InlineField, InlineFieldRow, Select, useStyles2 } from '@grafana/ui'; -import { FieldNamePicker } from '@grafana/ui/internal'; +//import { FieldNamePicker } from '@grafana/ui/internal'; import { getTransformationContent } from '../docs/getTransformationContent'; import { FieldToConfigMappingEditor } from '../fieldToConfigMapping/FieldToConfigMappingEditor'; +import { FieldConfigHandlerKey, FieldToConfigMapHandlerProcessor } from '../fieldToConfigMapping/fieldToConfigMapping'; import darkImage from '../images/dark/configFromData.svg'; import lightImage from '../images/light/configFromData.svg'; @@ -22,12 +24,12 @@ import { getConfigFromDataTransformer, ConfigFromQueryTransformOptions } from '. export interface Props extends TransformerUIProps {} -const fieldNamePickerSettings = { +/*const fieldNamePickerSettings = { editor: FieldNamePicker, id: '', name: '', settings: { width: 24, isClearable: false }, -}; +}; */ export function ConfigFromQueryTransformerEditor({ input, onChange, options }: Props) { const styles = useStyles2(getStyles); @@ -49,13 +51,6 @@ export function ConfigFromQueryTransformerEditor({ input, onChange, options }: P }); }; - const onMappingChange = (value: SelectableValue) => { - onChange({ - ...options, - isMapping: value.value || false, - }); - }; - const onMatcherChange = (value: SelectableValue) => { onChange({ ...options, applyTo: { id: value.value! } }); }; @@ -69,6 +64,11 @@ export function ConfigFromQueryTransformerEditor({ input, onChange, options }: P .filter((o) => !o.excludeFromPicker) .map>((i) => ({ label: i.name, value: i.id, description: i.description })); + const mapFn: FieldToConfigMapHandlerProcessor = (value, config, context) => { + console.log(value, config, context); + return config.mappings; + }; + return ( <> @@ -103,18 +103,36 @@ export function ConfigFromQueryTransformerEditor({ input, onChange, options }: P onChange({ ...options, isMapping: evt.currentTarget.checked })} value={options.isMapping} /> - {configFrame && !options.isMapping && ( + {configFrame && ( onChange({ ...options, mappings })} withReducers={!options.isMapping} + configOverride={ + options.isMapping + ? [ + { + key: 'mappings.text', + name: 'Value mappings / Display text', + targetProperty: 'mappings', + processor: mapFn, + }, + { + key: 'mappings.value', + name: 'Value mappings / Value', + targetProperty: 'mappings', + processor: mapFn, + }, + ] + : undefined + } /> )} diff --git a/public/app/features/transformers/fieldToConfigMapping/FieldToConfigMappingEditor.tsx b/public/app/features/transformers/fieldToConfigMapping/FieldToConfigMappingEditor.tsx index e2702172dab..05b343d161c 100644 --- a/public/app/features/transformers/fieldToConfigMapping/FieldToConfigMappingEditor.tsx +++ b/public/app/features/transformers/fieldToConfigMapping/FieldToConfigMappingEditor.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/consistent-type-assertions */ import { css } from '@emotion/css'; import { capitalize } from 'lodash'; @@ -25,14 +26,22 @@ export interface Props { onChange: (mappings: FieldToConfigMapping[]) => void; withReducers?: boolean; withNameAndValue?: boolean; + configOverride?: FieldToConfigMapHandler[]; } -export function FieldToConfigMappingEditor({ frame, mappings, onChange, withReducers, withNameAndValue }: Props) { +export function FieldToConfigMappingEditor({ + frame, + mappings, + onChange, + withReducers, + withNameAndValue, + configOverride, +}: Props) { const styles = useStyles2(getStyles); const rows = getViewModelRows(frame, mappings, withNameAndValue); - const configProps = configMapHandlers.map((def) => configHandlerToSelectOption(def, false)) as Array< - SelectableValue - >; + const configProps = (configOverride ?? configMapHandlers).map((def) => + configHandlerToSelectOption(def, false) + ) as Array>; const hasAdditionalSettings = mappings.reduce( (prev, mapping) => prev || createsArgumentsEditor(mapping.handlerKey), false diff --git a/public/app/features/transformers/fieldToConfigMapping/fieldToConfigMapping.ts b/public/app/features/transformers/fieldToConfigMapping/fieldToConfigMapping.ts index cf32c341bd9..8aae91b137c 100644 --- a/public/app/features/transformers/fieldToConfigMapping/fieldToConfigMapping.ts +++ b/public/app/features/transformers/fieldToConfigMapping/fieldToConfigMapping.ts @@ -88,7 +88,7 @@ interface FieldToConfigContext { mappingTexts?: string[]; } -type FieldToConfigMapHandlerProcessor = ( +export type FieldToConfigMapHandlerProcessor = ( value: any, config: FieldConfig, context: FieldToConfigContext,