[Lens] Custom labels for ranges

src/plugins/data/common/search/aggs/buckets/create_filter/range.test.ts

@@ -68,6 +68,7 @@ describe('AggConfig Filters', () => {
         {
           gte: 1024,
           lt: 2048.0,
+          label: 'A custom label',
         }
       );
 
@@ -78,6 +79,7 @@ describe('AggConfig Filters', () => {
       expect(filter.range).toHaveProperty('bytes');
       expect(filter.range.bytes).toHaveProperty('gte', 1024.0);
       expect(filter.range.bytes).toHaveProperty('lt', 2048.0);
+      expect(filter.range.bytes).not.toHaveProperty('label');
       expect(filter.meta).toHaveProperty('formattedValue');
     });
   });

src/plugins/data/common/search/aggs/buckets/create_filter/range.ts

@@ -25,7 +25,7 @@ import { IBucketAggConfig } from '../bucket_agg_type';
 export const createFilterRange = (
   getFieldFormatsStart: AggTypesDependencies['getFieldFormatsStart']
 ) => {
-  return (aggConfig: IBucketAggConfig, params: any) => {
+  return (aggConfig: IBucketAggConfig, { label, ...params }: any) => {
     const { deserialize } = getFieldFormatsStart();
     return buildRangeFilter(
       aggConfig.params.field,

src/plugins/data/common/search/aggs/buckets/range.ts

@@ -41,6 +41,7 @@ export interface AggParamsRange extends BaseAggParams {
   ranges?: Array<{
     from: number;
     to: number;
+    label?: string;
   }>;
 }
 
@@ -67,11 +68,11 @@ export const getRangeBucketAgg = ({ getFieldFormatsStart }: RangeBucketAggDepend
         keyCaches.set(agg, keys);
       }
 
-      const id = RangeKey.idBucket(bucket);
+      const id = RangeKey.idBucket(bucket, agg.params.ranges);
 
       key = keys.get(id);
       if (!key) {
-        key = new RangeKey(bucket);
+        key = new RangeKey(bucket, agg.params.ranges);
         keys.set(id, key);
       }
 
@@ -102,7 +103,11 @@ export const getRangeBucketAgg = ({ getFieldFormatsStart }: RangeBucketAggDepend
           { from: 1000, to: 2000 },
         ],
         write(aggConfig, output) {
-          output.params.ranges = aggConfig.params.ranges;
+          output.params.ranges = (aggConfig.params as AggParamsRange).ranges?.map((range) => ({
+            to: range.to,
+            from: range.from,
+          }));
+
           output.params.keyed = true;
         },
       },

src/plugins/data/common/search/aggs/buckets/range_key.ts

@@ -19,20 +19,41 @@
 
 const id = Symbol('id');
 
+type Ranges = Array<{
+  from: string | number | undefined;
+  to: string | number | undefined;
+  label?: string;
+}>;
+
 export class RangeKey {
   [id]: string;
   gte: string | number;
   lt: string | number;
+  label?: string;
+
+  private static findCustomLabel(from: string | number, to: string | number, ranges: Ranges) {
+    return ranges
+      ? ranges.find(
+          (range) =>
+            ((from === -Infinity && range.from === undefined) || range.from === from) &&
+            ((to === Infinity && range.to === undefined) || range.to === to)
+        )?.label
+      : undefined;
+  }
 
-  constructor(bucket: any) {
+  constructor(bucket: any, allRanges?: Ranges) {
     this.gte = bucket.from == null ? -Infinity : bucket.from;
     this.lt = bucket.to == null ? +Infinity : bucket.to;
+    this.label = allRanges ? RangeKey.findCustomLabel(this.gte, this.lt, allRanges) : undefined;
 
     this[id] = RangeKey.idBucket(bucket);
   }
 
-  static idBucket(bucket: any) {
-    return `from:${bucket.from},to:${bucket.to}`;
+  static idBucket(bucket: any, allRanges?: Ranges) {
+    const customLabel = allRanges
+      ? RangeKey.findCustomLabel(bucket.from, bucket.to, allRanges)
+      : undefined;
+    return `from:${bucket.from},to:${bucket.to},label:${customLabel}`;
   }
 
   toString() {

src/plugins/data/common/search/aggs/utils/get_format_with_aggs.test.ts

@@ -79,6 +79,16 @@ describe('getFormatWithAggs', () => {
     expect(getFormat).toHaveBeenCalledTimes(1);
   });
 
+  test('returns custom label for range if provided', () => {
+    const mapping = { id: 'range', params: {} };
+    const getFieldFormat = getFormatWithAggs(getFormat);
+    const format = getFieldFormat(mapping);
+
+    expect(format.convert({ gte: 1, lt: 20, label: 'custom' })).toBe('custom');
+    // underlying formatter is not called because custom label can be used directly
+    expect(getFormat).toHaveBeenCalledTimes(0);
+  });
+
   test('creates custom format for terms', () => {
     const mapping = {
       id: 'terms',

src/plugins/data/common/search/aggs/utils/get_format_with_aggs.ts

@@ -48,6 +48,9 @@ export function getFormatWithAggs(getFieldFormat: GetFieldFormat): GetFieldForma
     const customFormats: Record<string, () => IFieldFormat> = {
       range: () => {
         const RangeFormat = FieldFormat.from((range: any) => {
+          if (range.label) {
+            return range.label;
+          }
           const nestedFormatter = params as SerializedFieldFormat;
           const format = getFieldFormat({
             id: nestedFormatter.id,

src/plugins/expressions/common/expression_types/specs/range.ts

@@ -26,6 +26,7 @@ export interface Range {
   type: typeof name;
   from: number;
   to: number;
+  label?: string;
 }
 
 export const range: ExpressionTypeDefinition<typeof name, Range> = {
@@ -41,7 +42,7 @@ export const range: ExpressionTypeDefinition<typeof name, Range> = {
   },
   to: {
     render: (value: Range): ExpressionValueRender<{ text: string }> => {
-      const text = `from ${value.from} to ${value.to}`;
+      const text = value?.label ? value.label : `from ${value.from} to ${value.to}`;
       return {
         type: 'render',
         as: 'text',

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.tsx

@@ -25,7 +25,12 @@ import { keys } from '@elastic/eui';
 import { IFieldFormat } from '../../../../../../../../src/plugins/data/common';
 import { RangeTypeLens, isValidRange, isValidNumber } from './ranges';
 import { FROM_PLACEHOLDER, TO_PLACEHOLDER, TYPING_DEBOUNCE_TIME } from './constants';
-import { NewBucketButton, DragDropBuckets, DraggableBucketContainer } from '../shared_components';
+import {
+  NewBucketButton,
+  DragDropBuckets,
+  DraggableBucketContainer,
+  LabelInput,
+} from '../shared_components';
 
 const generateId = htmlIdGenerator();
 
@@ -63,7 +68,7 @@ export const RangePopover = ({
     // send the range back to the main state
     setRange(newRange);
   };
-  const { from, to } = tempRange;
+  const { from, to, label } = tempRange;
 
   const lteAppendLabel = i18n.translate('xpack.lens.indexPattern.ranges.lessThanOrEqualAppend', {
     defaultMessage: '\u2264',
@@ -159,6 +164,25 @@ export const RangePopover = ({
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFormRow>
+      <EuiFormRow>
+        <LabelInput
+          value={label || ''}
+          onChange={(newLabel) => {
+            const newRange = {
+              ...tempRange,
+              label: newLabel,
+            };
+            setTempRange(newRange);
+            saveRangeAndReset(newRange);
+          }}
+          placeholder={i18n.translate(
+            'xpack.lens.indexPattern.ranges.customRangeLabelPlaceholder',
+            { defaultMessage: 'Custom label' }
+          )}
+          onSubmit={onSubmit}
+          dataTestSubj="indexPattern-ranges-label"
+        />
+      </EuiFormRow>
     </EuiPopover>
   );
 };

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.test.tsx

@@ -23,6 +23,7 @@ import {
 } from './constants';
 import { RangePopover } from './advanced_editor';
 import { DragDropBuckets } from '../shared_components';
+import { EuiFieldText } from '@elastic/eui';
 
 const dataPluginMockValue = dataPluginMock.createStartContract();
 // need to overwrite the formatter field first
@@ -152,6 +153,25 @@ describe('ranges', () => {
         })
       );
     });
+
+    it('should include custom labels', () => {
+      setToRangeMode();
+      (state.layers.first.columns.col1 as RangeIndexPatternColumn).params.ranges = [
+        { from: 0, to: 100, label: 'customlabel' },
+      ];
+
+      const esAggsConfig = rangeOperation.toEsAggsConfig(
+        state.layers.first.columns.col1 as RangeIndexPatternColumn,
+        'col1',
+        {} as IndexPattern
+      );
+
+      expect((esAggsConfig as { params: unknown }).params).toEqual(
+        expect.objectContaining({
+          ranges: [{ from: 0, to: 100, label: 'customlabel' }],
+        })
+      );
+    });
   });
 
   describe('getPossibleOperationForField', () => {
@@ -419,6 +439,63 @@ describe('ranges', () => {
         });
       });
 
+      it('should add a new range with custom label', () => {
+        const setStateSpy = jest.fn();
+
+        const instance = mount(
+          <InlineOptions
+            {...defaultOptions}
+            state={state}
+            setState={setStateSpy}
+            columnId="col1"
+            currentColumn={state.layers.first.columns.col1 as RangeIndexPatternColumn}
+            layerId="first"
+          />
+        );
+
+        // This series of act clojures are made to make it work properly the update flush
+        act(() => {
+          instance.find(EuiButtonEmpty).prop('onClick')!({} as ReactMouseEvent);
+        });
+
+        act(() => {
+          // need another wrapping for this in order to work
+          instance.update();
+
+          expect(instance.find(RangePopover)).toHaveLength(2);
+
+          // edit the label and check
+          instance.find(RangePopover).find(EuiFieldText).first().prop('onChange')!({
+            target: {
+              value: 'customlabel',
+            },
+          } as React.ChangeEvent<HTMLInputElement>);
+          jest.advanceTimersByTime(TYPING_DEBOUNCE_TIME * 4);
+
+          expect(setStateSpy).toHaveBeenCalledWith({
+            ...state,
+            layers: {
+              first: {
+                ...state.layers.first,
+                columns: {
+                  ...state.layers.first.columns,
+                  col1: {
+                    ...state.layers.first.columns.col1,
+                    params: {
+                      ...state.layers.first.columns.col1.params,
+                      ranges: [
+                        { from: 0, to: DEFAULT_INTERVAL, label: '' },
+                        { from: DEFAULT_INTERVAL, to: Infinity, label: 'customlabel' },
+                      ],
+                    },
+                  },
+                },
+              },
+            },
+          });
+        });
+      });
+
       it('should open a popover to edit an existing range', () => {
         const setStateSpy = jest.fn();
 

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx

@@ -61,9 +61,9 @@ function getEsAggsParams({ sourceField, params }: RangeIndexPatternColumn) {
       field: sourceField,
       ranges: params.ranges.filter(isValidRange).map<Partial<RangeType>>((range) => {
         if (isFullRange(range)) {
-          return { from: range.from, to: range.to };
+          return { from: range.from, to: range.to, label: range.label };
         }
-        const partialRange: Partial<RangeType> = {};
+        const partialRange: Partial<RangeType> = { label: range.label };
         // be careful with the fields to set on partial ranges
         if (isValidNumber(range.from)) {
           partialRange.from = range.from;