ValueMappings: Allow omitting From or To in MappingType.RangeToText (#102416)

packages/grafana-data/src/utils/valueMappings.test.ts

@@ -185,6 +185,40 @@ describe('Format value with value mappings', () => {
   });
 });
 
+describe('Range mapping with null From or null To', () => {
+  expect(
+    getValueMappingResult(
+      [
+        {
+          type: MappingType.RangeToText,
+          options: {
+            from: 0,
+            to: null,
+            result: { text: 'pos' },
+          },
+        },
+      ],
+      100
+    )
+  ).toEqual({ text: 'pos' });
+
+  expect(
+    getValueMappingResult(
+      [
+        {
+          type: MappingType.RangeToText,
+          options: {
+            from: null,
+            to: 0,
+            result: { text: 'neg' },
+          },
+        },
+      ],
+      -100
+    )
+  ).toEqual({ text: 'neg' });
+});
+
 describe('Format value with regex mappings', () => {
   it('should return correct regular expression result', () => {
     const value = 'www.foo.com';

packages/grafana-data/src/utils/valueMappings.ts

@@ -35,13 +35,17 @@ export function getValueMappingResult(valueMappings: ValueMapping[], value: any)
           continue;
         }
 
-        const isNumFrom = !isNaN(vm.options.from!);
-        if (isNumFrom && valueAsNumber < vm.options.from!) {
+        const from = vm.options.from ?? -Infinity;
+
+        const isNumFrom = !isNaN(from);
+        if (isNumFrom && valueAsNumber < from) {
           continue;
         }
 
-        const isNumTo = !isNaN(vm.options.to!);
-        if (isNumTo && valueAsNumber > vm.options.to!) {
+        const to = vm.options.to ?? Infinity;
+
+        const isNumTo = !isNaN(to);
+        if (isNumTo && valueAsNumber > to) {
           continue;
         }
 

public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx

@@ -11,8 +11,8 @@ import { ResourcePicker } from '../ResourcePicker';
 
 export interface ValueMappingEditRowModel {
   type: MappingType;
-  from?: number;
-  to?: number;
+  from?: number | null;
+  to?: number | null;
   pattern?: string;
   key?: string;
   isNew?: boolean;
@@ -149,20 +149,8 @@ export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDupl
             )}
             {mapping.type === MappingType.RangeToText && (
               <div className={styles.rangeInputWrapper}>
-                <Input
-                  type="number"
-                  value={mapping.from ?? ''}
-                  placeholder="Range start"
-                  onChange={onChangeFrom}
-                  prefix="From"
-                />
-                <Input
-                  type="number"
-                  value={mapping.to ?? ''}
-                  placeholder="Range end"
-                  onChange={onChangeTo}
-                  prefix="To"
-                />
+                <Input type="number" value={mapping.from ?? ''} placeholder="From" onChange={onChangeFrom} />
+                <Input type="number" value={mapping.to ?? ''} placeholder="To" onChange={onChangeTo} />
               </div>
             )}
             {mapping.type === MappingType.RegexToText && (

public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.tsx

@@ -51,7 +51,7 @@ export const ValueMappingsEditor = memo((props: Props) => {
                 {row.type === MappingType.ValueToText && row.key}
                 {row.type === MappingType.RangeToText && (
                   <span>
-                    [{row.from} - {row.to}]
+                    [{row.from ?? '-∞'} - {row.to ?? '∞'}]
                   </span>
                 )}
                 {row.type === MappingType.RegexToText && row.pattern}

public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.test.tsx

@@ -134,11 +134,11 @@ describe('ValueMappingsEditorModal', () => {
       );
       await selectOptionInTest(selectComponent, 'Range');
 
-      await userEvent.clear(screen.getByPlaceholderText('Range start'));
-      await userEvent.type(screen.getByPlaceholderText('Range start'), '10');
+      await userEvent.clear(screen.getByPlaceholderText('From'));
+      await userEvent.type(screen.getByPlaceholderText('From'), '10');
 
-      await userEvent.clear(screen.getByPlaceholderText('Range end'));
-      await userEvent.type(screen.getByPlaceholderText('Range end'), '20');
+      await userEvent.clear(screen.getByPlaceholderText('To'));
+      await userEvent.type(screen.getByPlaceholderText('To'), '20');
 
       await userEvent.clear(screen.getByPlaceholderText('Optional display text'));
       await userEvent.type(screen.getByPlaceholderText('Optional display text'), 'display');

public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx

@@ -218,12 +218,12 @@ export function editModelToSaveModel(rows: ValueMappingEditRowModel[]) {
         }
         break;
       case MappingType.RangeToText:
-        if (item.from != null && item.to != null) {
+        if (item.from != null || item.to != null) {
           mappings.push({
             type: item.type,
             options: {
-              from: item.from,
-              to: item.to,
+              from: item.from ?? null,
+              to: item.to ?? null,
               result,
             },
           });
@@ -279,8 +279,8 @@ export function buildEditRowModels(value: ValueMapping[]) {
             createRow({
               type: mapping.type,
               result: mapping.options.result,
-              from: mapping.options.from ?? 0,
-              to: mapping.options.to ?? 0,
+              from: mapping.options.from,
+              to: mapping.options.to,
             })
           );
           break;