[Logs onboarding] Add select logs step (#156182)

Closes #154941

<img width="1434" alt="image"
src="https://user-images.githubusercontent.com/1313018/236182563-e3c037ec-9ffb-49bb-9c05-a42882e3e66d.png">

---------

Co-authored-by: Oliver Gupte <[email protected]>

x-pack/plugins/observability_onboarding/public/components/app/custom_logs/index.tsx

@@ -5,19 +5,18 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useBreadcrumbs } from '@kbn/observability-plugin/public';
 import React, { ComponentType, useRef, useState } from 'react';
+import { breadcrumbsApp } from '../../../application/app';
 import {
   FilmstripFrame,
   FilmstripTransition,
   TransitionState,
 } from '../../shared/filmstrip_transition';
 import { Provider as WizardProvider, Step as WizardStep } from './wizard';
 import { HorizontalSteps } from './wizard/horizontal_steps';
-import { PageTitle } from './wizard/page_title';
-import { breadcrumbsApp } from '../../../application/app';
 
 export function CustomLogs() {
   useBreadcrumbs(
@@ -62,7 +61,16 @@ function AnimatedTransitionsWizard() {
       <EuiFlexGroup direction="column" alignItems="center">
         <EuiFlexItem grow={false}>
           <EuiSpacer size="l" />
-          <PageTitle />
+          <EuiTitle size="l">
+            <h1>
+              {i18n.translate(
+                'xpack.observability_onboarding.title.collectCustomLogs',
+                {
+                  defaultMessage: 'Collect custom logs',
+                }
+              )}
+            </h1>
+          </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false} style={{ width: '50%' }}>
           <HorizontalSteps />

x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/collect_logs.tsx

@@ -0,0 +1,105 @@
+/*
+ * 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,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiLoadingSpinner,
+  EuiSpacer,
+  EuiSteps,
+  EuiText,
+} from '@elastic/eui';
+import React from 'react';
+import { useWizard } from '.';
+import { useFetcher } from '../../../../hooks/use_fetcher';
+import {
+  StepPanel,
+  StepPanelContent,
+  StepPanelFooter,
+} from '../../../shared/step_panel';
+
+export function CollectLogs() {
+  const { goToStep, goBack } = useWizard();
+
+  const { data } = useFetcher((callApi) => {
+    return callApi('GET /internal/observability_onboarding/get_status');
+  }, []);
+
+  function onContinue() {
+    goToStep('inspect');
+  }
+
+  function onBack() {
+    goBack();
+  }
+
+  return (
+    <StepPanel title="">
+      <StepPanelContent>
+        <EuiText color="subdued">
+          <p>
+            It might take a few minutes for the data to get to Elasticsearch. If
+            you&apos;re not seeing any, try generating some to verify. If
+            you&apos;re having trouble connecting, check out the troubleshooting
+            guide.
+          </p>
+        </EuiText>
+        <EuiSpacer size="m" />
+        <EuiCallOut>
+          <EuiFlexGroup justifyContent="flexStart" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiLoadingSpinner size="m" />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiText color="subdued">
+                <p>Listening for incoming logs</p>
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiCallOut>
+        <EuiSpacer size="m" />
+        <EuiSteps
+          titleSize="xs"
+          steps={[
+            { title: 'Ping received', status: data?.status, children: null },
+            { title: 'File found', status: 'complete', children: null },
+            {
+              title: 'Downloading Elastic Agent',
+              status: 'loading',
+              children: null,
+            },
+            {
+              title: 'Starting Elastic Agent',
+              status: 'incomplete',
+              children: null,
+            },
+          ]}
+        />
+        <EuiHorizontalRule margin="l" />
+        <EuiFlexGroup justifyContent="center" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty iconType="help">Need some help?</EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </StepPanelContent>
+      <StepPanelFooter
+        items={[
+          <EuiButton color="ghost" fill onClick={onBack}>
+            Back
+          </EuiButton>,
+          <EuiButton color="primary" fill onClick={onContinue}>
+            Continue
+          </EuiButton>,
+        ]}
+      />
+    </StepPanel>
+  );
+}

x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/horizontal_steps.tsx

@@ -5,12 +5,13 @@
  * 2.0.
  */
 
-import React from 'react';
 import { EuiStepsHorizontal } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
 import { useWizard } from '.';
 
 export function HorizontalSteps() {
-  const { getPath } = useWizard();
+  const { getPath, goToStep } = useWizard();
   const [currentStep, ...previousSteps] = getPath().reverse();
 
   function getStatus(stepKey: ReturnType<typeof getPath>[0]) {
@@ -23,28 +24,63 @@ export function HorizontalSteps() {
     return 'incomplete';
   }
 
+  function isDisabled(stepKey: ReturnType<typeof getPath>[0]) {
+    return getStatus(stepKey) === 'incomplete';
+  }
+
   return (
     <EuiStepsHorizontal
       steps={[
         {
-          title: 'Name logs',
-          status: getStatus('nameLogs'),
-          onClick: () => {},
+          title: i18n.translate(
+            'xpack.observability_onboarding.steps.selectLogs',
+            {
+              defaultMessage: 'Select logs',
+            }
+          ),
+          status: getStatus('selectLogs'),
+          onClick: () => {
+            goToStep('selectLogs');
+          },
         },
         {
-          title: 'Configure logs',
+          title: i18n.translate(
+            'xpack.observability_onboarding.steps.configureLogs',
+            {
+              defaultMessage: 'Configure logs',
+            }
+          ),
           status: getStatus('configureLogs'),
-          onClick: () => {},
+          disabled: isDisabled('configureLogs'),
+          onClick: () => {
+            goToStep('configureLogs');
+          },
         },
         {
-          title: 'Install shipper',
+          title: i18n.translate(
+            'xpack.observability_onboarding.steps.installShipper',
+            {
+              defaultMessage: 'Install shipper',
+            }
+          ),
           status: getStatus('installElasticAgent'),
-          onClick: () => {},
+          disabled: isDisabled('installElasticAgent'),
+          onClick: () => {
+            goToStep('installElasticAgent');
+          },
         },
         {
-          title: 'Import data',
-          status: getStatus('importData'),
-          onClick: () => {},
+          title: i18n.translate(
+            'xpack.observability_onboarding.steps.collectLogs',
+            {
+              defaultMessage: 'Collect logs',
+            }
+          ),
+          status: getStatus('collectLogs'),
+          disabled: isDisabled('collectLogs'),
+          onClick: () => {
+            goToStep('collectLogs');
+          },
         },
       ]}
     />

x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/import_data.tsx

@@ -26,7 +26,7 @@ import {
   StepPanelFooter,
 } from '../../../shared/step_panel';
 
-export function ImportData() {
+export function CollectLogs() {
   const { goToStep, goBack } = useWizard();
 
   const { data } = useFetcher((callApi) => {

x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/index.tsx

@@ -5,11 +5,11 @@
  * 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';
+import { CollectLogs } from './collect_logs';
 import { Inspect } from './inspect';
 
 interface WizardState {
@@ -45,12 +45,12 @@ const initialState: WizardState = {
 
 const { Provider, Step, useWizard } = createWizardContext({
   initialState,
-  initialStep: 'nameLogs',
+  initialStep: 'selectLogs',
   steps: {
-    nameLogs: NameLogs,
+    selectLogs: SelectLogs,
     configureLogs: ConfigureLogs,
     installElasticAgent: InstallElasticAgent,
-    importData: ImportData,
+    collectLogs: CollectLogs,
     inspect: Inspect,
   },
 });

x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/install_elastic_agent.tsx

@@ -39,7 +39,7 @@ export function InstallElasticAgent() {
 
   function onContinue() {
     setState({ ...getState(), elasticAgentPlatform, alternativeShippers });
-    goToStep('importData');
+    goToStep('collectLogs');
   }
 
   function createAlternativeShipperToggle(