Added check for null value in ValueMappings and added tests

packages/grafana-ui/src/components/Gauge/Gauge.test.tsx

@@ -135,6 +135,45 @@ describe('Format value with value mappings', () => {
     expect(result.text).toEqual('1-20');
   });
 
+  it('should return if value is null and value to text mapping value is null', () => {
+    const valueMappings: ValueMapping[] = [
+      { id: 0, operator: '', text: '1-20', type: MappingType.RangeToText, from: '1', to: '20' },
+      { id: 1, operator: '', text: '<NULL>', type: MappingType.ValueToText, value: 'null' },
+    ];
+    const value = null;
+    const { instance } = setup({ valueMappings });
+
+    const result = instance.getFirstFormattedValueMapping(valueMappings, value);
+
+    expect(result.text).toEqual('<NULL>');
+  });
+
+  it('should return if value is null and range to text mapping from is null', () => {
+    const valueMappings: ValueMapping[] = [
+      { id: 0, operator: '', text: '<NULL>', type: MappingType.RangeToText, from: 'null', to: '10' },
+      { id: 1, operator: '', text: 'elva', type: MappingType.ValueToText, value: '11' },
+    ];
+    const value = null;
+    const { instance } = setup({ valueMappings });
+
+    const result = instance.getFirstFormattedValueMapping(valueMappings, value);
+
+    expect(result.text).toEqual('<NULL>');
+  });
+
+  it('should return if value is null and range to text mapping to is null', () => {
+    const valueMappings: ValueMapping[] = [
+      { id: 0, operator: '', text: '<NULL>', type: MappingType.RangeToText, from: '1', to: 'null' },
+      { id: 1, operator: '', text: 'elva', type: MappingType.ValueToText, value: '11' },
+    ];
+    const value = null;
+    const { instance } = setup({ valueMappings });
+
+    const result = instance.getFirstFormattedValueMapping(valueMappings, value);
+
+    expect(result.text).toEqual('<NULL>');
+  });
+
   it('should return rangeToText mapping where value equals to', () => {
     const valueMappings: ValueMapping[] = [
       { id: 0, operator: '', text: '1-10', type: MappingType.RangeToText, from: '1', to: '10' },

packages/grafana-ui/src/components/Gauge/Gauge.tsx

@@ -60,10 +60,14 @@ export class Gauge extends PureComponent<Props> {
   }
 
   addValueToTextMappingText(allValueMappings: ValueMapping[], valueToTextMapping: ValueMap, value: TimeSeriesValue) {
-    if (!valueToTextMapping.value) {
+    if (valueToTextMapping.value === undefined) {
       return allValueMappings;
     }
 
+    if (value === null && valueToTextMapping.value && valueToTextMapping.value.toLowerCase() === 'null') {
+      return allValueMappings.concat(valueToTextMapping);
+    }
+
     const valueAsNumber = parseFloat(value as string);
     const valueToTextMappingAsNumber = parseFloat(valueToTextMapping.value as string);
 
@@ -79,10 +83,19 @@ export class Gauge extends PureComponent<Props> {
   }
 
   addRangeToTextMappingText(allValueMappings: ValueMapping[], rangeToTextMapping: RangeMap, value: TimeSeriesValue) {
-    if (!rangeToTextMapping.from || !rangeToTextMapping.to || !value) {
+    if (rangeToTextMapping.from === undefined || rangeToTextMapping.to === undefined || value === undefined) {
       return allValueMappings;
     }
 
+    if (
+      value === null &&
+      rangeToTextMapping.from &&
+      rangeToTextMapping.to &&
+      (rangeToTextMapping.from.toLowerCase() === 'null' || rangeToTextMapping.to.toLowerCase() === 'null')
+    ) {
+      return allValueMappings.concat(rangeToTextMapping);
+    }
+
     const valueAsNumber = parseFloat(value as string);
     const fromAsNumber = parseFloat(rangeToTextMapping.from as string);
     const toAsNumber = parseFloat(rangeToTextMapping.to as string);
@@ -139,8 +152,9 @@ export class Gauge extends PureComponent<Props> {
 
     const formatFunc = getValueFormat(unit);
     const formattedValue = formatFunc(value as number, decimals);
+    const handleNoValueValue = formattedValue || 'no value';
 
-    return `${prefix} ${formattedValue} ${suffix}`;
+    return `${prefix} ${handleNoValueValue} ${suffix}`;
   }
 
   getFontColor(value: TimeSeriesValue) {
@@ -204,7 +218,7 @@ export class Gauge extends PureComponent<Props> {
     if (timeSeries[0]) {
       value = timeSeries[0].stats[stat];
     } else {
-      value = 'N/A';
+      value = null;
     }
 
     const dimension = Math.min(width, height * 1.3);