maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Lens] Adding compressed to appropriate form inputs (#46239)

Browse source
This commit is contained in:
Caroline Horn 2019-09-25 14:22:26 -04:00 committed by GitHub
parent bca97509d9
commit f88cf340f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 186 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx
View file

@ -469,6 +469,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
/>
<EuiPopoverFooter>
<EuiSwitch
compressed
checked={!showEmptyFields}
onChange={() => {
onToggleEmptyFields();

61
x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/bucket_nesting_editor.tsx
View file

@ -7,7 +7,7 @@
import _ from 'lodash';
import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiFormRow, EuiHorizontalRule, EuiSwitch, EuiSelect, EuiFormLabel } from '@elastic/eui';
import { EuiFormRow, EuiHorizontalRule, EuiSwitch, EuiSelect } from '@elastic/eui';
import { IndexPatternLayer } from '../indexpattern';
function nestColumn(columnOrder: string[], outer: string, inner: string) {
@ -44,39 +44,38 @@ export function BucketNestingEditor({
const [target] = aggColumns;
return (
<EuiFormRow>
<>
<EuiHorizontalRule margin="m" />
<EuiSwitch
data-test-subj="indexPattern-nesting-switch"
label={i18n.translate('xpack.lens.xyChart.nestUnderTarget', {
defaultMessage: 'Nest under {target}',
values: { target: target.text },
})}
checked={!!prevColumn}
onChange={() => {
if (prevColumn) {
setColumns(nestColumn(layer.columnOrder, columnId, target.value));
} else {
setColumns(nestColumn(layer.columnOrder, target.value, columnId));
}
}}
/>
</>
</EuiFormRow>
<>
<EuiHorizontalRule margin="m" />
<EuiSwitch
data-test-subj="indexPattern-nesting-switch"
label={i18n.translate('xpack.lens.xyChart.nestUnderTarget', {
defaultMessage: 'Nest under {target}',
values: { target: target.text },
})}
checked={!!prevColumn}
onChange={() => {
if (prevColumn) {
setColumns(nestColumn(layer.columnOrder, columnId, target.value));
} else {
setColumns(nestColumn(layer.columnOrder, target.value, columnId));
}
}}
/>
</>
);
}
return (
<EuiFormRow>
<>
<EuiHorizontalRule margin="m" />
<EuiFormLabel>
{i18n.translate('xpack.lens.xyChart.nestUnder', {
defaultMessage: 'Nest under',
})}
</EuiFormLabel>
<>
<EuiHorizontalRule margin="m" />
<EuiFormRow
label={i18n.translate('xpack.lens.xyChart.nestUnder', {
defaultMessage: 'Nest under',
})}
display="rowCompressed"
>
<EuiSelect
compressed
data-test-subj="indexPattern-nesting-select"
options={[
{
@ -90,7 +89,7 @@ export function BucketNestingEditor({
value={prevColumn}
onChange={e => setColumns(nestColumn(layer.columnOrder, e.target.value, columnId))}
/>
</>
</EuiFormRow>
</EuiFormRow>
</>
);
}

1
x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/field_select.tsx
View file

@ -139,6 +139,7 @@ export function FieldSelect({
return (
<EuiComboBox
fullWidth
compressed
data-test-subj="indexPattern-dimension-field"
placeholder={i18n.translate('xpack.lens.indexPattern.fieldPlaceholder', {
defaultMessage: 'Field',

29
x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx
View file

@ -19,6 +19,7 @@ import {
EuiLink,
EuiButtonIcon,
EuiTextColor,
EuiSpacer,
} from '@elastic/eui';
import classNames from 'classnames';
import {
@ -333,6 +334,7 @@ export function PopoverEditor(props: PopoverEditorProps) {
})}
color="danger"
iconType="cross"
size="s"
>
<p>
<FormattedMessage
@ -353,17 +355,20 @@ export function PopoverEditor(props: PopoverEditorProps) {
></EuiCallOut>
)}
{!incompatibleSelectedOperationType && ParamEditor && (
<ParamEditor
state={state}
setState={setState}
columnId={columnId}
currentColumn={state.layers[layerId].columns[columnId]}
storage={props.storage}
uiSettings={props.uiSettings}
savedObjectsClient={props.savedObjectsClient}
layerId={layerId}
http={props.http}
/>
<>
<ParamEditor
state={state}
setState={setState}
columnId={columnId}
currentColumn={state.layers[layerId].columns[columnId]}
storage={props.storage}
uiSettings={props.uiSettings}
savedObjectsClient={props.savedObjectsClient}
layerId={layerId}
http={props.http}
/>
<EuiSpacer size="m" />
</>
)}
{!incompatibleSelectedOperationType && selectedColumn && (
<EuiFormRow
@ -371,8 +376,10 @@ export function PopoverEditor(props: PopoverEditorProps) {
defaultMessage: 'Label',
description: 'Label of a column of data',
})}
display="rowCompressed"
>
<EuiFieldText
compressed
data-test-subj="indexPattern-label-edit"
value={selectedColumn.label}
onChange={e => {

76
x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.test.tsx
View file

@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import React, { ReactElement } from 'react';
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import { act } from 'react-dom/test-utils';
import { FilterRatioIndexPatternColumn } from './filter_ratio';
@ -18,6 +18,7 @@ import {
} from 'src/core/public';
import { QueryBarInput } from '../../../../../../../../src/legacy/core_plugins/data/public/query';
import { createMockedIndexPattern } from '../../mocks';
import { EuiFormRow } from '@elastic/eui';
jest.mock('ui/new_platform');
@ -195,8 +196,13 @@ describe('filter_ratio', () => {
/>
);
const formRow = wrapper
.find('[data-test-subj="lns-indexPatternFilterRatio-dividedByRow"]')
.find(EuiFormRow);
const labelAppend = shallowWithIntl(formRow.prop('labelAppend') as ReactElement);
act(() => {
wrapper
labelAppend
.find('[data-test-subj="lns-indexPatternFilterRatio-showDenominatorButton"]')
.first()
.simulate('click');
@ -232,4 +238,70 @@ describe('filter_ratio', () => {
});
});
});
it('should allow removing a set denominator', () => {
const setState = jest.fn();
const currentColumn: FilterRatioIndexPatternColumn = {
...(state.layers.first.columns.col1 as FilterRatioIndexPatternColumn),
params: {
numerator: { query: 'a: 123', language: 'kuery' },
denominator: { query: 'b: 123', language: 'kuery' },
},
};
const wrapper = shallowWithIntl(
<InlineOptions
layerId="first"
state={{
...state,
layers: {
first: {
...state.layers.first,
columns: {
col1: currentColumn,
},
},
},
}}
setState={setState}
columnId="col1"
currentColumn={currentColumn}
storage={storageMock}
uiSettings={{} as UiSettingsClientContract}
savedObjectsClient={{} as SavedObjectsClientContract}
http={{} as HttpServiceBase}
/>
);
const formRow = wrapper
.find('[data-test-subj="lns-indexPatternFilterRatio-dividedByRow"]')
.find(EuiFormRow);
const labelAppend = shallowWithIntl(formRow.prop('labelAppend') as ReactElement);
act(() => {
labelAppend
.find('[data-test-subj="lns-indexPatternFilterRatio-hideDenominatorButton"]')
.first()
.simulate('click');
});
expect(setState).toHaveBeenCalledWith({
...state,
layers: {
...state.layers,
first: {
...state.layers.first,
columns: {
col1: {
...state.layers.first.columns.col1,
params: {
numerator: { query: 'a: 123', language: 'kuery' },
denominator: { query: '', language: 'kuery' },
},
},
},
},
},
});
});
});

78
x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.tsx
View file

@ -7,7 +7,8 @@
import React, { useState } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiButton, EuiFormRow } from '@elastic/eui';
import { EuiFormRow, EuiFieldText, EuiLink, EuiText } from '@elastic/eui';
import { isEqual } from 'lodash';
import {
Query,
QueryBarInput,
@ -28,6 +29,8 @@ export interface FilterRatioIndexPatternColumn extends BaseIndexPatternColumn {
};
}
const initialQuery = { language: 'kuery', query: '' };
export const filterRatioOperation: OperationDefinition<FilterRatioIndexPatternColumn> = {
type: 'filter_ratio',
priority: 1,
@ -50,8 +53,8 @@ export const filterRatioOperation: OperationDefinition<FilterRatioIndexPatternCo
isBucketed: false,
scale: 'ratio',
params: {
numerator: { language: 'kuery', query: '' },
denominator: { language: 'kuery', query: '' },
numerator: initialQuery,
denominator: initialQuery,
},
};
},
@ -87,7 +90,9 @@ export const filterRatioOperation: OperationDefinition<FilterRatioIndexPatternCo
savedObjectsClient,
http,
}) => {
const [hasDenominator, setDenominator] = useState(false);
const [hasDenominator, setDenominator] = useState(
!isEqual(currentColumn.params.denominator, initialQuery)
);
return (
<div>
@ -123,6 +128,43 @@ export const filterRatioOperation: OperationDefinition<FilterRatioIndexPatternCo
label={i18n.translate('xpack.lens.indexPattern.filterRatioDividesLabel', {
defaultMessage: 'Divided by:',
})}
data-test-subj="lns-indexPatternFilterRatio-dividedByRow"
labelAppend={
<EuiText size="xs">
{hasDenominator ? (
<EuiLink
data-test-subj="lns-indexPatternFilterRatio-hideDenominatorButton"
onClick={() => {
setDenominator(false);
setState(
updateColumnParam({
state,
layerId,
currentColumn,
paramName: 'denominator',
value: initialQuery,
})
);
}}
>
<FormattedMessage
id="xpack.lens.indexPattern.filterRatioUseDocumentsButton"
defaultMessage="Use count of documents"
/>
</EuiLink>
) : (
<EuiLink
data-test-subj="lns-indexPatternFilterRatio-showDenominatorButton"
onClick={() => setDenominator(true)}
>
<FormattedMessage
id="xpack.lens.indexPattern.filterRatioUseDenominatorButton"
defaultMessage="Use filter"
/>
</EuiLink>
)}
</EuiText>
}
>
{hasDenominator ? (
<QueryBarInput
@ -147,25 +189,15 @@ export const filterRatioOperation: OperationDefinition<FilterRatioIndexPatternCo
}}
/>
) : (
<>
<FormattedMessage
id="xpack.lens.indexPattern.filterRatioDefaultDenominator"
defaultMessage="Count of documents"
/>
<EuiFormRow>
<EuiButton
data-test-subj="lns-indexPatternFilterRatio-showDenominatorButton"
fill
onClick={() => setDenominator(true)}
>
<FormattedMessage
id="xpack.lens.indexPattern.filterRatioUseDenominatorButton"
defaultMessage="Divide by filter instead"
/>
</EuiButton>
</EuiFormRow>
</>
<EuiFieldText
readOnly
defaultValue={i18n.translate(
'xpack.lens.indexPattern.filterRatioDefaultDenominator',
{
defaultMessage: 'Count of documents',
}
)}
/>
)}
</EuiFormRow>
</div>

7
x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/terms.tsx
View file

@ -175,6 +175,7 @@ export const termsOperation: OperationDefinition<TermsIndexPatternColumn> = {
label={i18n.translate('xpack.lens.indexPattern.terms.size', {
defaultMessage: 'Number of values',
})}
display="columnCompressed"
>
<FixedEuiRange
min={1}
@ -182,6 +183,8 @@ export const termsOperation: OperationDefinition<TermsIndexPatternColumn> = {
step={1}
value={currentColumn.params.size}
showInput
showLabels
compressed
onChange={(
e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>
) =>
@ -204,8 +207,10 @@ export const termsOperation: OperationDefinition<TermsIndexPatternColumn> = {
label={i18n.translate('xpack.lens.indexPattern.terms.orderBy', {
defaultMessage: 'Order by',
})}
display="columnCompressed"
>
<EuiSelect
compressed
data-test-subj="indexPattern-terms-orderBy"
options={orderOptions}
value={toValue(currentColumn.params.orderBy)}
@ -229,8 +234,10 @@ export const termsOperation: OperationDefinition<TermsIndexPatternColumn> = {
label={i18n.translate('xpack.lens.indexPattern.terms.orderDirection', {
defaultMessage: 'Order direction',
})}
display="columnCompressed"
>
<EuiSelect
compressed
data-test-subj="indexPattern-terms-orderDirection"
options={[
{