Gauge: making sure threshold panel json is correct before render (#28898)

* making sure we work with a proper data structure.

* added test to verify functionality.

* removed unused variables.

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' },
+      ]);
+    });
+  });
 });
 });

packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx

@@ -18,6 +18,7 @@ import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup';
 import { Button } from '../Button';
 import { Button } from '../Button';
 import { FullWidthButtonContainer } from '../Button/FullWidthButtonContainer';
 import { FullWidthButtonContainer } from '../Button/FullWidthButtonContainer';
 import { Label } from '../Forms/Label';
 import { Label } from '../Forms/Label';
+import { isNumber } from 'lodash';
 
 
 const modes: Array<SelectableValue<ThresholdsMode>> = [
 const modes: Array<SelectableValue<ThresholdsMode>> = [
   { value: ThresholdsMode.Absolute, label: 'Absolute', description: 'Pick thresholds based on the absolute values' },
   { 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' }];
     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 {
 export function thresholdsWithoutKey(thresholds: ThresholdsConfig, steps: ThresholdWithKey[]): ThresholdsConfig {