diff --git a/x-pack/plugins/observability_onboarding/public/components/app/logs_onboarding/wizard/index.tsx b/x-pack/plugins/observability_onboarding/public/components/app/logs_onboarding/wizard/index.tsx
index d7f3eeca3da4..ee7fd9582ce5 100644
--- a/x-pack/plugins/observability_onboarding/public/components/app/logs_onboarding/wizard/index.tsx
+++ b/x-pack/plugins/observability_onboarding/public/components/app/logs_onboarding/wizard/index.tsx
@@ -5,8 +5,8 @@
* 2.0.
*/
-import { NameLogs } from './name_logs';
import { ConfigureLogs } from './configure_logs';
+import { SelectLogs } from './select_logs';
import { InstallElasticAgent } from './install_elastic_agent';
import { createWizardContext } from '../../../../context/create_wizard_context';
import { ImportData } from './import_data';
@@ -45,9 +45,9 @@ const initialState: WizardState = {
const { Provider, Step, useWizard } = createWizardContext({
initialState,
- initialStep: 'nameLogs',
+ initialStep: 'selectLogs',
steps: {
- nameLogs: NameLogs,
+ selectLogs: SelectLogs,
configureLogs: ConfigureLogs,
installElasticAgent: InstallElasticAgent,
importData: ImportData,
diff --git a/x-pack/plugins/observability_onboarding/public/components/app/logs_onboarding/wizard/select_logs.tsx b/x-pack/plugins/observability_onboarding/public/components/app/logs_onboarding/wizard/select_logs.tsx
new file mode 100644
index 000000000000..214f39c11590
--- /dev/null
+++ b/x-pack/plugins/observability_onboarding/public/components/app/logs_onboarding/wizard/select_logs.tsx
@@ -0,0 +1,170 @@
+/*
+ * 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, { PropsWithChildren } from 'react';
+import {
+ EuiTitle,
+ EuiLink,
+ EuiButton,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiHorizontalRule,
+ EuiSpacer,
+ EuiCard,
+ EuiIcon,
+ EuiIconProps,
+} from '@elastic/eui';
+import {
+ StepPanel,
+ StepPanelContent,
+ StepPanelFooter,
+} from '../../../shared/step_panel';
+import { useWizard } from '.';
+import { useKibanaNavigation } from '../../../../hooks/use_kibana_navigation';
+
+export function SelectLogs() {
+ const navigateToKibanaUrl = useKibanaNavigation();
+ const { goToStep, getState, setState } = useWizard();
+
+ function onBack() {
+ navigateToKibanaUrl('/app/observabilityOnboarding');
+ }
+
+ return (
+
+
+
+
+
+ {}}
+ isSelected={false}
+ description="Monitor servers, personal computers, and more by collecting logs from your machines"
+ />
+
+
+ {
+ setState({ ...getState(), logsType: 'log-file' });
+ goToStep('configureLogs');
+ }}
+ isSelected={false}
+ description="Example of a card’s description. Stick to one or two sentences."
+ />
+
+
+
+
+
+
+
+ {}}
+ isSelected={false}
+ description="Collect raw log data from listening ports."
+ />
+
+
+ {}}
+ isSelected={false}
+ description="Collect JSON data from listening HTTP port."
+ />
+
+
+
+
+
+
+ Explore other integrations
+
+
+
+
+
+ {}}
+ isSelected={false}
+ description="Upload data from a CSV, TSV, JSON or other log file type for analysis."
+ />
+
+
+ {}}
+ isSelected={false}
+ description="Use your own shipper for your logs data collection by generating your own API key."
+ />
+
+
+
+
+
+ Back
+ ,
+ <>,
+ ]}
+ />
+
+ );
+}
+
+function LogsTypeSection({
+ title,
+ children,
+}: PropsWithChildren<{ title: string }>) {
+ return (
+ <>
+
+ {title}
+
+
+ {children}
+
+ );
+}
+
+function OptionCard({
+ title,
+ iconType,
+ onClick,
+ isSelected,
+ description,
+}: {
+ title: string;
+ iconType: EuiIconProps['type'];
+ onClick: () => void;
+ isSelected: boolean;
+ description: string;
+}) {
+ return (
+ }
+ title={title}
+ titleSize="xs"
+ paddingSize="m"
+ onClick={onClick}
+ hasBorder={true}
+ display={isSelected ? 'primary' : undefined}
+ description={description}
+ />
+ );
+}