mirror of https://github.com/grafana/grafana
Correlations: Add transformation editor (#66217)
* There was an attempt * Change disabled state based on transformation type * Add validation to transformation type * Revert "Add validation to transformation type" This reverts commit 2188a3d9a93aec5eeafcdd40510391ba1a53671a. * Add validation to transformation type * Move transformations editor to a separate file * Make name more descriptive * Ensure type dropdown has always the same width * Add tooltips around transformation options * Slight style changes * Remove autofocus on append, integrate read only to transformationeditor, save values that disappear so they come back * Remove yaml changes * Have variable background color work with alternating colors on different themes * Make expression required for regular expressions * Remove unused empty form object * Fix bug about transformation’s values saved in memory * Better validation formatting for expression * Add labels and (for now) non working test, attempt to fix saved transformation delete/add bug * Fix datalink comment * Remove fancy CSS due to background change * Fix deleting saved transformation bug, finish tests * Consolidate transformation types * Double check aria labels * Change aria labels, fix tests * Add a transformation with the create correlation test --------- Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>pull/66760/head
Kristina
3 years ago
committed by
GitHub
parent
15c9ced944
commit
9d69d3173f
@ -0,0 +1,315 @@ |
||||
import { css } from '@emotion/css'; |
||||
import { compact, fill } from 'lodash'; |
||||
import React, { useState } from 'react'; |
||||
import { useFormContext } from 'react-hook-form'; |
||||
|
||||
import { GrafanaTheme2, SupportedTransformationType } from '@grafana/data'; |
||||
import { Stack } from '@grafana/experimental'; |
||||
import { |
||||
Button, |
||||
Field, |
||||
FieldArray, |
||||
Icon, |
||||
IconButton, |
||||
Input, |
||||
InputControl, |
||||
Label, |
||||
Select, |
||||
Tooltip, |
||||
useStyles2, |
||||
} from '@grafana/ui'; |
||||
|
||||
type Props = { readOnly: boolean }; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({ |
||||
heading: css` |
||||
font-size: ${theme.typography.h5.fontSize}; |
||||
font-weight: ${theme.typography.fontWeightRegular}; |
||||
`,
|
||||
// set fixed position from the top instead of centring as the container
|
||||
// may get bigger when the for is invalid
|
||||
removeButton: css` |
||||
margin-top: 25px; |
||||
`,
|
||||
}); |
||||
|
||||
export const TransformationsEditor = (props: Props) => { |
||||
const { control, formState, register, setValue, watch, getValues } = useFormContext(); |
||||
const { readOnly } = props; |
||||
const [keptVals, setKeptVals] = useState<Array<{ expression?: string; mapValue?: string }>>([]); |
||||
|
||||
const styles = useStyles2(getStyles); |
||||
|
||||
const transformOptions = getTransformOptions(); |
||||
return ( |
||||
<> |
||||
<input type="hidden" {...register('id')} /> |
||||
<FieldArray name="config.transformations" control={control}> |
||||
{({ fields, append, remove }) => ( |
||||
<> |
||||
<Stack direction="column" alignItems="flex-start"> |
||||
<div className={styles.heading}>Transformations</div> |
||||
{fields.length === 0 && <div> No transformations defined.</div>} |
||||
{fields.length > 0 && ( |
||||
<div> |
||||
{fields.map((fieldVal, index) => { |
||||
return ( |
||||
<Stack direction="row" key={fieldVal.id} alignItems="top"> |
||||
<Field |
||||
label={ |
||||
<Stack gap={0.5}> |
||||
<Label htmlFor={`config.transformations.${fieldVal.id}-${index}.type`}>Type</Label> |
||||
<Tooltip |
||||
content={ |
||||
<div> |
||||
<p>The type of transformation that will be applied to the source data.</p> |
||||
</div> |
||||
} |
||||
> |
||||
<Icon name="info-circle" size="sm" /> |
||||
</Tooltip> |
||||
</Stack> |
||||
} |
||||
invalid={!!formState.errors?.config?.transformations?.[index]?.type} |
||||
error={formState.errors?.config?.transformations?.[index]?.type?.message} |
||||
validationMessageHorizontalOverflow={true} |
||||
> |
||||
<InputControl |
||||
render={({ field: { onChange, ref, ...field } }) => { |
||||
// input control field is not manipulated with remove, use value from control
|
||||
return ( |
||||
<Select |
||||
{...field} |
||||
value={fieldVal.type} |
||||
onChange={(value) => { |
||||
if (!readOnly) { |
||||
const currentValues = getValues().config.transformations[index]; |
||||
let keptValsCopy = fill(Array(index + 1), {}); |
||||
keptVals.forEach((keptVal, i) => (keptValsCopy[i] = keptVal)); |
||||
keptValsCopy[index] = { |
||||
expression: currentValues.expression, |
||||
mapValue: currentValues.mapValue, |
||||
}; |
||||
|
||||
setKeptVals(keptValsCopy); |
||||
|
||||
const newValueDetails = getSupportedTransTypeDetails(value.value); |
||||
|
||||
if (newValueDetails.showExpression) { |
||||
setValue( |
||||
`config.transformations.${index}.expression`, |
||||
keptVals[index]?.expression || '' |
||||
); |
||||
} else { |
||||
setValue(`config.transformations.${index}.expression`, ''); |
||||
} |
||||
|
||||
if (newValueDetails.showMapValue) { |
||||
setValue( |
||||
`config.transformations.${index}.mapValue`, |
||||
keptVals[index]?.mapValue || '' |
||||
); |
||||
} else { |
||||
setValue(`config.transformations.${index}.mapValue`, ''); |
||||
} |
||||
|
||||
onChange(value.value); |
||||
} |
||||
}} |
||||
options={transformOptions} |
||||
width={25} |
||||
inputId={`config.transformations.${fieldVal.id}-${index}.type`} |
||||
/> |
||||
); |
||||
}} |
||||
control={control} |
||||
name={`config.transformations.${index}.type`} |
||||
rules={{ required: { value: true, message: 'Please select a transformation type' } }} |
||||
/> |
||||
</Field> |
||||
<Field |
||||
label={ |
||||
<Stack gap={0.5}> |
||||
<Label htmlFor={`config.transformations.${fieldVal.id}.field`}>Field</Label> |
||||
<Tooltip |
||||
content={ |
||||
<div> |
||||
<p> |
||||
Optional. The field to transform. If not specified, the transformation will be |
||||
applied to the results field. |
||||
</p> |
||||
</div> |
||||
} |
||||
> |
||||
<Icon name="info-circle" size="sm" /> |
||||
</Tooltip> |
||||
</Stack> |
||||
} |
||||
> |
||||
<Input |
||||
{...register(`config.transformations.${index}.field`)} |
||||
readOnly={readOnly} |
||||
defaultValue={fieldVal.field} |
||||
label="field" |
||||
id={`config.transformations.${fieldVal.id}.field`} |
||||
/> |
||||
</Field> |
||||
<Field |
||||
label={ |
||||
<Stack gap={0.5}> |
||||
<Label htmlFor={`config.transformations.${fieldVal.id}.expression`}> |
||||
Expression |
||||
{getSupportedTransTypeDetails(watch(`config.transformations.${index}.type`)) |
||||
.requireExpression |
||||
? ' *' |
||||
: ''} |
||||
</Label> |
||||
<Tooltip |
||||
content={ |
||||
<div> |
||||
<p> |
||||
Required for regular expression. The expression the transformation will use. |
||||
Logfmt does not use further specifications. |
||||
</p> |
||||
</div> |
||||
} |
||||
> |
||||
<Icon name="info-circle" size="sm" /> |
||||
</Tooltip> |
||||
</Stack> |
||||
} |
||||
invalid={!!formState.errors?.config?.transformations?.[index]?.expression} |
||||
error={formState.errors?.config?.transformations?.[index]?.expression?.message} |
||||
> |
||||
<Input |
||||
{...register(`config.transformations.${index}.expression`, { |
||||
required: getSupportedTransTypeDetails(watch(`config.transformations.${index}.type`)) |
||||
.requireExpression |
||||
? 'Please define an expression' |
||||
: undefined, |
||||
})} |
||||
defaultValue={fieldVal.expression} |
||||
readOnly={readOnly} |
||||
disabled={ |
||||
!getSupportedTransTypeDetails(watch(`config.transformations.${index}.type`)) |
||||
.showExpression |
||||
} |
||||
id={`config.transformations.${fieldVal.id}.expression`} |
||||
/> |
||||
</Field> |
||||
<Field |
||||
label={ |
||||
<Stack gap={0.5}> |
||||
<Label htmlFor={`config.transformations.${fieldVal.id}.mapValue`}>Map value</Label> |
||||
<Tooltip |
||||
content={ |
||||
<div> |
||||
<p> |
||||
Optional. Defines the name of the variable. This is currently only valid for |
||||
regular expressions with a single, unnamed capture group. |
||||
</p> |
||||
</div> |
||||
} |
||||
> |
||||
<Icon name="info-circle" size="sm" /> |
||||
</Tooltip> |
||||
</Stack> |
||||
} |
||||
> |
||||
<Input |
||||
{...register(`config.transformations.${index}.mapValue`)} |
||||
defaultValue={fieldVal.mapValue} |
||||
readOnly={readOnly} |
||||
disabled={ |
||||
!getSupportedTransTypeDetails(watch(`config.transformations.${index}.type`)).showMapValue |
||||
} |
||||
id={`config.transformations.${fieldVal.id}.mapValue`} |
||||
/> |
||||
</Field> |
||||
{!readOnly && ( |
||||
<div className={styles.removeButton}> |
||||
<IconButton |
||||
type="button" |
||||
tooltip="Remove transformation" |
||||
name={'trash-alt'} |
||||
onClick={() => { |
||||
remove(index); |
||||
const keptValsCopy: Array<{ expression?: string; mapValue?: string } | undefined> = [ |
||||
...keptVals, |
||||
]; |
||||
keptValsCopy[index] = undefined; |
||||
setKeptVals(compact(keptValsCopy)); |
||||
}} |
||||
ariaLabel="Remove transformation" |
||||
> |
||||
Remove |
||||
</IconButton> |
||||
</div> |
||||
)} |
||||
</Stack> |
||||
); |
||||
})} |
||||
</div> |
||||
)} |
||||
{!readOnly && ( |
||||
<Button |
||||
icon="plus" |
||||
onClick={() => append({ type: undefined }, { shouldFocus: false })} |
||||
variant="secondary" |
||||
type="button" |
||||
> |
||||
Add transformation |
||||
</Button> |
||||
)} |
||||
</Stack> |
||||
</> |
||||
)} |
||||
</FieldArray> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
interface SupportedTransformationTypeDetails { |
||||
label: string; |
||||
value: string; |
||||
description?: string; |
||||
showExpression: boolean; |
||||
showMapValue: boolean; |
||||
requireExpression?: boolean; |
||||
} |
||||
|
||||
function getSupportedTransTypeDetails(transType: SupportedTransformationType): SupportedTransformationTypeDetails { |
||||
switch (transType) { |
||||
case SupportedTransformationType.Logfmt: |
||||
return { |
||||
label: 'Logfmt', |
||||
value: SupportedTransformationType.Logfmt, |
||||
description: 'Parse provided field with logfmt to get variables', |
||||
showExpression: false, |
||||
showMapValue: false, |
||||
}; |
||||
case SupportedTransformationType.Regex: |
||||
return { |
||||
label: 'Regular expression', |
||||
value: SupportedTransformationType.Regex, |
||||
description: |
||||
'Field will be parsed with regex. Use named capture groups to return multiple variables, or a single unnamed capture group to add variable to named map value.', |
||||
showExpression: true, |
||||
showMapValue: true, |
||||
requireExpression: true, |
||||
}; |
||||
default: |
||||
return { label: transType, value: transType, showExpression: false, showMapValue: false }; |
||||
} |
||||
} |
||||
|
||||
const getTransformOptions = () => { |
||||
return Object.values(SupportedTransformationType).map((transformationType) => { |
||||
const transType = getSupportedTransTypeDetails(transformationType); |
||||
return { |
||||
label: transType.label, |
||||
value: transType.value, |
||||
description: transType.description, |
||||
}; |
||||
}); |
||||
}; |
||||
Loading…
Reference in new issue