diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/header/header_section.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/header/header_section.tsx
new file mode 100644
index 000000000000000..49d94fd17968efc
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/header/header_section.tsx
@@ -0,0 +1,105 @@
+/*
+ * 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 {
+ EuiButtonEmpty,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiIcon,
+ EuiPageTemplate,
+ EuiSpacer,
+ EuiTitle,
+ useEuiShadow,
+ useEuiTheme,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { Header } from './header';
+import backgroundImageUrl from './background.svg';
+import { useIconForLogo } from '../../hooks/use_icon_for_logo';
+
+export function HeaderSection() {
+ const path = useLocation().pathname;
+ const kubernetesLogo = useIconForLogo('kubernetes');
+ const theme = useEuiTheme();
+ const shadow = useEuiShadow('s');
+ // theme.euiTheme.size.
+ if (path === '/kubernetes') {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+ return (
+ 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/observability_onboarding_flow.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/observability_onboarding_flow.tsx
index dd22b1735fc9f0f..aa57ac0c3f2b973 100644
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/observability_onboarding_flow.tsx
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/observability_onboarding_flow.tsx
@@ -11,16 +11,15 @@ import { Route, Routes } from '@kbn/shared-ux-router';
import { useLocation } from 'react-router-dom-v5-compat';
import { EuiPageTemplate, EuiPanel, EuiSpacer } from '@elastic/eui';
import { css } from '@emotion/react';
-import backgroundImageUrl from './header/background.svg';
import { Footer } from './footer/footer';
import { OnboardingFlowForm } from './onboarding_flow_form/onboarding_flow_form';
-import { Header } from './header/header';
import { SystemLogsPanel } from './quickstart_flows/system_logs';
import { CustomLogsPanel } from './quickstart_flows/custom_logs';
import { OtelLogsPanel } from './quickstart_flows/otel_logs';
import { AutoDetectPanel } from './quickstart_flows/auto_detect';
import { KubernetesPanel } from './quickstart_flows/kubernetes';
import { BackButton } from './shared/back_button';
+import { HeaderSection } from './header/header_section';
const queryClient = new QueryClient();
@@ -38,21 +37,7 @@ export function ObservabilityOnboardingFlow() {
padding-top: 0px !important;
`}
>
- 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/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 4d5e75abe74c4a3..022efc2534eeb4d 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
@@ -8,7 +8,6 @@ import { i18n } from '@kbn/i18n';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
import type { FunctionComponent } from 'react';
import {
EuiAvatar,
@@ -31,6 +30,8 @@ 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';
+import type { SupportedLogo } from '../../hooks/types';
+import { useIconForLogo } from '../../hooks/use_icon_for_logo';
interface UseCaseOption {
id: Category;
@@ -40,19 +41,6 @@ interface UseCaseOption {
showIntegrationsBadge?: boolean;
}
-type SupportedLogo =
- | 'aws'
- | 'azure'
- | 'docker'
- | 'dotnet'
- | 'prometheus'
- | 'gcp'
- | 'java'
- | 'javascript'
- | 'kubernetes'
- | 'nginx'
- | 'opentelemetry';
-
export const OnboardingFlowForm: FunctionComponent = () => {
const options: UseCaseOption[] = [
{
@@ -307,30 +295,6 @@ function scrollIntoViewWithOffset(element: HTMLElement, offset = 0) {
});
}
-function useIconForLogo(logo?: SupportedLogo): string | undefined {
- const {
- services: { http },
- } = useKibana();
- switch (logo) {
- case 'aws':
- return 'logoAWS';
- case 'azure':
- return 'logoAzure';
- case 'gcp':
- return 'logoGCP';
- case 'kubernetes':
- return 'logoKubernetes';
- case 'nginx':
- return 'logoNginx';
- case 'prometheus':
- return 'logoPrometheus';
- case 'docker':
- return 'logoDocker';
- default:
- return http?.staticAssets.getPluginAssetHref(`${logo}.svg`);
- }
-}
-
function LogoIcon({ logo }: { logo: SupportedLogo }) {
const iconType = useIconForLogo(logo);
if (iconType) {
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/hooks/types.ts b/x-pack/plugins/observability_solution/observability_onboarding/public/hooks/types.ts
new file mode 100644
index 000000000000000..81ea7a44fc17705
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/hooks/types.ts
@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+export type SupportedLogo =
+ | 'aws'
+ | 'azure'
+ | 'docker'
+ | 'dotnet'
+ | 'prometheus'
+ | 'gcp'
+ | 'java'
+ | 'javascript'
+ | 'kubernetes'
+ | 'nginx'
+ | 'opentelemetry';
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/hooks/use_icon_for_logo.ts b/x-pack/plugins/observability_solution/observability_onboarding/public/hooks/use_icon_for_logo.ts
new file mode 100644
index 000000000000000..1d067626d0d0b99
--- /dev/null
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/hooks/use_icon_for_logo.ts
@@ -0,0 +1,33 @@
+/*
+ * 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 { useKibana } from '@kbn/kibana-react-plugin/public';
+import type { SupportedLogo } from './types';
+
+export function useIconForLogo(logo?: SupportedLogo): string | undefined {
+ const {
+ services: { http },
+ } = useKibana();
+ switch (logo) {
+ case 'aws':
+ return 'logoAWS';
+ case 'azure':
+ return 'logoAzure';
+ case 'gcp':
+ return 'logoGCP';
+ case 'kubernetes':
+ return 'logoKubernetes';
+ case 'nginx':
+ return 'logoNginx';
+ case 'prometheus':
+ return 'logoPrometheus';
+ case 'docker':
+ return 'logoDocker';
+ default:
+ return http?.staticAssets.getPluginAssetHref(`${logo}.svg`);
+ }
+}