Skip to content

Commit

Permalink
[Lens] Time scale ui (#83904)
Browse files Browse the repository at this point in the history
  • Loading branch information
flash1293 committed Nov 30, 2020
1 parent 8ca2ab1 commit 522369c
Show file tree
Hide file tree
Showing 22 changed files with 1,066 additions and 51 deletions.
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
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
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

0 comments on commit 522369c

Please sign in to comment.