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();