From 28d6a22263ea1f60d9b17aacde7fa3517efd244e Mon Sep 17 00:00:00 2001 From: Thom Heymann <190132+thomheymann@users.noreply.github.com> Date: Mon, 7 Oct 2024 23:31:52 +0100 Subject: [PATCH] [Observability Onboarding] Update onboarding landing page (#194565) Resolves https://github.com/elastic/observability-dev/issues/3775 Resolves https://github.com/elastic/kibana/issues/192949 ## Summary Updates the "add data" page according to new design Screenshot 2024-10-01 at 12 36 15 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .../onboarding_flow_form.tsx | 255 ++++++++++-------- .../application/onboarding_flow_form/types.ts | 2 +- ...y.ts => use_custom_cards_for_category.tsx} | 210 +++++++-------- .../use_virtual_search_results.ts | 22 +- .../application/packages_list/index.tsx | 35 +-- .../use_integration_card_list.ts | 8 +- .../public/application/packages_list/utils.ts | 21 -- .../public/application/shared/logo_icon.tsx | 6 +- .../public/assets/apple.svg | 9 + .../public/assets/linux.svg | 9 + .../translations/translations/fr-FR.json | 7 - .../translations/translations/ja-JP.json | 7 - .../translations/translations/zh-CN.json | 7 - 13 files changed, 308 insertions(+), 290 deletions(-) rename x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/{use_custom_cards_for_category.ts => use_custom_cards_for_category.tsx} (66%) delete mode 100644 x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/utils.ts create mode 100644 x-pack/plugins/observability_solution/observability_onboarding/public/assets/apple.svg create mode 100644 x-pack/plugins/observability_solution/observability_onboarding/public/assets/linux.svg 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 */}