From 286593102ec28f47d5d682b6ded284f222f80203 Mon Sep 17 00:00:00 2001 From: Mykola Harmash Date: Thu, 14 Dec 2023 09:21:11 +0100 Subject: [PATCH] [ObsUX] Use Profiling locators instead of hardcoded URL (#173246) Closes https://github.com/elastic/kibana/issues/173158 Closes https://github.com/elastic/kibana/issues/173152 ## Summary Switches from a hardcoded URL in `` to Profiling locators exposed by `observability_shared`. Also made `` a bit more generic pure visual component. Had to add locators to `observability_shared` plugin start interface as Infra currently does not expose plugins setup interfaces to components. https://github.com/elastic/kibana/assets/793851/5a4df5e2-4305-4439-a831-c9ddc9b82a71 --- .../tabs/profiling/flamegraph.tsx | 18 +++++- .../tabs/profiling/functions.tsx | 18 +++++- .../tabs/profiling/profiling_links.tsx | 36 +++++------ .../observability_shared/public/plugin.ts | 64 ++++++++++++------- 4 files changed, 91 insertions(+), 45 deletions(-) diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/flamegraph.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/flamegraph.tsx index a0fbeb25ca3d1..a00b9373c2f02 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/flamegraph.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/flamegraph.tsx @@ -8,6 +8,8 @@ import React, { useMemo } from 'react'; import { EuiSpacer } from '@elastic/eui'; import { EmbeddableFlamegraph } from '@kbn/observability-shared-plugin/public'; +import { i18n } from '@kbn/i18n'; +import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana'; import { useAssetDetailsRenderPropsContext } from '../../hooks/use_asset_details_render_props'; import { useDatePickerContext } from '../../hooks/use_date_picker'; import { useProfilingFlamegraphData } from '../../hooks/use_profiling_flamegraph_data'; @@ -17,11 +19,17 @@ import { ErrorPrompt } from './error_prompt'; import { ProfilingLinks } from './profiling_links'; export function Flamegraph() { + const { services } = useKibanaContextForPlugin(); const { asset } = useAssetDetailsRenderPropsContext(); const { activeTabId } = useTabSwitcherContext(); - const { getDateRangeInTimestamp } = useDatePickerContext(); + const { dateRange, getDateRangeInTimestamp } = useDatePickerContext(); const { from, to } = getDateRangeInTimestamp(); + const profilingLinkLocator = services.observabilityShared.locators.profiling.flamegraphLocator; + const profilingLinkLabel = i18n.translate('xpack.infra.flamegraph.profilingAppFlamegraphLink', { + defaultMessage: 'Go to Universal Profiling Flamegraph', + }); + const params = useMemo( () => ({ hostname: asset.name, @@ -41,7 +49,13 @@ export function Flamegraph() { return ( <> - + diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/functions.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/functions.tsx index b6089df1bc67c..1b9a58ff561b3 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/functions.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/profiling/functions.tsx @@ -8,6 +8,8 @@ import React, { useMemo } from 'react'; import { EmbeddableFunctions } from '@kbn/observability-shared-plugin/public'; import { EuiSpacer } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana'; import { useAssetDetailsRenderPropsContext } from '../../hooks/use_asset_details_render_props'; import { useDatePickerContext } from '../../hooks/use_date_picker'; import { useProfilingFunctionsData } from '../../hooks/use_profiling_functions_data'; @@ -17,11 +19,17 @@ import { ErrorPrompt } from './error_prompt'; import { ProfilingLinks } from './profiling_links'; export function Functions() { + const { services } = useKibanaContextForPlugin(); const { asset } = useAssetDetailsRenderPropsContext(); const { activeTabId } = useTabSwitcherContext(); - const { getDateRangeInTimestamp } = useDatePickerContext(); + const { dateRange, getDateRangeInTimestamp } = useDatePickerContext(); const { from, to } = getDateRangeInTimestamp(); + const profilingLinkLocator = services.observabilityShared.locators.profiling.topNFunctionsLocator; + const profilingLinkLabel = i18n.translate('xpack.infra.flamegraph.profilingAppTopFunctionsLink', { + defaultMessage: 'Go to Universal Profiling Functions', + }); + const params = useMemo( () => ({ hostname: asset.name, @@ -44,7 +52,13 @@ export function Functions() { return ( <> - + diff --git a/x-pack/plugins/observability_shared/public/plugin.ts b/x-pack/plugins/observability_shared/public/plugin.ts index 93d17b297cfbf..f2caeb94cbca4 100644 --- a/x-pack/plugins/observability_shared/public/plugin.ts +++ b/x-pack/plugins/observability_shared/public/plugin.ts @@ -5,19 +5,32 @@ * 2.0. */ -import { BehaviorSubject } from 'rxjs'; -import type { CoreStart, Plugin, CoreSetup } from '@kbn/core/public'; -import type { GuidedOnboardingPluginStart } from '@kbn/guided-onboarding-plugin/public'; import { CasesUiStart } from '@kbn/cases-plugin/public'; -import { SpacesPluginStart } from '@kbn/spaces-plugin/public'; +import type { CoreSetup, CoreStart, Plugin } from '@kbn/core/public'; import type { EmbeddableStart } from '@kbn/embeddable-plugin/public'; -import type { SharePluginSetup, SharePluginStart } from '@kbn/share-plugin/public'; -import { createNavigationRegistry } from './components/page_template/helpers/navigation_registry'; +import type { GuidedOnboardingPluginStart } from '@kbn/guided-onboarding-plugin/public'; +import type { + BrowserUrlService, + SharePluginSetup, + SharePluginStart, +} from '@kbn/share-plugin/public'; +import { SpacesPluginStart } from '@kbn/spaces-plugin/public'; +import { BehaviorSubject } from 'rxjs'; import { createLazyObservabilityPageTemplate } from './components/page_template'; +import { createNavigationRegistry } from './components/page_template/helpers/navigation_registry'; +import { + type FlamegraphLocator, + FlamegraphLocatorDefinition, +} from './locators/profiling/flamegraph_locator'; +import { + type StacktracesLocator, + StacktracesLocatorDefinition, +} from './locators/profiling/stacktraces_locator'; +import { + type TopNFunctionsLocator, + TopNFunctionsLocatorDefinition, +} from './locators/profiling/topn_functions_locator'; import { updateGlobalNavigation } from './services/update_global_navigation'; -import { FlamegraphLocatorDefinition } from './locators/profiling/flamegraph_locator'; -import { TopNFunctionsLocatorDefinition } from './locators/profiling/topn_functions_locator'; -import { StacktracesLocatorDefinition } from './locators/profiling/stacktraces_locator'; export interface ObservabilitySharedSetup { share: SharePluginSetup; @@ -36,6 +49,14 @@ export type ObservabilitySharedPluginSetup = ReturnType; export type ProfilingLocators = ObservabilitySharedPluginSetup['locators']['profiling']; +interface ObservabilitySharedLocators { + profiling: { + flamegraphLocator: FlamegraphLocator; + topNFunctionsLocator: TopNFunctionsLocator; + stacktracesLocator: StacktracesLocator; + }; +} + export class ObservabilitySharedPlugin implements Plugin { private readonly navigationRegistry = createNavigationRegistry(); private isSidebarEnabled$: BehaviorSubject; @@ -46,19 +67,7 @@ export class ObservabilitySharedPlugin implements Plugin { public setup(coreSetup: CoreSetup, pluginsSetup: ObservabilitySharedSetup) { return { - locators: { - profiling: { - flamegraphLocator: pluginsSetup.share.url.locators.create( - new FlamegraphLocatorDefinition() - ), - topNFunctionsLocator: pluginsSetup.share.url.locators.create( - new TopNFunctionsLocatorDefinition() - ), - stacktracesLocator: pluginsSetup.share.url.locators.create( - new StacktracesLocatorDefinition() - ), - }, - }, + locators: this.createLocators(pluginsSetup.share.url), navigation: { registerSections: this.navigationRegistry.registerSections, }, @@ -79,6 +88,7 @@ export class ObservabilitySharedPlugin implements Plugin { }); return { + locators: this.createLocators(plugins.share.url), navigation: { PageTemplate, registerSections: this.navigationRegistry.registerSections, @@ -89,4 +99,14 @@ export class ObservabilitySharedPlugin implements Plugin { } public stop() {} + + private createLocators(urlService: BrowserUrlService): ObservabilitySharedLocators { + return { + profiling: { + flamegraphLocator: urlService.locators.create(new FlamegraphLocatorDefinition()), + topNFunctionsLocator: urlService.locators.create(new TopNFunctionsLocatorDefinition()), + stacktracesLocator: urlService.locators.create(new StacktracesLocatorDefinition()), + }, + }; + } }