diff --git a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/observability_onboarding_flow.tsx b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/observability_onboarding_flow.tsx index 24f37608a3ffa..8d6afeed91f63 100644 --- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/observability_onboarding_flow.tsx +++ b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/observability_onboarding_flow.tsx @@ -20,6 +20,7 @@ import { FirehosePage, } from './pages'; import { ObservabilityOnboardingAppServices } from '..'; +import { useFlowBreadcrumb } from './shared/use_flow_breadcrumbs'; const queryClient = new QueryClient(); @@ -31,6 +32,8 @@ export function ObservabilityOnboardingFlow() { }, } = useKibana(); + useFlowBreadcrumb(null); + useEffect(() => { window.scrollTo(0, 0); }, [pathname]); diff --git a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/auto_detect/auto_detect_panel.tsx b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/auto_detect/auto_detect_panel.tsx index 6b6150e57bf72..07698a4c04197 100644 --- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/auto_detect/auto_detect_panel.tsx +++ b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/auto_detect/auto_detect_panel.tsx @@ -34,8 +34,15 @@ import { isSupportedLogo, LogoIcon } from '../../shared/logo_icon'; import { FeedbackButtons } from '../shared/feedback_buttons'; import { ObservabilityOnboardingContextValue } from '../../../plugin'; import { SupportedIntegrationsList } from './supported_integrations_list'; +import { useFlowBreadcrumb } from '../../shared/use_flow_breadcrumbs'; export const AutoDetectPanel: FunctionComponent = () => { + useFlowBreadcrumb({ + text: i18n.translate( + 'xpack.observability_onboarding.autoDetectPanel.breadcrumbs.autoDetectLabel', + { defaultMessage: 'Elastic Agent: Logs & Metrics' } + ), + }); const { status, data, error, refetch, installedIntegrations } = useOnboardingFlow(); const command = data ? getAutoDetectCommand(data) : undefined; const accordionId = useGeneratedHtmlId({ prefix: 'accordion' }); diff --git a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/firehose/index.tsx b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/firehose/index.tsx index 05d16ea032420..a113eb851ca4c 100644 --- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/firehose/index.tsx +++ b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/firehose/index.tsx @@ -34,6 +34,7 @@ import { ObservabilityOnboardingAppServices } from '../../..'; import { useWindowBlurDataMonitoringTrigger } from '../shared/use_window_blur_data_monitoring_trigger'; import { ExistingDataCallout } from './existing_data_callout'; import { usePopulatedAWSIndexList } from './use_populated_aws_index_list'; +import { useFlowBreadcrumb } from '../../shared/use_flow_breadcrumbs'; const OPTIONS = [ { @@ -55,6 +56,12 @@ const OPTIONS = [ ]; export function FirehosePanel() { + useFlowBreadcrumb({ + text: i18n.translate('xpack.observability_onboarding.autoDetectPanel.breadcrumbs.firehose', { + defaultMessage: 'AWS Firehose', + }), + }); + const [selectedOptionId, setSelectedOptionId] = useState( CreateStackOption.AWS_CONSOLE_UI ); diff --git a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/kubernetes/index.tsx b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/kubernetes/index.tsx index fb094eefc608f..25bae9a4bbe40 100644 --- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/kubernetes/index.tsx +++ b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/kubernetes/index.tsx @@ -23,8 +23,14 @@ import { DataIngestStatus } from './data_ingest_status'; import { FeedbackButtons } from '../shared/feedback_buttons'; import { useKubernetesFlow } from './use_kubernetes_flow'; import { useWindowBlurDataMonitoringTrigger } from '../shared/use_window_blur_data_monitoring_trigger'; +import { useFlowBreadcrumb } from '../../shared/use_flow_breadcrumbs'; export const KubernetesPanel: React.FC = () => { + useFlowBreadcrumb({ + text: i18n.translate('xpack.observability_onboarding.autoDetectPanel.breadcrumbs.k8s', { + defaultMessage: 'Kubernetes: Logs & Metrics', + }), + }); const { data, status, error, refetch } = useKubernetesFlow(); const { onPageReady } = usePerformanceContext(); diff --git a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/otel_kubernetes/otel_kubernetes_panel.tsx b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/otel_kubernetes/otel_kubernetes_panel.tsx index 384b68abf39de..7923bf4817771 100644 --- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/otel_kubernetes/otel_kubernetes_panel.tsx +++ b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/otel_kubernetes/otel_kubernetes_panel.tsx @@ -33,12 +33,18 @@ import { GetStartedPanel } from '../shared/get_started_panel'; import { FeedbackButtons } from '../shared/feedback_buttons'; import { CopyToClipboardButton } from '../shared/copy_to_clipboard_button'; import { useKubernetesFlow } from '../kubernetes/use_kubernetes_flow'; +import { useFlowBreadcrumb } from '../../shared/use_flow_breadcrumbs'; const OTEL_HELM_CHARTS_REPO = 'https://open-telemetry.github.io/opentelemetry-helm-charts'; const OTEL_KUBE_STACK_VERSION = '0.3.9'; const CLUSTER_OVERVIEW_DASHBOARD_ID = 'kubernetes_otel-cluster-overview'; export const OtelKubernetesPanel: React.FC = () => { + useFlowBreadcrumb({ + text: i18n.translate('xpack.observability_onboarding.autoDetectPanel.breadcrumbs.k8sOtel', { + defaultMessage: 'Kubernetes: OpenTelemetry', + }), + }); const { data, error, refetch } = useKubernetesFlow('kubernetes_otel'); const [idSelected, setIdSelected] = useState('nodejs'); const { diff --git a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/otel_logs/index.tsx b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/otel_logs/index.tsx index a5d2b8b1f91de..28ab5e556f9be 100644 --- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/otel_logs/index.tsx +++ b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/otel_logs/index.tsx @@ -33,6 +33,7 @@ import { useFetcher } from '../../../hooks/use_fetcher'; import { MultiIntegrationInstallBanner } from './multi_integration_install_banner'; import { EmptyPrompt } from '../shared/empty_prompt'; import { FeedbackButtons } from '../shared/feedback_buttons'; +import { useFlowBreadcrumb } from '../../shared/use_flow_breadcrumbs'; const HOST_COMMAND = i18n.translate( 'xpack.observability_onboarding.otelLogsPanel.p.runTheCommandOnYourHostLabel', @@ -43,6 +44,11 @@ const HOST_COMMAND = i18n.translate( ); export const OtelLogsPanel: React.FC = () => { + useFlowBreadcrumb({ + text: i18n.translate('xpack.observability_onboarding.autoDetectPanel.breadcrumbs.otelHost', { + defaultMessage: 'OpenTelemetry: Logs & Metrics', + }), + }); const { onPageReady } = usePerformanceContext(); const { services: { diff --git a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/shared/use_flow_breadcrumbs.ts b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/shared/use_flow_breadcrumbs.ts new file mode 100644 index 0000000000000..0968694f047e2 --- /dev/null +++ b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/shared/use_flow_breadcrumbs.ts @@ -0,0 +1,23 @@ +/* + * 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 { ChromeBreadcrumb } from '@kbn/core/public'; +import { i18n } from '@kbn/i18n'; +import { useBreadcrumbs } from '@kbn/observability-shared-plugin/public'; + +export function useFlowBreadcrumb(breadcrumb: ChromeBreadcrumb | null) { + useBreadcrumbs(breadcrumb !== null ? [breadcrumb] : [], { + app: { + id: 'observabilityOnboarding', + label: i18n.translate( + 'xpack.observability_onboarding.otelKubernetesPanel.breadcrumbs.addDataLabel', + { defaultMessage: 'Add Data' } + ), + }, + absoluteProjectStyleBreadcrumbs: false, + }); +}