diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx index 42f3dbd6f09f7..01a1e066c4ddb 100644 --- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx +++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx @@ -10,7 +10,6 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; import type { FunctionComponent } from 'react'; import { - EuiAvatar, EuiCheckableCard, EuiFlexGroup, EuiFlexItem, @@ -21,12 +20,13 @@ import { useGeneratedHtmlId, useEuiTheme, EuiBadge, + EuiFlexGrid, } from '@elastic/eui'; +import { css } from '@emotion/react'; import { useSearchParams } from 'react-router-dom-v5-compat'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { OnboardingFlowPackageList } from '../packages_list'; -import { useCustomMargin } from '../shared/use_custom_margin'; import { Category } from './types'; import { useCustomCardsForCategory } from './use_custom_cards_for_category'; import { useVirtualSearchResults } from './use_virtual_search_results'; @@ -44,51 +44,63 @@ interface UseCaseOption { export const OnboardingFlowForm: FunctionComponent = () => { const options: UseCaseOption[] = [ { - id: 'logs', + id: 'host', label: i18n.translate( - 'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.collectAndAnalyzeMyLabel', - { defaultMessage: 'Collect and analyze logs' } + 'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.hostLabel', + { defaultMessage: 'Host' } ), description: i18n.translate( - 'xpack.observability_onboarding.onboardingFlowForm.detectPatternsAndOutliersLabel', + 'xpack.observability_onboarding.onboardingFlowForm.hostDescription', { defaultMessage: - 'Detect patterns, gain insights from logs, get alerted when surpassing error thresholds', + 'Monitor your host and the services running on it, set-up SLO, get alerted, remediate performance issues', } ), - logos: ['azure', 'aws', 'nginx', 'gcp'], - showIntegrationsBadge: true, + logos: ['kubernetes', 'opentelemetry', 'apache', 'mysql'], }, { - id: 'apm', + id: 'kubernetes', label: i18n.translate( - 'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.monitorMyApplicationPerformanceLabel', - { defaultMessage: 'Monitor my application performance' } + 'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.kubernetesLabel', + { defaultMessage: 'Kubernetes' } ), description: i18n.translate( - 'xpack.observability_onboarding.onboardingFlowForm.captureAndAnalyzeDistributedLabel', + 'xpack.observability_onboarding.onboardingFlowForm.kubernetesDescription', { defaultMessage: - 'Catch application problems, get alerted on performance issues or SLO breaches, expedite root cause analysis and remediation', + 'Observe your Kubernetes cluster, and your container workloads using logs, metrics, traces and profiling data', } ), - logos: ['opentelemetry', 'java', 'javascript', 'dotnet'], + logos: ['kubernetes', 'opentelemetry'], }, { - id: 'infra', + id: 'application', label: i18n.translate( - 'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.monitorMyInfrastructureLabel', - { defaultMessage: 'Monitor infrastructure' } + 'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.applicationLabel', + { defaultMessage: 'Application' } ), description: i18n.translate( - 'xpack.observability_onboarding.onboardingFlowForm.builtOnPowerfulElasticsearchLabel', + 'xpack.observability_onboarding.onboardingFlowForm.applicationDescription', { defaultMessage: - 'Check my system’s health, get alerted on performance issues or SLO breaches, expedite root cause analysis and remediation', + 'Monitor the frontend and backend application that you have developed, set-up synthetic monitors', } ), - logos: ['kubernetes', 'prometheus', 'docker', 'opentelemetry'], - showIntegrationsBadge: true, + logos: ['opentelemetry', 'java', 'javascript', 'dotnet'], + }, + { + id: 'cloud', + label: i18n.translate( + 'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.cloudLabel', + { defaultMessage: 'Cloud' } + ), + description: i18n.translate( + 'xpack.observability_onboarding.onboardingFlowForm.cloudDescription', + { + defaultMessage: 'Ingest telemetry data from the Cloud for your applications and services', + } + ), + logos: ['azure', 'aws', 'gcp'], }, ]; @@ -97,7 +109,6 @@ export const OnboardingFlowForm: FunctionComponent = () => { context: { isCloud }, }, } = useKibana(); - const customMargin = useCustomMargin(); const radioGroupId = useGeneratedHtmlId({ prefix: 'onboardingCategory' }); const categorySelectorTitleId = useGeneratedHtmlId(); const packageListTitleId = useGeneratedHtmlId(); @@ -152,33 +163,72 @@ export const OnboardingFlowForm: FunctionComponent = () => { return ( - - - + + + {i18n.translate( + 'xpack.observability_onboarding.experimentalOnboardingFlow.strong.startCollectingYourDataLabel', + { + defaultMessage: 'What do you want to monitor?', + } + )} + + + + {options.map((option) => ( {option.label}} + label={ + <> + + {option.label} + + {/* The description and logo icons are passed into `label` prop instead of `children` to ensure they are clickable */} + + + {option.description} + + {(option.logos || option.showIntegrationsBadge) && ( + <> + + + {option.logos?.map((logo) => ( + + + + ))} + {option.showIntegrationsBadge && ( + + + + )} + + + )} + + } checked={option.id === searchParams.get('category')} /** * onKeyDown and onKeyUp handlers disable @@ -204,54 +254,62 @@ export const OnboardingFlowForm: FunctionComponent = () => { ); } }} - > - - {option.description} - - {(option.logos || option.showIntegrationsBadge) && ( - <> - - - {option.logos?.map((logo) => ( - - - - ))} - {option.showIntegrationsBadge && ( - - - - )} - - - )} - + css={css` + flex-grow: 1; + + & > .euiPanel { + display: flex; + + & > .euiCheckableCard__label { + display: flex; + flex-direction: column; + } + } + `} + /> ))} - + {/* Hiding element instead of not rending these elements in order to preload available packages on page load */}