From 1e6a7c15e668b30202bc92c4798ae6f44a3f1504 Mon Sep 17 00:00:00 2001 From: Jenny Date: Thu, 11 Jul 2024 13:45:34 +0200 Subject: [PATCH 1/7] Rename apmEnableMultiSignal to entityCentricExperience --- .../kbn-management/settings/setting_ids/index.ts | 2 +- .../settings/observability_project/index.ts | 2 +- .../server/collectors/management/schema.ts | 2 +- .../server/collectors/management/types.ts | 2 +- src/plugins/telemetry/schema/oss_plugins.json | 2 +- .../service_groups/service_groups_list/index.tsx | 9 ++++++--- .../routing/templates/service_group_template.tsx | 9 ++++++--- .../observability/common/index.ts | 2 +- .../observability/common/ui_settings_keys.ts | 2 +- .../observability/server/ui_settings.ts | 13 ++++++------- 10 files changed, 25 insertions(+), 20 deletions(-) diff --git a/packages/kbn-management/settings/setting_ids/index.ts b/packages/kbn-management/settings/setting_ids/index.ts index 94d56372a17c4..b914451abdb55 100644 --- a/packages/kbn-management/settings/setting_ids/index.ts +++ b/packages/kbn-management/settings/setting_ids/index.ts @@ -141,7 +141,7 @@ export const OBSERVABILITY_APM_ENABLE_SERVICE_INVENTORY_TABLE_SEARCH_BAR = 'observability:apmEnableServiceInventoryTableSearchBar'; export const OBSERVABILITY_LOGS_EXPLORER_ALLOWED_DATA_VIEWS_ID = 'observability:logsExplorer:allowedDataViews'; -export const OBSERVABILITY_APM_ENABLE_MULTI_SIGNAL = 'observability:apmEnableMultiSignal'; +export const OBSERVABILITY_ENTITY_CENTRIC_EXPERIENCE = 'observability:entityCentricExperience'; export const OBSERVABILITY_LOGS_DATA_ACCESS_LOG_SOURCES_ID = 'observability:logSources'; // Reporting settings diff --git a/packages/serverless/settings/observability_project/index.ts b/packages/serverless/settings/observability_project/index.ts index 0374fc9a6b6e8..00d9d7b6d544f 100644 --- a/packages/serverless/settings/observability_project/index.ts +++ b/packages/serverless/settings/observability_project/index.ts @@ -32,5 +32,5 @@ export const OBSERVABILITY_PROJECT_SETTINGS = [ settings.OBSERVABILITY_LOGS_EXPLORER_ALLOWED_DATA_VIEWS_ID, settings.OBSERVABILITY_APM_ENABLE_TABLE_SEARCH_BAR, settings.OBSERVABILITY_APM_ENABLE_SERVICE_INVENTORY_TABLE_SEARCH_BAR, - settings.OBSERVABILITY_APM_ENABLE_MULTI_SIGNAL, + settings.OBSERVABILITY_ENTITY_CENTRIC_EXPERIENCE, ]; diff --git a/src/plugins/kibana_usage_collection/server/collectors/management/schema.ts b/src/plugins/kibana_usage_collection/server/collectors/management/schema.ts index 8285a0aee6b01..85aeb535bb83b 100644 --- a/src/plugins/kibana_usage_collection/server/collectors/management/schema.ts +++ b/src/plugins/kibana_usage_collection/server/collectors/management/schema.ts @@ -464,7 +464,7 @@ export const stackManagementSchema: MakeSchemaFrom = { type: 'boolean', _meta: { description: 'Non-default value of setting.' }, }, - 'observability:apmEnableMultiSignal': { + 'observability:entityCentricExperience': { type: 'boolean', _meta: { description: 'Non-default value of setting.' }, }, diff --git a/src/plugins/kibana_usage_collection/server/collectors/management/types.ts b/src/plugins/kibana_usage_collection/server/collectors/management/types.ts index 95c72298a9b0e..28f18e5e52fce 100644 --- a/src/plugins/kibana_usage_collection/server/collectors/management/types.ts +++ b/src/plugins/kibana_usage_collection/server/collectors/management/types.ts @@ -163,7 +163,7 @@ export interface UsageStats { 'observability:apmTraceExplorerTab': boolean; 'observability:apmEnableCriticalPath': boolean; 'observability:apmEnableProfilingIntegration': boolean; - 'observability:apmEnableMultiSignal': boolean; + 'observability:entityCentricExperience': boolean; 'observability:profilingShowErrorFrames': boolean; 'securitySolution:enableGroupedNav': boolean; 'securitySolution:showRelatedIntegrations': boolean; diff --git a/src/plugins/telemetry/schema/oss_plugins.json b/src/plugins/telemetry/schema/oss_plugins.json index 00c4a48da72fa..d36836e0f0747 100644 --- a/src/plugins/telemetry/schema/oss_plugins.json +++ b/src/plugins/telemetry/schema/oss_plugins.json @@ -10292,7 +10292,7 @@ "description": "Non-default value of setting." } }, - "observability:apmEnableMultiSignal": { + "observability:entityCentricExperience": { "type": "boolean", "_meta": { "description": "Non-default value of setting." diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx index e46a35e9bb0f8..b183688240813 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx @@ -15,7 +15,7 @@ import { EuiLink, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; -import { apmEnableMultiSignal } from '@kbn/observability-plugin/common'; +import { entityCentricExperience } from '@kbn/observability-plugin/common'; import { i18n } from '@kbn/i18n'; import { isEmpty, sortBy } from 'lodash'; import React, { useState, useCallback } from 'react'; @@ -33,7 +33,10 @@ const GET_STARTED_URL = 'https://www.elastic.co/guide/en/apm/get-started/current export function ServiceGroupsList() { const { core } = useApmPluginContext(); - const isMultiSignalEnabled = core.uiSettings.get(apmEnableMultiSignal, false); + const isEntityCentricExperienceEnabled = core.uiSettings.get( + entityCentricExperience, + false + ); const [filter, setFilter] = useState(''); @@ -138,7 +141,7 @@ export function ServiceGroupsList() { {i18n.translate('xpack.apm.serviceGroups.listDescription', { defaultMessage: 'Displayed service counts reflect the last 24 hours.', })} - {isMultiSignalEnabled && ( + {isEntityCentricExperienceEnabled && ( (apmEnableMultiSignal, false); + const isEntityCentricExperienceEnabled = core.uiSettings.get( + entityCentricExperience, + false + ); const tabs: ServiceGroupContextTab[] = [ { @@ -167,7 +170,7 @@ function useTabs(selectedTab: ServiceGroupContextTab['key']) { })} - {isMultiSignalEnabled && ( + {isEntityCentricExperienceEnabled && ( )} diff --git a/x-pack/plugins/observability_solution/observability/common/index.ts b/x-pack/plugins/observability_solution/observability/common/index.ts index 30765fed43e3d..07effc9293676 100644 --- a/x-pack/plugins/observability_solution/observability/common/index.ts +++ b/x-pack/plugins/observability_solution/observability/common/index.ts @@ -37,7 +37,7 @@ export { enableAwsLambdaMetrics, enableAgentExplorerView, apmEnableTableSearchBar, - apmEnableMultiSignal, + entityCentricExperience, apmAWSLambdaPriceFactor, apmAWSLambdaRequestCostPerMillion, apmEnableServiceMetrics, diff --git a/x-pack/plugins/observability_solution/observability/common/ui_settings_keys.ts b/x-pack/plugins/observability_solution/observability/common/ui_settings_keys.ts index 0049afae529ee..fe43cd30705db 100644 --- a/x-pack/plugins/observability_solution/observability/common/ui_settings_keys.ts +++ b/x-pack/plugins/observability_solution/observability/common/ui_settings_keys.ts @@ -26,7 +26,7 @@ export const enableInfrastructureContainerAssetView = export const enableAwsLambdaMetrics = 'observability:enableAwsLambdaMetrics'; export const enableAgentExplorerView = 'observability:apmAgentExplorerView'; export const apmEnableTableSearchBar = 'observability:apmEnableTableSearchBar'; -export const apmEnableMultiSignal = 'observability:apmEnableMultiSignal'; +export const entityCentricExperience = 'observability:entityCentricExperience'; export const apmEnableServiceInventoryTableSearchBar = 'observability:apmEnableServiceInventoryTableSearchBar'; export const apmAWSLambdaPriceFactor = 'observability:apmAWSLambdaPriceFactor'; diff --git a/x-pack/plugins/observability_solution/observability/server/ui_settings.ts b/x-pack/plugins/observability_solution/observability/server/ui_settings.ts index f5d87286d6844..faaa889185984 100644 --- a/x-pack/plugins/observability_solution/observability/server/ui_settings.ts +++ b/x-pack/plugins/observability_solution/observability/server/ui_settings.ts @@ -21,7 +21,7 @@ import { apmLabsButton, enableAgentExplorerView, apmEnableTableSearchBar, - apmEnableMultiSignal, + entityCentricExperience, enableAwsLambdaMetrics, apmAWSLambdaPriceFactor, apmAWSLambdaRequestCostPerMillion, @@ -342,14 +342,13 @@ export const uiSettings: Record = { requiresPageReload: true, type: 'boolean', }, - [apmEnableMultiSignal]: { + [entityCentricExperience]: { category: [observabilityFeatureId], - name: i18n.translate('xpack.observability.apmEnableMultiSignal', { - defaultMessage: 'Multi signal APM', + name: i18n.translate('xpack.observability.entityCentricExperience', { + defaultMessage: 'Entity-centric experience', }), - description: i18n.translate('xpack.observability.apmEnableMultiSignalDescription', { - defaultMessage: - '{technicalPreviewLabel} Enable the multi-signal feature in APM, which allows you to monitor services from logs and traces.', + description: i18n.translate('xpack.observability.entityCentricExperienceDescription', { + defaultMessage: '{technicalPreviewLabel} Promote entity-centric experience to users.', values: { technicalPreviewLabel: `[${technicalPreviewLabel}]`, }, From 3a15aa5122132cb9f6469f3bdc8d3601b7c101c4 Mon Sep 17 00:00:00 2001 From: Kate Patticha Date: Mon, 15 Jul 2024 13:40:02 +0300 Subject: [PATCH 2/7] [APM] Entity view determined on user level --- .../app/service_inventory/index.tsx | 23 ++++++++---- .../routing/templates/apm_main_template.tsx | 11 ++++-- .../shared/entity_enablement/index.tsx | 35 +++++++++---------- .../entity_manager_context.tsx | 17 +++++++++ 4 files changed, 60 insertions(+), 26 deletions(-) diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/index.tsx index ed8f9e361c321..496f2e3e3132f 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/index.tsx @@ -8,14 +8,23 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { EuiEmptyPrompt, EuiLoadingLogo } from '@elastic/eui'; import { isEmpty } from 'lodash'; +import { entityCentricExperience } from '@kbn/observability-plugin/common'; import { ApmServiceInventory } from './apm_signal_inventory'; import { MultiSignalInventory } from './multi_signal_inventory'; import { useApmParams } from '../../../hooks/use_apm_params'; import { useEntityManagerEnablementContext } from '../../../context/entity_manager_context/use_entity_manager_enablement_context'; +import { ServiceInventoryView } from '../../../context/entity_manager_context/entity_manager_context'; +import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context'; export function ServiceInventory() { - const { isEntityManagerEnabled, isEnablementPending } = useEntityManagerEnablementContext(); + const { core } = useApmPluginContext(); + const { isEntityManagerEnabled, isEnablementPending, userServiceInventoryView } = + useEntityManagerEnablementContext(); + const isEntityCentricExperienceEnabled = core.uiSettings.get( + entityCentricExperience, + false + ); const { query: { serviceGroup }, } = useApmParams('/services'); @@ -35,9 +44,11 @@ export function ServiceInventory() { ); } - return isEntityManagerEnabled && isEmpty(serviceGroup) ? ( - - ) : ( - - ); + const shouldShowMultiSignalInventory = + isEntityManagerEnabled && + userServiceInventoryView === ServiceInventoryView.entity && + isEntityCentricExperienceEnabled && + isEmpty(serviceGroup); + + return shouldShowMultiSignalInventory ? : ; } diff --git a/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template.tsx b/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template.tsx index 36ab11d45851a..a656fcca28f24 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template.tsx @@ -7,6 +7,7 @@ import { EuiFlexGroup, EuiFlexItem, 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'; @@ -68,7 +69,11 @@ export function ApmMainTemplate({ const { http, docLinks, observabilityShared, application } = services; const { kibanaVersion, isCloudEnv, isServerlessEnv } = kibanaEnvironment; const basePath = http?.basePath.get(); - const { config } = useApmPluginContext(); + const { config, core } = useApmPluginContext(); + const isEntityCentricExperienceEnabled = core.uiSettings.get( + entityCentricExperience, + false + ); const ObservabilityPageTemplate = observabilityShared.navigation.PageTemplate; @@ -158,7 +163,9 @@ export function ApmMainTemplate({ pageTitle: pageHeaderTitle, children: ( - {showEnablementCallout && selectedNavButton === 'allServices' && } + {isEntityCentricExperienceEnabled && + showEnablementCallout && + selectedNavButton === 'allServices' && } {showServiceGroupsNav && selectedNavButton && ( )} diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/index.tsx index e305743243a4b..2f594d47c0e68 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/index.tsx @@ -26,6 +26,7 @@ import { ApmPluginStartDeps } from '../../../plugin'; import { useEntityManagerEnablementContext } from '../../../context/entity_manager_context/use_entity_manager_enablement_context'; import { FeedbackModal } from './feedback_modal'; import { UnauthorisedModal } from './unauthorized_modal'; +import { ServiceInventoryView } from '../../../context/entity_manager_context/entity_manager_context'; export function EntityEnablement() { const [isFeedbackModalVisible, setsIsFeedbackModalVisible] = useState(false); @@ -35,33 +36,32 @@ export function EntityEnablement() { services: { entityManager }, } = useKibana(); - const { isEntityManagerEnabled, isEnablementPending, refetch } = - useEntityManagerEnablementContext(); + const { + isEntityManagerEnabled, + isEnablementPending, + refetch, + userServiceInventoryView, + setUserServiceInventoryView, + } = useEntityManagerEnablementContext(); const [isPopoverOpen, togglePopover] = useToggle(false); const [isLoading, setIsLoading] = useToggle(false); const handleRestoreView = async () => { - setIsLoading(true); - try { - const response = await entityManager.entityClient.disableManagedEntityDiscovery(); - if (response.success) { - setIsLoading(false); - setsIsFeedbackModalVisible(true); - } - } catch (error) { - setIsLoading(false); - setsIsFeedbackModalVisible(true); - console.error(error); - } + setUserServiceInventoryView(ServiceInventoryView.classic); + setsIsFeedbackModalVisible(true); }; + const isEntityManagerEnabledAndEntityViewSelected = + isEntityManagerEnabled && userServiceInventoryView === ServiceInventoryView.entity; + const handleEnableblement = async () => { setIsLoading(true); try { const response = await entityManager.entityClient.enableManagedEntityDiscovery(); if (response.success) { setIsLoading(false); + setUserServiceInventoryView(ServiceInventoryView.entity); refetch(); } @@ -77,7 +77,6 @@ export function EntityEnablement() { const handdleOnCloseFeedback = () => { setsIsFeedbackModalVisible(false); - refetch(); }; return isEnablementPending ? ( @@ -91,11 +90,11 @@ export function EntityEnablement() { - {isEntityManagerEnabled + {isEntityManagerEnabledAndEntityViewSelected ? i18n.translate('xpack.apm.eemEnablement.enabled.', { defaultMessage: 'Viewing our new experience', }) @@ -147,7 +146,7 @@ export function EntityEnablement() { - {isEntityManagerEnabled && ( + {isEntityManagerEnabledAndEntityViewSelected && ( {i18n.translate('xpack.apm.eemEnablement.restoveClassicView.', { diff --git a/x-pack/plugins/observability_solution/apm/public/context/entity_manager_context/entity_manager_context.tsx b/x-pack/plugins/observability_solution/apm/public/context/entity_manager_context/entity_manager_context.tsx index 9fd41de01d8fe..d99df6972c6c5 100644 --- a/x-pack/plugins/observability_solution/apm/public/context/entity_manager_context/entity_manager_context.tsx +++ b/x-pack/plugins/observability_solution/apm/public/context/entity_manager_context/entity_manager_context.tsx @@ -6,14 +6,24 @@ */ import React, { createContext } from 'react'; import { ENTITY_FETCH_STATUS, useEntityManager } from '../../hooks/use_entity_manager'; +import { useLocalStorage } from '../../hooks/use_local_storage'; export interface EntityManagerEnablementContextValue { isEntityManagerEnabled: boolean; entityManagerEnablementStatus: ENTITY_FETCH_STATUS; isEnablementPending: boolean; refetch: () => void; + userServiceInventoryView: ServiceInventoryView; + setUserServiceInventoryView: (view: ServiceInventoryView) => void; } +export enum ServiceInventoryView { + classic = 'classic', + entity = 'entity', +} + +export const serviceInventoryStorageKey = 'apm.service.inventory.view'; + export const EntityManagerEnablementContext = createContext( {} as EntityManagerEnablementContextValue ); @@ -25,6 +35,11 @@ export function EntityManagerEnablementContextProvider({ }) { const { isEnabled, status, refetch } = useEntityManager(); + const [userServiceInventoryView, setUserServiceInventoryView] = useLocalStorage( + serviceInventoryStorageKey, + ServiceInventoryView.classic + ); + return ( {children} From 450be66944509669e49c48356c98a1f358ac08e9 Mon Sep 17 00:00:00 2001 From: Kate Patticha Date: Mon, 15 Jul 2024 20:30:55 +0300 Subject: [PATCH 3/7] [APM] Fix condition for enabling isEntityCentricExperienceView --- .../service_groups_list/index.tsx | 11 +++------- .../app/service_inventory/index.tsx | 22 +++++-------------- .../app_root/apm_header_action_menu/index.tsx | 5 +++-- .../routing/templates/apm_main_template.tsx | 8 +++---- .../templates/service_group_template.tsx | 11 +++------- .../shared/entity_enablement/index.tsx | 12 ++++------ .../entity_manager_context.tsx | 19 ++++++++++++++-- 7 files changed, 40 insertions(+), 48 deletions(-) diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx index b183688240813..00197ab761044 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx @@ -15,7 +15,6 @@ import { EuiLink, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; -import { entityCentricExperience } from '@kbn/observability-plugin/common'; import { i18n } from '@kbn/i18n'; import { isEmpty, sortBy } from 'lodash'; import React, { useState, useCallback } from 'react'; @@ -25,18 +24,14 @@ import { Sort } from './sort'; import { RefreshServiceGroupsSubscriber } from '../refresh_service_groups_subscriber'; import { ServiceGroupSaveButton } from '../service_group_save'; import { BetaBadge } from '../../../shared/beta_badge'; -import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context'; +import { useEntityManagerEnablementContext } from '../../../../context/entity_manager_context/use_entity_manager_enablement_context'; export type ServiceGroupsSortType = 'recently_added' | 'alphabetical'; const GET_STARTED_URL = 'https://www.elastic.co/guide/en/apm/get-started/current/index.html'; export function ServiceGroupsList() { - const { core } = useApmPluginContext(); - const isEntityCentricExperienceEnabled = core.uiSettings.get( - entityCentricExperience, - false - ); + const { isEntityCentricExperienceViewEnabled } = useEntityManagerEnablementContext(); const [filter, setFilter] = useState(''); @@ -141,7 +136,7 @@ export function ServiceGroupsList() { {i18n.translate('xpack.apm.serviceGroups.listDescription', { defaultMessage: 'Displayed service counts reflect the last 24 hours.', })} - {isEntityCentricExperienceEnabled && ( + {isEntityCentricExperienceViewEnabled && ( ( - entityCentricExperience, - false - ); const { query: { serviceGroup }, } = useApmParams('/services'); @@ -44,11 +36,9 @@ export function ServiceInventory() { ); } - const shouldShowMultiSignalInventory = - isEntityManagerEnabled && - userServiceInventoryView === ServiceInventoryView.entity && - isEntityCentricExperienceEnabled && - isEmpty(serviceGroup); - - return shouldShowMultiSignalInventory ? : ; + return isEntityCentricExperienceViewEnabled && isEmpty(serviceGroup) ? ( + + ) : ( + + ); } diff --git a/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/index.tsx index 22feaeeb22b12..bf2c304236246 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/index.tsx @@ -33,7 +33,8 @@ export function ApmHeaderActionMenu() { capabilities ); const canSaveApmAlerts = capabilities.apm.save && canSaveAlerts; - const { isEntityManagerEnabled, isEnablementPending } = useEntityManagerEnablementContext(); + const { isEntityCentricExperienceViewEnabled, isEnablementPending } = + useEntityManagerEnablementContext(); function apmHref(path: string) { return getLegacyApmHref({ basePath, path, search }); @@ -72,7 +73,7 @@ export function ApmHeaderActionMenu() { canReadMlJobs={canReadMlJobs} /> )} - {isEntityManagerEnabled ? ( + {isEntityCentricExperienceViewEnabled ? ( ) : ( ( + const isEntityCentricExperienceSettingEnabled = core.uiSettings.get( entityCentricExperience, false ); - const { isEntityManagerEnabled } = useEntityManagerEnablementContext(); + const { isEntityCentricExperienceViewEnabled } = useEntityManagerEnablementContext(); const ObservabilityPageTemplate = observabilityShared.navigation.PageTemplate; @@ -144,7 +144,7 @@ export function ApmMainTemplate({ - {isEntityCentricExperienceEnabled && + {isEntityCentricExperienceSettingEnabled && showEnablementCallout && selectedNavButton === 'allServices' && } {showServiceGroupsNav && selectedNavButton && ( diff --git a/x-pack/plugins/observability_solution/apm/public/components/routing/templates/service_group_template.tsx b/x-pack/plugins/observability_solution/apm/public/components/routing/templates/service_group_template.tsx index 55babf0b9a9de..b150aee11a888 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/routing/templates/service_group_template.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/routing/templates/service_group_template.tsx @@ -12,7 +12,6 @@ import { EuiSkeletonTitle, EuiIcon, } from '@elastic/eui'; -import { entityCentricExperience } from '@kbn/observability-plugin/common'; import React from 'react'; import { i18n } from '@kbn/i18n'; import type { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template'; @@ -21,8 +20,8 @@ import { useApmRouter } from '../../../hooks/use_apm_router'; import { useAnyOfApmParams } from '../../../hooks/use_apm_params'; import { ApmMainTemplate } from './apm_main_template'; import { useBreadcrumb } from '../../../context/breadcrumbs/use_breadcrumb'; -import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context'; import { TechnicalPreviewBadge } from '../../shared/technical_preview_badge'; +import { useEntityManagerEnablementContext } from '../../../context/entity_manager_context/use_entity_manager_enablement_context'; export function ServiceGroupTemplate({ pageTitle, @@ -153,11 +152,7 @@ type ServiceGroupContextTab = NonNullable[0] & { function useTabs(selectedTab: ServiceGroupContextTab['key']) { const router = useApmRouter(); const { query } = useAnyOfApmParams('/services', '/service-map'); - const { core } = useApmPluginContext(); - const isEntityCentricExperienceEnabled = core.uiSettings.get( - entityCentricExperience, - false - ); + const { isEntityCentricExperienceViewEnabled } = useEntityManagerEnablementContext(); const tabs: ServiceGroupContextTab[] = [ { @@ -170,7 +165,7 @@ function useTabs(selectedTab: ServiceGroupContextTab['key']) { })} - {isEntityCentricExperienceEnabled && ( + {isEntityCentricExperienceViewEnabled && ( )} diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/index.tsx index 92d0c8a5366d8..3f268fba608fd 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/index.tsx @@ -37,11 +37,10 @@ export function EntityEnablement() { } = useKibana(); const { - isEntityManagerEnabled, isEnablementPending, refetch, - userServiceInventoryView, setUserServiceInventoryView, + isEntityCentricExperienceViewEnabled, } = useEntityManagerEnablementContext(); const [isPopoverOpen, togglePopover] = useToggle(false); @@ -52,9 +51,6 @@ export function EntityEnablement() { setsIsFeedbackModalVisible(true); }; - const isEntityManagerEnabledAndEntityViewSelected = - isEntityManagerEnabled && userServiceInventoryView === ServiceInventoryView.entity; - const handleEnablement = async () => { setIsLoading(true); try { @@ -90,11 +86,11 @@ export function EntityEnablement() { - {isEntityManagerEnabledAndEntityViewSelected + {isEntityCentricExperienceViewEnabled ? i18n.translate('xpack.apm.eemEnablement.enabled.', { defaultMessage: 'Viewing our new experience', }) @@ -146,7 +142,7 @@ export function EntityEnablement() { - {isEntityManagerEnabledAndEntityViewSelected && ( + {isEntityCentricExperienceViewEnabled && ( {i18n.translate('xpack.apm.eemEnablement.restoreClassicView.', { diff --git a/x-pack/plugins/observability_solution/apm/public/context/entity_manager_context/entity_manager_context.tsx b/x-pack/plugins/observability_solution/apm/public/context/entity_manager_context/entity_manager_context.tsx index d99df6972c6c5..dadd4586cf0a2 100644 --- a/x-pack/plugins/observability_solution/apm/public/context/entity_manager_context/entity_manager_context.tsx +++ b/x-pack/plugins/observability_solution/apm/public/context/entity_manager_context/entity_manager_context.tsx @@ -5,8 +5,10 @@ * 2.0. */ import React, { createContext } from 'react'; +import { entityCentricExperience } from '@kbn/observability-plugin/common'; import { ENTITY_FETCH_STATUS, useEntityManager } from '../../hooks/use_entity_manager'; import { useLocalStorage } from '../../hooks/use_local_storage'; +import { useApmPluginContext } from '../apm_plugin/use_apm_plugin_context'; export interface EntityManagerEnablementContextValue { isEntityManagerEnabled: boolean; @@ -15,6 +17,7 @@ export interface EntityManagerEnablementContextValue { refetch: () => void; userServiceInventoryView: ServiceInventoryView; setUserServiceInventoryView: (view: ServiceInventoryView) => void; + isEntityCentricExperienceViewEnabled: boolean; } export enum ServiceInventoryView { @@ -33,22 +36,34 @@ export function EntityManagerEnablementContextProvider({ }: { children: React.ReactChild; }) { - const { isEnabled, status, refetch } = useEntityManager(); + const { core } = useApmPluginContext(); + const { isEnabled: isEntityManagerEnabled, status, refetch } = useEntityManager(); const [userServiceInventoryView, setUserServiceInventoryView] = useLocalStorage( serviceInventoryStorageKey, ServiceInventoryView.classic ); + const isEntityCentricExperienceSettingEnabled = core.uiSettings.get( + entityCentricExperience, + false + ); + + const isEntityCentricExperienceViewEnabled = + isEntityManagerEnabled && + userServiceInventoryView === ServiceInventoryView.entity && + isEntityCentricExperienceSettingEnabled; + return ( {children} From c314348d9201a6b8f397c465962a985db14e6aef Mon Sep 17 00:00:00 2001 From: Kate Patticha Date: Tue, 16 Jul 2024 14:51:07 +0300 Subject: [PATCH 4/7] PR comments --- .../components/routing/templates/apm_main_template.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template.tsx b/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template.tsx index 87ddc805acf5a..29a0bb4eae1ec 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template.tsx @@ -171,8 +171,10 @@ export function ApmMainTemplate({ children: ( {isEntityCentricExperienceSettingEnabled && - showEnablementCallout && - selectedNavButton === 'allServices' && } + showEnablementCallout && + selectedNavButton === 'allServices' ? ( + + ) : null} {showServiceGroupsNav && selectedNavButton && ( )} From a1fad6d627e0b1624072eaeb1efd9caa1fe14651 Mon Sep 17 00:00:00 2001 From: Kate Patticha Date: Tue, 16 Jul 2024 14:58:40 +0300 Subject: [PATCH 5/7] Better naming --- .../shared/entity_enablement/index.tsx | 6 +++--- .../entity_manager_context.tsx | 16 +++++++--------- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/index.tsx index 3f268fba608fd..06fd44e2950fe 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/index.tsx @@ -39,7 +39,7 @@ export function EntityEnablement() { const { isEnablementPending, refetch, - setUserServiceInventoryView, + setServiceInventoryViewLocalStorageSetting, isEntityCentricExperienceViewEnabled, } = useEntityManagerEnablementContext(); @@ -47,7 +47,7 @@ export function EntityEnablement() { const [isLoading, setIsLoading] = useToggle(false); const handleRestoreView = async () => { - setUserServiceInventoryView(ServiceInventoryView.classic); + setServiceInventoryViewLocalStorageSetting(ServiceInventoryView.classic); setsIsFeedbackModalVisible(true); }; @@ -57,7 +57,7 @@ export function EntityEnablement() { const response = await entityManager.entityClient.enableManagedEntityDiscovery(); if (response.success) { setIsLoading(false); - setUserServiceInventoryView(ServiceInventoryView.entity); + setServiceInventoryViewLocalStorageSetting(ServiceInventoryView.entity); refetch(); } diff --git a/x-pack/plugins/observability_solution/apm/public/context/entity_manager_context/entity_manager_context.tsx b/x-pack/plugins/observability_solution/apm/public/context/entity_manager_context/entity_manager_context.tsx index dadd4586cf0a2..14ff0fecc8878 100644 --- a/x-pack/plugins/observability_solution/apm/public/context/entity_manager_context/entity_manager_context.tsx +++ b/x-pack/plugins/observability_solution/apm/public/context/entity_manager_context/entity_manager_context.tsx @@ -15,8 +15,8 @@ export interface EntityManagerEnablementContextValue { entityManagerEnablementStatus: ENTITY_FETCH_STATUS; isEnablementPending: boolean; refetch: () => void; - userServiceInventoryView: ServiceInventoryView; - setUserServiceInventoryView: (view: ServiceInventoryView) => void; + serviceInventoryViewLocalStorageSetting: ServiceInventoryView; + setServiceInventoryViewLocalStorageSetting: (view: ServiceInventoryView) => void; isEntityCentricExperienceViewEnabled: boolean; } @@ -39,10 +39,8 @@ export function EntityManagerEnablementContextProvider({ const { core } = useApmPluginContext(); const { isEnabled: isEntityManagerEnabled, status, refetch } = useEntityManager(); - const [userServiceInventoryView, setUserServiceInventoryView] = useLocalStorage( - serviceInventoryStorageKey, - ServiceInventoryView.classic - ); + const [serviceInventoryViewLocalStorageSetting, setServiceInventoryViewLocalStorageSetting] = + useLocalStorage(serviceInventoryStorageKey, ServiceInventoryView.classic); const isEntityCentricExperienceSettingEnabled = core.uiSettings.get( entityCentricExperience, @@ -51,7 +49,7 @@ export function EntityManagerEnablementContextProvider({ const isEntityCentricExperienceViewEnabled = isEntityManagerEnabled && - userServiceInventoryView === ServiceInventoryView.entity && + serviceInventoryViewLocalStorageSetting === ServiceInventoryView.entity && isEntityCentricExperienceSettingEnabled; return ( @@ -61,8 +59,8 @@ export function EntityManagerEnablementContextProvider({ entityManagerEnablementStatus: status, isEnablementPending: status === ENTITY_FETCH_STATUS.LOADING, refetch, - userServiceInventoryView, - setUserServiceInventoryView, + serviceInventoryViewLocalStorageSetting, + setServiceInventoryViewLocalStorageSetting, isEntityCentricExperienceViewEnabled, }} > From 2407ce165ddbe51ee5d4fb0e5b6ba2c01dce6f82 Mon Sep 17 00:00:00 2001 From: Kate Patticha Date: Tue, 16 Jul 2024 17:56:51 +0300 Subject: [PATCH 6/7] Fix flaky test --- .../apm/ftr_e2e/cypress/e2e/deep_links.cy.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/observability_solution/apm/ftr_e2e/cypress/e2e/deep_links.cy.ts b/x-pack/plugins/observability_solution/apm/ftr_e2e/cypress/e2e/deep_links.cy.ts index 5451a0df2d845..b2bb9ee4e4078 100644 --- a/x-pack/plugins/observability_solution/apm/ftr_e2e/cypress/e2e/deep_links.cy.ts +++ b/x-pack/plugins/observability_solution/apm/ftr_e2e/cypress/e2e/deep_links.cy.ts @@ -11,7 +11,7 @@ describe('APM deep links', () => { }); it('navigates to apm links on search elastic', () => { cy.visitKibana('/'); - cy.getByTestSubj('nav-search-input').type('APM').focus(); + cy.getByTestSubj('nav-search-input').should('be.visible').type('APM').focus(); cy.contains('APM'); cy.contains('APM / Services'); cy.contains('APM / Service groups'); @@ -26,32 +26,32 @@ describe('APM deep links', () => { cy.contains('APM').click({ force: true }); cy.url().should('include', '/apm/services'); - cy.getByTestSubj('nav-search-input').type('APM'); + cy.getByTestSubj('nav-search-input').should('be.visible').type('APM'); // navigates to services page cy.contains('APM / Services').click({ force: true }); cy.url().should('include', '/apm/services'); - cy.getByTestSubj('nav-search-input').type('APM'); + cy.getByTestSubj('nav-search-input').should('be.visible').type('APM'); // navigates to service groups page cy.contains('APM / Service groups').click({ force: true }); cy.url().should('include', '/apm/service-groups'); - cy.getByTestSubj('nav-search-input').type('APM'); + cy.getByTestSubj('nav-search-input').should('be.visible').type('APM'); // navigates to traces page cy.contains('APM / Traces').click({ force: true }); cy.url().should('include', '/apm/traces'); - cy.getByTestSubj('nav-search-input').type('APM'); + cy.getByTestSubj('nav-search-input').should('be.visible').type('APM'); // navigates to service maps cy.contains('APM / Service Map').click({ force: true }); cy.url().should('include', '/apm/service-map'); - cy.getByTestSubj('nav-search-input').type('APM'); + cy.getByTestSubj('nav-search-input').should('be.visible').type('APM'); // navigates to dependencies page cy.contains('APM / Dependencies').click({ force: true }); cy.url().should('include', '/apm/dependencies/inventory'); - cy.getByTestSubj('nav-search-input').type('APM'); + cy.getByTestSubj('nav-search-input').should('be.visible').type('APM'); // navigates to settings page cy.contains('APM / Settings').click({ force: true }); cy.url().should('include', '/apm/settings/general-settings'); From ee020a16ee978e6257ab48dc2d368fea961992a4 Mon Sep 17 00:00:00 2001 From: Kate Patticha Date: Tue, 16 Jul 2024 20:56:27 +0300 Subject: [PATCH 7/7] Fix flakiness --- .../apm/ftr_e2e/cypress/e2e/deep_links.cy.ts | 29 ++++++++++++++----- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/observability_solution/apm/ftr_e2e/cypress/e2e/deep_links.cy.ts b/x-pack/plugins/observability_solution/apm/ftr_e2e/cypress/e2e/deep_links.cy.ts index b2bb9ee4e4078..e7c75652c7d03 100644 --- a/x-pack/plugins/observability_solution/apm/ftr_e2e/cypress/e2e/deep_links.cy.ts +++ b/x-pack/plugins/observability_solution/apm/ftr_e2e/cypress/e2e/deep_links.cy.ts @@ -11,7 +11,10 @@ describe('APM deep links', () => { }); it('navigates to apm links on search elastic', () => { cy.visitKibana('/'); - cy.getByTestSubj('nav-search-input').should('be.visible').type('APM').focus(); + cy.getByTestSubj('nav-search-input') + .should('be.visible') + .type('APM', { force: true, delay: 100 }) + .focus(); cy.contains('APM'); cy.contains('APM / Services'); cy.contains('APM / Service groups'); @@ -26,32 +29,44 @@ describe('APM deep links', () => { cy.contains('APM').click({ force: true }); cy.url().should('include', '/apm/services'); - cy.getByTestSubj('nav-search-input').should('be.visible').type('APM'); + cy.getByTestSubj('nav-search-input') + .should('be.visible') + .type('APM', { force: true, delay: 100 }); // navigates to services page cy.contains('APM / Services').click({ force: true }); cy.url().should('include', '/apm/services'); - cy.getByTestSubj('nav-search-input').should('be.visible').type('APM'); + cy.getByTestSubj('nav-search-input') + .should('be.visible') + .type('APM', { force: true, delay: 100 }); // navigates to service groups page cy.contains('APM / Service groups').click({ force: true }); cy.url().should('include', '/apm/service-groups'); - cy.getByTestSubj('nav-search-input').should('be.visible').type('APM'); + cy.getByTestSubj('nav-search-input') + .should('be.visible') + .type('APM', { force: true, delay: 100 }); // navigates to traces page cy.contains('APM / Traces').click({ force: true }); cy.url().should('include', '/apm/traces'); - cy.getByTestSubj('nav-search-input').should('be.visible').type('APM'); + cy.getByTestSubj('nav-search-input') + .should('be.visible') + .type('APM', { force: true, delay: 100 }); // navigates to service maps cy.contains('APM / Service Map').click({ force: true }); cy.url().should('include', '/apm/service-map'); - cy.getByTestSubj('nav-search-input').should('be.visible').type('APM'); + cy.getByTestSubj('nav-search-input') + .should('be.visible') + .type('APM', { force: true, delay: 100 }); // navigates to dependencies page cy.contains('APM / Dependencies').click({ force: true }); cy.url().should('include', '/apm/dependencies/inventory'); - cy.getByTestSubj('nav-search-input').should('be.visible').type('APM'); + cy.getByTestSubj('nav-search-input') + .should('be.visible') + .type('APM', { force: true, delay: 100 }); // navigates to settings page cy.contains('APM / Settings').click({ force: true }); cy.url().should('include', '/apm/settings/general-settings');