diff --git a/x-pack/plugins/observability_onboarding/public/components/app/home/index.tsx b/x-pack/plugins/observability_onboarding/public/components/app/home/index.tsx index da2441a1d8b7a..e129fc18a72ce 100644 --- a/x-pack/plugins/observability_onboarding/public/components/app/home/index.tsx +++ b/x-pack/plugins/observability_onboarding/public/components/app/home/index.tsx @@ -6,24 +6,53 @@ */ import { + EuiBadge, + EuiButton, + EuiCard, EuiFlexGroup, EuiFlexItem, + EuiHorizontalRule, + EuiIcon, + EuiLink, EuiSpacer, - EuiTitle, EuiText, - EuiCard, - EuiHorizontalRule, - EuiButtonEmpty, - EuiBadge, + EuiTitle, + useEuiTheme, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { useBreadcrumbs } from '@kbn/observability-shared-plugin/public'; import React from 'react'; -import { useKibanaNavigation } from '../../../hooks/use_kibana_navigation'; +import styled from '@emotion/styled'; import { breadcrumbsApp } from '../../../application/app'; +import { useKibanaNavigation } from '../../../hooks/use_kibana_navigation'; +import apacheIcon from '../../../icons/apache.svg'; +import apmIcon from '../../../icons/apm.svg'; +import awsIcon from '../../../icons/aws.svg'; +import azureIcon from '../../../icons/azure.svg'; +import gcpIcon from '../../../icons/gcp.svg'; +import kinesisIcon from '../../../icons/kinesis.svg'; +import kubernetesIcon from '../../../icons/kubernetes.svg'; +import loggingIcon from '../../../icons/logging.svg'; +import nginxIcon from '../../../icons/nginx.svg'; +import opentelemetryIcon from '../../../icons/opentelemetry.svg'; +import systemIcon from '../../../icons/system.svg'; + +const StyledItem = styled(EuiFlexItem)` + flex-direction: row; + &:before { + content: '•'; + width: 5px; + height: 5px; + margin: 0 20px 0 16px; + } + > a { + min-width: 100%; + } +`; export function Home() { useBreadcrumbs([], breadcrumbsApp); + const { euiTheme } = useEuiTheme(); const { navigateToKibanaUrl } = useKibanaNavigation(); @@ -43,8 +72,8 @@ export function Home() { const handleClickSampleData = () => { navigateToKibanaUrl('/app/home#/tutorial_directory/sampleData'); }; - const handleClickSkip = () => { - navigateToKibanaUrl('/app/observability/overview'); + const handleClickUploadFile = () => { + navigateToKibanaUrl('/app/home#/tutorial_directory/fileDataViz'); }; return ( @@ -68,7 +97,7 @@ export function Home() {

{i18n.translate('xpack.observability_onboarding.home.description', { defaultMessage: - 'Monitor and gain insights across your cloud-native and distributed systems on a single platform.', + 'Select your method for collecting data into Observability.', })}

@@ -78,129 +107,79 @@ export function Home() { - {i18n.translate( - 'xpack.observability_onboarding.card.systemLogs.quickstartBadge', - { - defaultMessage: 'Quickstart', - } - )} - - } + icon={} + betaBadgeProps={{ + color: 'accent', + label: i18n.translate( + 'xpack.observability_onboarding.card.systemLogs.quickstartBadge', + { defaultMessage: 'Quickstart' } + ), + }} title={i18n.translate( 'xpack.observability_onboarding.card.systemLogs.title', - { defaultMessage: 'Collect system logs' } + { defaultMessage: 'Stream host system logs' } )} - selectable={{ - onClick: handleClickSystemLogs, - color: 'primary', - fill: true, - fullWidth: false, - style: { margin: 'auto' }, + footer={ + + {getStartedLabel} + + } + style={{ + borderColor: euiTheme.colors.accent, + borderWidth: '2px', }} - paddingSize="xl" + paddingSize="l" + display="plain" + hasBorder > - + + {elasticAgentLabel} +

{i18n.translate( 'xpack.observability_onboarding.card.systemLogs.description1', { defaultMessage: - 'The quickest path to onboard log data and start analysing it straight away.', - } - )} -

-

- {i18n.translate( - 'xpack.observability_onboarding.card.systemLogs.description2', - { - defaultMessage: - 'Monitor servers, personal computers and more by collecting logs from your machine.', + 'The quickest path to onboard log data from your own machine or server.', } )}

+ - {i18n.translate( - 'xpack.observability_onboarding.card.customLogs.fewMinutesBadge', - { defaultMessage: 'In a few minutes' } - )} - - } + icon={} title={i18n.translate( 'xpack.observability_onboarding.card.customLogs.title', - { defaultMessage: 'Collect custom logs' } + { defaultMessage: 'Stream log files' } )} - selectable={{ - onClick: handleClickCustomLogs, - color: 'primary', - fill: true, - fullWidth: false, - style: { margin: 'auto' }, - }} - paddingSize="xl" + footer={ + + {getStartedLabel} + + } + paddingSize="l" + display="plain" + hasBorder > - + + {elasticAgentLabel} +

{i18n.translate( 'xpack.observability_onboarding.card.customLogs.description.text', { defaultMessage: - 'Choose what logs to collect, configure an ingest pipeline, and explore your data.', + 'Stream any logs into Elastic in a simple way and explore their data.', } )}

-
    -
  • - {i18n.translate( - 'xpack.observability_onboarding.card.customLogs.description.example.streamlogs', - { defaultMessage: 'Stream custom logs' } - )} -
    • -
  • - {i18n.translate( - 'xpack.observability_onboarding.card.customLogs.description.example.networkStream', - { - defaultMessage: 'Collect network streaming logs', - } - )} -
    • -
  • - {i18n.translate( - 'xpack.observability_onboarding.card.customLogs.description.example.uploadLogFile', - { defaultMessage: 'Upload log files' } - )} -
    • -
  • - {i18n.translate( - 'xpack.observability_onboarding.card.customLogs.description.example.andMore', - { defaultMessage: '... and more' } - )} -
    • -
+ @@ -209,98 +188,156 @@ export function Home() { + + + + } title={i18n.translate( 'xpack.observability_onboarding.card.apm.title', { - defaultMessage: - 'Monitor my application performance (APM / tracing)', + defaultMessage: 'Collect application performance data', } )} - titleSize="xs" - paddingSize="xl" - onClick={handleClickApmSetupGuide} - /> - - - - - - - - - - - - - + {getStartedLabel} + + } + paddingSize="m" titleSize="xs" - paddingSize="xl" - onClick={handleClickIntegrations} + display="plain" + hasBorder + onClick={handleClickApmSetupGuide} /> } title={i18n.translate( - 'xpack.observability_onboarding.card.sampleData.title', + 'xpack.observability_onboarding.card.k8s.title', + { defaultMessage: 'Collect Kubernetes clusters data' } + )} + description={i18n.translate( + 'xpack.observability_onboarding.card.k8s.description', { defaultMessage: - 'Explore data, visualizations, and dashboards samples', + 'Collect logs and metrics from Kubernetes clusters with Elastic agent.', } )} + footer={ + + {getStartedLabel} + + } titleSize="xs" - paddingSize="xl" - onClick={handleClickSampleData} + paddingSize="m" + display="plain" + hasBorder /> - - - - - {i18n.translate('xpack.observability_onboarding.skipLinkLabel', { - defaultMessage: 'Skip for now', - })} - + + + + + + + + + } + title={i18n.translate( + 'xpack.observability_onboarding.card.integrations.title', + { + defaultMessage: + 'Explore 300+ ways of ingesting data with our integrations', + } + )} + footer={ + <> + + {i18n.translate( + 'xpack.observability_onboarding.card.integrations.start', + { defaultMessage: 'Start exploring' } + )} + + + + + {i18n.translate( + 'xpack.observability_onboarding.card.integrations.quickLinks', + { defaultMessage: 'Quick links:' } + )} + + + + + {i18n.translate( + 'xpack.observability_onboarding.card.integrations.sampleData', + { defaultMessage: 'Use sample data' } + )} + + + + {i18n.translate( + 'xpack.observability_onboarding.card.integrations.uploadFile', + { defaultMessage: 'Upload a file' } + )} + + + + + {i18n.translate( + 'xpack.observability_onboarding.card.integrations.awsFirehose', + { defaultMessage: 'AWS Firehose' } + )} + + + + + + + + } + titleSize="xs" + paddingSize="none" + display="plain" + hasBorder + /> ); } -const setupGuideBadgeLabel = i18n.translate( - 'xpack.observability_onboarding.card.setupGuide', - { defaultMessage: 'Setup guide' } +const getStartedLabel = i18n.translate( + 'xpack.observability_onboarding.card.getStarted', + { defaultMessage: 'Get started' } +); + +const elasticAgentLabel = i18n.translate( + 'xpack.observability_onboarding.card.elasticAgent', + { defaultMessage: 'Elastic agent' } ); diff --git a/x-pack/plugins/observability_onboarding/public/icons/apache.svg b/x-pack/plugins/observability_onboarding/public/icons/apache.svg new file mode 100644 index 0000000000000..7a86ab4ce06fc --- /dev/null +++ b/x-pack/plugins/observability_onboarding/public/icons/apache.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/x-pack/plugins/observability_onboarding/public/icons/apm.svg b/x-pack/plugins/observability_onboarding/public/icons/apm.svg new file mode 100644 index 0000000000000..d663bbe1b5062 --- /dev/null +++ b/x-pack/plugins/observability_onboarding/public/icons/apm.svg @@ -0,0 +1,14 @@ + + + + + + + + diff --git a/x-pack/plugins/observability_onboarding/public/icons/aws.svg b/x-pack/plugins/observability_onboarding/public/icons/aws.svg new file mode 100644 index 0000000000000..af17aa1ceb105 --- /dev/null +++ b/x-pack/plugins/observability_onboarding/public/icons/aws.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/x-pack/plugins/observability_onboarding/public/icons/azure.svg b/x-pack/plugins/observability_onboarding/public/icons/azure.svg new file mode 100644 index 0000000000000..1f884406e3687 --- /dev/null +++ b/x-pack/plugins/observability_onboarding/public/icons/azure.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/x-pack/plugins/observability_onboarding/public/icons/gcp.svg b/x-pack/plugins/observability_onboarding/public/icons/gcp.svg new file mode 100644 index 0000000000000..0b0ed5081ceaa --- /dev/null +++ b/x-pack/plugins/observability_onboarding/public/icons/gcp.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/x-pack/plugins/observability_onboarding/public/icons/kinesis.svg b/x-pack/plugins/observability_onboarding/public/icons/kinesis.svg new file mode 100644 index 0000000000000..8a909480f2ca6 --- /dev/null +++ b/x-pack/plugins/observability_onboarding/public/icons/kinesis.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/x-pack/plugins/observability_onboarding/public/icons/kubernetes.svg b/x-pack/plugins/observability_onboarding/public/icons/kubernetes.svg new file mode 100644 index 0000000000000..aedbb79c31aaf --- /dev/null +++ b/x-pack/plugins/observability_onboarding/public/icons/kubernetes.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/x-pack/plugins/observability_onboarding/public/icons/logging.svg b/x-pack/plugins/observability_onboarding/public/icons/logging.svg new file mode 100644 index 0000000000000..41d5251b3ea19 --- /dev/null +++ b/x-pack/plugins/observability_onboarding/public/icons/logging.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/x-pack/plugins/observability_onboarding/public/icons/nginx.svg b/x-pack/plugins/observability_onboarding/public/icons/nginx.svg new file mode 100644 index 0000000000000..c758f951a1ffa --- /dev/null +++ b/x-pack/plugins/observability_onboarding/public/icons/nginx.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/x-pack/plugins/observability_onboarding/public/icons/opentelemetry.svg b/x-pack/plugins/observability_onboarding/public/icons/opentelemetry.svg new file mode 100644 index 0000000000000..1ce99fcc497d0 --- /dev/null +++ b/x-pack/plugins/observability_onboarding/public/icons/opentelemetry.svg @@ -0,0 +1 @@ + diff --git a/x-pack/plugins/observability_onboarding/public/icons/system.svg b/x-pack/plugins/observability_onboarding/public/icons/system.svg new file mode 100644 index 0000000000000..0aba96275e24e --- /dev/null +++ b/x-pack/plugins/observability_onboarding/public/icons/system.svg @@ -0,0 +1 @@ + \ No newline at end of file