From 3760983f4c570b8e0085def9e24cd13c35404890 Mon Sep 17 00:00:00 2001
From: Thom Heymann <190132+thomheymann@users.noreply.github.com>
Date: Mon, 25 Mar 2024 21:54:02 +0000
Subject: [PATCH] Implement basic page layout for new landing page (#179327)
Resolves #178943
## :notebook: Summary
The observability onboarding page renders the new onboarding page:
## :heavy_check_mark: Acceptance criteria
- Basic layout is rendered (header, questions, footer)
- User can choose between "Collect and analyze my logs", "Monitor my
applications performance", "Monitor my infrastructure"
- On hover, additional description is shown.
---------
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
.../public/application/app.tsx | 5 +-
.../experimental_onboarding_flow.tsx | 38 +-
.../public/application/footer/demo_icon.svg | 468 ++++++
.../public/application/footer/docs_icon.svg | 285 ++++
.../public/application/footer/footer.tsx | 101 ++
.../public/application/footer/forum_icon.svg | 908 ++++++++++
.../application/footer/integrations_icon.svg | 417 +++++
.../public/application/header/background.svg | 1479 +++++++++++++++++
.../public/application/header/header.tsx | 80 +
.../onboarding_flow_form.tsx | 281 ++++
10 files changed, 4052 insertions(+), 10 deletions(-)
create mode 100644 x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/demo_icon.svg
create mode 100644 x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/docs_icon.svg
create mode 100644 x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/footer.tsx
create mode 100644 x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/forum_icon.svg
create mode 100644 x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/integrations_icon.svg
create mode 100644 x-pack/plugins/observability_solution/observability_onboarding/public/application/header/background.svg
create mode 100644 x-pack/plugins/observability_solution/observability_onboarding/public/application/header/header.tsx
create mode 100644 x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/app.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/app.tsx
index 79e356300655e..0301f2b33c2cc 100644
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/app.tsx
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/app.tsx
@@ -181,10 +181,9 @@ export function ObservabilityOnboardingAppRoot({
- {i18n.translate(
- 'xpack.observability_onboarding.experimentalOnboardingFlow.experimentalOnboardingFlowLabel',
- { defaultMessage: 'Experimental onboarding flow' }
- )}
-
+ <>
+ div {
+ background-image: url(${backgroundImageUrl});
+ background-position: right center;
+ background-repeat: no-repeat;
+ }
+ `}
+ grow={false}
+ restrictWidth
+ >
+
+
+
+
+
+
+
);
}
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/demo_icon.svg b/x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/demo_icon.svg
new file mode 100644
index 0000000000000..90144c1477102
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/demo_icon.svg
@@ -0,0 +1,468 @@
+
+
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/docs_icon.svg b/x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/docs_icon.svg
new file mode 100644
index 0000000000000..9fde3cf4c1cce
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/docs_icon.svg
@@ -0,0 +1,285 @@
+
+
+
+
+
+
+
+
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/footer.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/footer.tsx
new file mode 100644
index 0000000000000..3b83def5f37db
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/footer.tsx
@@ -0,0 +1,101 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+import React from 'react';
+import type { FunctionComponent } from 'react';
+import {
+ EuiSpacer,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiAvatar,
+ EuiText,
+ EuiLink,
+} from '@elastic/eui';
+import integrationsIconUrl from './integrations_icon.svg';
+import demoIconUrl from './demo_icon.svg';
+import docsIconUrl from './docs_icon.svg';
+import forumIconUrl from './forum_icon.svg';
+
+export const Footer: FunctionComponent = () => {
+ const sections = [
+ {
+ iconUrl: integrationsIconUrl,
+ title: i18n.translate(
+ 'xpack.observability_onboarding.experimentalOnboardingFlow.dataSourcesFlexItemLabel',
+ { defaultMessage: 'Data sources' }
+ ),
+ description:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod',
+ },
+ {
+ iconUrl: demoIconUrl,
+ title: i18n.translate(
+ 'xpack.observability_onboarding.experimentalOnboardingFlow.demoEnvironmentFlexItemLabel',
+ { defaultMessage: 'Demo environment' }
+ ),
+ description:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod',
+ },
+ {
+ iconUrl: docsIconUrl,
+ title: i18n.translate(
+ 'xpack.observability_onboarding.experimentalOnboardingFlow.exploreForumFlexItemLabel',
+ { defaultMessage: 'Explore forum' }
+ ),
+ description:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod',
+ },
+ {
+ iconUrl: forumIconUrl,
+ title: i18n.translate(
+ 'xpack.observability_onboarding.experimentalOnboardingFlow.browseDocumentationFlexItemLabel',
+ { defaultMessage: 'Browse documentation' }
+ ),
+ description:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod',
+ },
+ ];
+
+ return (
+
+ {sections.map((section, index) => (
+
+
+ {section.title}
+
+
+ {section.description}
+
+
+
+
+ {i18n.translate(
+ 'xpack.observability_onboarding.footer.learnMoreLinkLabel',
+ { defaultMessage: 'Learn more' }
+ )}
+
+
+
+
+ ))}
+
+ );
+};
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/forum_icon.svg b/x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/forum_icon.svg
new file mode 100644
index 0000000000000..0a4ed4a89d4db
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/forum_icon.svg
@@ -0,0 +1,908 @@
+
+
+
+
+
+
+
+
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/integrations_icon.svg b/x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/integrations_icon.svg
new file mode 100644
index 0000000000000..a82974fdf0406
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/footer/integrations_icon.svg
@@ -0,0 +1,417 @@
+
+
+
+
+
+
+
+
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/header/background.svg b/x-pack/plugins/observability_solution/observability_onboarding/public/application/header/background.svg
new file mode 100644
index 0000000000000..9a6884b3f2d68
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/header/background.svg
@@ -0,0 +1,1479 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/header/header.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/header/header.tsx
new file mode 100644
index 0000000000000..30056072d2122
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/header/header.tsx
@@ -0,0 +1,80 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+import React from 'react';
+import {
+ EuiText,
+ EuiTitle,
+ EuiSpacer,
+ EuiTextColor,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiSkeletonTitle,
+} from '@elastic/eui';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import useAsync from 'react-use/lib/useAsync';
+import { CoreStart } from '@kbn/core/public';
+
+export const Header = () => {
+ const { services } = useKibana();
+
+ const currentUser = useAsync(services.security.authc.getCurrentUser);
+
+ return (
+
+
+
+ {currentUser.value && (
+
+
+
+ {i18n.translate(
+ 'xpack.observability_onboarding.experimentalOnboardingFlow.h1.hiJohnLabel',
+ {
+ defaultMessage: 'Hi {username}!',
+ values: {
+ username:
+ currentUser.value.full_name ??
+ currentUser.value.username,
+ },
+ }
+ )}
+
+
+
+ )}
+
+
+
+ {i18n.translate(
+ 'xpack.observability_onboarding.experimentalOnboardingFlow.addObservabilityDataTitleLabel',
+ { defaultMessage: 'Add Observability data' }
+ )}
+
+
+
+ {i18n.translate(
+ 'xpack.observability_onboarding.experimentalOnboardingFlow.startIngestingDataIntoTextLabel',
+ {
+ defaultMessage:
+ 'Start ingesting data into your Observability project. Return to this page at any time by clicking Add data.',
+ }
+ )}
+
+
+
+ );
+};
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
new file mode 100644
index 0000000000000..396d3280ca47f
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
@@ -0,0 +1,281 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+import React, { useState } from 'react';
+import type { FunctionComponent } from 'react';
+import {
+ EuiCheckableCard,
+ EuiTitle,
+ EuiText,
+ EuiPanel,
+ EuiSpacer,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiCard,
+ EuiIcon,
+ EuiFlexGrid,
+ EuiAvatar,
+ useEuiTheme,
+} from '@elastic/eui';
+
+interface UseCaseOption {
+ id: string;
+ label: string;
+ description: React.ReactNode;
+}
+
+export const OnboardingFlowForm: FunctionComponent = () => {
+ const options: UseCaseOption[] = [
+ {
+ id: 'logs',
+ label: i18n.translate(
+ 'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.collectAndAnalyzeMyLabel',
+ { defaultMessage: 'Collect and analyze my logs' }
+ ),
+ description: (
+
+
+ {i18n.translate(
+ 'xpack.observability_onboarding.onboardingFlowForm.li.detectPatternsAndOutliersLabel',
+ {
+ defaultMessage:
+ 'Detect patterns and outliers with log categorization and anomaly detection.',
+ }
+ )}
+
+
+ {i18n.translate(
+ 'xpack.observability_onboarding.onboardingFlowForm.li.troubleshootInRealTimeLabel',
+ { defaultMessage: 'Troubleshoot in real time with live tail.' }
+ )}
+
+
+ {i18n.translate(
+ 'xpack.observability_onboarding.onboardingFlowForm.li.getInsightsFromStructuredLabel',
+ {
+ defaultMessage:
+ 'Get insights from structured and unstructured logs in minutes.',
+ }
+ )}
+
+
+ {i18n.translate(
+ 'xpack.observability_onboarding.onboardingFlowForm.li.deployAndManageLogsLabel',
+ { defaultMessage: 'Deploy and manage logs at petabyte scale.' }
+ )}
+
+
+ ),
+ },
+ {
+ id: 'apm',
+ label: i18n.translate(
+ 'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.monitorMyApplicationPerformanceLabel',
+ { defaultMessage: 'Monitor my application performance' }
+ ),
+ description: (
+
+
+ {i18n.translate(
+ 'xpack.observability_onboarding.onboardingFlowForm.li.captureAndAnalyzeDistributedLabel',
+ {
+ defaultMessage:
+ 'Capture and analyze distributed transactions, traces, and profiling data for your applications.',
+ }
+ )}
+
+
+ {i18n.translate(
+ 'xpack.observability_onboarding.onboardingFlowForm.li.identifyPerformanceBottlenecksWithLabel',
+ {
+ defaultMessage:
+ 'Identify performance bottlenecks with automated and curated visual representation of all dependencies.',
+ }
+ )}
+
+
+ {i18n.translate(
+ 'xpack.observability_onboarding.onboardingFlowForm.li.drillIntoAnomaliesTransactionLabel',
+ {
+ defaultMessage:
+ 'Drill into anomalies, transaction details, errors and metrics for deeper analysis.',
+ }
+ )}
+
+
+ {i18n.translate(
+ 'xpack.observability_onboarding.onboardingFlowForm.li.useMachineLearningToLabel',
+ {
+ defaultMessage:
+ 'Use machine learning to automatically detect anomalies.',
+ }
+ )}
+
+
+ ),
+ },
+ {
+ id: 'infra',
+ label: i18n.translate(
+ 'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.monitorMyInfrastructureLabel',
+ { defaultMessage: 'Monitor my infrastructure' }
+ ),
+ description: (
+
+
+ {i18n.translate(
+ 'xpack.observability_onboarding.onboardingFlowForm.li.builtOnPowerfulElasticsearchLabel',
+ {
+ defaultMessage:
+ 'Built on powerful Elasticsearch, stream in and scale infrastructure metrics from your systems, cloud, network, and other infrastructure sources',
+ }
+ )}
+
+
+ {i18n.translate(
+ 'xpack.observability_onboarding.onboardingFlowForm.li.getLogicalAndPhysicalLabel',
+ {
+ defaultMessage:
+ 'Get logical and physical views of your infrastructure topology.',
+ }
+ )}
+
+
+ {i18n.translate(
+ 'xpack.observability_onboarding.onboardingFlowForm.li.breakDownApplicationAndLabel',
+ {
+ defaultMessage:
+ 'Break down application and infrastructure silos for faster root cause detection',
+ }
+ )}
+
+
+ ),
+ },
+ ];
+
+ const [selectedId, setSelectedId] = useState();
+ const [hoveredId, setHoveredId] = useState();
+
+ const visibleOption = hoveredId
+ ? options.find((option) => option.id === hoveredId)
+ : selectedId
+ ? options.find((option) => option.id === selectedId)
+ : undefined;
+
+ const { euiTheme } = useEuiTheme();
+
+ return (
+
+
+
+ {options.map((option, index) => (
+ setHoveredId(option.id)}
+ onMouseLeave={() => setHoveredId(undefined)}
+ >
+ {/* Using EuiSpacer instead of EuiFlexGroup to ensure spacing is part of hit area for mouse hover effect */}
+ {index > 0 && setSelectedId(option.id)}
+ />
+
+ ))}
+
+
+ {visibleOption && (
+
+
+ {visibleOption.description}
+
+
+ )}
+
+
+
+ {selectedId && (
+ <>
+
+ {new Array(6).fill(null).map((_, index) => (
+
+
+ )}
+
+ );
+};
+
+interface TitleWithIconProps {
+ title: string;
+ iconType: string;
+}
+
+const TitleWithIcon: FunctionComponent = ({
+ title,
+ iconType,
+}) => (
+
+
+
+
+
+ {title}
+
+
+
+);