diff --git a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.test.tsx b/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.test.tsx index ee1c6b06393..0d359490e8a 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.test.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.test.tsx @@ -191,4 +191,28 @@ describe('ThresholdsEditor', () => { ]); }); }); + + describe('on load with invalid steps', () => { + it('should exclude invalid steps and render a proper list', () => { + const { instance } = setup({ + thresholds: { + mode: ThresholdsMode.Absolute, + steps: [ + { value: -Infinity, color: '#7EB26D', key: 1 }, + { value: 75, color: '#6ED0E0', key: 2 }, + { color: '#7EB26D', key: 3 } as any, + { value: 78, color: '#EAB839', key: 4 }, + { value: null, color: '#7EB26D', key: 5 } as any, + { value: null, color: '#7EB26D', key: 6 } as any, + ], + }, + }); + + expect(getCurrentThresholds(instance).steps).toEqual([ + { value: -Infinity, color: '#7EB26D' }, + { value: 75, color: '#6ED0E0' }, + { value: 78, color: '#EAB839' }, + ]); + }); + }); }); diff --git a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx index 54b093dcf24..2ef18af331f 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx @@ -18,6 +18,7 @@ import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup'; import { Button } from '../Button'; import { FullWidthButtonContainer } from '../Button/FullWidthButtonContainer'; import { Label } from '../Forms/Label'; +import { isNumber } from 'lodash'; const modes: Array> = [ { value: ThresholdsMode.Absolute, label: 'Absolute', description: 'Pick thresholds based on the absolute values' }, @@ -249,13 +250,15 @@ function toThresholdsWithKey(steps?: Threshold[]): ThresholdWithKey[] { steps = [{ value: -Infinity, color: 'green' }]; } - return steps.map(t => { - return { - color: t.color, - value: t.value === null ? -Infinity : t.value, - key: counter++, - }; - }); + return steps + .filter((t, i) => isNumber(t.value) || i === 0) + .map(t => { + return { + color: t.color, + value: t.value === null ? -Infinity : t.value, + key: counter++, + }; + }); } export function thresholdsWithoutKey(thresholds: ThresholdsConfig, steps: ThresholdWithKey[]): ThresholdsConfig {