[Observability] Unified Kubernetes Observability with OpenTelemetry (e…

…lastic#194169)

x-pack/plugins/observability_solution/observability_onboarding/public/application/observability_onboarding_flow.tsx

@@ -16,6 +16,7 @@ import {
   KubernetesPage,
   LandingPage,
   OtelLogsPage,
+  OtelKubernetesPage,
   SystemLogsPage,
   FirehosePage,
 } from './pages';
@@ -50,6 +51,9 @@ export function ObservabilityOnboardingFlow() {
         <Route path="/kubernetes">
           <KubernetesPage />
         </Route>
+        <Route path="/otel-kubernetes">
+          <OtelKubernetesPage />
+        </Route>
         <Route path="/otel-logs">
           <OtelLogsPage />
         </Route>

x-pack/plugins/observability_solution/observability_onboarding/public/application/pages/index.ts

@@ -8,6 +8,7 @@
 export { AutoDetectPage } from './auto_detect';
 export { CustomLogsPage } from './custom_logs';
 export { KubernetesPage } from './kubernetes';
+export { OtelKubernetesPage } from './otel_kubernetes';
 export { LandingPage } from './landing';
 export { OtelLogsPage } from './otel_logs';
 export { SystemLogsPage } from './system_logs';

x-pack/plugins/observability_solution/observability_onboarding/public/application/pages/otel_kubernetes.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 { OtelKubernetesPanel } from '../quickstart_flows/otel_kubernetes/otel_kubernetes_panel';
+import { PageTemplate } from './template';
+import { CustomHeader } from '../header';
+
+export const OtelKubernetesPage = () => (
+  <PageTemplate
+    customHeader={
+      <CustomHeader
+        logo="opentelemetry"
+        headlineCopy={i18n.translate(
+          'xpack.observability_onboarding.experimentalOnboardingFlow.customHeader.otelKubernetes.text',
+          {
+            defaultMessage: 'Elastic Distribution for OTel Collector',
+          }
+        )}
+        captionCopy={i18n.translate(
+          'xpack.observability_onboarding.experimentalOnboardingFlow.customHeader.otelKubernetes.caption.description',
+          {
+            defaultMessage: 'Unified Kubernetes observability with the OpenTelemetry Operator',
+          }
+        )}
+      />
+    }
+  >
+    <OtelKubernetesPanel />
+  </PageTemplate>
+);

x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/kubernetes/use_kubernetes_flow.ts

@@ -11,7 +11,9 @@ import { OBSERVABILITY_ONBOARDING_FLOW_PROGRESS_TELEMETRY_EVENT } from '../../..
 import { ObservabilityOnboardingAppServices } from '../../..';
 import { useFetcher } from '../../../hooks/use_fetcher';
 
-export function useKubernetesFlow() {
+export function useKubernetesFlow(
+  onboardingFlowType: 'kubernetes_otel' | 'kubernetes' = 'kubernetes'
+) {
   const {
     services: {
       analytics,
@@ -20,21 +22,27 @@ export function useKubernetesFlow() {
   } = useKibana<ObservabilityOnboardingAppServices>();
   const { data, status, error, refetch } = useFetcher(
     (callApi) => {
-      return callApi('POST /internal/observability_onboarding/kubernetes/flow');
+      return callApi('POST /internal/observability_onboarding/kubernetes/flow', {
+        params: {
+          body: {
+            pkgName: onboardingFlowType,
+          },
+        },
+      });
     },
-    [],
+    [onboardingFlowType],
     { showToastOnError: false }
   );
 
   useEffect(() => {
     if (data?.onboardingId !== undefined) {
       analytics?.reportEvent(OBSERVABILITY_ONBOARDING_FLOW_PROGRESS_TELEMETRY_EVENT.eventType, {
-        onboardingFlowType: 'kubernetes',
+        onboardingFlowType,
         onboardingId: data?.onboardingId,
         step: 'in_progress',
       });
     }
-  }, [analytics, cloudServiceProvider, data?.onboardingId]);
+  }, [onboardingFlowType, analytics, cloudServiceProvider, data?.onboardingId]);
 
   return { data, status, error, refetch } as const;
 }

x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/otel_kubernetes/index.tsx

@@ -0,0 +1,8 @@
+/*
+ * 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 { OtelKubernetesPanel } from './otel_kubernetes_panel';