[Logs onboarding] Added entry points for observability onboarding lan…

…ding page (#163300) Closes #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 <[email protected]>
elastic · Aug 11, 2023 · 5e49bfd · 5e49bfd
1 parent ccc252d
commit 5e49bfd
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 39 deletions.
diff --git a/...kbn-guided-onboarding/src/components/landing_page/__snapshots__/guide_cards.test.tsx.snap b/...kbn-guided-onboarding/src/components/landing_page/__snapshots__/guide_cards.test.tsx.snap
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
@@ -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
@@ -75,7 +75,12 @@ export type HasData<T extends ObservabilityFetchDataPlugins> = (
 
 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
@@ -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<boolean>(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/...ugins/observability/public/pages/overview/components/observability_onboarding_callout.tsx b/...ugins/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 ? (
+    <>
+      <EuiPanel color="primary" data-test-subj="observability-onboarding-callout">
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiTitle size="xxs">
+              <h2>
+                <FormattedMessage
+                  id="xpack.observability.overview.observabilityOnboarding"
+                  defaultMessage="Collect and analyze logs in observability"
+                />
+              </h2>
+            </EuiTitle>
+            <EuiText size="xs" color="subdued">
+              <p>
+                <FormattedMessage
+                  id="xpack.observability.overview.observabilityOnboarding.description"
+                  defaultMessage="Onboard your data in up to 5 minutes to start analysing it straight away."
+                />
+              </p>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup responsive={false} direction="row" alignItems="center">
+              <EuiFlexItem>
+                <EuiButtonEmpty
+                  data-test-subj="o11yObservabilityOnboardingDismissButton"
+                  size="s"
+                  onClick={dismissOnboarding}
+                >
+                  <FormattedMessage
+                    id="xpack.observability.overview.observabilityOnboarding.dismiss"
+                    defaultMessage="Dismiss"
+                  />
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiButton
+                  data-test-subj="o11yObservabilityOnboardingGetStartedButton"
+                  size="s"
+                  onClick={getStarted}
+                >
+                  <FormattedMessage
+                    id="xpack.observability.overview.observabilityOnboarding.getStarted"
+                    defaultMessage="Get started"
+                  />
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+      <EuiSpacer />
+    </>
+  ) : null;
+}
diff --git 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 <LoadingObservability />;
@@ -173,10 +162,7 @@ export function OverviewPage() {
     >
       <HeaderMenu />
 
-      <ObservabilityStatusProgress
-        onDismissClick={() => setGuidedSetupTourVisible(true)}
-        onViewDetailsClick={() => setIsDataAssistantFlyoutVisible(true)}
-      />
+      <ObservabilityOnboardingCallout />
 
       <EuiFlexGroup direction="column" gutterSize="s" data-test-subj="obltOverviewAlerts">
         <EuiFlexItem>

diff --git 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';