[Lens] Normalize values by time unit

src/plugins/expressions/common/expression_functions/series_calculation_helpers.ts

@@ -39,14 +39,19 @@ export function getBucketIdentifier(row: DatatableRow, groupColumns?: string[])
  * @param outputColumnId Id of the output column
  * @param inputColumnId Id of the input column
  * @param outputColumnName Optional name of the output column
+ * @param options Optional options, set `allowColumnOverwrite` to true to not raise an exception if the output column exists already
  */
 export function buildResultColumns(
   input: Datatable,
   outputColumnId: string,
   inputColumnId: string,
-  outputColumnName: string | undefined
+  outputColumnName: string | undefined,
+  options: { allowColumnOverwrite: boolean } = { allowColumnOverwrite: false }
 ) {
-  if (input.columns.some((column) => column.id === outputColumnId)) {
+  if (
+    !options.allowColumnOverwrite &&
+    input.columns.some((column) => column.id === outputColumnId)
+  ) {
     throw new Error(
       i18n.translate('expressions.functions.seriesCalculations.columnConflictMessage', {
         defaultMessage:

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx

@@ -6,7 +6,7 @@
 
 import './dimension_editor.scss';
 import _ from 'lodash';
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect, useRef } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
   EuiListGroup,
@@ -34,6 +34,7 @@ import { BucketNestingEditor } from './bucket_nesting_editor';
 import { IndexPattern, IndexPatternLayer } from '../types';
 import { trackUiEvent } from '../../lens_ui_telemetry';
 import { FormatSelector } from './format_selector';
+import { TimeScaling } from './time_scaling';
 
 const operationPanels = getOperationDisplay();
 
@@ -43,10 +44,30 @@ export interface DimensionEditorProps extends IndexPatternDimensionEditorProps {
   currentIndexPattern: IndexPattern;
 }
 
+/**
+ * This component shows a debounced input for the label of a dimension. It will update on root state changes
+ * if no debounced changes are in flight because the user is currently typing into the input.
+ */
 const LabelInput = ({ value, onChange }: { value: string; onChange: (value: string) => void }) => {
   const [inputValue, setInputValue] = useState(value);
+  const unflushedChanges = useRef(false);
+
+  const onChangeDebounced = useMemo(() => {
+    const callback = _.debounce((val: string) => {
+      onChange(val);
+      unflushedChanges.current = false;
+    }, 256);
+    return (val: string) => {
+      unflushedChanges.current = true;
+      callback(val);
+    };
+  }, [onChange]);
 
-  const onChangeDebounced = useMemo(() => _.debounce(onChange, 256), [onChange]);
+  useEffect(() => {
+    if (!unflushedChanges.current && value !== inputValue) {
+      setInputValue(value);
+    }
+  }, [value, inputValue]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const val = String(e.target.value);
@@ -329,6 +350,17 @@ export function DimensionEditor(props: DimensionEditorProps) {
           </EuiFormRow>
         ) : null}
 
+        {!currentFieldIsInvalid && !incompatibleSelectedOperationType && selectedColumn && (
+          <TimeScaling
+            selectedColumn={selectedColumn}
+            columnId={columnId}
+            layer={state.layers[layerId]}
+            updateLayer={(newLayer: IndexPatternLayer) =>
+              setState(mergeLayer({ layerId, state, newLayer }))
+            }
+          />
+        )}
+
         {!currentFieldIsInvalid &&
           !incompatibleSelectedOperationType &&
           selectedColumn &&

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import { ReactWrapper, ShallowWrapper } from 'enzyme';
-import React from 'react';
+import React, { ChangeEvent, MouseEvent } from 'react';
 import { act } from 'react-dom/test-utils';
 import { EuiComboBox, EuiListGroupItemProps, EuiListGroup, EuiRange } from '@elastic/eui';
 import { DataPublicPluginStart } from '../../../../../../src/plugins/data/public';
@@ -22,6 +22,10 @@ import { documentField } from '../document_field';
 import { OperationMetadata } from '../../types';
 import { DateHistogramIndexPatternColumn } from '../operations/definitions/date_histogram';
 import { getFieldByNameFactory } from '../pure_helpers';
+import { TimeScaling } from './time_scaling';
+import { EuiSelect } from '@elastic/eui';
+import { EuiButtonIcon } from '@elastic/eui';
+import { DimensionEditor } from './dimension_editor';
 
 jest.mock('../loader');
 jest.mock('../operations');
@@ -111,7 +115,10 @@ describe('IndexPatternDimensionEditorPanel', () => {
   let defaultProps: IndexPatternDimensionEditorProps;
 
   function getStateWithColumns(columns: Record<string, IndexPatternColumn>) {
-    return { ...state, layers: { first: { ...state.layers.first, columns } } };
+    return {
+      ...state,
+      layers: { first: { ...state.layers.first, columns, columnOrder: Object.keys(columns) } },
+    };
   }
 
   beforeEach(() => {
@@ -785,6 +792,226 @@ describe('IndexPatternDimensionEditorPanel', () => {
     });
   });
 
+  describe('time scaling', () => {
+    function getProps(colOverrides: Partial<IndexPatternColumn>) {
+      return {
+        ...defaultProps,
+        state: getStateWithColumns({
+          datecolumn: {
+            dataType: 'date',
+            isBucketed: true,
+            label: '',
+            operationType: 'date_histogram',
+            sourceField: 'ts',
+            params: {
+              interval: '1d',
+            },
+          },
+          col2: {
+            dataType: 'number',
+            isBucketed: false,
+            label: 'Count of records',
+            operationType: 'count',
+            sourceField: 'Records',
+            ...colOverrides,
+          } as IndexPatternColumn,
+        }),
+        columnId: 'col2',
+      };
+    }
+    it('should not show custom options if time scaling is not available', () => {
+      wrapper = mount(
+        <IndexPatternDimensionEditorComponent
+          {...getProps({
+            operationType: 'avg',
+            sourceField: 'bytes',
+          })}
+        />
+      );
+      expect(wrapper.find('[data-test-subj="indexPattern-time-scaling"]')).toHaveLength(0);
+    });
+
+    it('should show custom options if time scaling is available', () => {
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...getProps({})} />);
+      expect(
+        wrapper
+          .find(TimeScaling)
+          .find('[data-test-subj="indexPattern-time-scaling-popover"]')
+          .exists()
+      ).toBe(true);
+    });
+
+    it('should show current time scaling if set', () => {
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...getProps({ timeScale: 'd' })} />);
+      expect(
+        wrapper
+          .find('[data-test-subj="indexPattern-time-scaling-unit"]')
+          .find(EuiSelect)
+          .prop('value')
+      ).toEqual('d');
+    });
+
+    it('should allow to set time scaling initially', () => {
+      const props = getProps({});
+      wrapper = shallow(<IndexPatternDimensionEditorComponent {...props} />);
+      wrapper
+        .find(DimensionEditor)
+        .dive()
+        .find(TimeScaling)
+        .dive()
+        .find('[data-test-subj="indexPattern-time-scaling-enable"]')
+        .prop('onClick')!({} as MouseEvent);
+      expect(props.setState).toHaveBeenCalledWith({
+        ...props.state,
+        layers: {
+          first: {
+            ...props.state.layers.first,
+            columns: {
+              ...props.state.layers.first.columns,
+              col2: expect.objectContaining({
+                timeScale: 's',
+                label: 'Count of records per second',
+              }),
+            },
+          },
+        },
+      });
+    });
+
+    it('should carry over time scaling to other operation if possible', () => {
+      const props = getProps({
+        timeScale: 'h',
+        sourceField: 'bytes',
+        operationType: 'sum',
+        label: 'Sum of bytes per hour',
+      });
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...props} />);
+      wrapper
+        .find('button[data-test-subj="lns-indexPatternDimension-count incompatible"]')
+        .simulate('click');
+      expect(props.setState).toHaveBeenCalledWith({
+        ...props.state,
+        layers: {
+          first: {
+            ...props.state.layers.first,
+            columns: {
+              ...props.state.layers.first.columns,
+              col2: expect.objectContaining({
+                timeScale: 'h',
+                label: 'Count of records per hour',
+              }),
+            },
+          },
+        },
+      });
+    });
+
+    it('should not carry over time scaling if the other operation does not support it', () => {
+      const props = getProps({
+        timeScale: 'h',
+        sourceField: 'bytes',
+        operationType: 'sum',
+        label: 'Sum of bytes per hour',
+      });
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...props} />);
+      wrapper.find('button[data-test-subj="lns-indexPatternDimension-avg"]').simulate('click');
+      expect(props.setState).toHaveBeenCalledWith({
+        ...props.state,
+        layers: {
+          first: {
+            ...props.state.layers.first,
+            columns: {
+              ...props.state.layers.first.columns,
+              col2: expect.objectContaining({
+                timeScale: undefined,
+                label: 'Average of bytes',
+              }),
+            },
+          },
+        },
+      });
+    });
+
+    it('should allow to change time scaling', () => {
+      const props = getProps({ timeScale: 's', label: 'Count of records per second' });
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...props} />);
+      wrapper
+        .find('[data-test-subj="indexPattern-time-scaling-unit"]')
+        .find(EuiSelect)
+        .prop('onChange')!(({
+        target: { value: 'h' },
+      } as unknown) as ChangeEvent<HTMLSelectElement>);
+      expect(props.setState).toHaveBeenCalledWith({
+        ...props.state,
+        layers: {
+          first: {
+            ...props.state.layers.first,
+            columns: {
+              ...props.state.layers.first.columns,
+              col2: expect.objectContaining({
+                timeScale: 'h',
+                label: 'Count of records per hour',
+              }),
+            },
+          },
+        },
+      });
+    });
+
+    it('should not adjust label if it is custom', () => {
+      const props = getProps({ timeScale: 's', customLabel: true, label: 'My label' });
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...props} />);
+      wrapper
+        .find('[data-test-subj="indexPattern-time-scaling-unit"]')
+        .find(EuiSelect)
+        .prop('onChange')!(({
+        target: { value: 'h' },
+      } as unknown) as ChangeEvent<HTMLSelectElement>);
+      expect(props.setState).toHaveBeenCalledWith({
+        ...props.state,
+        layers: {
+          first: {
+            ...props.state.layers.first,
+            columns: {
+              ...props.state.layers.first.columns,
+              col2: expect.objectContaining({
+                timeScale: 'h',
+                label: 'My label',
+              }),
+            },
+          },
+        },
+      });
+    });
+
+    it('should allow to remove time scaling', () => {
+      const props = getProps({ timeScale: 's', label: 'Count of records per second' });
+      wrapper = mount(<IndexPatternDimensionEditorComponent {...props} />);
+      wrapper
+        .find('[data-test-subj="indexPattern-time-scaling-remove"]')
+        .find(EuiButtonIcon)
+        .prop('onClick')!(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        {} as any
+      );
+      expect(props.setState).toHaveBeenCalledWith({
+        ...props.state,
+        layers: {
+          first: {
+            ...props.state.layers.first,
+            columns: {
+              ...props.state.layers.first.columns,
+              col2: expect.objectContaining({
+                timeScale: undefined,
+                label: 'Count of records',
+              }),
+            },
+          },
+        },
+      });
+    });
+  });
+
   it('should render invalid field if field reference is broken', () => {
     wrapper = mount(
       <IndexPatternDimensionEditorComponent
@@ -1024,7 +1251,7 @@ describe('IndexPatternDimensionEditorPanel', () => {
 
     act(() => {
       wrapper.find('[data-test-subj="lns-indexPatternDimension-min"]').first().prop('onClick')!(
-        {} as React.MouseEvent<{}, MouseEvent>
+        {} as MouseEvent
       );
     });