From 6478960de73e4347eb0b2fd08060d6326ba9ca86 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Wed, 5 May 2021 18:11:25 +0100 Subject: [PATCH 01/23] [Discover] Render empty embeddable --- package.json | 1 - .../embeddable/saved_search_embeddable.tsx | 139 ++++++++++++++++++ .../saved_search_embeddable_component.tsx | 35 +++++ .../embeddable/search_embeddable_factory.ts | 14 +- 4 files changed, 182 insertions(+), 7 deletions(-) create mode 100644 src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx create mode 100644 src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx diff --git a/package.json b/package.json index a2499d85247d73..768b8fed897d26 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,6 @@ "kbn:watch": "node scripts/kibana --dev --logging.json=false", "build:types": "rm -rf ./target/types && tsc --p tsconfig.types.json", "docs:acceptApiChanges": "node --max-old-space-size=6144 scripts/check_published_api_changes.js --accept", - "kbn:bootstrap": "node scripts/build_ts_refs --ignore-type-failures", "spec_to_console": "node scripts/spec_to_console", "backport-skip-ci": "backport --prDescription \"[skip-ci]\"", "storybook": "node scripts/storybook", diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx new file mode 100644 index 00000000000000..3bfa1ca9eaa7f4 --- /dev/null +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx @@ -0,0 +1,139 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { Subscription } from 'rxjs'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import { Container, Embeddable } from '../../../../embeddable/public'; +import { ISearchEmbeddable, SearchInput, SearchOutput } from './types'; +import { SavedSearch } from '../../saved_searches'; +import { Adapters, RequestAdapter } from '../../../../inspector/common'; +import { ISearchSource } from '../../../../data/common'; +import { SEARCH_EMBEDDABLE_TYPE } from './constants'; +import { FilterManager } from '../../../../data/public'; +import { DiscoverServices } from '../../build_services'; +import { Query, TimeRange } from '../../../../data/common/query'; +import { Filter } from '../../../../data/common/es_query/filters'; +import { DiscoverGridSettings } from '../components/discover_grid/types'; +import { SortOrder } from '../angular/doc_table/components/table_header/helpers'; +import { IFieldType } from '../../../../data/common/index_patterns/fields'; +import { ElasticSearchHit } from '../doc_views/doc_views_types'; +import { IndexPattern } from '../../../../data/common/index_patterns/index_patterns'; +import { SavedSearchEmbeddableComponent } from './saved_search_embeddable_component'; +import { UiActionsStart } from '../../../../ui_actions/public'; + +interface SearchProps { + columns?: string[]; + settings?: DiscoverGridSettings; + description?: string; + sort?: SortOrder[]; + sharedItemTitle?: string; + inspectorAdapters?: Adapters; + setSortOrder?: (sortPair: SortOrder[]) => void; + setColumns?: (columns: string[]) => void; + removeColumn?: (column: string) => void; + addColumn?: (column: string) => void; + moveColumn?: (column: string, index: number) => void; + filter?: (field: IFieldType, value: string[], operator: string) => void; + hits?: ElasticSearchHit[]; + indexPattern?: IndexPattern; + totalHitCount?: number; + isLoading?: boolean; + showTimeCol?: boolean; + useNewFieldsApi?: boolean; +} + +interface SearchEmbeddableConfig { + savedSearch: SavedSearch; + editUrl: string; + editPath: string; + indexPatterns?: IndexPattern[]; + editable: boolean; + filterManager: FilterManager; + services: DiscoverServices; +} + +export class SavedSearchEmbeddable + extends Embeddable + implements ISearchEmbeddable { + private readonly savedSearch: SavedSearch; + private inspectorAdapters: Adapters; + private searchScope?: SearchProps; + private panelTitle: string = ''; + private filtersSearchSource?: ISearchSource; + private searchInstance?: JQLite; + private subscription?: Subscription; + public readonly type = SEARCH_EMBEDDABLE_TYPE; + private filterManager: FilterManager; + private abortController?: AbortController; + private services: DiscoverServices; + + private prevTimeRange?: TimeRange; + private prevFilters?: Filter[]; + private prevQuery?: Query; + private prevSearchSessionId?: string; + reload(): void {} + + private node?: HTMLElement; + constructor( + { + savedSearch, + editUrl, + editPath, + indexPatterns, + editable, + filterManager, + services, + }: SearchEmbeddableConfig, + initialInput: SearchInput, + private readonly executeTriggerActions: UiActionsStart['executeTriggerActions'], + parent?: Container + ) { + super( + initialInput, + { + defaultTitle: savedSearch.title, + editUrl, + editPath, + editApp: 'discover', + indexPatterns, + editable, + }, + parent + ); + this.services = services; + this.filterManager = filterManager; + this.savedSearch = savedSearch; + this.inspectorAdapters = { + requests: new RequestAdapter(), + }; + } + + /** + * + * @param {Element} domNode + */ + public render(domNode: HTMLElement) { + if (this.node) { + ReactDOM.unmountComponentAtNode(this.node); + } + this.node = domNode; + ReactDOM.render( + , + domNode + ); + } + + getSavedSearch(): SavedSearch { + return this.savedSearch; + } + + public getInspectorAdapters() { + return this.inspectorAdapters; + } +} diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx new file mode 100644 index 00000000000000..5375b683d48984 --- /dev/null +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx @@ -0,0 +1,35 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import { withEmbeddableSubscription } from '../../../../embeddable/public'; +import { SearchInput, SearchOutput } from './types'; +import { SavedSearchEmbeddable } from './saved_search_embeddable'; +import { DiscoverGridEmbeddable } from '../components/create_discover_grid_directive'; + +interface Props { + input: SearchInput; + output: SearchOutput; + embeddable: SavedSearchEmbeddable; +} + +export function SavedSearchEmbeddableComponentInner({ + input: { search }, + output: { attributes }, + props, + embeddable, +}: Props) { + return ; +} + +export const SavedSearchEmbeddableComponent = withEmbeddableSubscription< + SearchInput, + SearchOutput, + SavedSearchEmbeddable, + {} +>(SavedSearchEmbeddableComponentInner); diff --git a/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts b/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts index 77da138d118dd0..c242be9dadb9d7 100644 --- a/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts +++ b/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts @@ -20,6 +20,7 @@ import { TimeRange } from '../../../../data/public'; import { SearchInput, SearchOutput, SearchEmbeddable } from './types'; import { SEARCH_EMBEDDABLE_TYPE } from './constants'; +import { SavedSearchEmbeddable } from './saved_search_embeddable'; interface StartServices { executeTriggerActions: UiActionsStart['executeTriggerActions']; @@ -27,7 +28,7 @@ interface StartServices { } export class SearchEmbeddableFactory - implements EmbeddableFactoryDefinition { + implements EmbeddableFactoryDefinition { public readonly type = SEARCH_EMBEDDABLE_TYPE; private $injector: auto.IInjectorService | null; private getInjector: () => Promise | null; @@ -65,7 +66,7 @@ export class SearchEmbeddableFactory savedObjectId: string, input: Partial & { id: string; timeRange: TimeRange }, parent?: Container - ): Promise => { + ): Promise => { if (!this.$injector) { this.$injector = await this.getInjector(); } @@ -81,12 +82,13 @@ export class SearchEmbeddableFactory const savedObject = await getServices().getSavedSearchById(savedObjectId); const indexPattern = savedObject.searchSource.getField('index'); const { executeTriggerActions } = await this.getStartServices(); - const { SearchEmbeddable: SearchEmbeddableClass } = await import('./search_embeddable'); - return new SearchEmbeddableClass( + // const { SearchEmbeddable: SearchEmbeddableClass } = await import('./search_embeddable'); + const { SavedSearchEmbeddable: SavedSearchEmbeddableClass } = await import( + './saved_search_embeddable' + ); + return new SavedSearchEmbeddableClass( { savedSearch: savedObject, - $rootScope, - $compile, editUrl, editPath: url, filterManager, From c796fdfeee83694f090a7f8dd29c9b7f1f1803b1 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Fri, 14 May 2021 12:52:12 +0100 Subject: [PATCH 02/23] First version of grid embeddable --- .../create_discover_grid_directive.tsx | 1 + .../discover_grid/discover_grid.tsx | 7 + .../embeddable/saved_search_embeddable.tsx | 249 +++++++++++++++++- .../saved_search_embeddable_component.tsx | 3 +- .../embeddable/search_embeddable_factory.ts | 1 + 5 files changed, 256 insertions(+), 5 deletions(-) diff --git a/src/plugins/discover/public/application/components/create_discover_grid_directive.tsx b/src/plugins/discover/public/application/components/create_discover_grid_directive.tsx index 39a9df89260238..820d2484ef7c0e 100644 --- a/src/plugins/discover/public/application/components/create_discover_grid_directive.tsx +++ b/src/plugins/discover/public/application/components/create_discover_grid_directive.tsx @@ -51,5 +51,6 @@ export function createDiscoverGridDirective(reactDirective: any) { ['settings', { watchDepth: 'reference' }], ['showTimeCol', { watchDepth: 'value' }], ['sort', { watchDepth: 'value' }], + ['className', { watchDepth: 'value' }], ]); } diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx index 65a6ee80564e9f..bf8fe8469f0d6d 100644 --- a/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx +++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx @@ -144,6 +144,10 @@ export interface DiscoverGridProps { * List of used control columns (available: 'openDetails', 'select') */ controlColumnIds?: string[]; + /** + * Optional class name to apply + */ + className?: string; } export const EuiDataGridMemoized = React.memo((props: EuiDataGridProps) => { @@ -175,6 +179,7 @@ export const DiscoverGrid = ({ isSortEnabled = true, isPaginationEnabled = true, controlColumnIds = ['openDetails', 'select'], + className, }: DiscoverGridProps) => { const [selectedDocs, setSelectedDocs] = useState([]); const [isFilterActive, setIsFilterActive] = useState(false); @@ -284,6 +289,7 @@ export const DiscoverGrid = ({ ), [displayedColumns, indexPattern, showTimeCol, settings, defaultColumns, isSortEnabled] ); + const schemaDetectors = useMemo(() => getSchemaDetectors(), []); const columnsVisibility = useMemo( () => ({ @@ -368,6 +374,7 @@ export const DiscoverGrid = ({ data-title={searchTitle} data-description={searchDescription} data-document-number={displayedRows.length} + className={className || ''} > { + this.panelTitle = this.output.title || ''; + + if (this.searchProps) { + this.pushContainerStateParamsToProps(this.searchProps); + } + }); + } + + private fetch = async () => { + const searchSessionId = this.input.searchSessionId; + const useNewFieldsApi = !this.services.uiSettings.get(SEARCH_FIELDS_FROM_SOURCE, false); + + const { searchSource } = this.savedSearch; + + // Abort any in-progress requests + if (this.abortController) this.abortController.abort(); + this.abortController = new AbortController(); + + searchSource.setField('size', this.services.uiSettings.get(SAMPLE_SIZE_SETTING)); + searchSource.setField( + 'sort', + getSortForSearchSource( + this.searchProps!.sort, + this.searchProps!.indexPattern, + this.services.uiSettings.get(SORT_DEFAULT_ORDER_SETTING) + ) + ); + if (useNewFieldsApi) { + searchSource.removeField('fieldsFromSource'); + const fields: Record = { field: '*', include_unmapped: 'true' }; + searchSource.setField('fields', [fields]); + } else { + searchSource.removeField('fields'); + if (this.searchProps.indexPattern) { + const fieldNames = this.searchProps.indexPattern.fields.map((field) => field.name); + searchSource.setField('fieldsFromSource', fieldNames); + } + } + + // Log request to inspector + this.inspectorAdapters.requests!.reset(); + + this.searchProps!.isLoading = true; + + this.updateOutput({ loading: true, error: undefined }); + + try { + // Make the request + const { rawResponse: resp } = await searchSource + .fetch$({ + abortSignal: this.abortController.signal, + sessionId: searchSessionId, + inspector: { + adapter: this.inspectorAdapters.requests, + title: i18n.translate('discover.embeddable.inspectorRequestDataTitle', { + defaultMessage: 'Data', + }), + description: i18n.translate('discover.embeddable.inspectorRequestDescription', { + defaultMessage: + 'This request queries Elasticsearch to fetch the data for the search.', + }), + }, + }) + .toPromise(); + this.updateOutput({ loading: false, error: undefined }); + + this.searchProps!.rows = resp.hits.hits; + this.searchProps!.totalHitCount = resp.hits.total as number; + this.searchProps!.isLoading = false; + } catch (error) { + this.updateOutput({ loading: false, error }); + + this.searchProps!.isLoading = false; + } + }; + + private initializeSearchEmbeddableProps() { + const { searchSource, columns } = this.savedSearch; + debugger; + const indexPattern = searchSource.getField('index'); + + if (!this.savedSearch.sort || !this.savedSearch.sort.length) { + this.savedSearch.sort = getDefaultSort( + indexPattern, + getServices().uiSettings.get(SORT_DEFAULT_ORDER_SETTING, 'desc') + ); + } + + const props = { + columns: this.savedSearch.columns, + indexPattern, + sort: getDefaultSort( + indexPattern, + getServices().uiSettings.get(SORT_DEFAULT_ORDER_SETTING, 'desc') + ), + isLoading: false, + rows: [], + searchDescription: this.savedSearch.description, + description: this.savedSearch.description, + inspectorAdapters: this.inspectorAdapters, + searchTitle: this.savedSearch.lastSavedTitle, + services: this.services, + onFilter: () => {}, + useNewFieldsApi: true, + onSetColumns: () => {}, + onSort: () => {}, + onResize: () => {}, + showTimeCol: true, + ariaLabelledBy: 'documentsAriaLabel', + className: 'dscDiscoverGrid', + }; + + const timeRangeSearchSource = searchSource.create(); + timeRangeSearchSource.setField('filter', () => { + if (!this.searchProps || !this.input.timeRange) return; + return this.services.timefilter.createFilter(indexPattern, this.input.timeRange); + }); + + this.filtersSearchSource = searchSource.create(); + this.filtersSearchSource.setParent(timeRangeSearchSource); + + searchSource.setParent(this.filtersSearchSource); + + this.searchProps = props; + + this.pushContainerStateParamsToProps(props, {forceFetch: true}); + + props.setSortOrder = (sort: SortOrder[]) => { + this.updateInput({ sort }); + }; + + props.isLoading = true; + + props.setColumns = (columns: string[]) => { + this.updateInput({ columns }); + }; + + props.onAddColumn = (columnName: string) => { + if (!columns) { + return; + } + const updatedColumns = columnActions.addColumn(columns, columnName, true); + this.updateInput({ columns: updatedColumns }); + }; + + props.onRemoveColumn = (columnName: string) => { + if (!columns) { + return; + } + const updatedColumns = columnActions.removeColumn(columns, columnName, true); + this.updateInput({ columns: updatedColumns }); + }; + props.sampleSize = 500; + + props.isLoading = true; + if (this.savedSearch.grid) { + props.settings = this.savedSearch.grid; + } + + return props; + } + + private async pushContainerStateParamsToProps( + searchProps: SearchProps, + { forceFetch = false }: { forceFetch: boolean } = { forceFetch: false } + ) { + const isFetchRequired = + !esFilters.onlyDisabledFiltersChanged(this.input.filters, this.prevFilters) || + !_.isEqual(this.prevQuery, this.input.query) || + !_.isEqual(this.prevTimeRange, this.input.timeRange) || + !_.isEqual(searchProps.sort, this.input.sort || this.savedSearch.sort) || + this.prevSearchSessionId !== this.input.searchSessionId; + + // If there is column or sort data on the panel, that means the original columns or sort settings have + // been overridden in a dashboard. + searchProps.columns = handleSourceColumnState( + { columns: this.input.columns || this.savedSearch.columns }, + this.services.core.uiSettings + ).columns; + if (!this.columns || (this.columns.length === 0 && searchProps.columns.length > 0)) { + this.columns = searchProps.columns; + } + const savedSearchSort = + this.savedSearch.sort && this.savedSearch.sort.length + ? this.savedSearch.sort + : getDefaultSort( + this.searchProps?.indexPattern, + getServices().uiSettings.get(SORT_DEFAULT_ORDER_SETTING, 'desc') + ); + searchProps.sort = this.input.sort || savedSearchSort; + searchProps.sharedItemTitle = this.panelTitle; + if (forceFetch || isFetchRequired) { + this.filtersSearchSource!.setField('filter', this.input.filters); + this.filtersSearchSource!.setField('query', this.input.query); + if (this.input.query?.query || this.input.filters?.length) { + this.filtersSearchSource!.setField('highlightAll', true); + } else { + this.filtersSearchSource!.removeField('highlightAll'); + } + + this.prevFilters = this.input.filters; + this.prevQuery = this.input.query; + this.prevTimeRange = this.input.timeRange; + this.prevSearchSessionId = this.input.searchSessionId; + await this.fetch(); + await this.rerenderComponent(this.node); + } /* else if (this.searchProps) { + // trigger a digest cycle to make sure non-fetch relevant changes are propagated + //this.searchScope.$applyAsync();?? + }*/ } /** * * @param {Element} domNode */ - public render(domNode: HTMLElement) { + public async render(domNode: HTMLElement) { if (this.node) { ReactDOM.unmountComponentAtNode(this.node); } this.node = domNode; + await this.rerenderComponent(this.node); + } + + private async rerenderComponent(domNode: HTMLElement) { + await this.pushContainerStateParamsToProps(this.searchProps); + this.searchProps.columns = this.columns; ReactDOM.render( - , + , domNode ); } + public reload() { + if (this.searchProps) + this.pushContainerStateParamsToProps(this.searchProps, { forceFetch: true }); + } + getSavedSearch(): SavedSearch { return this.savedSearch; } diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx index 5375b683d48984..c69d44fba32096 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx @@ -21,9 +21,10 @@ interface Props { export function SavedSearchEmbeddableComponentInner({ input: { search }, output: { attributes }, - props, embeddable, + props, }: Props) { + debugger; return ; } diff --git a/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts b/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts index c242be9dadb9d7..7b03ce3d8a922b 100644 --- a/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts +++ b/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts @@ -80,6 +80,7 @@ export class SearchEmbeddableFactory const editUrl = getServices().addBasePath(`/app/discover${url}`); try { const savedObject = await getServices().getSavedSearchById(savedObjectId); + debugger; const indexPattern = savedObject.searchSource.getField('index'); const { executeTriggerActions } = await this.getStartServices(); // const { SearchEmbeddable: SearchEmbeddableClass } = await import('./search_embeddable'); From b7bbfb345229802f8a03a21760b8c63d6e897991 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Sun, 23 May 2021 17:23:58 +0100 Subject: [PATCH 03/23] More search embeddable --- .../doc_table/create_doc_table_react.tsx | 11 +++++++++++ .../components/create_discover_directive.ts | 1 + .../application/components/discover.tsx | 2 +- .../embeddable/saved_search_embeddable.tsx | 19 ++++++------------- .../saved_search_embeddable_component.tsx | 8 ++++++-- .../embeddable/search_embeddable_factory.ts | 1 - 6 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx index b8e8bf1fe7d6ce..5d2cf145af3816 100644 --- a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx +++ b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx @@ -12,9 +12,11 @@ import React, { useRef, useEffect, useState, useCallback } from 'react'; import type { estypes } from '@elastic/elasticsearch'; import { EuiButtonEmpty } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; +import { I18nProvider } from '@kbn/i18n/react'; import { getServices, IIndexPattern } from '../../../kibana_services'; import { IndexPatternField } from '../../../../../data/common/index_patterns'; import { SkipBottomButton } from '../../components/skip_bottom_button'; +import { DocTableLegacyMemoized } from '../../components/discover'; export interface DocTableLegacyProps { columns: string[]; @@ -98,6 +100,15 @@ function getRenderFn(domNode: Element, props: any) { }; } +export function DiscoverDocTableEmbeddable(props: DocTableLegacyProps) { + console.dir(props.className); + return ( + + + + ); +} + export function DocTableLegacy(renderProps: DocTableLegacyProps) { const ref = useRef(null); const scope = useRef(); diff --git a/src/plugins/discover/public/application/components/create_discover_directive.ts b/src/plugins/discover/public/application/components/create_discover_directive.ts index 049c9ac177eeab..597e48167ce3e2 100644 --- a/src/plugins/discover/public/application/components/create_discover_directive.ts +++ b/src/plugins/discover/public/application/components/create_discover_directive.ts @@ -5,6 +5,7 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ + import { Discover } from './discover'; // eslint-disable-next-line @typescript-eslint/no-explicit-any diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index f962c56cc4690c..f37f28fae7cc38 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -49,7 +49,7 @@ import { addHelpMenuToAppChrome } from './help_menu/help_menu_util'; import { InspectorSession } from '../../../../inspector/public'; import { useDataGridColumns } from '../helpers/use_data_grid_columns'; -const DocTableLegacyMemoized = React.memo(DocTableLegacy); +export const DocTableLegacyMemoized = React.memo(DocTableLegacy); const SidebarMemoized = React.memo(DiscoverSidebarResponsive); const DataGridMemoized = React.memo(DiscoverGrid); const TopNavMemoized = React.memo(DiscoverTopNav); diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx index 071cfe90c44dab..f9e64daf93c9db 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx @@ -39,7 +39,7 @@ import * as columnActions from '../angular/doc_table/actions/columns'; import { getSortForSearchSource } from '../angular/doc_table'; import { handleSourceColumnState } from '../angular/helpers'; -interface SearchProps { +interface SearchProps extends SavedSearch { columns?: string[]; settings?: DiscoverGridSettings; description?: string; @@ -77,7 +77,6 @@ export class SavedSearchEmbeddable private inspectorAdapters: Adapters; private panelTitle: string = ''; private filtersSearchSource?: ISearchSource; - private searchInstance?: JQLite; private subscription?: Subscription; public readonly type = SEARCH_EMBEDDABLE_TYPE; private filterManager: FilterManager; @@ -89,7 +88,7 @@ export class SavedSearchEmbeddable private prevQuery?: Query; private prevSearchSessionId?: string; private searchProps: SearchProps; - private columns; + reload(): void {} private node?: HTMLElement; @@ -206,7 +205,7 @@ export class SavedSearchEmbeddable private initializeSearchEmbeddableProps() { const { searchSource, columns } = this.savedSearch; - debugger; + const indexPattern = searchSource.getField('index'); if (!this.savedSearch.sort || !this.savedSearch.sort.length) { @@ -237,7 +236,6 @@ export class SavedSearchEmbeddable onResize: () => {}, showTimeCol: true, ariaLabelledBy: 'documentsAriaLabel', - className: 'dscDiscoverGrid', }; const timeRangeSearchSource = searchSource.create(); @@ -253,7 +251,7 @@ export class SavedSearchEmbeddable this.searchProps = props; - this.pushContainerStateParamsToProps(props, {forceFetch: true}); + this.pushContainerStateParamsToProps(props, { forceFetch: true }); props.setSortOrder = (sort: SortOrder[]) => { this.updateInput({ sort }); @@ -286,8 +284,6 @@ export class SavedSearchEmbeddable if (this.savedSearch.grid) { props.settings = this.savedSearch.grid; } - - return props; } private async pushContainerStateParamsToProps( @@ -307,9 +303,7 @@ export class SavedSearchEmbeddable { columns: this.input.columns || this.savedSearch.columns }, this.services.core.uiSettings ).columns; - if (!this.columns || (this.columns.length === 0 && searchProps.columns.length > 0)) { - this.columns = searchProps.columns; - } + const savedSearchSort = this.savedSearch.sort && this.savedSearch.sort.length ? this.savedSearch.sort @@ -349,12 +343,11 @@ export class SavedSearchEmbeddable ReactDOM.unmountComponentAtNode(this.node); } this.node = domNode; - await this.rerenderComponent(this.node); } private async rerenderComponent(domNode: HTMLElement) { + this.searchProps.useLegacyTable = this.services.uiSettings.get('doc_table:legacy'); await this.pushContainerStateParamsToProps(this.searchProps); - this.searchProps.columns = this.columns; ReactDOM.render( ; + const { useLegacyTable } = props; + if (useLegacyTable) { + return ; + } + return ; } export const SavedSearchEmbeddableComponent = withEmbeddableSubscription< diff --git a/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts b/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts index 7b03ce3d8a922b..c242be9dadb9d7 100644 --- a/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts +++ b/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts @@ -80,7 +80,6 @@ export class SearchEmbeddableFactory const editUrl = getServices().addBasePath(`/app/discover${url}`); try { const savedObject = await getServices().getSavedSearchById(savedObjectId); - debugger; const indexPattern = savedObject.searchSource.getField('index'); const { executeTriggerActions } = await this.getStartServices(); // const { SearchEmbeddable: SearchEmbeddableClass } = await import('./search_embeddable'); From 3ad0532cfb079ce270baf206de721d1f792db6a4 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Tue, 25 May 2021 10:54:06 +0100 Subject: [PATCH 04/23] Almost stable version --- .../doc_table/create_doc_table_embeddable.tsx | 94 ++++++++++++ .../doc_table/create_doc_table_react.tsx | 11 -- .../application/components/discover.tsx | 2 +- .../discover_grid/discover_grid.tsx | 4 + .../embeddable/saved_search_embeddable.tsx | 138 +++++++++++------- .../saved_search_embeddable_component.tsx | 37 ++--- 6 files changed, 200 insertions(+), 86 deletions(-) create mode 100644 src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx diff --git a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx new file mode 100644 index 00000000000000..95dbec2e2230be --- /dev/null +++ b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx @@ -0,0 +1,94 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { render } from 'react-dom'; +import React, { useRef, useEffect, useState } from 'react'; +import { I18nProvider } from '@kbn/i18n/react'; +import { getServices } from '../../../kibana_services'; +import { AngularScope, DocTableLegacyProps, injectAngularElement } from './create_doc_table_react'; + +export interface DocTableEmbeddableProps extends Partial { + refs: HTMLElement; +} + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +function getRenderFn(domNode: Element, props: any) { + const directive = { + template: ``, + }; + + return async () => { + try { + const injector = await getServices().getEmbeddableInjector(); + return await injectAngularElement(domNode, directive.template, props, injector); + } catch (e) { + render(
error
, domNode); + } + }; +} + +export function DiscoverDocTableEmbeddable(props: DocTableEmbeddableProps) { + return ( + + + + ); +} + +function DocTableLegacyInner(renderProps: DocTableEmbeddableProps) { + const scope = useRef(); + const [rows, setRows] = useState(renderProps.rows); + const [minimumVisibleRows, setMinimumVisibleRows] = useState(50); + + useEffect(() => { + if (minimumVisibleRows > 50) { + setMinimumVisibleRows(50); + } + setRows(renderProps.rows); + }, [renderProps.rows, minimumVisibleRows, setMinimumVisibleRows]); + + useEffect(() => { + if (renderProps.refs) { + const fn = getRenderFn(renderProps.refs, { + ...renderProps, + rows, + minimumVisibleRows, + }); + fn().then((newScope) => { + scope.current = newScope; + }); + } + }, [renderProps, minimumVisibleRows, rows]); + + useEffect(() => { + return () => { + if (scope.current) { + scope.current.$destroy(); + } + }; + }, []); + return ; +} diff --git a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx index 5d2cf145af3816..b8e8bf1fe7d6ce 100644 --- a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx +++ b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx @@ -12,11 +12,9 @@ import React, { useRef, useEffect, useState, useCallback } from 'react'; import type { estypes } from '@elastic/elasticsearch'; import { EuiButtonEmpty } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import { I18nProvider } from '@kbn/i18n/react'; import { getServices, IIndexPattern } from '../../../kibana_services'; import { IndexPatternField } from '../../../../../data/common/index_patterns'; import { SkipBottomButton } from '../../components/skip_bottom_button'; -import { DocTableLegacyMemoized } from '../../components/discover'; export interface DocTableLegacyProps { columns: string[]; @@ -100,15 +98,6 @@ function getRenderFn(domNode: Element, props: any) { }; } -export function DiscoverDocTableEmbeddable(props: DocTableLegacyProps) { - console.dir(props.className); - return ( - - - - ); -} - export function DocTableLegacy(renderProps: DocTableLegacyProps) { const ref = useRef(null); const scope = useRef(); diff --git a/src/plugins/discover/public/application/components/discover.tsx b/src/plugins/discover/public/application/components/discover.tsx index f37f28fae7cc38..f962c56cc4690c 100644 --- a/src/plugins/discover/public/application/components/discover.tsx +++ b/src/plugins/discover/public/application/components/discover.tsx @@ -49,7 +49,7 @@ import { addHelpMenuToAppChrome } from './help_menu/help_menu_util'; import { InspectorSession } from '../../../../inspector/public'; import { useDataGridColumns } from '../helpers/use_data_grid_columns'; -export const DocTableLegacyMemoized = React.memo(DocTableLegacy); +const DocTableLegacyMemoized = React.memo(DocTableLegacy); const SidebarMemoized = React.memo(DiscoverSidebarResponsive); const DataGridMemoized = React.memo(DiscoverGrid); const TopNavMemoized = React.memo(DiscoverTopNav); diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx index bf8fe8469f0d6d..89bcddd254ac12 100644 --- a/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx +++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx @@ -51,6 +51,10 @@ export interface DiscoverGridProps { * Determines which element labels the grid for ARIA */ ariaLabelledBy: string; + /** + * Optional class name to apply + */ + className?: string; /** * Determines which columns are displayed */ diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx index f9e64daf93c9db..9a893b24f5fecb 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx @@ -17,11 +17,10 @@ import { SavedSearch } from '../../saved_searches'; import { Adapters, RequestAdapter } from '../../../../inspector/common'; import { ISearchSource } from '../../../../data/common'; import { SEARCH_EMBEDDABLE_TYPE } from './constants'; -import { esFilters, FilterManager } from '../../../../data/public'; +import { APPLY_FILTER_TRIGGER, esFilters, FilterManager } from '../../../../data/public'; import { DiscoverServices } from '../../build_services'; import { Query, TimeRange } from '../../../../data/common/query'; import { Filter } from '../../../../data/common/es_query/filters'; -import { DiscoverGridSettings } from '../components/discover_grid/types'; import { SortOrder } from '../angular/doc_table/components/table_header/helpers'; import { IFieldType } from '../../../../data/common/index_patterns/fields'; import { ElasticSearchHit } from '../doc_views/doc_views_types'; @@ -38,26 +37,21 @@ import { import * as columnActions from '../angular/doc_table/actions/columns'; import { getSortForSearchSource } from '../angular/doc_table'; import { handleSourceColumnState } from '../angular/helpers'; +import { DiscoverGridProps } from '../components/discover_grid/discover_grid'; +import { DiscoverGridSettings } from '../components/discover_grid/types'; -interface SearchProps extends SavedSearch { - columns?: string[]; +export interface SearchProps extends Partial { settings?: DiscoverGridSettings; description?: string; - sort?: SortOrder[]; sharedItemTitle?: string; inspectorAdapters?: Adapters; setSortOrder?: (sortPair: SortOrder[]) => void; - setColumns?: (columns: string[]) => void; - removeColumn?: (column: string) => void; - addColumn?: (column: string) => void; - moveColumn?: (column: string, index: number) => void; filter?: (field: IFieldType, value: string[], operator: string) => void; hits?: ElasticSearchHit[]; - indexPattern?: IndexPattern; totalHitCount?: number; - isLoading?: boolean; - showTimeCol?: boolean; - useNewFieldsApi?: boolean; + onMoveColumn?: (column: string, index: number) => void; + useLegacyTable?: boolean; + refs?: HTMLElement; } interface SearchEmbeddableConfig { @@ -87,11 +81,10 @@ export class SavedSearchEmbeddable private prevFilters?: Filter[]; private prevQuery?: Query; private prevSearchSessionId?: string; - private searchProps: SearchProps; - - reload(): void {} + private searchProps?: SearchProps; private node?: HTMLElement; + constructor( { savedSearch, @@ -138,6 +131,7 @@ export class SavedSearchEmbeddable private fetch = async () => { const searchSessionId = this.input.searchSessionId; const useNewFieldsApi = !this.services.uiSettings.get(SEARCH_FIELDS_FROM_SOURCE, false); + if (!this.searchProps) return; const { searchSource } = this.savedSearch; @@ -204,10 +198,14 @@ export class SavedSearchEmbeddable }; private initializeSearchEmbeddableProps() { - const { searchSource, columns } = this.savedSearch; + const { searchSource } = this.savedSearch; const indexPattern = searchSource.getField('index'); + if (!indexPattern) { + return; + } + if (!this.savedSearch.sort || !this.savedSearch.sort.length) { this.savedSearch.sort = getDefaultSort( indexPattern, @@ -215,27 +213,52 @@ export class SavedSearchEmbeddable ); } - const props = { + const props: SearchProps = { columns: this.savedSearch.columns, indexPattern, + isLoading: false, sort: getDefaultSort( indexPattern, getServices().uiSettings.get(SORT_DEFAULT_ORDER_SETTING, 'desc') ), - isLoading: false, rows: [], searchDescription: this.savedSearch.description, description: this.savedSearch.description, inspectorAdapters: this.inspectorAdapters, searchTitle: this.savedSearch.lastSavedTitle, services: this.services, + onAddColumn: (columnName: string) => { + if (!props.columns) { + return; + } + const updatedColumns = columnActions.addColumn(props.columns, columnName, true); + this.updateInput({ columns: updatedColumns }); + }, + onRemoveColumn: (columnName: string) => { + if (!props.columns) { + return; + } + const updatedColumns = columnActions.removeColumn(props.columns, columnName, true); + this.updateInput({ columns: updatedColumns }); + }, + onMoveColumn: (columnName: string, newIndex: number) => { + if (!props.columns) { + return; + } + const columns = columnActions.moveColumn(props.columns, columnName, newIndex); + this.updateInput({ columns }); + }, + onSetColumns: (columns: string[]) => { + this.updateInput({ columns }); + }, + sampleSize: 0, onFilter: () => {}, - useNewFieldsApi: true, - onSetColumns: () => {}, + useNewFieldsApi: !this.services.uiSettings.get(SEARCH_FIELDS_FROM_SOURCE, false), onSort: () => {}, onResize: () => {}, - showTimeCol: true, + showTimeCol: !this.services.uiSettings.get('doc_table:hideTimeColumn', false), ariaLabelledBy: 'documentsAriaLabel', + useLegacyTable: this.services.uiSettings.get('doc_table:legacy'), }; const timeRangeSearchSource = searchSource.create(); @@ -249,9 +272,7 @@ export class SavedSearchEmbeddable searchSource.setParent(this.filtersSearchSource); - this.searchProps = props; - - this.pushContainerStateParamsToProps(props, { forceFetch: true }); + this.pushContainerStateParamsToProps(props); props.setSortOrder = (sort: SortOrder[]) => { this.updateInput({ sort }); @@ -259,31 +280,28 @@ export class SavedSearchEmbeddable props.isLoading = true; - props.setColumns = (columns: string[]) => { - this.updateInput({ columns }); - }; - - props.onAddColumn = (columnName: string) => { - if (!columns) { - return; - } - const updatedColumns = columnActions.addColumn(columns, columnName, true); - this.updateInput({ columns: updatedColumns }); - }; - - props.onRemoveColumn = (columnName: string) => { - if (!columns) { - return; - } - const updatedColumns = columnActions.removeColumn(columns, columnName, true); - this.updateInput({ columns: updatedColumns }); - }; - props.sampleSize = 500; - - props.isLoading = true; if (this.savedSearch.grid) { props.settings = this.savedSearch.grid; } + + props.filter = async (field, value, operator) => { + let filters = esFilters.generateFilters( + this.filterManager, + field, + value, + operator, + indexPattern.id! + ); + filters = filters.map((filter) => ({ + ...filter, + $state: { store: esFilters.FilterStateStore.APP_STATE }, + })); + + await this.executeTriggerActions(APPLY_FILTER_TRIGGER, { + embeddable: this, + filters, + }); + }; } private async pushContainerStateParamsToProps( @@ -326,8 +344,11 @@ export class SavedSearchEmbeddable this.prevQuery = this.input.query; this.prevTimeRange = this.input.timeRange; this.prevSearchSessionId = this.input.searchSessionId; + this.searchProps = searchProps; await this.fetch(); - await this.rerenderComponent(this.node); + if (this.node) { + await this.rerenderComponent(this.node); + } } /* else if (this.searchProps) { // trigger a digest cycle to make sure non-fetch relevant changes are propagated //this.searchScope.$applyAsync();?? @@ -339,6 +360,9 @@ export class SavedSearchEmbeddable * @param {Element} domNode */ public async render(domNode: HTMLElement) { + if (!this.searchProps) { + throw new Error('Search props not defined'); + } if (this.node) { ReactDOM.unmountComponentAtNode(this.node); } @@ -346,7 +370,10 @@ export class SavedSearchEmbeddable } private async rerenderComponent(domNode: HTMLElement) { - this.searchProps.useLegacyTable = this.services.uiSettings.get('doc_table:legacy'); + if (!this.searchProps) { + return; + } + this.searchProps.refs = domNode; await this.pushContainerStateParamsToProps(this.searchProps); ReactDOM.render( ; + const docTableProps = props as DocTableEmbeddableProps; + return ; } - return ; + const discoverGridProps = props as DiscoverGridProps; + return ; } - -export const SavedSearchEmbeddableComponent = withEmbeddableSubscription< - SearchInput, - SearchOutput, - SavedSearchEmbeddable, - {} ->(SavedSearchEmbeddableComponentInner); From 7b943fcb6b94fea181545a4c781974fe40066b3d Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Tue, 25 May 2021 14:25:47 +0100 Subject: [PATCH 05/23] Fixing typescript errors --- .../application/embeddable/saved_search_embeddable.tsx | 9 +-------- .../application/embeddable/search_embeddable_factory.ts | 6 +----- 2 files changed, 2 insertions(+), 13 deletions(-) diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx index 9a893b24f5fecb..b611fbf23aa9af 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx @@ -375,14 +375,7 @@ export class SavedSearchEmbeddable } this.searchProps.refs = domNode; await this.pushContainerStateParamsToProps(this.searchProps); - ReactDOM.render( - , - domNode - ); + ReactDOM.render(, domNode); } public reload() { diff --git a/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts b/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts index c242be9dadb9d7..360844976284eb 100644 --- a/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts +++ b/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts @@ -18,7 +18,7 @@ import { import { TimeRange } from '../../../../data/public'; -import { SearchInput, SearchOutput, SearchEmbeddable } from './types'; +import { SearchInput, SearchOutput } from './types'; import { SEARCH_EMBEDDABLE_TYPE } from './constants'; import { SavedSearchEmbeddable } from './saved_search_embeddable'; @@ -70,10 +70,7 @@ export class SearchEmbeddableFactory if (!this.$injector) { this.$injector = await this.getInjector(); } - const $injector = this.$injector as auto.IInjectorService; - const $compile = $injector.get('$compile'); - const $rootScope = $injector.get('$rootScope'); const filterManager = getServices().filterManager; const url = await getServices().getSavedSearchUrlById(savedObjectId); @@ -82,7 +79,6 @@ export class SearchEmbeddableFactory const savedObject = await getServices().getSavedSearchById(savedObjectId); const indexPattern = savedObject.searchSource.getField('index'); const { executeTriggerActions } = await this.getStartServices(); - // const { SearchEmbeddable: SearchEmbeddableClass } = await import('./search_embeddable'); const { SavedSearchEmbeddable: SavedSearchEmbeddableClass } = await import( './saved_search_embeddable' ); From f6dd986eb7fc69912bfbec3a13fef9dfb24d78b1 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Tue, 25 May 2021 18:34:01 +0100 Subject: [PATCH 06/23] Fixing filtering and sorting --- .../embeddable/saved_search_embeddable.tsx | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx index b611fbf23aa9af..7b3aa6e442096d 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx @@ -45,7 +45,7 @@ export interface SearchProps extends Partial { description?: string; sharedItemTitle?: string; inspectorAdapters?: Adapters; - setSortOrder?: (sortPair: SortOrder[]) => void; + filter?: (field: IFieldType, value: string[], operator: string) => void; hits?: ElasticSearchHit[]; totalHitCount?: number; @@ -251,11 +251,34 @@ export class SavedSearchEmbeddable onSetColumns: (columns: string[]) => { this.updateInput({ columns }); }, - sampleSize: 0, - onFilter: () => {}, + onSort: (sort: string[][]) => { + const sortOrderArr: SortOrder[] = []; + sort.forEach((arr) => { + sortOrderArr.push(arr as SortOrder); + }); + this.updateInput({ sort: sortOrderArr }); + }, + sampleSize: 500, + onFilter: async (field, value, operator) => { + let filters = esFilters.generateFilters( + this.filterManager, + // @ts-expect-error + field, + value, + operator, + indexPattern.id! + ); + filters = filters.map((filter) => ({ + ...filter, + $state: { store: esFilters.FilterStateStore.APP_STATE }, + })); + + await this.executeTriggerActions(APPLY_FILTER_TRIGGER, { + embeddable: this, + filters, + }); + }, useNewFieldsApi: !this.services.uiSettings.get(SEARCH_FIELDS_FROM_SOURCE, false), - onSort: () => {}, - onResize: () => {}, showTimeCol: !this.services.uiSettings.get('doc_table:hideTimeColumn', false), ariaLabelledBy: 'documentsAriaLabel', useLegacyTable: this.services.uiSettings.get('doc_table:legacy'), @@ -274,34 +297,11 @@ export class SavedSearchEmbeddable this.pushContainerStateParamsToProps(props); - props.setSortOrder = (sort: SortOrder[]) => { - this.updateInput({ sort }); - }; - props.isLoading = true; if (this.savedSearch.grid) { props.settings = this.savedSearch.grid; } - - props.filter = async (field, value, operator) => { - let filters = esFilters.generateFilters( - this.filterManager, - field, - value, - operator, - indexPattern.id! - ); - filters = filters.map((filter) => ({ - ...filter, - $state: { store: esFilters.FilterStateStore.APP_STATE }, - })); - - await this.executeTriggerActions(APPLY_FILTER_TRIGGER, { - embeddable: this, - filters, - }); - }; } private async pushContainerStateParamsToProps( From 1ec4052cd06ee6f4ae04fe456158401d7c1697ca Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Tue, 25 May 2021 20:28:13 +0100 Subject: [PATCH 07/23] Add data-shared-item to DiscoverGridEmbeddable --- .../application/components/create_discover_grid_directive.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/discover/public/application/components/create_discover_grid_directive.tsx b/src/plugins/discover/public/application/components/create_discover_grid_directive.tsx index 820d2484ef7c0e..c0e0fcc86a340b 100644 --- a/src/plugins/discover/public/application/components/create_discover_grid_directive.tsx +++ b/src/plugins/discover/public/application/components/create_discover_grid_directive.tsx @@ -25,6 +25,7 @@ export function DiscoverGridEmbeddable(props: DiscoverGridProps) { setExpandedDoc={setExpandedDoc} expandedDoc={expandedDoc} services={getServices()} + data-shared-item /> ); From 9dcb2358197ed0b6e9dc421e54bdb21091c4440c Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Wed, 26 May 2021 20:08:31 +0100 Subject: [PATCH 08/23] Trigger rerender when title changes --- .../application/embeddable/saved_search_embeddable.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx index 7b3aa6e442096d..c6f63561f1e991 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx @@ -349,10 +349,10 @@ export class SavedSearchEmbeddable if (this.node) { await this.rerenderComponent(this.node); } - } /* else if (this.searchProps) { - // trigger a digest cycle to make sure non-fetch relevant changes are propagated - //this.searchScope.$applyAsync();?? - }*/ + } else if (this.searchProps && this.node) { + this.searchProps = searchProps; + ReactDOM.render(, this.node); + } } /** From abdd8e4b0d60bad31e2345121b5fea71eb9d3c8f Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Thu, 27 May 2021 08:26:29 +0100 Subject: [PATCH 09/23] Fixing incorrectly touched files --- package.json | 1 + .../public/application/components/create_discover_directive.ts | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 768b8fed897d26..a2499d85247d73 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "kbn:watch": "node scripts/kibana --dev --logging.json=false", "build:types": "rm -rf ./target/types && tsc --p tsconfig.types.json", "docs:acceptApiChanges": "node --max-old-space-size=6144 scripts/check_published_api_changes.js --accept", + "kbn:bootstrap": "node scripts/build_ts_refs --ignore-type-failures", "spec_to_console": "node scripts/spec_to_console", "backport-skip-ci": "backport --prDescription \"[skip-ci]\"", "storybook": "node scripts/storybook", diff --git a/src/plugins/discover/public/application/components/create_discover_directive.ts b/src/plugins/discover/public/application/components/create_discover_directive.ts index 597e48167ce3e2..049c9ac177eeab 100644 --- a/src/plugins/discover/public/application/components/create_discover_directive.ts +++ b/src/plugins/discover/public/application/components/create_discover_directive.ts @@ -5,7 +5,6 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ - import { Discover } from './discover'; // eslint-disable-next-line @typescript-eslint/no-explicit-any From ebf0f7771bd24e479d22ac27a715149f03de8626 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Thu, 27 May 2021 13:19:25 +0100 Subject: [PATCH 10/23] Remove search_embeddable --- api_docs/deprecations.mdx | 6 ------ .../application/embeddable/saved_search_embeddable.tsx | 2 +- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/api_docs/deprecations.mdx b/api_docs/deprecations.mdx index 99edad62075bce..0135be21b0c3d0 100644 --- a/api_docs/deprecations.mdx +++ b/api_docs/deprecations.mdx @@ -132,11 +132,7 @@ warning: This document is auto-generated and is meant to be viewed inside our ex | | [context_app_legacy.tsx#L17](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/application/components/context_app/context_app_legacy.tsx#L17) | - | | | [context_app_legacy.tsx#L26](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/application/components/context_app/context_app_legacy.tsx#L26) | - | | | [kibana_services.ts#L104](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/kibana_services.ts#L104) | - | -| | [search_embeddable.ts#L23](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/application/embeddable/search_embeddable.ts#L23) | - | -| | [search_embeddable.ts#L58](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/application/embeddable/search_embeddable.ts#L58) | - | | | [kibana_services.ts#L104](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/kibana_services.ts#L104) | - | -| | [search_embeddable.ts#L23](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/application/embeddable/search_embeddable.ts#L23) | - | -| | [search_embeddable.ts#L58](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/application/embeddable/search_embeddable.ts#L58) | - | | | [kibana_services.ts#L101](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/kibana_services.ts#L101) | - | | | [create_doc_table_react.tsx#L15](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx#L15) | - | | | [create_doc_table_react.tsx#L25](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx#L25) | - | @@ -145,8 +141,6 @@ warning: This document is auto-generated and is meant to be viewed inside our ex | | [context_app_legacy.tsx#L17](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/application/components/context_app/context_app_legacy.tsx#L17) | - | | | [context_app_legacy.tsx#L26](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/application/components/context_app/context_app_legacy.tsx#L26) | - | | | [kibana_services.ts#L104](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/kibana_services.ts#L104) | - | -| | [search_embeddable.ts#L23](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/application/embeddable/search_embeddable.ts#L23) | - | -| | [search_embeddable.ts#L58](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/application/embeddable/search_embeddable.ts#L58) | - | | | [on_save_search.tsx#L11](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/application/components/top_nav/on_save_search.tsx#L11) | - | | | [on_save_search.tsx#L133](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/application/components/top_nav/on_save_search.tsx#L133) | - | | | [saved_searches.ts#L10](https://github.com/elastic/kibana/tree/master/src/plugins/discover/public/saved_searches/saved_searches.ts#L10) | - | diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx index c6f63561f1e991..a2eea2424b77bf 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx @@ -383,7 +383,7 @@ export class SavedSearchEmbeddable this.pushContainerStateParamsToProps(this.searchProps, { forceFetch: true }); } - getSavedSearch(): SavedSearch { + public getSavedSearch(): SavedSearch { return this.savedSearch; } From d5f5a432a4b781e80db16fa4e2923cfbe537408b Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Mon, 31 May 2021 15:53:59 +0100 Subject: [PATCH 11/23] Remove lodash --- .../components/create_discover_grid_directive.tsx | 1 - .../application/embeddable/saved_search_embeddable.tsx | 8 ++++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/plugins/discover/public/application/components/create_discover_grid_directive.tsx b/src/plugins/discover/public/application/components/create_discover_grid_directive.tsx index c0e0fcc86a340b..820d2484ef7c0e 100644 --- a/src/plugins/discover/public/application/components/create_discover_grid_directive.tsx +++ b/src/plugins/discover/public/application/components/create_discover_grid_directive.tsx @@ -25,7 +25,6 @@ export function DiscoverGridEmbeddable(props: DiscoverGridProps) { setExpandedDoc={setExpandedDoc} expandedDoc={expandedDoc} services={getServices()} - data-shared-item /> ); diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx index a2eea2424b77bf..26c3304764c765 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx @@ -10,7 +10,7 @@ import { Subscription } from 'rxjs'; import React from 'react'; import ReactDOM from 'react-dom'; import { i18n } from '@kbn/i18n'; -import _ from 'lodash'; +import { isEqual } from 'lodash'; import { Container, Embeddable } from '../../../../embeddable/public'; import { ISearchEmbeddable, SearchInput, SearchOutput } from './types'; import { SavedSearch } from '../../saved_searches'; @@ -310,9 +310,9 @@ export class SavedSearchEmbeddable ) { const isFetchRequired = !esFilters.onlyDisabledFiltersChanged(this.input.filters, this.prevFilters) || - !_.isEqual(this.prevQuery, this.input.query) || - !_.isEqual(this.prevTimeRange, this.input.timeRange) || - !_.isEqual(searchProps.sort, this.input.sort || this.savedSearch.sort) || + !isEqual(this.prevQuery, this.input.query) || + !isEqual(this.prevTimeRange, this.input.timeRange) || + !isEqual(searchProps.sort, this.input.sort || this.savedSearch.sort) || this.prevSearchSessionId !== this.input.searchSessionId; // If there is column or sort data on the panel, that means the original columns or sort settings have From 36179f0bab7616e4dd9b2acaa0eb57356b910777 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Fri, 4 Jun 2021 09:59:30 +0100 Subject: [PATCH 12/23] Fixing imports --- .../doc_table/create_doc_table_embeddable.tsx | 11 +---------- .../application/angular/doc_table/index.ts | 1 + .../components/discover_grid/discover_grid.tsx | 2 +- .../embeddable/saved_search_embeddable.tsx | 16 +++++++++------- 4 files changed, 12 insertions(+), 18 deletions(-) diff --git a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx index 95dbec2e2230be..bf599387deef9a 100644 --- a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx +++ b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx @@ -60,15 +60,6 @@ export function DiscoverDocTableEmbeddable(props: DocTableEmbeddableProps) { function DocTableLegacyInner(renderProps: DocTableEmbeddableProps) { const scope = useRef(); - const [rows, setRows] = useState(renderProps.rows); - const [minimumVisibleRows, setMinimumVisibleRows] = useState(50); - - useEffect(() => { - if (minimumVisibleRows > 50) { - setMinimumVisibleRows(50); - } - setRows(renderProps.rows); - }, [renderProps.rows, minimumVisibleRows, setMinimumVisibleRows]); useEffect(() => { if (renderProps.refs) { @@ -81,7 +72,7 @@ function DocTableLegacyInner(renderProps: DocTableEmbeddableProps) { scope.current = newScope; }); } - }, [renderProps, minimumVisibleRows, rows]); + }, [renderProps]); useEffect(() => { return () => { diff --git a/src/plugins/discover/public/application/angular/doc_table/index.ts b/src/plugins/discover/public/application/angular/doc_table/index.ts index 2aaf5a8bda7b69..3a8f170f8680d5 100644 --- a/src/plugins/discover/public/application/angular/doc_table/index.ts +++ b/src/plugins/discover/public/application/angular/doc_table/index.ts @@ -9,3 +9,4 @@ export { createDocTableDirective } from './doc_table'; export { getSort, getSortArray } from './lib/get_sort'; export { getSortForSearchSource } from './lib/get_sort_for_search_source'; +export { getDefaultSort } from './lib/get_default_sort'; diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx index 89bcddd254ac12..28464a7d124d83 100644 --- a/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx +++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx @@ -378,7 +378,7 @@ export const DiscoverGrid = ({ data-title={searchTitle} data-description={searchDescription} data-document-number={displayedRows.length} - className={className || ''} + className={className} > Date: Fri, 4 Jun 2021 10:03:38 +0100 Subject: [PATCH 13/23] Minor fixes --- .../application/components/discover_grid/discover_grid.tsx | 4 ---- .../public/application/embeddable/saved_search_embeddable.tsx | 3 ++- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx index 28464a7d124d83..f1c56b7a57195b 100644 --- a/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx +++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx @@ -148,10 +148,6 @@ export interface DiscoverGridProps { * List of used control columns (available: 'openDetails', 'select') */ controlColumnIds?: string[]; - /** - * Optional class name to apply - */ - className?: string; } export const EuiDataGridMemoized = React.memo((props: EuiDataGridProps) => { diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx index f191154319491f..0b00cec6bf4a52 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx @@ -32,6 +32,7 @@ import { SavedSearchEmbeddableComponent } from './saved_search_embeddable_compon import { UiActionsStart } from '../../../../ui_actions/public'; import { getServices } from '../../kibana_services'; import { + DOC_HIDE_TIME_COLUMN_SETTING, SAMPLE_SIZE_SETTING, SEARCH_FIELDS_FROM_SOURCE, SORT_DEFAULT_ORDER_SETTING, @@ -281,7 +282,7 @@ export class SavedSearchEmbeddable }); }, useNewFieldsApi: !this.services.uiSettings.get(SEARCH_FIELDS_FROM_SOURCE, false), - showTimeCol: !this.services.uiSettings.get('doc_table:hideTimeColumn', false), + showTimeCol: !this.services.uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false), ariaLabelledBy: 'documentsAriaLabel', useLegacyTable: this.services.uiSettings.get('doc_table:legacy'), }; From 0f7edfd97e3906ecdf9c2dde4c7dd108e1a7c202 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Fri, 4 Jun 2021 10:04:39 +0100 Subject: [PATCH 14/23] Removing unnecessary files --- .../embeddable/search_template.html | 21 ------------------- .../embeddable/search_template_datagrid.html | 19 ----------------- 2 files changed, 40 deletions(-) delete mode 100644 src/plugins/discover/public/application/embeddable/search_template.html delete mode 100644 src/plugins/discover/public/application/embeddable/search_template_datagrid.html diff --git a/src/plugins/discover/public/application/embeddable/search_template.html b/src/plugins/discover/public/application/embeddable/search_template.html deleted file mode 100644 index 3e37b3645650f2..00000000000000 --- a/src/plugins/discover/public/application/embeddable/search_template.html +++ /dev/null @@ -1,21 +0,0 @@ - - diff --git a/src/plugins/discover/public/application/embeddable/search_template_datagrid.html b/src/plugins/discover/public/application/embeddable/search_template_datagrid.html deleted file mode 100644 index 8ad7938350d9c5..00000000000000 --- a/src/plugins/discover/public/application/embeddable/search_template_datagrid.html +++ /dev/null @@ -1,19 +0,0 @@ - From b434f8e78c8fd6bfc4d11cc653499e0b40fcb4d2 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Fri, 4 Jun 2021 10:06:22 +0100 Subject: [PATCH 15/23] Minor fix --- .../angular/doc_table/create_doc_table_embeddable.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx index bf599387deef9a..0655b63fdff52f 100644 --- a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx +++ b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx @@ -63,11 +63,7 @@ function DocTableLegacyInner(renderProps: DocTableEmbeddableProps) { useEffect(() => { if (renderProps.refs) { - const fn = getRenderFn(renderProps.refs, { - ...renderProps, - rows, - minimumVisibleRows, - }); + const fn = getRenderFn(renderProps.refs, renderProps); fn().then((newScope) => { scope.current = newScope; }); From e1f9e03fdc10b75e5e5dd280dc107653c5e3f423 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Fri, 4 Jun 2021 10:22:20 +0100 Subject: [PATCH 16/23] Remove unused import --- .../angular/doc_table/create_doc_table_embeddable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx index 0655b63fdff52f..3a186a78cca160 100644 --- a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx +++ b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx @@ -7,7 +7,7 @@ */ import { render } from 'react-dom'; -import React, { useRef, useEffect, useState } from 'react'; +import React, { useRef, useEffect } from 'react'; import { I18nProvider } from '@kbn/i18n/react'; import { getServices } from '../../../kibana_services'; import { AngularScope, DocTableLegacyProps, injectAngularElement } from './create_doc_table_react'; From b7ecfaa5ed897238053f32b892c0f3d56e20c92a Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Tue, 8 Jun 2021 08:03:07 +0100 Subject: [PATCH 17/23] Applying PR comments --- .../application/embeddable/saved_search_embeddable.tsx | 9 +++++---- .../embeddable/saved_search_embeddable_component.tsx | 2 ++ 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx index 0b00cec6bf4a52..118621f4a65462 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx @@ -28,11 +28,12 @@ import { } from '../../../../data/common'; import { SortOrder } from '../angular/doc_table/components/table_header/helpers'; import { ElasticSearchHit } from '../doc_views/doc_views_types'; -import { SavedSearchEmbeddableComponent } from './saved_search_embeddable_component'; +import { SavedSearchEmbeddableComponentMemoized } from './saved_search_embeddable_component'; import { UiActionsStart } from '../../../../ui_actions/public'; import { getServices } from '../../kibana_services'; import { DOC_HIDE_TIME_COLUMN_SETTING, + DOC_TABLE_LEGACY, SAMPLE_SIZE_SETTING, SEARCH_FIELDS_FROM_SOURCE, SORT_DEFAULT_ORDER_SETTING, @@ -284,7 +285,7 @@ export class SavedSearchEmbeddable useNewFieldsApi: !this.services.uiSettings.get(SEARCH_FIELDS_FROM_SOURCE, false), showTimeCol: !this.services.uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false), ariaLabelledBy: 'documentsAriaLabel', - useLegacyTable: this.services.uiSettings.get('doc_table:legacy'), + useLegacyTable: this.services.uiSettings.get(DOC_TABLE_LEGACY), }; const timeRangeSearchSource = searchSource.create(); @@ -354,7 +355,7 @@ export class SavedSearchEmbeddable } } else if (this.searchProps && this.node) { this.searchProps = searchProps; - ReactDOM.render(, this.node); + ReactDOM.render(, this.node); } } @@ -378,7 +379,7 @@ export class SavedSearchEmbeddable } this.searchProps.refs = domNode; await this.pushContainerStateParamsToProps(this.searchProps); - ReactDOM.render(, domNode); + ReactDOM.render(, domNode); } public reload() { diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx index d32e3b68d9f7b8..870ddf10800f4b 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx @@ -25,3 +25,5 @@ export function SavedSearchEmbeddableComponent(props: SearchProps) { const discoverGridProps = props as DiscoverGridProps; return ; } + +export const SavedSearchEmbeddableComponentMemoized = React.memo(SavedSearchEmbeddableComponent); From 2e9a9c8271a060907ea436b6891809387d5806e8 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Wed, 9 Jun 2021 09:02:07 +0100 Subject: [PATCH 18/23] Applying PR comments --- .../doc_table/create_doc_table_embeddable.tsx | 17 ++++++++++------ .../embeddable/saved_search_embeddable.tsx | 20 ++++++++++++------- 2 files changed, 24 insertions(+), 13 deletions(-) diff --git a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx index 3a186a78cca160..9fe1ff0ddbcfad 100644 --- a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx +++ b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx @@ -9,15 +9,17 @@ import { render } from 'react-dom'; import React, { useRef, useEffect } from 'react'; import { I18nProvider } from '@kbn/i18n/react'; +import { IScope } from 'angular'; import { getServices } from '../../../kibana_services'; -import { AngularScope, DocTableLegacyProps, injectAngularElement } from './create_doc_table_react'; +import { DocTableLegacyProps, injectAngularElement } from './create_doc_table_react'; + +type AngularEmbeddableScope = IScope & { renderProps?: DocTableEmbeddableProps }; export interface DocTableEmbeddableProps extends Partial { refs: HTMLElement; } -// eslint-disable-next-line @typescript-eslint/no-explicit-any -function getRenderFn(domNode: Element, props: any) { +function getRenderFn(domNode: Element, props: DocTableEmbeddableProps) { const directive = { template: ``, + use-new-fields-api="renderProps.useNewFieldsApi">`, }; return async () => { @@ -59,14 +61,17 @@ export function DiscoverDocTableEmbeddable(props: DocTableEmbeddableProps) { } function DocTableLegacyInner(renderProps: DocTableEmbeddableProps) { - const scope = useRef(); + const scope = useRef(); useEffect(() => { - if (renderProps.refs) { + if (renderProps.refs && !scope.current) { const fn = getRenderFn(renderProps.refs, renderProps); fn().then((newScope) => { scope.current = newScope; }); + } else if (scope && scope.current) { + scope.current.renderProps = { ...renderProps }; + scope.current.$applyAsync(); } }, [renderProps]); diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx index 118621f4a65462..eb2175d1b3b2df 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx @@ -74,7 +74,7 @@ export class SavedSearchEmbeddable private readonly savedSearch: SavedSearch; private inspectorAdapters: Adapters; private panelTitle: string = ''; - private filtersSearchSource?: ISearchSource; + private filtersSearchSource!: ISearchSource; private subscription?: Subscription; public readonly type = SEARCH_EMBEDDABLE_TYPE; private filterManager: FilterManager; @@ -336,12 +336,12 @@ export class SavedSearchEmbeddable searchProps.sort = this.input.sort || savedSearchSort; searchProps.sharedItemTitle = this.panelTitle; if (forceFetch || isFetchRequired) { - this.filtersSearchSource!.setField('filter', this.input.filters); - this.filtersSearchSource!.setField('query', this.input.query); + this.filtersSearchSource.setField('filter', this.input.filters); + this.filtersSearchSource.setField('query', this.input.query); if (this.input.query?.query || this.input.filters?.length) { - this.filtersSearchSource!.setField('highlightAll', true); + this.filtersSearchSource.setField('highlightAll', true); } else { - this.filtersSearchSource!.removeField('highlightAll'); + this.filtersSearchSource.removeField('highlightAll'); } this.prevFilters = this.input.filters; @@ -355,7 +355,7 @@ export class SavedSearchEmbeddable } } else if (this.searchProps && this.node) { this.searchProps = searchProps; - ReactDOM.render(, this.node); + await this.renderReactComponent(this.node, this.searchProps); } } @@ -379,7 +379,13 @@ export class SavedSearchEmbeddable } this.searchProps.refs = domNode; await this.pushContainerStateParamsToProps(this.searchProps); - ReactDOM.render(, domNode); + await this.renderReactComponent(domNode, this.searchProps); + } + + private async renderReactComponent(domNode: HTMLElement, searchProps: SearchProps) { + return new Promise(() => { + ReactDOM.render(, domNode); + }); } public reload() { From d3346577ea8393cce4c1599fe0f50e2a2b373f57 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Wed, 9 Jun 2021 09:54:12 +0100 Subject: [PATCH 19/23] Removing search embeddable --- .../doc_table/create_doc_table_embeddable.tsx | 2 +- .../embeddable/search_embeddable.ts | 407 ------------------ 2 files changed, 1 insertion(+), 408 deletions(-) delete mode 100644 src/plugins/discover/public/application/embeddable/search_embeddable.ts diff --git a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx index 9fe1ff0ddbcfad..5a6ae595cba467 100644 --- a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx +++ b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx @@ -69,7 +69,7 @@ function DocTableLegacyInner(renderProps: DocTableEmbeddableProps) { fn().then((newScope) => { scope.current = newScope; }); - } else if (scope && scope.current) { + } else if (scope?.current) { scope.current.renderProps = { ...renderProps }; scope.current.$applyAsync(); } diff --git a/src/plugins/discover/public/application/embeddable/search_embeddable.ts b/src/plugins/discover/public/application/embeddable/search_embeddable.ts deleted file mode 100644 index 1e3c7e77d36150..00000000000000 --- a/src/plugins/discover/public/application/embeddable/search_embeddable.ts +++ /dev/null @@ -1,407 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import './search_embeddable.scss'; -import angular from 'angular'; -import _ from 'lodash'; -import { Subscription } from 'rxjs'; -import { i18n } from '@kbn/i18n'; -import { UiActionsStart } from '../../../../ui_actions/public'; -import { RequestAdapter, Adapters } from '../../../../inspector/public'; -import { - APPLY_FILTER_TRIGGER, - esFilters, - Filter, - TimeRange, - FilterManager, - Query, - IFieldType, -} from '../../../../data/public'; -import { Container, Embeddable } from '../../../../embeddable/public'; -import * as columnActions from '../angular/doc_table/actions/columns'; -import searchTemplate from './search_template.html'; -import searchTemplateGrid from './search_template_datagrid.html'; -import { ISearchEmbeddable, SearchInput, SearchOutput } from './types'; -import { SortOrder } from '../angular/doc_table/components/table_header/helpers'; -import { getSortForSearchSource } from '../angular/doc_table'; -import { getServices, IndexPattern, ISearchSource } from '../../kibana_services'; -import { SEARCH_EMBEDDABLE_TYPE } from './constants'; -import { SavedSearch } from '../..'; -import { - DOC_HIDE_TIME_COLUMN_SETTING, - SAMPLE_SIZE_SETTING, - SEARCH_FIELDS_FROM_SOURCE, - SORT_DEFAULT_ORDER_SETTING, -} from '../../../common'; -import { DiscoverGridSettings } from '../components/discover_grid/types'; -import { DiscoverServices } from '../../build_services'; -import { ElasticSearchHit } from '../doc_views/doc_views_types'; -import { getDefaultSort } from '../angular/doc_table/lib/get_default_sort'; -import { handleSourceColumnState } from '../angular/helpers'; - -interface SearchScope extends ng.IScope { - columns?: string[]; - settings?: DiscoverGridSettings; - description?: string; - sort?: SortOrder[]; - sharedItemTitle?: string; - inspectorAdapters?: Adapters; - setSortOrder?: (sortPair: SortOrder[]) => void; - setColumns?: (columns: string[]) => void; - removeColumn?: (column: string) => void; - addColumn?: (column: string) => void; - moveColumn?: (column: string, index: number) => void; - filter?: (field: IFieldType, value: string[], operator: string) => void; - hits?: ElasticSearchHit[]; - indexPattern?: IndexPattern; - totalHitCount?: number; - isLoading?: boolean; - showTimeCol?: boolean; - useNewFieldsApi?: boolean; -} - -interface SearchEmbeddableConfig { - $rootScope: ng.IRootScopeService; - $compile: ng.ICompileService; - savedSearch: SavedSearch; - editUrl: string; - editPath: string; - indexPatterns?: IndexPattern[]; - editable: boolean; - filterManager: FilterManager; - services: DiscoverServices; -} - -export class SearchEmbeddable - extends Embeddable - implements ISearchEmbeddable { - private readonly savedSearch: SavedSearch; - private $rootScope: ng.IRootScopeService; - private $compile: ng.ICompileService; - private inspectorAdapters: Adapters; - private searchScope?: SearchScope; - private panelTitle: string = ''; - private filtersSearchSource?: ISearchSource; - private searchInstance?: JQLite; - private subscription?: Subscription; - public readonly type = SEARCH_EMBEDDABLE_TYPE; - private filterManager: FilterManager; - private abortController?: AbortController; - private services: DiscoverServices; - - private prevTimeRange?: TimeRange; - private prevFilters?: Filter[]; - private prevQuery?: Query; - private prevSearchSessionId?: string; - - constructor( - { - $rootScope, - $compile, - savedSearch, - editUrl, - editPath, - indexPatterns, - editable, - filterManager, - services, - }: SearchEmbeddableConfig, - initialInput: SearchInput, - private readonly executeTriggerActions: UiActionsStart['executeTriggerActions'], - parent?: Container - ) { - super( - initialInput, - { - defaultTitle: savedSearch.title, - editUrl, - editPath, - editApp: 'discover', - indexPatterns, - editable, - }, - parent - ); - this.services = services; - this.filterManager = filterManager; - this.savedSearch = savedSearch; - this.$rootScope = $rootScope; - this.$compile = $compile; - this.inspectorAdapters = { - requests: new RequestAdapter(), - }; - this.initializeSearchScope(); - - this.subscription = this.getUpdated$().subscribe(() => { - this.panelTitle = this.output.title || ''; - - if (this.searchScope) { - this.pushContainerStateParamsToScope(this.searchScope); - } - }); - } - - public getInspectorAdapters() { - return this.inspectorAdapters; - } - - public getSavedSearch() { - return this.savedSearch; - } - - /** - * - * @param {Element} domNode - */ - public render(domNode: HTMLElement) { - if (!this.searchScope) { - throw new Error('Search scope not defined'); - } - this.searchInstance = this.$compile( - this.services.uiSettings.get('doc_table:legacy') ? searchTemplate : searchTemplateGrid - )(this.searchScope); - const rootNode = angular.element(domNode); - rootNode.append(this.searchInstance); - - this.pushContainerStateParamsToScope(this.searchScope); - } - - public destroy() { - super.destroy(); - this.savedSearch.destroy(); - if (this.searchInstance) { - this.searchInstance.remove(); - } - if (this.searchScope) { - this.searchScope.$destroy(); - delete this.searchScope; - } - if (this.subscription) { - this.subscription.unsubscribe(); - } - - if (this.abortController) this.abortController.abort(); - } - - private initializeSearchScope() { - const searchScope: SearchScope = (this.searchScope = this.$rootScope.$new()); - - searchScope.description = this.savedSearch.description; - searchScope.inspectorAdapters = this.inspectorAdapters; - - const { searchSource } = this.savedSearch; - const indexPattern = (searchScope.indexPattern = searchSource.getField('index'))!; - - if (!this.savedSearch.sort || !this.savedSearch.sort.length) { - this.savedSearch.sort = getDefaultSort( - indexPattern, - getServices().uiSettings.get(SORT_DEFAULT_ORDER_SETTING, 'desc') - ); - } - - const timeRangeSearchSource = searchSource.create(); - timeRangeSearchSource.setField('filter', () => { - if (!this.searchScope || !this.input.timeRange) return; - return this.services.timefilter.createFilter(indexPattern, this.input.timeRange); - }); - - this.filtersSearchSource = searchSource.create(); - this.filtersSearchSource.setParent(timeRangeSearchSource); - - searchSource.setParent(this.filtersSearchSource); - - this.pushContainerStateParamsToScope(searchScope); - - searchScope.setSortOrder = (sort) => { - this.updateInput({ sort }); - }; - - searchScope.isLoading = true; - - const useNewFieldsApi = !getServices().uiSettings.get(SEARCH_FIELDS_FROM_SOURCE, false); - searchScope.useNewFieldsApi = useNewFieldsApi; - - searchScope.addColumn = (columnName: string) => { - if (!searchScope.columns) { - return; - } - const columns = columnActions.addColumn(searchScope.columns, columnName, useNewFieldsApi); - this.updateInput({ columns }); - }; - - searchScope.removeColumn = (columnName: string) => { - if (!searchScope.columns) { - return; - } - const columns = columnActions.removeColumn(searchScope.columns, columnName, useNewFieldsApi); - this.updateInput({ columns }); - }; - - searchScope.moveColumn = (columnName, newIndex: number) => { - if (!searchScope.columns) { - return; - } - const columns = columnActions.moveColumn(searchScope.columns, columnName, newIndex); - this.updateInput({ columns }); - }; - - searchScope.setColumns = (columns: string[]) => { - this.updateInput({ columns }); - }; - - if (this.savedSearch.grid) { - searchScope.settings = this.savedSearch.grid; - } - searchScope.showTimeCol = !this.services.uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false); - - searchScope.filter = async (field, value, operator) => { - let filters = esFilters.generateFilters( - this.filterManager, - field, - value, - operator, - indexPattern.id! - ); - filters = filters.map((filter) => ({ - ...filter, - $state: { store: esFilters.FilterStateStore.APP_STATE }, - })); - - await this.executeTriggerActions(APPLY_FILTER_TRIGGER, { - embeddable: this, - filters, - }); - }; - } - - public reload() { - if (this.searchScope) - this.pushContainerStateParamsToScope(this.searchScope, { forceFetch: true }); - } - - private fetch = async () => { - const searchSessionId = this.input.searchSessionId; - const useNewFieldsApi = !this.services.uiSettings.get(SEARCH_FIELDS_FROM_SOURCE, false); - if (!this.searchScope) return; - - const { searchSource } = this.savedSearch; - - // Abort any in-progress requests - if (this.abortController) this.abortController.abort(); - this.abortController = new AbortController(); - - searchSource.setField('size', this.services.uiSettings.get(SAMPLE_SIZE_SETTING)); - searchSource.setField( - 'sort', - getSortForSearchSource( - this.searchScope.sort, - this.searchScope.indexPattern, - this.services.uiSettings.get(SORT_DEFAULT_ORDER_SETTING) - ) - ); - if (useNewFieldsApi) { - searchSource.removeField('fieldsFromSource'); - const fields: Record = { field: '*', include_unmapped: 'true' }; - searchSource.setField('fields', [fields]); - } else { - searchSource.removeField('fields'); - if (this.searchScope.indexPattern) { - const fieldNames = this.searchScope.indexPattern.fields.map((field) => field.name); - searchSource.setField('fieldsFromSource', fieldNames); - } - } - - // Log request to inspector - this.inspectorAdapters.requests!.reset(); - - this.searchScope.$apply(() => { - this.searchScope!.isLoading = true; - }); - this.updateOutput({ loading: true, error: undefined }); - - try { - // Make the request - const { rawResponse: resp } = await searchSource - .fetch$({ - abortSignal: this.abortController.signal, - sessionId: searchSessionId, - inspector: { - adapter: this.inspectorAdapters.requests, - title: i18n.translate('discover.embeddable.inspectorRequestDataTitle', { - defaultMessage: 'Data', - }), - description: i18n.translate('discover.embeddable.inspectorRequestDescription', { - defaultMessage: - 'This request queries Elasticsearch to fetch the data for the search.', - }), - }, - }) - .toPromise(); - this.updateOutput({ loading: false, error: undefined }); - - // Apply the changes to the angular scope - this.searchScope.$apply(() => { - this.searchScope!.hits = resp.hits.hits; - this.searchScope!.totalHitCount = resp.hits.total as number; - this.searchScope!.isLoading = false; - }); - } catch (error) { - this.updateOutput({ loading: false, error }); - this.searchScope.$apply(() => { - this.searchScope!.isLoading = false; - }); - } - }; - - private pushContainerStateParamsToScope( - searchScope: SearchScope, - { forceFetch = false }: { forceFetch: boolean } = { forceFetch: false } - ) { - const isFetchRequired = - !esFilters.onlyDisabledFiltersChanged(this.input.filters, this.prevFilters) || - !_.isEqual(this.prevQuery, this.input.query) || - !_.isEqual(this.prevTimeRange, this.input.timeRange) || - !_.isEqual(searchScope.sort, this.input.sort || this.savedSearch.sort) || - this.prevSearchSessionId !== this.input.searchSessionId; - - // If there is column or sort data on the panel, that means the original columns or sort settings have - // been overridden in a dashboard. - searchScope.columns = handleSourceColumnState( - { columns: this.input.columns || this.savedSearch.columns }, - this.services.core.uiSettings - ).columns; - const savedSearchSort = - this.savedSearch.sort && this.savedSearch.sort.length - ? this.savedSearch.sort - : getDefaultSort( - this.searchScope?.indexPattern, - getServices().uiSettings.get(SORT_DEFAULT_ORDER_SETTING, 'desc') - ); - searchScope.sort = this.input.sort || savedSearchSort; - searchScope.sharedItemTitle = this.panelTitle; - - if (forceFetch || isFetchRequired) { - this.filtersSearchSource!.setField('filter', this.input.filters); - this.filtersSearchSource!.setField('query', this.input.query); - if (this.input.query?.query || this.input.filters?.length) { - this.filtersSearchSource!.setField('highlightAll', true); - } else { - this.filtersSearchSource!.removeField('highlightAll'); - } - - this.prevFilters = this.input.filters; - this.prevQuery = this.input.query; - this.prevTimeRange = this.input.timeRange; - this.prevSearchSessionId = this.input.searchSessionId; - this.fetch(); - } else if (this.searchScope) { - // trigger a digest cycle to make sure non-fetch relevant changes are propagated - this.searchScope.$applyAsync(); - } - } -} From 3bf5eb58860b0edf0a12d5d03cbe52643681d6c8 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Wed, 9 Jun 2021 12:56:14 +0100 Subject: [PATCH 20/23] Fix missing import --- .../embeddable/saved_search_embeddable_component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx index 870ddf10800f4b..22ee4a4df65c59 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx @@ -8,8 +8,8 @@ import React from 'react'; +import { DiscoverGridEmbeddable } from 'src/plugins/discover/public/application/angular/create_discover_grid_directive'; import { SearchProps } from './saved_search_embeddable'; -import { DiscoverGridEmbeddable } from '../components/create_discover_grid_directive'; import { DiscoverDocTableEmbeddable, DocTableEmbeddableProps, From 2603f3d56833aca129589c930e7ea3c8887fb4f2 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Wed, 9 Jun 2021 15:07:45 +0100 Subject: [PATCH 21/23] Addressing PR comments --- .../doc_table/create_doc_table_embeddable.tsx | 9 +++--- .../embeddable/saved_search_embeddable.tsx | 27 +++++++++-------- .../saved_search_embeddable_component.tsx | 29 ++++++++++++------- 3 files changed, 36 insertions(+), 29 deletions(-) diff --git a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx index 5a6ae595cba467..19913ed6de8704 100644 --- a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx +++ b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx @@ -6,7 +6,6 @@ * Side Public License, v 1. */ -import { render } from 'react-dom'; import React, { useRef, useEffect } from 'react'; import { I18nProvider } from '@kbn/i18n/react'; import { IScope } from 'angular'; @@ -47,7 +46,9 @@ function getRenderFn(domNode: Element, props: DocTableEmbeddableProps) { const injector = await getServices().getEmbeddableInjector(); return await injectAngularElement(domNode, directive.template, props, injector); } catch (e) { - render(
error
, domNode); + // eslint-disable-next-line no-console + console.error(e); + throw e; } }; } @@ -77,9 +78,7 @@ function DocTableLegacyInner(renderProps: DocTableEmbeddableProps) { useEffect(() => { return () => { - if (scope.current) { - scope.current.$destroy(); - } + scope.current?.$destroy(); }; }, []); return ; diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx index eb2175d1b3b2df..4211180d19367e 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx @@ -54,8 +54,6 @@ export interface SearchProps extends Partial { hits?: ElasticSearchHit[]; totalHitCount?: number; onMoveColumn?: (column: string, index: number) => void; - useLegacyTable?: boolean; - refs?: HTMLElement; } interface SearchEmbeddableConfig { @@ -285,7 +283,6 @@ export class SavedSearchEmbeddable useNewFieldsApi: !this.services.uiSettings.get(SEARCH_FIELDS_FROM_SOURCE, false), showTimeCol: !this.services.uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false), ariaLabelledBy: 'documentsAriaLabel', - useLegacyTable: this.services.uiSettings.get(DOC_TABLE_LEGACY), }; const timeRangeSearchSource = searchSource.create(); @@ -355,7 +352,7 @@ export class SavedSearchEmbeddable } } else if (this.searchProps && this.node) { this.searchProps = searchProps; - await this.renderReactComponent(this.node, this.searchProps); + this.renderReactComponent(this.node, this.searchProps); } } @@ -377,20 +374,24 @@ export class SavedSearchEmbeddable if (!this.searchProps) { return; } - this.searchProps.refs = domNode; await this.pushContainerStateParamsToProps(this.searchProps); - await this.renderReactComponent(domNode, this.searchProps); + this.renderReactComponent(domNode, this.searchProps); } - private async renderReactComponent(domNode: HTMLElement, searchProps: SearchProps) { - return new Promise(() => { - ReactDOM.render(, domNode); - }); + private renderReactComponent(domNode: HTMLElement, searchProps: SearchProps) { + const useLegacyTable = this.services.uiSettings.get(DOC_TABLE_LEGACY); + const props = { + searchProps, + useLegacyTable, + refs: domNode, + }; + ReactDOM.render(, domNode); } public reload() { - if (this.searchProps) + if (this.searchProps) { this.pushContainerStateParamsToProps(this.searchProps, { forceFetch: true }); + } } public getSavedSearch(): SavedSearch { @@ -407,9 +408,7 @@ export class SavedSearchEmbeddable if (this.searchProps) { delete this.searchProps; } - if (this.subscription) { - this.subscription.unsubscribe(); - } + this.subscription?.unsubscribe(); if (this.abortController) this.abortController.abort(); } diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx index 22ee4a4df65c59..c4657ce70b568b 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx @@ -8,21 +8,30 @@ import React from 'react'; -import { DiscoverGridEmbeddable } from 'src/plugins/discover/public/application/angular/create_discover_grid_directive'; -import { SearchProps } from './saved_search_embeddable'; -import { - DiscoverDocTableEmbeddable, - DocTableEmbeddableProps, -} from '../angular/doc_table/create_doc_table_embeddable'; +import { DiscoverGridEmbeddable } from '../angular/create_discover_grid_directive'; +import { DiscoverDocTableEmbeddable } from '../angular/doc_table/create_doc_table_embeddable'; import { DiscoverGridProps } from '../components/discover_grid/discover_grid'; +import { SearchProps } from './saved_search_embeddable'; + +interface SavedSearchEmbeddableComponentProps { + searchProps: SearchProps; + useLegacyTable: boolean; + refs: HTMLElement; +} -export function SavedSearchEmbeddableComponent(props: SearchProps) { - const { useLegacyTable } = props; +export function SavedSearchEmbeddableComponent({ + searchProps, + useLegacyTable, + refs, +}: SavedSearchEmbeddableComponentProps) { if (useLegacyTable) { - const docTableProps = props as DocTableEmbeddableProps; + const docTableProps = { + ...searchProps, + refs, + }; return ; } - const discoverGridProps = props as DiscoverGridProps; + const discoverGridProps = searchProps as DiscoverGridProps; return ; } From c540629c136f03c3c00b6135e8c9773bc0a251c3 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Thu, 10 Jun 2021 10:17:07 +0100 Subject: [PATCH 22/23] Do not memoize saved search component --- .../public/application/embeddable/saved_search_embeddable.tsx | 4 ++-- .../embeddable/saved_search_embeddable_component.tsx | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx index 4211180d19367e..c157d6c13827af 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx @@ -28,7 +28,7 @@ import { } from '../../../../data/common'; import { SortOrder } from '../angular/doc_table/components/table_header/helpers'; import { ElasticSearchHit } from '../doc_views/doc_views_types'; -import { SavedSearchEmbeddableComponentMemoized } from './saved_search_embeddable_component'; +import { SavedSearchEmbeddableComponent } from './saved_search_embeddable_component'; import { UiActionsStart } from '../../../../ui_actions/public'; import { getServices } from '../../kibana_services'; import { @@ -385,7 +385,7 @@ export class SavedSearchEmbeddable useLegacyTable, refs: domNode, }; - ReactDOM.render(, domNode); + ReactDOM.render(, domNode); } public reload() { diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx index c4657ce70b568b..ee5b32ae65d4a8 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx @@ -34,5 +34,3 @@ export function SavedSearchEmbeddableComponent({ const discoverGridProps = searchProps as DiscoverGridProps; return ; } - -export const SavedSearchEmbeddableComponentMemoized = React.memo(SavedSearchEmbeddableComponent); From 69e764650e8e80f1e47e8bd1b441ca124f1b8a63 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Thu, 10 Jun 2021 19:20:42 +0100 Subject: [PATCH 23/23] Applying Matthias's suggestion --- .../embeddable/saved_search_embeddable.tsx | 15 +++++---------- .../saved_search_embeddable_component.tsx | 7 +++++-- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx index c157d6c13827af..c885cb92e76497 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx @@ -347,12 +347,12 @@ export class SavedSearchEmbeddable this.prevSearchSessionId = this.input.searchSessionId; this.searchProps = searchProps; await this.fetch(); - if (this.node) { - await this.rerenderComponent(this.node); - } } else if (this.searchProps && this.node) { this.searchProps = searchProps; - this.renderReactComponent(this.node, this.searchProps); + } + + if (this.node) { + this.renderReactComponent(this.node, this.searchProps!); } } @@ -370,15 +370,10 @@ export class SavedSearchEmbeddable this.node = domNode; } - private async rerenderComponent(domNode: HTMLElement) { + private renderReactComponent(domNode: HTMLElement, searchProps: SearchProps) { if (!this.searchProps) { return; } - await this.pushContainerStateParamsToProps(this.searchProps); - this.renderReactComponent(domNode, this.searchProps); - } - - private renderReactComponent(domNode: HTMLElement, searchProps: SearchProps) { const useLegacyTable = this.services.uiSettings.get(DOC_TABLE_LEGACY); const props = { searchProps, diff --git a/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx b/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx index ee5b32ae65d4a8..5b2a2635d04bdf 100644 --- a/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx +++ b/src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx @@ -19,6 +19,9 @@ interface SavedSearchEmbeddableComponentProps { refs: HTMLElement; } +const DiscoverDocTableEmbeddableMemoized = React.memo(DiscoverDocTableEmbeddable); +const DiscoverGridEmbeddableMemoized = React.memo(DiscoverGridEmbeddable); + export function SavedSearchEmbeddableComponent({ searchProps, useLegacyTable, @@ -29,8 +32,8 @@ export function SavedSearchEmbeddableComponent({ ...searchProps, refs, }; - return ; + return ; } const discoverGridProps = searchProps as DiscoverGridProps; - return ; + return ; }