From 5e49bfd9fce0cd5acddc5fde92c214587d6f93fb Mon Sep 17 00:00:00 2001 From: Yngrid Coello Date: Fri, 11 Aug 2023 08:57:34 +0200 Subject: [PATCH] [Logs onboarding] Added entry points for observability onboarding landing page (#163300) Closes https://github.com/elastic/kibana/issues/162230. ### Changes - Card `Collect and analyse my logs` in getting started is now pointing to `app/observabilityOnboarding`. - `Data assistant for observability` callout in observability overview was removed in favour of `Collect and analyse logs in observability` callout. #### Getting started - Before https://github.com/elastic/kibana/assets/1313018/4a3a0f64-ee34-48c5-9395-f3965763a1d1 #### Getting started - After https://github.com/elastic/kibana/assets/1313018/d30c2cf0-dc01-4a9d-a808-7caa5da7c008 #### Observability overview - before https://github.com/elastic/kibana/assets/1313018/6960b178-4e3e-49a6-bea8-4501778f1e12 #### Observability overview - after https://github.com/elastic/kibana/assets/1313018/316f27f7-5ac2-44a9-85a6-7f8c2b343300 --------- Co-authored-by: Achyut Jhunjhunwala --- .../__snapshots__/guide_cards.test.tsx.snap | 3 +- .../landing_page/guide_cards.constants.tsx | 3 +- .../typings/fetch_overview_data/index.ts | 7 +- .../hooks/use_observability_onboarding.ts | 29 ++++++ .../observability_onboarding_callout.tsx | 95 +++++++++++++++++++ .../public/pages/overview/overview.tsx | 52 ++++------ .../observability_shared/typings/common.ts | 3 +- 7 files changed, 153 insertions(+), 39 deletions(-) create mode 100644 x-pack/plugins/observability/public/hooks/use_observability_onboarding.ts create mode 100644 x-pack/plugins/observability/public/pages/overview/components/observability_onboarding_callout.tsx diff --git a/packages/kbn-guided-onboarding/src/components/landing_page/__snapshots__/guide_cards.test.tsx.snap b/packages/kbn-guided-onboarding/src/components/landing_page/__snapshots__/guide_cards.test.tsx.snap index 4a62cab201f4c..ab6e52ceabfef 100644 --- a/packages/kbn-guided-onboarding/src/components/landing_page/__snapshots__/guide_cards.test.tsx.snap +++ b/packages/kbn-guided-onboarding/src/components/landing_page/__snapshots__/guide_cards.test.tsx.snap @@ -169,8 +169,7 @@ exports[`guide cards snapshots should render all cards 1`] = ` Object { "icon": "logstashInput", "navigateTo": Object { - "appId": "integrations", - "path": "/browse?q=log", + "appId": "observabilityOnboarding", }, "order": 2, "solution": "observability", diff --git a/packages/kbn-guided-onboarding/src/components/landing_page/guide_cards.constants.tsx b/packages/kbn-guided-onboarding/src/components/landing_page/guide_cards.constants.tsx index 894a11fd40972..0cb783b80bf0c 100644 --- a/packages/kbn-guided-onboarding/src/components/landing_page/guide_cards.constants.tsx +++ b/packages/kbn-guided-onboarding/src/components/landing_page/guide_cards.constants.tsx @@ -104,8 +104,7 @@ export const guideCards: GuideCardConstants[] = [ defaultMessage: 'Collect and analyze my logs', }), navigateTo: { - appId: 'integrations', - path: '/browse?q=log', + appId: 'observabilityOnboarding', }, telemetryId: 'onboarding--observability--logs', order: 2, diff --git a/x-pack/plugins/exploratory_view/public/typings/fetch_overview_data/index.ts b/x-pack/plugins/exploratory_view/public/typings/fetch_overview_data/index.ts index 42fc114942301..67a2663aca27a 100644 --- a/x-pack/plugins/exploratory_view/public/typings/fetch_overview_data/index.ts +++ b/x-pack/plugins/exploratory_view/public/typings/fetch_overview_data/index.ts @@ -75,7 +75,12 @@ export type HasData = ( export type ObservabilityFetchDataPlugins = Exclude< ObservabilityApp, - 'observability-overview' | 'stack_monitoring' | 'fleet' | 'synthetics' | 'profiling' + | 'observability-overview' + | 'stack_monitoring' + | 'fleet' + | 'synthetics' + | 'profiling' + | 'observability-onboarding' >; export interface DataHandler< diff --git a/x-pack/plugins/observability/public/hooks/use_observability_onboarding.ts b/x-pack/plugins/observability/public/hooks/use_observability_onboarding.ts new file mode 100644 index 0000000000000..acab181a2eaa2 --- /dev/null +++ b/x-pack/plugins/observability/public/hooks/use_observability_onboarding.ts @@ -0,0 +1,29 @@ +/* + * 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 { useState, useCallback } from 'react'; + +export const LOCAL_STORAGE_DISMISS_OBSERVABILITY_ONBOARDING_KEY = + 'DISMISS_OBSERVABILITY_ONBOARDING'; + +export function useObservabilityOnboarding() { + const dismissedObservabilityOnboardingLocalStorage = window.localStorage.getItem( + LOCAL_STORAGE_DISMISS_OBSERVABILITY_ONBOARDING_KEY + ); + const [isObservabilityOnboardingDismissed, setIsObservabilityOnboardingDismissed] = + useState(JSON.parse(dismissedObservabilityOnboardingLocalStorage || 'false')); + + const dismissObservabilityOnboarding = useCallback(() => { + window.localStorage.setItem(LOCAL_STORAGE_DISMISS_OBSERVABILITY_ONBOARDING_KEY, 'true'); + setIsObservabilityOnboardingDismissed(true); + }, []); + + return { + isObservabilityOnboardingDismissed, + dismissObservabilityOnboarding, + }; +} diff --git a/x-pack/plugins/observability/public/pages/overview/components/observability_onboarding_callout.tsx b/x-pack/plugins/observability/public/pages/overview/components/observability_onboarding_callout.tsx new file mode 100644 index 0000000000000..15af235a7fa09 --- /dev/null +++ b/x-pack/plugins/observability/public/pages/overview/components/observability_onboarding_callout.tsx @@ -0,0 +1,95 @@ +/* + * 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 { + EuiButton, + EuiButtonEmpty, + EuiFlexGroup, + EuiFlexItem, + EuiPanel, + EuiSpacer, + EuiText, + EuiTitle, +} from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n-react'; +import { useKibana } from '@kbn/kibana-react-plugin/public'; +import { useUiTracker } from '@kbn/observability-shared-plugin/public'; +import React, { useCallback } from 'react'; +import { useObservabilityOnboarding } from '../../../hooks/use_observability_onboarding'; + +export function ObservabilityOnboardingCallout() { + const { application } = useKibana().services; + + const trackMetric = useUiTracker({ app: 'observability-overview' }); + const { isObservabilityOnboardingDismissed, dismissObservabilityOnboarding } = + useObservabilityOnboarding(); + + const dismissOnboarding = useCallback(() => { + dismissObservabilityOnboarding(); + trackMetric({ metric: 'observability_onboarding_dismiss' }); + }, [dismissObservabilityOnboarding, trackMetric]); + + const getStarted = () => { + trackMetric({ metric: 'observability_onboarding_get_started' }); + application?.navigateToApp('observabilityOnboarding'); + }; + + return !isObservabilityOnboardingDismissed ? ( + <> + + + + +

+ +

+ + +

+ +

+ + + + + + + + + + + + + + + + + + + + + ) : null; +} diff --git a/x-pack/plugins/observability/public/pages/overview/overview.tsx b/x-pack/plugins/observability/public/pages/overview/overview.tsx index eb39d19fb5bd7..7e0d1af393155 100644 --- a/x-pack/plugins/observability/public/pages/overview/overview.tsx +++ b/x-pack/plugins/observability/public/pages/overview/overview.tsx @@ -5,39 +5,35 @@ * 2.0. */ -import React, { useEffect, useMemo, useCallback, useState } from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer } from '@elastic/eui'; +import { Chat } from '@kbn/cloud-chat-plugin/public'; import { BoolQuery } from '@kbn/es-query'; import { i18n } from '@kbn/i18n'; -import { AlertConsumers } from '@kbn/rule-data-utils'; import { useBreadcrumbs, useFetcher } from '@kbn/observability-shared-plugin/public'; -import { Chat } from '@kbn/cloud-chat-plugin/public'; - -import { useKibana } from '../../utils/kibana_react'; -import { LoadingObservability } from '../../components/loading_observability'; -import { HeaderActions } from './components/header_actions/header_actions'; -import { DataAssistantFlyout } from './components/data_assistant_flyout'; -import { EmptySections } from './components/sections/empty/empty_sections'; -import { HeaderMenu } from './components/header_menu/header_menu'; -import { Resources } from './components/resources'; -import { NewsFeed } from './components/news_feed/news_feed'; -import { ObservabilityStatusProgress } from './components/observability_status/observability_status_progress'; +import { AlertConsumers } from '@kbn/rule-data-utils'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { observabilityAlertFeatureIds } from '../../../common/constants'; import { paths } from '../../../common/locators/paths'; +import { LoadingObservability } from '../../components/loading_observability'; +import { DEFAULT_DATE_FORMAT, DEFAULT_INTERVAL } from '../../constants'; import { useDatePickerContext } from '../../hooks/use_date_picker_context'; -import { useGuidedSetupProgress } from '../../hooks/use_guided_setup_progress'; import { useHasData } from '../../hooks/use_has_data'; import { usePluginContext } from '../../hooks/use_plugin_context'; import { useTimeBuckets } from '../../hooks/use_time_buckets'; -import { getNewsFeed } from './components/news_feed/helpers/get_news_feed'; -import { buildEsQuery } from '../../utils/build_es_query'; import { getAlertSummaryTimeRange } from '../../utils/alert_summary_widget'; - -import { DEFAULT_DATE_FORMAT, DEFAULT_INTERVAL } from '../../constants'; -import { calculateBucketSize } from './helpers/calculate_bucket_size'; -import { useOverviewMetrics } from './helpers/use_overview_metrics'; -import { SectionContainer } from './components/sections/section_container'; +import { buildEsQuery } from '../../utils/build_es_query'; +import { useKibana } from '../../utils/kibana_react'; +import { DataAssistantFlyout } from './components/data_assistant_flyout'; import { DataSections } from './components/data_sections'; +import { HeaderActions } from './components/header_actions/header_actions'; +import { HeaderMenu } from './components/header_menu/header_menu'; +import { getNewsFeed } from './components/news_feed/helpers/get_news_feed'; +import { NewsFeed } from './components/news_feed/news_feed'; +import { ObservabilityOnboardingCallout } from './components/observability_onboarding_callout'; +import { Resources } from './components/resources'; +import { EmptySections } from './components/sections/empty/empty_sections'; +import { SectionContainer } from './components/sections/section_container'; +import { calculateBucketSize } from './helpers/calculate_bucket_size'; const ALERTS_PER_PAGE = 10; const ALERTS_TABLE_ID = 'xpack.observability.overview.alert.table'; @@ -70,11 +66,8 @@ export function OverviewPage() { ); const { hasAnyData, isAllRequestsComplete } = useHasData(); - const { trackMetric } = useOverviewMetrics({ hasAnyData }); - const [isDataAssistantFlyoutVisible, setIsDataAssistantFlyoutVisible] = useState(false); - const { isGuidedSetupProgressDismissed } = useGuidedSetupProgress(); const [isGuidedSetupTourVisible, setGuidedSetupTourVisible] = useState(false); const { relativeStart, relativeEnd, absoluteStart, absoluteEnd } = useDatePickerContext(); @@ -137,14 +130,10 @@ export function OverviewPage() { }; const handleGuidedSetupClick = useCallback(() => { - if (isGuidedSetupProgressDismissed) { - trackMetric({ metric: 'guided_setup_view_details_after_dismiss' }); - } - handleCloseGuidedSetupTour(); setIsDataAssistantFlyoutVisible(true); - }, [trackMetric, isGuidedSetupProgressDismissed]); + }, []); if (hasAnyData === undefined) { return ; @@ -173,10 +162,7 @@ export function OverviewPage() { > - setGuidedSetupTourVisible(true)} - onViewDetailsClick={() => setIsDataAssistantFlyoutVisible(true)} - /> + diff --git a/x-pack/plugins/observability_shared/typings/common.ts b/x-pack/plugins/observability_shared/typings/common.ts index 2cddfe2dc5f26..83ad51daf0b2d 100644 --- a/x-pack/plugins/observability_shared/typings/common.ts +++ b/x-pack/plugins/observability_shared/typings/common.ts @@ -16,4 +16,5 @@ export type ObservabilityApp = | 'stack_monitoring' | 'ux' | 'fleet' - | 'profiling'; + | 'profiling' + | 'observability-onboarding';