diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx index b3396841d4d..1dbfb2bbb42 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx +++ b/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: '', type: MappingType.ValueToText, value: 'null' }, + ]; + const value = null; + const { instance } = setup({ valueMappings }); + + const result = instance.getFirstFormattedValueMapping(valueMappings, value); + + expect(result.text).toEqual(''); + }); + + it('should return if value is null and range to text mapping from is null', () => { + const valueMappings: ValueMapping[] = [ + { id: 0, operator: '', text: '', 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(''); + }); + + it('should return if value is null and range to text mapping to is null', () => { + const valueMappings: ValueMapping[] = [ + { id: 0, operator: '', text: '', 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(''); + }); + 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' }, diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index 63d875e9cd5..e0c60177a34 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -60,10 +60,14 @@ export class Gauge extends PureComponent { } 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 { } 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 { 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 { if (timeSeries[0]) { value = timeSeries[0].stats[stat]; } else { - value = 'N/A'; + value = null; } const dimension = Math.min(width, height * 1.3);