From 586330bd0b557640faa3e019201592f67d180aa4 Mon Sep 17 00:00:00 2001 From: Irene Blanco Date: Fri, 18 Oct 2024 12:21:48 +0200 Subject: [PATCH] [APM/Infra] Display entity detail views for logs-only signals when EEM is enabled (#196387) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Closes https://github.com/elastic/kibana/issues/196084. We want to show Service, Host and Container views instead of onboarging when EEM is enabled, entityCentricExperience advanced setting is enabled and the entity has logs. >[!NOTE] The visibility of the noDataConfig is evaluated at a generic template level for all 3 entity types. To manage visibility based on entity-specific information (checking for logs), we had to add checks within these templates. While this isn’t an ideal solution, it’s temporary, as we expect upcoming generic entity views will eventually allow us to remove this logic. ## Implementation details There's no need to check if EEM is enabled, as the used `dataStreams` information won’t return any results if EEM is disabled. This makes the extra check unnecessary. |Entity|Before|After| |-|-|-| |Service|![logs_only_service_before](https://github.com/user-attachments/assets/b92e7801-058d-4dc7-8cc8-eea128f19e4c)|![logs_only_service_after](https://github.com/user-attachments/assets/52eaa3cd-9cb9-427d-b9c2-d87ae6440dac)| |Host/Container|![logs_only_host_before](https://github.com/user-attachments/assets/211b2f37-0cba-42e7-bb14-ad3f44fa1a51)|![logs_only_host_after](https://github.com/user-attachments/assets/32cab468-f3d0-49f9-8835-deb016189a14)| --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Cauê Marcondes <55978943+cauemarcondes@users.noreply.github.com> --- .../templates/apm_main_template/index.tsx | 24 ++++++++++--------- .../asset_details/template/page.tsx | 17 ++++++++++--- .../utils/get_data_stream_types.ts | 4 ++++ .../shared/templates/infra_page_template.tsx | 22 ++++++++++------- .../shared/templates/no_data_config.ts | 4 ++-- .../use_entity_centric_experience_setting.tsx | 17 +++++++++++++ .../pages/metrics/inventory_view/index.tsx | 2 ++ .../components/node_details_page.tsx | 2 ++ .../metric_detail/metric_detail_page.tsx | 3 ++- .../pages/metrics/metrics_explorer/index.tsx | 2 ++ 10 files changed, 71 insertions(+), 26 deletions(-) create mode 100644 x-pack/plugins/observability_solution/infra/public/hooks/use_entity_centric_experience_setting.tsx diff --git a/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/index.tsx index f4ef2044a38c7..3f05d872f6d1f 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/index.tsx @@ -7,12 +7,13 @@ import { EuiFlexGroup, EuiPageHeaderProps } from '@elastic/eui'; import { useKibana } from '@kbn/kibana-react-plugin/public'; -import { entityCentricExperience } from '@kbn/observability-plugin/common'; import { ObservabilityPageTemplateProps } from '@kbn/observability-shared-plugin/public'; import type { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template'; import React, { useContext } from 'react'; import { useLocation } from 'react-router-dom'; import { FeatureFeedbackButton } from '@kbn/observability-shared-plugin/public'; +import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context'; +import { isLogsSignal } from '../../../../utils/get_signal_type'; import { useLocalStorage } from '../../../../hooks/use_local_storage'; import { useDefaultAiAssistantStarterPromptsForAPM } from '../../../../hooks/use_default_ai_assistant_starter_prompts_for_apm'; import { KibanaEnvironmentContext } from '../../../../context/kibana_environment_context/kibana_environment_context'; @@ -71,12 +72,8 @@ export function ApmMainTemplate({ const { http, docLinks, observabilityShared, application } = services; const { kibanaVersion, isCloudEnv, isServerlessEnv } = kibanaEnvironment; const basePath = http?.basePath.get(); - const { config, core } = useApmPluginContext(); - const isEntityCentricExperienceSettingEnabled = core.uiSettings.get( - entityCentricExperience, - true - ); - + const { config } = useApmPluginContext(); + const { serviceEntitySummary } = useApmServiceContext(); const { isEntityCentricExperienceEnabled } = useEntityCentricExperienceSetting(); const ObservabilityPageTemplate = observabilityShared.navigation.PageTemplate; @@ -97,9 +94,14 @@ export function ApmMainTemplate({ [application?.capabilities.savedObjectsManagement.edit] ); - const shouldBypassNoDataScreen = bypassNoDataScreenPaths.some((path) => - location.pathname.includes(path) - ); + const hasLogsData = serviceEntitySummary?.dataStreamTypes + ? serviceEntitySummary?.dataStreamTypes?.length > 0 && + isLogsSignal(serviceEntitySummary.dataStreamTypes) + : false; + + const shouldBypassNoDataScreen = + bypassNoDataScreenPaths.some((path) => location.pathname.includes(path)) || + (isEntityCentricExperienceEnabled && hasLogsData); const { data: fleetApmPoliciesData, status: fleetApmPoliciesStatus } = useFetcher( (callApmApi) => { @@ -158,7 +160,7 @@ export function ApmMainTemplate({ const showEntitiesInventoryCallout = !dismissedEntitiesInventoryCallout && - isEntityCentricExperienceSettingEnabled && + isEntityCentricExperienceEnabled && selectedNavButton !== undefined; return ( diff --git a/x-pack/plugins/observability_solution/infra/public/components/asset_details/template/page.tsx b/x-pack/plugins/observability_solution/infra/public/components/asset_details/template/page.tsx index 363fc88c8a490..c6e8790eeff6a 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/asset_details/template/page.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/asset_details/template/page.tsx @@ -8,6 +8,8 @@ import React, { useEffect } from 'react'; import type { InventoryItemType } from '@kbn/metrics-data-access-plugin/common'; import { EuiLoadingSpinner } from '@elastic/eui'; +import { useEntityCentricExperienceSetting } from '../../../hooks/use_entity_centric_experience_setting'; +import { isPending } from '../../../hooks/use_fetcher'; import { SYSTEM_INTEGRATION } from '../../../../common/constants'; import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs'; import { useParentBreadcrumbResolver } from '../../../hooks/use_parent_breadcrumb_resolver'; @@ -24,7 +26,7 @@ import { InfraPageTemplate } from '../../shared/templates/infra_page_template'; import { OnboardingFlow } from '../../shared/templates/no_data_config'; import { PageTitleWithPopover } from '../header/page_title_with_popover'; import { useEntitySummary } from '../hooks/use_entity_summary'; -import { isMetricsSignal } from '../utils/get_data_stream_types'; +import { isLogsSignal, isMetricsSignal } from '../utils/get_data_stream_types'; const DATA_AVAILABILITY_PER_TYPE: Partial> = { host: [SYSTEM_INTEGRATION], @@ -36,10 +38,11 @@ export const Page = ({ tabs = [], links = [] }: ContentTemplateProps) => { const { rightSideItems, tabEntries, breadcrumbs: headerBreadcrumbs } = usePageHeader(tabs, links); const { asset } = useAssetDetailsRenderPropsContext(); const trackOnlyOnce = React.useRef(false); - const { dataStreams } = useEntitySummary({ + const { dataStreams, status: entitySummaryStatus } = useEntitySummary({ entityType: asset.type, entityId: asset.id, }); + const { isEntityCentricExperienceEnabled } = useEntityCentricExperienceSetting(); const { activeTabId } = useTabSwitcherContext(); const { services: { telemetry }, @@ -85,10 +88,18 @@ export const Page = ({ tabs = [], links = [] }: ContentTemplateProps) => { }, [activeTabId, asset.type, metadata, metadataLoading, telemetry]); const showPageTitleWithPopover = asset.type === 'host' && !isMetricsSignal(dataStreams); + const shouldBypassOnboarding = + isEntityCentricExperienceEnabled && (isLogsSignal(dataStreams) || isMetricsSignal(dataStreams)); return ( & { dataAvailabilityModules?: string[]; @@ -41,14 +41,18 @@ export const InfraPageTemplate = ({ const { error: dataViewLoadError, refetch: loadDataView } = useMetricsDataViewContext(); const { remoteClustersExist } = source?.status ?? {}; - const { data, status } = useFetcher(async (callApi) => { - return await callApi('/api/metrics/source/hasData', { - method: 'GET', - query: { - modules: dataAvailabilityModules, - }, - }); - }); + const { data, status } = useFetcher( + async (callApi) => { + if (!onboardingFlow) return; + return await callApi('/api/metrics/source/hasData', { + method: 'GET', + query: { + modules: dataAvailabilityModules, + }, + }); + }, + [onboardingFlow, dataAvailabilityModules] + ); const hasData = !!data?.hasData; const noDataConfig = getNoDataConfig({ diff --git a/x-pack/plugins/observability_solution/infra/public/components/shared/templates/no_data_config.ts b/x-pack/plugins/observability_solution/infra/public/components/shared/templates/no_data_config.ts index faf53cccca4cd..3859f93ddc437 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/shared/templates/no_data_config.ts +++ b/x-pack/plugins/observability_solution/infra/public/components/shared/templates/no_data_config.ts @@ -108,11 +108,11 @@ export const getNoDataConfig = ({ }: { hasData: boolean; loading: boolean; - onboardingFlow: OnboardingFlow; + onboardingFlow?: OnboardingFlow; locators: LocatorClient; docsLink?: string; }): NoDataConfig | undefined => { - if (hasData || loading) { + if (!onboardingFlow || hasData || loading) { return; } diff --git a/x-pack/plugins/observability_solution/infra/public/hooks/use_entity_centric_experience_setting.tsx b/x-pack/plugins/observability_solution/infra/public/hooks/use_entity_centric_experience_setting.tsx new file mode 100644 index 0000000000000..1cbc4680405e4 --- /dev/null +++ b/x-pack/plugins/observability_solution/infra/public/hooks/use_entity_centric_experience_setting.tsx @@ -0,0 +1,17 @@ +/* + * 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 { entityCentricExperience } from '@kbn/observability-plugin/common'; +import { useKibanaContextForPlugin } from './use_kibana'; + +export function useEntityCentricExperienceSetting() { + const { uiSettings } = useKibanaContextForPlugin().services; + + const isEntityCentricExperienceEnabled = uiSettings.get(entityCentricExperience, true); + + return { isEntityCentricExperienceEnabled }; +} diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/index.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/index.tsx index c013cebb42e70..b3d82e0c8fc22 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/index.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/index.tsx @@ -10,6 +10,7 @@ import React from 'react'; import { useTrackPageview } from '@kbn/observability-shared-plugin/public'; import { APP_WRAPPER_CLASS } from '@kbn/core/public'; import { css } from '@emotion/react'; +import { OnboardingFlow } from '../../../components/shared/templates/no_data_config'; import { InfraPageTemplate } from '../../../components/shared/templates/infra_page_template'; import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs'; import { inventoryTitle } from '../../../translations'; @@ -38,6 +39,7 @@ export const SnapshotPage = () => {
, ], diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/node_details_page.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/node_details_page.tsx index 3934abb5478f9..0de2ae8f6fbe7 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/node_details_page.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/node_details_page.tsx @@ -11,6 +11,7 @@ import moment from 'moment'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { InventoryMetric, InventoryItemType } from '@kbn/metrics-data-access-plugin/common'; import { decodeOrThrow } from '@kbn/io-ts-utils'; +import { OnboardingFlow } from '../../../../components/shared/templates/no_data_config'; import { InfraPageTemplate } from '../../../../components/shared/templates/infra_page_template'; import { NodeDetailsMetricDataResponseRT } from '../../../../../common/http_api/node_details_api'; import { isPending, useFetcher } from '../../../../hooks/use_fetcher'; @@ -91,6 +92,7 @@ export const NodeDetailsPage = (props: Props) => { return ( { if (metadataLoading && !filteredRequiredMetrics.length) { return ( - + { return (