From ea67898f5b58973d3bf8e58e17621c568217d3d0 Mon Sep 17 00:00:00 2001 From: Caue Marcondes Date: Tue, 21 Nov 2023 11:14:41 +0000 Subject: [PATCH] addressing pr comments --- .../app/profiling_overview/index.tsx | 45 ++++++----- .../profiling_flamegraph.tsx | 22 ++---- .../profiling_top_functions.tsx | 22 ++---- .../routing/service_detail/index.tsx | 4 +- .../embeddable_profiling_search_bar.tsx | 71 +++++++++++++++++ .../components/profiling/embeddables/index.ts | 10 ++- .../embeddables/profiling_embeddable.tsx | 16 +--- .../observability_shared/public/index.ts | 5 +- .../profiling_search_bar.tsx | 3 + .../flamegraph/embeddable_flamegraph.tsx | 30 ++----- .../embeddable_flamegraph_factory.ts | 7 +- .../functions/embeddable_functions.tsx | 31 ++------ .../functions/embeddable_functions_factory.ts | 7 +- .../profiling_embeddable_search_bar.tsx | 33 -------- .../embeddables/register_embeddables.ts | 6 ++ .../search_bar/embeddable_search_bar.tsx | 78 +++++++++++++++++++ .../embeddable_search_bar_factory.ts | 41 ++++++++++ x-pack/plugins/profiling/public/types.ts | 6 ++ 18 files changed, 273 insertions(+), 164 deletions(-) create mode 100644 x-pack/plugins/observability_shared/public/components/profiling/embeddables/embeddable_profiling_search_bar.tsx delete mode 100644 x-pack/plugins/profiling/public/embeddables/profiling_embeddable_search_bar.tsx create mode 100644 x-pack/plugins/profiling/public/embeddables/search_bar/embeddable_search_bar.tsx create mode 100644 x-pack/plugins/profiling/public/embeddables/search_bar/embeddable_search_bar_factory.ts diff --git a/x-pack/plugins/apm/public/components/app/profiling_overview/index.tsx b/x-pack/plugins/apm/public/components/app/profiling_overview/index.tsx index e5e8adff6e997a..cdd9699ebadc10 100644 --- a/x-pack/plugins/apm/public/components/app/profiling_overview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/profiling_overview/index.tsx @@ -17,8 +17,9 @@ import { } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { useKibana } from '@kbn/kibana-react-plugin/public'; -import React, { useMemo, useState } from 'react'; -import { ProfilingSearchBarFilter } from '@kbn/observability-shared-plugin/public'; +import { EmbeddableProfilingSearchBar } from '@kbn/observability-shared-plugin/public'; +import React, { useMemo } from 'react'; +import { useHistory } from 'react-router-dom'; import { ApmDocumentType } from '../../../../common/document_type'; import { useApmParams } from '../../../hooks/use_apm_params'; import { useLocalStorage } from '../../../hooks/use_local_storage'; @@ -26,17 +27,19 @@ import { usePreferredDataSourceAndBucketSize } from '../../../hooks/use_preferre import { useProfilingPlugin } from '../../../hooks/use_profiling_plugin'; import { useTimeRange } from '../../../hooks/use_time_range'; import { ApmPluginStartDeps } from '../../../plugin'; +import { push } from '../../shared/links/url_helpers'; import { ProfilingFlamegraph } from './profiling_flamegraph'; import { ProfilingTopNFunctions } from './profiling_top_functions'; export function ProfilingOverview() { + const history = useHistory(); const { services } = useKibana(); const { path: { serviceName }, query: { rangeFrom, rangeTo, environment, kuery }, } = useApmParams('/services/{serviceName}/profiling'); const { isProfilingAvailable } = useProfilingPlugin(); - const { start, end } = useTimeRange({ rangeFrom, rangeTo }); + const { start, end, refreshTimeRange } = useTimeRange({ rangeFrom, rangeTo }); const preferred = usePreferredDataSourceAndBucketSize({ start, end, @@ -44,11 +47,6 @@ export function ProfilingOverview() { type: ApmDocumentType.TransactionMetric, numBuckets: 20, }); - const [searchBarFilter, setSearchBarFilter] = - useState({ - id: '', - filters: '', - }); const [ apmUniversalProfilingShowCallout, @@ -74,8 +72,7 @@ export function ProfilingOverview() { end={end} environment={environment} dataSource={preferred?.source} - searchBarFilter={searchBarFilter} - onSearchBarFilterChange={setSearchBarFilter} + kuery={kuery} /> ), @@ -96,21 +93,13 @@ export function ProfilingOverview() { startIndex={0} endIndex={10} dataSource={preferred?.source} - searchBarFilter={searchBarFilter} - onSearchBarFilterChange={setSearchBarFilter} + kuery={kuery} /> ), }, ]; - }, [ - end, - environment, - preferred?.source, - searchBarFilter, - serviceName, - start, - ]); + }, [end, environment, kuery, preferred?.source, serviceName, start]); if (!isProfilingAvailable) { return null; @@ -165,6 +154,22 @@ export function ProfilingOverview() { )} + { + push(history, { + query: { + kuery: next.query, + rangeFrom: next.dateRange.from, + rangeTo: next.dateRange.to, + }, + }); + }} + onRefresh={refreshTimeRange} + /> + ; - searchBarFilter: ProfilingSearchBarFilter; - onSearchBarFilterChange: (next: ProfilingSearchBarFilter) => void; + kuery: string; } export function ProfilingFlamegraph({ @@ -52,8 +48,7 @@ export function ProfilingFlamegraph({ serviceName, environment, dataSource, - searchBarFilter, - onSearchBarFilterChange, + kuery, }: Props) { const { profilingLocators } = useProfilingPlugin(); @@ -71,14 +66,14 @@ export function ProfilingFlamegraph({ environment, documentType: dataSource.documentType, rollupInterval: dataSource.rollupInterval, - kuery: searchBarFilter.filters, + kuery, }, }, } ); } }, - [dataSource, serviceName, start, end, environment, searchBarFilter] + [dataSource, serviceName, start, end, environment, kuery] ); const hostNamesKueryFormat = toKueryFilterFormat( @@ -97,10 +92,7 @@ export function ProfilingFlamegraph({ {i18n.translate('xpack.apm.profiling.flamegraph.link', { @@ -127,8 +119,6 @@ export function ProfilingFlamegraph({ data={data?.flamegraph} isLoading={isPending(status)} height="60vh" - onSearchBarFilterChange={onSearchBarFilterChange} - searchBarFilter={searchBarFilter} /> )} diff --git a/x-pack/plugins/apm/public/components/app/profiling_overview/profiling_top_functions.tsx b/x-pack/plugins/apm/public/components/app/profiling_overview/profiling_top_functions.tsx index f17ee803375d00..7b428802fbfc18 100644 --- a/x-pack/plugins/apm/public/components/app/profiling_overview/profiling_top_functions.tsx +++ b/x-pack/plugins/apm/public/components/app/profiling_overview/profiling_top_functions.tsx @@ -7,10 +7,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { - EmbeddableFunctions, - ProfilingSearchBarFilter, -} from '@kbn/observability-shared-plugin/public'; +import { EmbeddableFunctions } from '@kbn/observability-shared-plugin/public'; import React from 'react'; import { ApmDataSourceWithSummary } from '../../../../common/data_source'; import { ApmDocumentType } from '../../../../common/document_type'; @@ -33,8 +30,7 @@ interface Props { dataSource?: ApmDataSourceWithSummary< ApmDocumentType.TransactionMetric | ApmDocumentType.TransactionEvent >; - searchBarFilter: ProfilingSearchBarFilter; - onSearchBarFilterChange: (next: ProfilingSearchBarFilter) => void; + kuery: string; } export function ProfilingTopNFunctions({ @@ -45,8 +41,7 @@ export function ProfilingTopNFunctions({ startIndex, endIndex, dataSource, - searchBarFilter, - onSearchBarFilterChange, + kuery, }: Props) { const { profilingLocators } = useProfilingPlugin(); @@ -66,7 +61,7 @@ export function ProfilingTopNFunctions({ endIndex, documentType: dataSource.documentType, rollupInterval: dataSource.rollupInterval, - kuery: searchBarFilter.filters, + kuery, }, }, } @@ -81,7 +76,7 @@ export function ProfilingTopNFunctions({ environment, startIndex, endIndex, - searchBarFilter, + kuery, ] ); @@ -101,10 +96,7 @@ export function ProfilingTopNFunctions({ {i18n.translate('xpack.apm.profiling.topnFunctions.link', { @@ -120,8 +112,6 @@ export function ProfilingTopNFunctions({ isLoading={isPending(status)} rangeFrom={new Date(start).valueOf()} rangeTo={new Date(end).valueOf()} - onSearchBarFilterChange={onSearchBarFilterChange} - searchBarFilter={searchBarFilter} /> ); diff --git a/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx b/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx index 56deaaa2e6d6e6..f2601e392b2761 100644 --- a/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx +++ b/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx @@ -371,9 +371,7 @@ export const serviceDetailRoute = { }), element: , searchBarOptions: { - showTimeComparison: false, - showTransactionTypeSelector: false, - showQueryInput: false, + hidden: true, }, }), }, diff --git a/x-pack/plugins/observability_shared/public/components/profiling/embeddables/embeddable_profiling_search_bar.tsx b/x-pack/plugins/observability_shared/public/components/profiling/embeddables/embeddable_profiling_search_bar.tsx new file mode 100644 index 00000000000000..02908cdf67a0cb --- /dev/null +++ b/x-pack/plugins/observability_shared/public/components/profiling/embeddables/embeddable_profiling_search_bar.tsx @@ -0,0 +1,71 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { css } from '@emotion/react'; +import { useKibana } from '@kbn/kibana-react-plugin/public'; +import { default as React, useEffect, useRef, useState } from 'react'; +import { EMBEDDABLE_PROFILING_SEARCH_BAR } from '.'; +import { ObservabilitySharedStart } from '../../../plugin'; + +export interface EmbeddableProfilingSearchBarProps { + kuery: string; + showDatePicker?: boolean; + onQuerySubmit: (params: { + dateRange: { from: string; to: string; mode?: 'absolute' | 'relative' }; + query: string; + }) => void; + onRefresh: () => void; + rangeFrom: string; + rangeTo: string; +} + +export function EmbeddableProfilingSearchBar(props: EmbeddableProfilingSearchBarProps) { + const { embeddable: embeddablePlugin } = useKibana().services; + const [embeddable, setEmbeddable] = useState(); + const embeddableRoot: React.RefObject = useRef(null); + + useEffect(() => { + async function createEmbeddable() { + const factory = embeddablePlugin?.getEmbeddableFactory(EMBEDDABLE_PROFILING_SEARCH_BAR); + const input = { + id: 'embeddable_profiling', + }; + const embeddableObject = await factory?.create(input); + setEmbeddable(embeddableObject); + } + createEmbeddable(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + useEffect(() => { + if (embeddableRoot.current && embeddable) { + embeddable.render(embeddableRoot.current); + } + }, [embeddable, embeddableRoot]); + + useEffect(() => { + if (embeddable) { + embeddable.updateInput({ + ...props, + }); + embeddable.reload(); + } + }, [embeddable, props]); + + return ( +
+ ); +} diff --git a/x-pack/plugins/observability_shared/public/components/profiling/embeddables/index.ts b/x-pack/plugins/observability_shared/public/components/profiling/embeddables/index.ts index 3ac9a10473a50a..05556b839cff48 100644 --- a/x-pack/plugins/observability_shared/public/components/profiling/embeddables/index.ts +++ b/x-pack/plugins/observability_shared/public/components/profiling/embeddables/index.ts @@ -14,5 +14,11 @@ export { EmbeddableFlamegraph } from './embeddable_flamegraph'; export const EMBEDDABLE_FUNCTIONS = 'EMBEDDABLE_FUNCTIONS'; /** Profiling functions embeddable */ export { EmbeddableFunctions } from './embeddable_functions'; -/** Profiling Search bar params */ -export type { ProfilingSearchBarFilter } from './profiling_embeddable'; + +/** Profiling search bar embeddable key */ +export const EMBEDDABLE_PROFILING_SEARCH_BAR = 'EMBEDDABLE_PROFILING_SEARCH_BAR'; +/** Profiling search bar embeddable */ +export { + EmbeddableProfilingSearchBar, + type EmbeddableProfilingSearchBarProps, +} from './embeddable_profiling_search_bar'; diff --git a/x-pack/plugins/observability_shared/public/components/profiling/embeddables/profiling_embeddable.tsx b/x-pack/plugins/observability_shared/public/components/profiling/embeddables/profiling_embeddable.tsx index 7a309d2e866722..00f29c10c1593d 100644 --- a/x-pack/plugins/observability_shared/public/components/profiling/embeddables/profiling_embeddable.tsx +++ b/x-pack/plugins/observability_shared/public/components/profiling/embeddables/profiling_embeddable.tsx @@ -10,28 +10,18 @@ import { useKibana } from '@kbn/kibana-react-plugin/public'; import React, { useEffect, useRef, useState } from 'react'; import { ObservabilitySharedStart } from '../../../plugin'; -export interface ProfilingSearchBarFilter { - filters: string; - /** Is used to force a new api call when refresh button is clicked without any changes in the query value */ - id: string; -} - export interface ProfilingEmbeddableProps { data?: T; embeddableFactoryId: string; isLoading: boolean; height?: string; - searchBarFilter?: ProfilingSearchBarFilter; - onSearchBarFilterChange?: (params: ProfilingSearchBarFilter) => void; } export function ProfilingEmbeddable({ embeddableFactoryId, data, isLoading, - onSearchBarFilterChange, height, - searchBarFilter, ...props }: ProfilingEmbeddableProps) { const { embeddable: embeddablePlugin } = useKibana().services; @@ -45,8 +35,6 @@ export function ProfilingEmbeddable({ id: 'embeddable_profiling', data, isLoading, - onSearchBarFilterChange, - searchBarFilter, }; const embeddableObject = await factory?.create(input); setEmbeddable(embeddableObject); @@ -66,13 +54,11 @@ export function ProfilingEmbeddable({ embeddable.updateInput({ data, isLoading, - onSearchBarFilterChange, - searchBarFilter, ...props, }); embeddable.reload(); } - }, [data, embeddable, isLoading, onSearchBarFilterChange, searchBarFilter, props]); + }, [data, embeddable, isLoading, props]); return (
); } diff --git a/x-pack/plugins/profiling/public/embeddables/flamegraph/embeddable_flamegraph.tsx b/x-pack/plugins/profiling/public/embeddables/flamegraph/embeddable_flamegraph.tsx index ce53e5a6e88eaa..b88881ea04cba4 100644 --- a/x-pack/plugins/profiling/public/embeddables/flamegraph/embeddable_flamegraph.tsx +++ b/x-pack/plugins/profiling/public/embeddables/flamegraph/embeddable_flamegraph.tsx @@ -4,7 +4,6 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { Embeddable, EmbeddableOutput, IContainer } from '@kbn/embeddable-plugin/public'; import { EMBEDDABLE_FLAMEGRAPH } from '@kbn/observability-shared-plugin/public'; import { createFlameGraph } from '@kbn/profiling-utils'; @@ -16,7 +15,6 @@ import { ProfilingEmbeddableProvider, ProfilingEmbeddablesDependencies, } from '../profiling_embeddable_provider'; -import { ProfilingEmbeddableSearchBar } from '../profiling_embeddable_search_bar'; import { EmbeddableFlamegraphEmbeddableInput } from './embeddable_flamegraph_factory'; export class EmbeddableFlamegraph extends Embeddable< @@ -36,30 +34,18 @@ export class EmbeddableFlamegraph extends Embeddable< render(domNode: HTMLElement) { this._domNode = domNode; - const { data, isLoading, onSearchBarFilterChange, searchBarFilter } = this.input; + const { data, isLoading } = this.input; const flamegraph = !isLoading && data ? createFlameGraph(data) : undefined; render( - - {onSearchBarFilterChange ? ( - - - - ) : null} - - - <> - {flamegraph && ( - - )} - - - - + + <> + {flamegraph && ( + + )} + + , domNode ); diff --git a/x-pack/plugins/profiling/public/embeddables/flamegraph/embeddable_flamegraph_factory.ts b/x-pack/plugins/profiling/public/embeddables/flamegraph/embeddable_flamegraph_factory.ts index 16525b9bb2bde0..259c61df525e03 100644 --- a/x-pack/plugins/profiling/public/embeddables/flamegraph/embeddable_flamegraph_factory.ts +++ b/x-pack/plugins/profiling/public/embeddables/flamegraph/embeddable_flamegraph_factory.ts @@ -9,18 +9,13 @@ import { EmbeddableInput, IContainer, } from '@kbn/embeddable-plugin/public'; -import { - EMBEDDABLE_FLAMEGRAPH, - ProfilingSearchBarFilter, -} from '@kbn/observability-shared-plugin/public'; +import { EMBEDDABLE_FLAMEGRAPH } from '@kbn/observability-shared-plugin/public'; import type { BaseFlameGraph } from '@kbn/profiling-utils'; import type { GetProfilingEmbeddableDependencies } from '../profiling_embeddable_provider'; interface EmbeddableFlamegraphInput { data?: BaseFlameGraph; isLoading: boolean; - onSearchBarFilterChange?: (filters: ProfilingSearchBarFilter) => void; - searchBarFilter?: ProfilingSearchBarFilter; } export type EmbeddableFlamegraphEmbeddableInput = EmbeddableFlamegraphInput & EmbeddableInput; diff --git a/x-pack/plugins/profiling/public/embeddables/functions/embeddable_functions.tsx b/x-pack/plugins/profiling/public/embeddables/functions/embeddable_functions.tsx index b8067cd4180dce..9a198ae66e262b 100644 --- a/x-pack/plugins/profiling/public/embeddables/functions/embeddable_functions.tsx +++ b/x-pack/plugins/profiling/public/embeddables/functions/embeddable_functions.tsx @@ -8,15 +8,13 @@ import { Embeddable, EmbeddableOutput, IContainer } from '@kbn/embeddable-plugin import { EMBEDDABLE_FUNCTIONS } from '@kbn/observability-shared-plugin/public'; import React from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { AsyncEmbeddableComponent } from '../async_embeddable_component'; -import { EmbeddableFunctionsEmbeddableInput } from './embeddable_functions_factory'; -import { EmbeddableFunctionsGrid } from './embeddable_functions_grid'; import { ProfilingEmbeddableProvider, ProfilingEmbeddablesDependencies, } from '../profiling_embeddable_provider'; -import { ProfilingEmbeddableSearchBar } from '../profiling_embeddable_search_bar'; +import { EmbeddableFunctionsEmbeddableInput } from './embeddable_functions_factory'; +import { EmbeddableFunctionsGrid } from './embeddable_functions_grid'; export class EmbeddableFunctions extends Embeddable< EmbeddableFunctionsEmbeddableInput, @@ -35,28 +33,15 @@ export class EmbeddableFunctions extends Embeddable< render(domNode: HTMLElement) { this._domNode = domNode; - const { data, isLoading, rangeFrom, rangeTo, onSearchBarFilterChange, searchBarFilter } = - this.input; + const { data, isLoading, rangeFrom, rangeTo } = this.input; const totalSeconds = (rangeTo - rangeFrom) / 1000; render( - - {onSearchBarFilterChange ? ( - - - - ) : null} - - -
- -
- - - + +
+ +
+ , domNode ); diff --git a/x-pack/plugins/profiling/public/embeddables/functions/embeddable_functions_factory.ts b/x-pack/plugins/profiling/public/embeddables/functions/embeddable_functions_factory.ts index d9873a9ad6e8d1..99e0d4baa4859f 100644 --- a/x-pack/plugins/profiling/public/embeddables/functions/embeddable_functions_factory.ts +++ b/x-pack/plugins/profiling/public/embeddables/functions/embeddable_functions_factory.ts @@ -9,10 +9,7 @@ import { EmbeddableInput, IContainer, } from '@kbn/embeddable-plugin/public'; -import { - EMBEDDABLE_FUNCTIONS, - ProfilingSearchBarFilter, -} from '@kbn/observability-shared-plugin/public'; +import { EMBEDDABLE_FUNCTIONS } from '@kbn/observability-shared-plugin/public'; import type { TopNFunctions } from '@kbn/profiling-utils'; import { GetProfilingEmbeddableDependencies } from '../profiling_embeddable_provider'; @@ -21,8 +18,6 @@ interface EmbeddableFunctionsInput { isLoading: boolean; rangeFrom: number; rangeTo: number; - onSearchBarFilterChange?: (filters: ProfilingSearchBarFilter) => void; - searchBarFilter?: ProfilingSearchBarFilter; } export type EmbeddableFunctionsEmbeddableInput = EmbeddableFunctionsInput & EmbeddableInput; diff --git a/x-pack/plugins/profiling/public/embeddables/profiling_embeddable_search_bar.tsx b/x-pack/plugins/profiling/public/embeddables/profiling_embeddable_search_bar.tsx deleted file mode 100644 index 8b52d5aa9d3232..00000000000000 --- a/x-pack/plugins/profiling/public/embeddables/profiling_embeddable_search_bar.tsx +++ /dev/null @@ -1,33 +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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { ProfilingSearchBarFilter } from '@kbn/observability-shared-plugin/public'; -import React from 'react'; -import { v4 } from 'uuid'; -import { ProfilingSearchBar } from '../components/profiling_app_page_template/profiling_search_bar'; - -interface Props { - onQuerySubmit: (filters: ProfilingSearchBarFilter) => void; - kuery?: string; -} - -export function ProfilingEmbeddableSearchBar({ onQuerySubmit, kuery = '' }: Props) { - return ( - { - const filters = String(next.query?.query || ''); - onQuerySubmit({ id: v4(), filters }); - }} - onRefreshClick={() => { - onQuerySubmit({ id: v4(), filters: kuery }); - }} - /> - ); -} diff --git a/x-pack/plugins/profiling/public/embeddables/register_embeddables.ts b/x-pack/plugins/profiling/public/embeddables/register_embeddables.ts index d7b2e947144bd2..2c229414960a6b 100644 --- a/x-pack/plugins/profiling/public/embeddables/register_embeddables.ts +++ b/x-pack/plugins/profiling/public/embeddables/register_embeddables.ts @@ -9,10 +9,12 @@ import { EmbeddableSetup } from '@kbn/embeddable-plugin/public'; import { EMBEDDABLE_FLAMEGRAPH, EMBEDDABLE_FUNCTIONS, + EMBEDDABLE_PROFILING_SEARCH_BAR, } from '@kbn/observability-shared-plugin/public'; import { EmbeddableFlamegraphFactory } from './flamegraph/embeddable_flamegraph_factory'; import { EmbeddableFunctionsFactory } from './functions/embeddable_functions_factory'; import { GetProfilingEmbeddableDependencies } from './profiling_embeddable_provider'; +import { EmbeddableSearchBarFactory } from './search_bar/embeddable_search_bar_factory'; export function registerEmbeddables( embeddable: EmbeddableSetup, @@ -26,4 +28,8 @@ export function registerEmbeddables( EMBEDDABLE_FUNCTIONS, new EmbeddableFunctionsFactory(getProfilingEmbeddableDependencies) ); + embeddable.registerEmbeddableFactory( + EMBEDDABLE_PROFILING_SEARCH_BAR, + new EmbeddableSearchBarFactory(getProfilingEmbeddableDependencies) + ); } diff --git a/x-pack/plugins/profiling/public/embeddables/search_bar/embeddable_search_bar.tsx b/x-pack/plugins/profiling/public/embeddables/search_bar/embeddable_search_bar.tsx new file mode 100644 index 00000000000000..cbc773abfc0f78 --- /dev/null +++ b/x-pack/plugins/profiling/public/embeddables/search_bar/embeddable_search_bar.tsx @@ -0,0 +1,78 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import { css } from '@emotion/react'; +import { Embeddable, EmbeddableOutput, IContainer } from '@kbn/embeddable-plugin/public'; +import { EMBEDDABLE_PROFILING_SEARCH_BAR } from '@kbn/observability-shared-plugin/public'; +import React from 'react'; +import { render, unmountComponentAtNode } from 'react-dom'; +import { ProfilingSearchBar } from '../../components/profiling_app_page_template/profiling_search_bar'; +import { + ProfilingEmbeddableProvider, + ProfilingEmbeddablesDependencies, +} from '../profiling_embeddable_provider'; +import { EmbeddableSearchBarEmbeddableInput } from './embeddable_search_bar_factory'; + +export class EmbeddableSearchBar extends Embeddable< + EmbeddableSearchBarEmbeddableInput, + EmbeddableOutput +> { + readonly type = EMBEDDABLE_PROFILING_SEARCH_BAR; + private _domNode?: HTMLElement; + + constructor( + private deps: ProfilingEmbeddablesDependencies, + initialInput: EmbeddableSearchBarEmbeddableInput, + parent?: IContainer + ) { + super(initialInput, {}, parent); + } + + render(domNode: HTMLElement) { + this._domNode = domNode; + const { showDatePicker, kuery, onQuerySubmit, onRefresh, rangeFrom, rangeTo } = this.input; + + render( + +
+ { + onQuerySubmit({ + dateRange, + query: typeof query?.query === 'string' ? query.query : '', + }); + }} + onRefresh={onRefresh} + onRefreshClick={onRefresh} + showQueryMenu={false} + rangeFrom={rangeFrom} + rangeTo={rangeTo} + /> +
+ , + domNode + ); + } + + public destroy() { + if (this._domNode) { + unmountComponentAtNode(this._domNode); + } + } + + reload() { + if (this._domNode) { + this.render(this._domNode); + } + } +} diff --git a/x-pack/plugins/profiling/public/embeddables/search_bar/embeddable_search_bar_factory.ts b/x-pack/plugins/profiling/public/embeddables/search_bar/embeddable_search_bar_factory.ts new file mode 100644 index 00000000000000..cc7443976e1b18 --- /dev/null +++ b/x-pack/plugins/profiling/public/embeddables/search_bar/embeddable_search_bar_factory.ts @@ -0,0 +1,41 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import { + EmbeddableFactoryDefinition, + EmbeddableInput, + IContainer, +} from '@kbn/embeddable-plugin/public'; +import { + EmbeddableProfilingSearchBarProps, + EMBEDDABLE_PROFILING_SEARCH_BAR, +} from '@kbn/observability-shared-plugin/public'; +import type { GetProfilingEmbeddableDependencies } from '../profiling_embeddable_provider'; + +export type EmbeddableSearchBarEmbeddableInput = EmbeddableProfilingSearchBarProps & + EmbeddableInput; + +export class EmbeddableSearchBarFactory + implements EmbeddableFactoryDefinition +{ + readonly type = EMBEDDABLE_PROFILING_SEARCH_BAR; + + constructor(private getProfilingEmbeddableDependencies: GetProfilingEmbeddableDependencies) {} + + async isEditable() { + return false; + } + + async create(input: EmbeddableSearchBarEmbeddableInput, parent?: IContainer) { + const { EmbeddableSearchBar } = await import('./embeddable_search_bar'); + const deps = await this.getProfilingEmbeddableDependencies(); + return new EmbeddableSearchBar(deps, input, parent); + } + + getDisplayName() { + return 'Universal Profiling Search bar'; + } +} diff --git a/x-pack/plugins/profiling/public/types.ts b/x-pack/plugins/profiling/public/types.ts index e583a4962dc684..cc949254e27079 100644 --- a/x-pack/plugins/profiling/public/types.ts +++ b/x-pack/plugins/profiling/public/types.ts @@ -25,6 +25,10 @@ import { ObservabilityAIAssistantPluginStart, } from '@kbn/observability-ai-assistant-plugin/public'; import { EmbeddableSetup } from '@kbn/embeddable-plugin/public'; +import type { + UnifiedSearchPublicPluginStart, + UnifiedSearchPluginSetup, +} from '@kbn/unified-search-plugin/public'; export interface ProfilingPluginPublicSetupDeps { observability: ObservabilityPublicSetup; @@ -36,6 +40,7 @@ export interface ProfilingPluginPublicSetupDeps { licensing: LicensingPluginSetup; share: SharePluginSetup; embeddable: EmbeddableSetup; + unifiedSearch: UnifiedSearchPluginSetup; } export interface ProfilingPluginPublicStartDeps { @@ -46,4 +51,5 @@ export interface ProfilingPluginPublicStartDeps { data: DataPublicPluginStart; charts: ChartsPluginStart; share: SharePluginStart; + unifiedSearch: UnifiedSearchPublicPluginStart; }