[Observability Onboarding] Add OTel tech preview badges on Serverless (…

…elastic#209302) Closes elastic#209083 This adds `Technical Preview` badges for Host OTel and K8S OTel flows on Serverless **Host OTel** | Home | Flow | |----|-----| | ![CleanShot 2025-02-03 at 14 53 13@2x](https://github.com/user-attachments/assets/a984d2e6-834b-40e4-91f5-46f9b3076e83) | ![CleanShot 2025-02-03 at 14 53 21@2x](https://github.com/user-attachments/assets/e056bfa8-4a7f-4094-bdde-06ae134c60e3) | **K8S OTel** | Home | Flow | |----|-----| | ![CleanShot 2025-02-03 at 14 52 58@2x](https://github.com/user-attachments/assets/e7324192-88c9-46d8-a5cd-4c30f600fc86) | ![CleanShot 2025-02-03 at 14 53 29@2x](https://github.com/user-attachments/assets/1d8850dd-1953-49e4-998a-93b784750b40) |
MichaelMarcialis · Feb 5, 2025 · 5af4d37 · 5af4d37
1 parent c56d7ea
commit 5af4d37
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 47 deletions.
diff --git a/...ins/observability_onboarding/public/application/onboarding_flow_form/use_custom_cards.tsx b/...ins/observability_onboarding/public/application/onboarding_flow_form/use_custom_cards.tsx
@@ -141,6 +141,7 @@ export function useCustomCards(
       version: '',
       integration: '',
       isQuickstart: true,
+      release: isServerless ? 'preview' : undefined,
     },
     {
       id: 'kubernetes-quick-start',
@@ -208,6 +209,7 @@ export function useCustomCards(
       version: '',
       integration: '',
       isQuickstart: true,
+      release: isServerless ? 'preview' : undefined,
     },
     {
       id: 'apm-virtual',

diff --git a/...servability/plugins/observability_onboarding/public/application/pages/otel_kubernetes.tsx b/...servability/plugins/observability_onboarding/public/application/pages/otel_kubernetes.tsx
@@ -7,30 +7,41 @@
 
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { OtelKubernetesPanel } from '../quickstart_flows/otel_kubernetes/otel_kubernetes_panel';
 import { PageTemplate } from './template';
 import { CustomHeader } from '../header';
+import { type ObservabilityOnboardingAppServices } from '../..';
 
-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>
-);
+export const OtelKubernetesPage = () => {
+  const {
+    services: {
+      context: { isServerless },
+    },
+  } = useKibana<ObservabilityOnboardingAppServices>();
+
+  return (
+    <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',
+            }
+          )}
+          isTechnicalPreview={isServerless}
+        />
+      }
+    >
+      <OtelKubernetesPanel />
+    </PageTemplate>
+  );
+};
diff --git a/...ons/observability/plugins/observability_onboarding/public/application/pages/otel_logs.tsx b/...ons/observability/plugins/observability_onboarding/public/application/pages/otel_logs.tsx
@@ -7,31 +7,42 @@
 
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { PageTemplate } from './template';
 import { CustomHeader } from '../header';
 import { OtelLogsPanel } from '../quickstart_flows/otel_logs';
+import { type ObservabilityOnboardingAppServices } from '../..';
 
-export const OtelLogsPage = () => (
-  <PageTemplate
-    customHeader={
-      <CustomHeader
-        logo="opentelemetry"
-        headlineCopy={i18n.translate(
-          'xpack.observability_onboarding.experimentalOnboardingFlow.customHeader.otel.text',
-          {
-            defaultMessage: 'OpenTelemetry',
-          }
-        )}
-        captionCopy={i18n.translate(
-          'xpack.observability_onboarding.experimentalOnboardingFlow.customHeader.otel.description',
-          {
-            defaultMessage:
-              'Collect logs and host metrics using the Elastic distribution of the OTel collector.',
-          }
-        )}
-      />
-    }
-  >
-    <OtelLogsPanel />
-  </PageTemplate>
-);
+export const OtelLogsPage = () => {
+  const {
+    services: {
+      context: { isServerless },
+    },
+  } = useKibana<ObservabilityOnboardingAppServices>();
+
+  return (
+    <PageTemplate
+      customHeader={
+        <CustomHeader
+          logo="opentelemetry"
+          headlineCopy={i18n.translate(
+            'xpack.observability_onboarding.experimentalOnboardingFlow.customHeader.otel.text',
+            {
+              defaultMessage: 'OpenTelemetry',
+            }
+          )}
+          captionCopy={i18n.translate(
+            'xpack.observability_onboarding.experimentalOnboardingFlow.customHeader.otel.description',
+            {
+              defaultMessage:
+                'Collect logs and host metrics using the Elastic distribution of the OTel collector.',
+            }
+          )}
+          isTechnicalPreview={isServerless}
+        />
+      }
+    >
+      <OtelLogsPanel />
+    </PageTemplate>
+  );
+};