IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-16 18:34:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fixed issue with changing value not changing index

Browse Source
This commit is contained in:
Hugo Häggmark 2019-01-15 10:52:15 +01:00
parent 92a1b55a4a
commit 2836bc2a13
2 changed files with 59 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
View File

@ -24,6 +24,14 @@ describe('Initialization', () => {
});
describe('Add threshold', () => {
it('should not add threshold at index 0', () => {
const instance = setup();
instance.onAddThreshold(0);
expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#299c46' }]);
});
it('should add threshold', () => {
const instance = setup();
@ -70,6 +78,19 @@ describe('Add threshold', () => {
});
describe('Remove threshold', () => {
it('should not remove threshold at index 0', () => {
const thresholds = [
{ index: 0, value: -Infinity, color: '#299c46' },
{ index: 1, value: 50, color: '#EAB839' },
{ index: 2, value: 75, color: '#6ED0E0' },
];
const instance = setup({ thresholds });
instance.onRemoveThreshold(thresholds[0]);
expect(instance.state.thresholds).toEqual(thresholds);
});
it('should remove threshold', () => {
const thresholds = [
{ index: 0, value: -Infinity, color: '#299c46' },
@ -90,7 +111,7 @@ describe('Remove threshold', () => {
});
describe('change threshold value', () => {
it('should update value and resort rows', () => {
it('should update value', () => {
const instance = setup();
const thresholds = [
{ index: 0, value: -Infinity, color: '#299c46' },
@ -114,3 +135,27 @@ describe('change threshold value', () => {
]);
});
});
describe('on blur threshold value', () => {
it('should resort rows and update indexes', () => {
const instance = setup();
const thresholds = [
{ index: 0, value: -Infinity, color: '#299c46' },
{ index: 1, value: 78, color: '#EAB839' },
{ index: 2, value: 75, color: '#6ED0E0' },
];
instance.state = {
baseColor: BasicGaugeColor.Green,
thresholds,
};
instance.onBlur();
expect(instance.state.thresholds).toEqual([
{ index: 2, value: 78, color: '#EAB839' },
{ index: 1, value: 75, color: '#6ED0E0' },
{ index: 0, value: -Infinity, color: '#299c46' },
]);
});
});

15
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
View File

@ -68,6 +68,10 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
};
onRemoveThreshold = (threshold: Threshold) => {
if (threshold.index === 0) {
return;
}
this.setState(
prevState => {
const newThresholds = prevState.thresholds.map(t => {
@ -91,7 +95,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
const newThresholds = thresholds.map(t => {
if (t === threshold) {
t = { ...t, value: event.target.value };
t = { ...t, value: parseInt(event.target.value, 10) };
}
return t;
@ -121,7 +125,14 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
onChangeBaseColor = (color: string) => this.props.onChange(this.state.thresholds);
onBlur = () => {
this.setState(prevState => ({ thresholds: this.sortThresholds(prevState.thresholds) }));
this.setState(prevState => {
const sortThresholds = this.sortThresholds([...prevState.thresholds]);
let index = sortThresholds.length - 1;
sortThresholds.forEach(t => {
t.index = index--;
});
return { thresholds: sortThresholds };
});
this.updateGauge();
};