IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-08-04 02:23:14 -05:00
Code Issues Packages Projects Releases Wiki Activity

ValueMappings: Fix issue with value mappings in override applying to all columns (#27718)

Browse Source 
* ValueMappings: Fix issue with value mappings override creating default value mapping for all fields

* Fixed unit tests
This commit is contained in:
Torkel Ödegaard
2020-09-23 11:43:43 +02:00
committed by GitHub
parent f5c2b771ee
commit f285569316
5 changed files with 35 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/OptionsUI/mappings.tsx
+1 -1
View File
@@ -17,6 +17,6 @@ export class ValueMappingsValueEditor extends React.PureComponent<
value = [];
}
return <ValueMappingsEditor valueMappings={value} onChange={onChange} />;
return <ValueMappingsEditor value={value} onChange={onChange} />;
}
}
packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
+9 -9
View File
@@ -7,8 +7,8 @@ import { MappingType, RangeMap, SelectableValue, ValueMap, ValueMapping } from '
export interface Props {
valueMapping: ValueMapping;
updateValueMapping: (valueMapping: ValueMapping) => void;
removeValueMapping: () => void;
onUpdate: (value: ValueMapping) => void;
onRemove: () => void;
}
const MAPPING_OPTIONS: Array<SelectableValue<MappingType>> = [
@@ -16,27 +16,27 @@ const MAPPING_OPTIONS: Array<SelectableValue<MappingType>> = [
{ value: MappingType.RangeToText, label: 'Range' },
];
export const MappingRow: React.FC<Props> = ({ valueMapping, updateValueMapping, removeValueMapping }) => {
export const MappingRow: React.FC<Props> = ({ valueMapping, onUpdate, onRemove }) => {
const { type } = valueMapping;
const onMappingValueChange = (value: string) => {
updateValueMapping({ ...valueMapping, value: value });
onUpdate({ ...valueMapping, value: value });
};
const onMappingFromChange = (value: string) => {
updateValueMapping({ ...valueMapping, from: value });
onUpdate({ ...valueMapping, from: value });
};
const onMappingToChange = (value: string) => {
updateValueMapping({ ...valueMapping, to: value });
onUpdate({ ...valueMapping, to: value });
};
const onMappingTextChange = (value: string) => {
updateValueMapping({ ...valueMapping, text: value });
onUpdate({ ...valueMapping, text: value });
};
const onMappingTypeChange = (mappingType: MappingType) => {
updateValueMapping({ ...valueMapping, type: mappingType });
onUpdate({ ...valueMapping, type: mappingType });
};
const onKeyDown = (handler: (value: string) => void) => (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -103,7 +103,7 @@ export const MappingRow: React.FC<Props> = ({ valueMapping, updateValueMapping,
const label = (
<HorizontalGroup justify="space-between" align="center">
<Label>Mapping type</Label>
<IconButton name="times" onClick={removeValueMapping} aria-label="ValueMappingsEditor remove button" />
<IconButton name="times" onClick={onRemove} aria-label="ValueMappingsEditor remove button" />
</HorizontalGroup>
);
return (
packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx
+1 -1
View File
@@ -8,5 +8,5 @@ export default {
};
export const basic = () => {
return <ValueMappingsEditor valueMappings={[]} onChange={action('Mapping changed')} />;
return <ValueMappingsEditor value={[]} onChange={action('Mapping changed')} />;
};
packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx
+4 -4
View File
@@ -11,7 +11,7 @@ const setup = (spy?: any, propOverrides?: object) => {
spy(mappings);
}
},
valueMappings: [
value: [
{ id: 1, type: MappingType.ValueToText, value: '20', text: 'Ok' },
{ id: 2, type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' },
],
@@ -64,11 +64,11 @@ describe('Next id to add', () => {
]);
});
it('should default to 0', () => {
it('should default to id 1', () => {
const onChangeSpy = jest.fn();
const wrapper = setup(onChangeSpy, { valueMappings: [] });
const wrapper = setup(onChangeSpy, { value: [] });
const add = wrapper.find('*[aria-label="ValueMappingsEditor add mapping button"]');
add.at(0).simulate('click');
expect(onChangeSpy).toBeCalledWith([{ id: 0, type: MappingType.ValueToText, from: '', to: '', text: '' }]);
expect(onChangeSpy).toBeCalledWith([{ id: 1, type: MappingType.ValueToText, from: '', to: '', text: '' }]);
});
});
packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
+20 -37
View File
@@ -4,65 +4,48 @@ import { Button } from '../Button/Button';
import { MappingRow } from './MappingRow';
export interface Props {
valueMappings?: ValueMapping[];
value: ValueMapping[];
onChange: (valueMappings: ValueMapping[]) => void;
}
export const ValueMappingsEditor: React.FC<Props> = ({ valueMappings, onChange, children }) => {
export const ValueMappingsEditor: React.FC<Props> = ({ value, onChange, children }) => {
const onAdd = () => {
let update = valueMappings;
const defaultMapping = {
type: MappingType.ValueToText,
from: '',
to: '',
text: '',
};
const id = update && update.length > 0 ? Math.max(...update.map(v => v.id)) + 1 : 0;
if (update) {
update.push({
const id = Math.max(...value.map(v => v.id), 0) + 1;
onChange([
...value,
{
id,
...defaultMapping,
});
} else {
update = [
{
id,
...defaultMapping,
},
];
}
onChange(update);
},
]);
};
const onRemove = (index: number) => {
const update = valueMappings;
update!.splice(index, 1);
onChange(update!);
onChange(value.filter((_, i) => i !== index));
};
const onMappingChange = (index: number, value: ValueMapping) => {
const update = valueMappings;
update![index] = value;
onChange(update!);
const onMappingChange = (update: ValueMapping) => {
onChange(value.map(item => (item.id === update.id ? update : item)));
};
return (
<>
{valueMappings && valueMappings.length > 0 && (
<>
{valueMappings.length > 0 &&
valueMappings.map((valueMapping, index) => (
<MappingRow
key={`${valueMapping.text}-${index}`}
valueMapping={valueMapping}
updateValueMapping={value => onMappingChange(index, value)}
removeValueMapping={() => onRemove(index)}
/>
))}
</>
)}
{value.map((valueMapping, index) => (
<MappingRow
key={`${valueMapping.text}-${index}`}
valueMapping={valueMapping}
onUpdate={onMappingChange}
onRemove={() => onRemove(index)}
/>
))}
<Button
size="sm"
icon="plus"