Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[7.x] [Lens] Normalize values by time unit (#83904) #84520

Merged
merged 1 commit into from
Nov 30, 2020
Merged

[7.x] [Lens] Normalize values by time unit (#83904) #84520

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions src/plugins/expressions/common/expression_functions/series_calculation_helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
36 changes: 34 additions & 2 deletions x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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();

Expand All @@ -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);
Expand Down Expand Up @@ -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 &&
Expand Down
233 changes: 230 additions & 3 deletions x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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');
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -1024,7 +1251,7 @@ describe('IndexPatternDimensionEditorPanel', () => {

act(() => {
wrapper.find('[data-test-subj="lns-indexPatternDimension-min"]').first().prop('onClick')!(
{} as React.MouseEvent<{}, MouseEvent>
{} as MouseEvent
);
});

Expand Down
Loading