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
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.
9 changes: 7 additions & 2 deletions src/plugins/expressions/common/expression_functions/series_calculation_helpers.ts
View file
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
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
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.