From ee97316a6c189f4c3605cb044b50946ac4c0452c Mon Sep 17 00:00:00 2001
From: Saarika Bhasi <55930906+saarikabhasi@users.noreply.github.com>
Date: Fri, 24 Jan 2025 13:42:47 -0500
Subject: [PATCH] [Onboarding] Update o11y callout based on create index flow
(#206817)
## Summary
Update o11y callout in Create index flow based on build Flavor -
Serverless vs Stack
**Changes:**
1. Serverless & stack - callouts shown for both new onboarding flow and
when there are indices
2. Stack - the o11y callout for "Collect & analyze logs" navigate to
`/app/integrations/browse/observability`
3. Stack - the o11y callout would be "Create an Observability space"
navigated to `/app/management/kibana/spaces/create`
4. FTR for stack search & classic solution & serverless
https://github.com/user-attachments/assets/97f45912-8d3e-44d5-9505-508c863f6595
### Checklist
Check the PR satisfies following conditions.
Reviewers should verify this PR satisfies this list as well.
- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
---
.../components/create_index/create_index.tsx | 2 +-
.../callout_browse_integration_stack.tsx | 36 ++++
.../callout_create_o11y_space_stack.tsx | 35 ++++
.../create_index_panel.tsx | 176 +++++++++---------
.../components/start/elasticsearch_start.tsx | 3 +-
.../functional/page_objects/search_start.ts | 17 ++
.../functional_search/tests/search_start.ts | 5 +
7 files changed, 187 insertions(+), 87 deletions(-)
create mode 100644 x-pack/solutions/search/plugins/search_indices/public/components/shared/create_index_panel/callout_browse_integration_stack.tsx
create mode 100644 x-pack/solutions/search/plugins/search_indices/public/components/shared/create_index_panel/callout_create_o11y_space_stack.tsx
rename x-pack/solutions/search/plugins/search_indices/public/components/shared/{ => create_index_panel}/create_index_panel.tsx (62%)
diff --git a/x-pack/solutions/search/plugins/search_indices/public/components/create_index/create_index.tsx b/x-pack/solutions/search/plugins/search_indices/public/components/create_index/create_index.tsx
index 2266cc4b6c5bc..29d01907b8688 100644
--- a/x-pack/solutions/search/plugins/search_indices/public/components/create_index/create_index.tsx
+++ b/x-pack/solutions/search/plugins/search_indices/public/components/create_index/create_index.tsx
@@ -18,7 +18,7 @@ import { CreateIndexFormState } from '../../types';
import { generateRandomIndexName } from '../../utils/indices';
import { getDefaultCodingLanguage } from '../../utils/language';
-import { CreateIndexPanel } from '../shared/create_index_panel';
+import { CreateIndexPanel } from '../shared/create_index_panel/create_index_panel';
import { CreateIndexCodeView } from './create_index_code_view';
import { CreateIndexUIView } from './create_index_ui_view';
diff --git a/x-pack/solutions/search/plugins/search_indices/public/components/shared/create_index_panel/callout_browse_integration_stack.tsx b/x-pack/solutions/search/plugins/search_indices/public/components/shared/create_index_panel/callout_browse_integration_stack.tsx
new file mode 100644
index 0000000000000..638a67aefebe2
--- /dev/null
+++ b/x-pack/solutions/search/plugins/search_indices/public/components/shared/create_index_panel/callout_browse_integration_stack.tsx
@@ -0,0 +1,36 @@
+/*
+ * 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 React, { useMemo } from 'react';
+import { EuiButtonEmpty } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useKibana } from '../../../hooks/use_kibana';
+
+export const CreateIndexCalloutBrowseIntegrationBtn = () => {
+ const { http } = useKibana().services;
+
+ const analyzeLogsIntegration = useMemo(() => {
+ return http.basePath.prepend('/app/integrations/browse/observability');
+ }, [http]);
+
+ return (
+
+ {i18n.translate(
+ 'xpack.searchIndices.shared.createIndex.observabilityCallout.logs.browseIntegration.button',
+ {
+ defaultMessage: 'Collect and analyze logs',
+ }
+ )}
+
+ );
+};
diff --git a/x-pack/solutions/search/plugins/search_indices/public/components/shared/create_index_panel/callout_create_o11y_space_stack.tsx b/x-pack/solutions/search/plugins/search_indices/public/components/shared/create_index_panel/callout_create_o11y_space_stack.tsx
new file mode 100644
index 0000000000000..2a6ca0fc2880e
--- /dev/null
+++ b/x-pack/solutions/search/plugins/search_indices/public/components/shared/create_index_panel/callout_create_o11y_space_stack.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 React, { useMemo } from 'react';
+import { EuiButtonEmpty } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useKibana } from '../../../hooks/use_kibana';
+
+export const CreateIndexPanelCreateO11ySpaceBtn = () => {
+ const { http } = useKibana().services;
+ const o11yCreateSpaceLink = useMemo(() => {
+ return http.basePath.prepend('/app/management/kibana/spaces/create');
+ }, [http]);
+
+ return (
+
+ {i18n.translate(
+ 'xpack.searchIndices.shared.createIndex.observabilityCallout.createO11ySpace.button',
+ {
+ defaultMessage: 'Create an Observability space',
+ }
+ )}
+
+ );
+};
diff --git a/x-pack/solutions/search/plugins/search_indices/public/components/shared/create_index_panel.tsx b/x-pack/solutions/search/plugins/search_indices/public/components/shared/create_index_panel/create_index_panel.tsx
similarity index 62%
rename from x-pack/solutions/search/plugins/search_indices/public/components/shared/create_index_panel.tsx
rename to x-pack/solutions/search/plugins/search_indices/public/components/shared/create_index_panel/create_index_panel.tsx
index 2c2c3588d2fea..cce6b60657595 100644
--- a/x-pack/solutions/search/plugins/search_indices/public/components/shared/create_index_panel.tsx
+++ b/x-pack/solutions/search/plugins/search_indices/public/components/shared/create_index_panel/create_index_panel.tsx
@@ -22,9 +22,11 @@ import {
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
-import { docLinks } from '../../../common/doc_links';
-import { useKibana } from '../../hooks/use_kibana';
-import { CreateIndexViewMode } from '../../types';
+import { docLinks } from '../../../../common/doc_links';
+import { useKibana } from '../../../hooks/use_kibana';
+import { CreateIndexViewMode } from '../../../types';
+import { CreateIndexCalloutBrowseIntegrationBtn } from './callout_browse_integration_stack';
+import { CreateIndexPanelCreateO11ySpaceBtn } from './callout_create_o11y_space_stack';
const WIDTH = '980px';
@@ -33,7 +35,6 @@ export interface CreateIndexPanelProps {
createIndexView: CreateIndexViewMode;
onChangeView: (id: string) => void;
onClose: () => void;
- showCallouts?: boolean;
showSkip?: boolean;
title?: React.ReactNode;
}
@@ -43,13 +44,14 @@ export const CreateIndexPanel = ({
createIndexView,
onChangeView,
onClose,
- showCallouts,
showSkip,
title,
}: CreateIndexPanelProps) => {
const { cloud, http } = useKibana().services;
const { euiTheme } = useEuiTheme();
+ const isServerless: boolean = cloud?.isServerlessEnabled ?? false;
+
const o11yTrialLink = useMemo(() => {
if (cloud && cloud.isServerlessEnabled) {
const baseUrl = cloud?.projectsUrl ?? 'https://cloud.elastic.co/projects/';
@@ -174,85 +176,91 @@ export const CreateIndexPanel = ({
{children}
- {showCallouts && (
- <>
-
-
-
-
-
- {i18n.translate(
- 'xpack.searchIndices.shared.createIndex.observabilityCallout.title',
- {
- defaultMessage: 'Looking to store your logs or metrics data?',
- }
- )}
-
-
-
-
-
-
-
- {i18n.translate(
- 'xpack.searchIndices.shared.createIndex.observabilityCallout.logs.button',
- {
- defaultMessage: 'Collect and analyze logs',
- }
- )}
-
-
-
- {i18n.translate(
- 'xpack.searchIndices.shared.createIndex.observabilityCallout.logs.subTitle',
- {
- defaultMessage: 'Explore Logstash and Beats',
- }
- )}
-
-
-
-
- or
-
-
-
- {i18n.translate(
- 'xpack.searchIndices.shared.createIndex.observabilityCallout.o11yTrial.button',
- {
- defaultMessage: 'Start an Observability trial',
- }
- )}
-
-
-
- {i18n.translate(
- 'xpack.searchIndices.shared.createIndex.observabilityCallout.o11yTrial.subTitle',
- {
- defaultMessage: 'Powerful performance monitoring',
- }
- )}
-
-
-
-
-
-
- )}
+
+
+
+
+
+
+ {i18n.translate(
+ 'xpack.searchIndices.shared.createIndex.observabilityCallout.title',
+ {
+ defaultMessage: 'Looking to store your logs or metrics data?',
+ }
+ )}
+
+
+
+
+
+
+ {isServerless ? (
+
+ {i18n.translate(
+ 'xpack.searchIndices.shared.createIndex.observabilityCallout.logs.button',
+ {
+ defaultMessage: 'Collect and analyze logs',
+ }
+ )}
+
+ ) : (
+
+ )}
+
+
+
+ {i18n.translate(
+ 'xpack.searchIndices.shared.createIndex.observabilityCallout.logs.subTitle',
+ {
+ defaultMessage: 'Explore Logstash and Beats',
+ }
+ )}
+
+
+
+
+ or
+
+
+ {isServerless ? (
+
+ {i18n.translate(
+ 'xpack.searchIndices.shared.createIndex.observabilityCallout.o11yTrial.button',
+ {
+ defaultMessage: 'Start an Observability trial',
+ }
+ )}
+
+ ) : (
+
+ )}
+
+
+ {i18n.translate(
+ 'xpack.searchIndices.shared.createIndex.observabilityCallout.o11yTrial.subTitle',
+ {
+ defaultMessage: 'Powerful performance monitoring',
+ }
+ )}
+
+
+
+
+
{showSkip === true && (
<>
diff --git a/x-pack/solutions/search/plugins/search_indices/public/components/start/elasticsearch_start.tsx b/x-pack/solutions/search/plugins/search_indices/public/components/start/elasticsearch_start.tsx
index 9f237e482a9ae..73ea160eeb6d1 100644
--- a/x-pack/solutions/search/plugins/search_indices/public/components/start/elasticsearch_start.tsx
+++ b/x-pack/solutions/search/plugins/search_indices/public/components/start/elasticsearch_start.tsx
@@ -20,7 +20,7 @@ import { CreateIndexUIView } from './create_index';
import { CreateIndexCodeView } from '../shared/create_index_code_view';
import { CreateIndexFormState, CreateIndexViewMode } from '../../types';
-import { CreateIndexPanel } from '../shared/create_index_panel';
+import { CreateIndexPanel } from '../shared/create_index_panel/create_index_panel';
import { useKibana } from '../../hooks/use_kibana';
import { useUserPrivilegesQuery } from '../../hooks/api/use_user_permissions';
import { WorkflowId } from '../../code_examples/workflows';
@@ -107,7 +107,6 @@ export const ElasticsearchStart: React.FC = () => {
onChangeView={onChangeView}
onClose={onClose}
showSkip
- showCallouts
>
{createIndexView === CreateIndexViewMode.UI && (
{
+ await searchStart.expectToBeOnStartPage();
+ await searchStart.expectAnalyzeLogsIntegrationLink();
+ await searchStart.expectCreateO11ySpaceBtn();
+ });
it('should have close button', async () => {
await searchStart.expectToBeOnStartPage();
await searchStart.expectCloseCreateIndexButtonExists();