From e10d13fb056fe1e525391133f016b9501ff0dda5 Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Thu, 10 Sep 2020 21:16:07 +0200 Subject: [PATCH] [Lens] Filters aggregation (#75635) --- ...in-plugins-data-public.querystringinput.md | 2 +- .../components/local_nav/_local_search.scss | 7 - src/plugins/data/public/public.api.md | 2 +- .../ui/query_string_input/_query_bar.scss | 23 +- .../query_string_input/query_string_input.tsx | 6 +- .../data/public/ui/typeahead/constants.ts | 2 +- .../ui/typeahead/suggestions_component.tsx | 1 + .../editor_frame/config_panel/_index.scss | 1 - .../config_panel/_layer_panel.scss | 8 + ...on_popover.scss => dimension_popover.scss} | 7 + .../config_panel/dimension_popover.tsx | 2 + .../dimension_panel/bucket_nesting_editor.tsx | 55 +-- .../dimension_panel/popover_editor.tsx | 7 +- .../indexpattern_datasource/indexpattern.tsx | 1 + .../operations/definitions/cardinality.tsx | 6 +- .../operations/definitions/count.tsx | 6 +- .../definitions/filters/filter_popover.scss | 3 + .../filters/filter_popover.test.tsx | 81 +++++ .../definitions/filters/filter_popover.tsx | 193 ++++++++++ .../definitions/filters/filters.scss | 6 + .../definitions/filters/filters.test.tsx | 284 +++++++++++++++ .../definitions/filters/filters.tsx | 341 ++++++++++++++++++ .../operations/definitions/filters/index.tsx | 7 + .../operations/definitions/index.ts | 76 ++-- .../public/indexpattern_datasource/types.ts | 2 +- 25 files changed, 1050 insertions(+), 79 deletions(-) rename x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/{_dimension_popover.scss => dimension_popover.scss} (51%) create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.scss create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.scss create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.test.tsx create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx create mode 100644 x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/index.tsx diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinput.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinput.md index 3dbfd9430e91..cf171d9ee9f3 100644 --- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinput.md +++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinput.md @@ -7,5 +7,5 @@ Signature: ```typescript -QueryStringInput: React.FC> +QueryStringInput: React.FC> ``` diff --git a/packages/kbn-ui-framework/src/components/local_nav/_local_search.scss b/packages/kbn-ui-framework/src/components/local_nav/_local_search.scss index 130807790e98..740ae664c7f5 100644 --- a/packages/kbn-ui-framework/src/components/local_nav/_local_search.scss +++ b/packages/kbn-ui-framework/src/components/local_nav/_local_search.scss @@ -26,13 +26,6 @@ border-radius: 0; border-left-width: 0; } - -.kuiLocalSearchAssistedInput { - display: flex; - flex: 1 1 100%; - position: relative; -} - /** * 1. em used for right padding so documentation link and query string * won't overlap if the user increases their default browser font size diff --git a/src/plugins/data/public/public.api.md b/src/plugins/data/public/public.api.md index c0f5241b3423..628b3763c5b9 100644 --- a/src/plugins/data/public/public.api.md +++ b/src/plugins/data/public/public.api.md @@ -1487,7 +1487,7 @@ export interface QueryStateChange extends QueryStateChangePartial { // Warning: (ae-missing-release-tag) "QueryStringInput" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const QueryStringInput: React.FC>; +export const QueryStringInput: React.FC>; // @public (undocumented) export type QuerySuggestion = QuerySuggestionBasic | QuerySuggestionField; diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss index 00895ec49003..1ff24c61954e 100644 --- a/src/plugins/data/public/ui/query_string_input/_query_bar.scss +++ b/src/plugins/data/public/ui/query_string_input/_query_bar.scss @@ -8,30 +8,37 @@ border-right: none !important; } +.kbnQueryBar__textareaWrap { + overflow: visible !important; // Override EUI form control + display: flex; + flex: 1 1 100%; + position: relative; +} + .kbnQueryBar__textarea { z-index: $euiZContentMenu; resize: none !important; // When in the group, it will autosize - height: $euiSizeXXL; + height: $euiFormControlHeight; // Unlike most inputs within layout control groups, the text area still needs a border. // These adjusts help it sit above the control groups shadow to line up correctly. - padding-top: $euiSizeS + 3px !important; - transform: translateY(-2px); - padding: $euiSizeS - 1px; + padding: $euiSizeS; + padding-top: $euiSizeS + 3px; + transform: translateY(-1px) translateX(-1px); - &:not(:focus) { + &:not(:focus):not(:invalid) { @include euiYScrollWithShadows; + } + + &:not(:focus) { white-space: nowrap; overflow-y: hidden; overflow-x: hidden; - border: none; - box-shadow: none; } // When focused, let it scroll &:focus { overflow-x: auto; overflow-y: auto; - width: calc(100% + 1px); // To overtake the group's fake border white-space: normal; } } diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx index 0bfac2a07a7e..f159cac664a9 100644 --- a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx +++ b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx @@ -19,6 +19,7 @@ import React, { Component, RefObject, createRef } from 'react'; import { i18n } from '@kbn/i18n'; + import classNames from 'classnames'; import { EuiTextArea, @@ -63,6 +64,7 @@ interface Props { dataTestSubj?: string; size?: SuggestionsListSize; className?: string; + isInvalid?: boolean; } interface State { @@ -591,6 +593,7 @@ export class QueryStringInputUI extends Component { 'euiFormControlLayout euiFormControlLayout--group kbnQueryBar__wrap', this.props.className ); + return (
{this.props.prepend} @@ -607,7 +610,7 @@ export class QueryStringInputUI extends Component { >
{ } role="textbox" data-test-subj={this.props.dataTestSubj || 'queryInput'} + isInvalid={this.props.isInvalid} > {this.getQueryString()} diff --git a/src/plugins/data/public/ui/typeahead/constants.ts b/src/plugins/data/public/ui/typeahead/constants.ts index 08f9bd23e16f..0e28891a1453 100644 --- a/src/plugins/data/public/ui/typeahead/constants.ts +++ b/src/plugins/data/public/ui/typeahead/constants.ts @@ -33,4 +33,4 @@ export const SUGGESTIONS_LIST_REQUIRED_BOTTOM_SPACE = 250; * A distance in px to display suggestions list right under the query input without a gap * @public */ -export const SUGGESTIONS_LIST_REQUIRED_TOP_OFFSET = 2; +export const SUGGESTIONS_LIST_REQUIRED_TOP_OFFSET = 1; diff --git a/src/plugins/data/public/ui/typeahead/suggestions_component.tsx b/src/plugins/data/public/ui/typeahead/suggestions_component.tsx index dc7c55374f1d..50ed9e9542d3 100644 --- a/src/plugins/data/public/ui/typeahead/suggestions_component.tsx +++ b/src/plugins/data/public/ui/typeahead/suggestions_component.tsx @@ -154,6 +154,7 @@ export class SuggestionsComponent extends Component { const StyledSuggestionsListDiv = styled.div` ${(props: { queryBarRect: DOMRect; verticalListPosition: string }) => ` position: absolute; + z-index: 4001; left: ${props.queryBarRect.left}px; width: ${props.queryBarRect.width}px; ${props.verticalListPosition}`} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss index 5b968abd0c06..954fbfadf159 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_index.scss @@ -1,3 +1,2 @@ @import 'config_panel'; -@import 'dimension_popover'; @import 'layer_panel'; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss index 62bc6d7ed7cc..ab53ff983ca2 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_layer_panel.scss @@ -43,6 +43,14 @@ min-height: $euiSizeXXL; } +.lnsLayerPanel__anchor { + width: 100%; +} + +.lnsLayerPanel__dndGrab { + padding: $euiSizeS; +} + .lnsLayerPanel__styleEditor { width: $euiSize * 30; padding: $euiSizeS; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_popover.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss similarity index 51% rename from x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_popover.scss rename to x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss index 691cda9ff0d7..98036c7f31bd 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_popover.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.scss @@ -9,3 +9,10 @@ display: block; word-break: break-word; } + +// todo: remove after closing https://github.com/elastic/eui/issues/3548 +.lnsDimensionPopover__fixTranslateDnd { + // sass-lint:disable-block no-important + transform: none !important; +} + diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx index 8d31e1bcc2e6..a90bd8122d18 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_popover.tsx @@ -3,6 +3,7 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ +import './dimension_popover.scss'; import React from 'react'; import { EuiPopover } from '@elastic/eui'; @@ -31,6 +32,7 @@ export function DimensionPopover({ = { + terms: i18n.translate('xpack.lens.indexPattern.groupingOverallTerms', { + defaultMessage: 'Overall top {field}', + values: { field: fieldName }, + }), + filters: i18n.translate('xpack.lens.indexPattern.groupingOverallFilters', { + defaultMessage: 'Top values for each custom query', + }), + date_histogram: i18n.translate('xpack.lens.indexPattern.groupingOverallDateHistogram', { + defaultMessage: 'Top values for each {field}', + values: { field: fieldName }, + }), + }; + + const bottomLevelCopy: Record = { + terms: i18n.translate('xpack.lens.indexPattern.groupingSecondTerms', { + defaultMessage: 'Top values for each {target}', + values: { target: target.fieldName }, + }), + filters: i18n.translate('xpack.lens.indexPattern.groupingSecondFilters', { + defaultMessage: 'Overall top {target}', + values: { target: target.fieldName }, + }), + date_histogram: i18n.translate('xpack.lens.indexPattern.groupingSecondDateHistogram', { + defaultMessage: 'Overall top {target}', + values: { target: target.fieldName }, + }), + }; + return ( <> @@ -73,34 +104,14 @@ export function BucketNestingEditor({ diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx index 038b51b92228..d5f0110f071f 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx @@ -160,6 +160,11 @@ export function PopoverEditor(props: PopoverEditorProps) { compatibleWithCurrentField ? '' : ' incompatible' }`, onClick() { + // todo: when moving from terms agg to filters, we want to create a filter `$field.name : *` + // it probably has to be re-thought when removing the field name. + const isTermsToFilters = + selectedColumn?.operationType === 'terms' && operationType === 'filters'; + if (!selectedColumn || !compatibleWithCurrentField) { const possibleFields = fieldByOperation[operationType] || []; @@ -186,7 +191,7 @@ export function PopoverEditor(props: PopoverEditorProps) { trackUiEvent(`indexpattern_dimension_operation_${operationType}`); return; } - if (incompatibleSelectedOperationType) { + if (incompatibleSelectedOperationType && !isTermsToFilters) { setInvalidOperationType(null); } if (selectedColumn.operationType === operationType) { diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx index e2ca93350484..3b3750cf7c56 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx @@ -263,6 +263,7 @@ export function getIndexPatternDatasource({ data, savedObjects: core.savedObjects, docLinks: core.docLinks, + http: core.http, }} > ({ diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx index 4e081da2c6dc..bb1aef856de7 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/count.tsx @@ -49,7 +49,11 @@ export const countOperation: OperationDefinition = { scale: 'ratio', sourceField: field.name, params: - previousColumn && previousColumn.dataType === 'number' ? previousColumn.params : undefined, + previousColumn?.dataType === 'number' && + previousColumn.params && + 'format' in previousColumn.params + ? previousColumn.params + : undefined, }; }, toEsAggsConfig: (column, columnId) => ({ diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.scss b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.scss new file mode 100644 index 000000000000..6838812e4b99 --- /dev/null +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.scss @@ -0,0 +1,3 @@ +.lnsIndexPatternDimensionEditor__filtersEditor { + width: $euiSize * 60; +} diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx new file mode 100644 index 000000000000..4d4b4018d75a --- /dev/null +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx @@ -0,0 +1,81 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { MouseEventHandler } from 'react'; +import { shallow } from 'enzyme'; +import { act } from 'react-dom/test-utils'; +import { EuiPopover, EuiLink } from '@elastic/eui'; +import { createMockedIndexPattern } from '../../../mocks'; +import { FilterPopover, QueryInput, LabelInput } from './filter_popover'; + +jest.mock('.', () => ({ + isQueryValid: () => true, + defaultLabel: 'label', +})); + +const defaultProps = { + filter: { + input: { query: 'bytes >= 1', language: 'kuery' }, + label: 'More than one', + id: '1', + }, + setFilter: jest.fn(), + indexPattern: createMockedIndexPattern(), + Button: ({ onClick }: { onClick: MouseEventHandler }) => ( + trigger + ), + isOpenByCreation: true, + setIsOpenByCreation: jest.fn(), +}; + +describe('filter popover', () => { + jest.mock('../../../../../../../../src/plugins/data/public', () => ({ + QueryStringInput: () => { + return 'QueryStringInput'; + }, + })); + it('should be open if is open by creation', () => { + const setIsOpenByCreation = jest.fn(); + const instance = shallow( + + ); + expect(instance.find(EuiPopover).prop('isOpen')).toEqual(true); + act(() => { + instance.find(EuiPopover).prop('closePopover')!(); + }); + instance.update(); + expect(setIsOpenByCreation).toHaveBeenCalledWith(false); + }); + it('should call setFilter when modifying QueryInput', () => { + const setFilter = jest.fn(); + const instance = shallow(); + instance.find(QueryInput).prop('onChange')!({ + query: 'modified : query', + language: 'lucene', + }); + expect(setFilter).toHaveBeenCalledWith({ + input: { + language: 'lucene', + query: 'modified : query', + }, + label: 'More than one', + id: '1', + }); + }); + it('should call setFilter when modifying LabelInput', () => { + const setFilter = jest.fn(); + const instance = shallow(); + instance.find(LabelInput).prop('onChange')!('Modified label'); + expect(setFilter).toHaveBeenCalledWith({ + input: { + language: 'kuery', + query: 'bytes >= 1', + }, + label: 'Modified label', + id: '1', + }); + }); +}); diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx new file mode 100644 index 000000000000..cdfa19f53a13 --- /dev/null +++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx @@ -0,0 +1,193 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import './filter_popover.scss'; + +import React, { MouseEventHandler, useState } from 'react'; +import { useDebounce } from 'react-use'; +import { EuiPopover, EuiFieldText, EuiSpacer, keys } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { FilterValue, defaultLabel, isQueryValid } from '.'; +import { IndexPattern } from '../../../types'; +import { QueryStringInput, Query } from '../../../../../../../../src/plugins/data/public'; + +export const FilterPopover = ({ + filter, + setFilter, + indexPattern, + Button, + isOpenByCreation, + setIsOpenByCreation, +}: { + filter: FilterValue; + setFilter: Function; + indexPattern: IndexPattern; + Button: React.FunctionComponent<{ onClick: MouseEventHandler }>; + isOpenByCreation: boolean; + setIsOpenByCreation: Function; +}) => { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const inputRef = React.useRef(); + + const setPopoverOpen = (isOpen: boolean) => { + setIsPopoverOpen(isOpen); + setIsOpenByCreation(isOpen); + }; + + const setFilterLabel = (label: string) => setFilter({ ...filter, label }); + const setFilterQuery = (input: Query) => setFilter({ ...filter, input }); + + const getPlaceholder = (query: Query['query']) => { + if (query === '') { + return defaultLabel; + } + if (query === 'object') return JSON.stringify(query); + else { + return String(query); + } + }; + + return ( + { + setPopoverOpen(false); + }} + button={ +