From 62170ccdfbcaf269a356de7877378de7099b4221 Mon Sep 17 00:00:00 2001
From: Giorgos Bamparopoulos <georgios.bamparopoulos@elastic.co>
Date: Thu, 19 Dec 2024 11:07:11 +0000
Subject: [PATCH] Update the annotation step in the OTel Kubernetes flow
 (#204260)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 📓 Summary
Updates the third optional step in the OpenTelemetry flow for Kubernetes
according to the latest designs. It splits the guidelines by providing
instructions to annotate specific pods as well as all the resources in
the namespace.

## Before
<img width="1061" alt="image"
src="https://github.com/user-attachments/assets/1c334244-47ea-493d-b8ef-6bf002f97616"
/>

## After
### Amsterdam
<img width="930" alt="image"
src="https://github.com/user-attachments/assets/91bec562-c1dc-4c8c-b58e-d9b71a9d6978"
/>

### Amsterdam (Dark mode)
<img width="931" alt="image"
src="https://github.com/user-attachments/assets/673deb18-588d-4845-9419-3ad00bbae1e2"
/>

### Borealis
<img width="934" alt="image"
src="https://github.com/user-attachments/assets/a79aee17-708a-4809-becc-6a4ba2ffa020"
/>

Closes https://github.com/elastic/kibana/issues/201130

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Mike Birnstiehl <114418652+mdbirnstiehl@users.noreply.github.com>
(cherry picked from commit 92bc22b84046a4595d3f2a674cc0286b37ff4788)
---
 .../otel_kubernetes/otel_kubernetes_panel.tsx | 77 ++++++++++++++-----
 1 file changed, 59 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/otel_kubernetes/otel_kubernetes_panel.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/otel_kubernetes/otel_kubernetes_panel.tsx
index 942cecb13aeeb..cf7fd341a1cab 100644
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/otel_kubernetes/otel_kubernetes_panel.tsx
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/otel_kubernetes/otel_kubernetes_panel.tsx
@@ -18,11 +18,14 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButtonEmpty,
+  EuiAccordion,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { DASHBOARD_APP_LOCATOR } from '@kbn/deeplinks-analytics';
+import { css } from '@emotion/react';
 import { EmptyPrompt } from '../shared/empty_prompt';
 import { GetStartedPanel } from '../shared/get_started_panel';
 import { FeedbackButtons } from '../shared/feedback_buttons';
@@ -44,6 +47,7 @@ export const OtelKubernetesPanel: React.FC = () => {
   } = useKibana<ObservabilityOnboardingContextValue>();
   const apmLocator = share.url.locators.get('APM_LOCATOR');
   const dashboardLocator = share.url.locators.get(DASHBOARD_APP_LOCATOR);
+  const theme = useEuiTheme();
 
   if (error) {
     return (
@@ -187,7 +191,7 @@ helm install opentelemetry-kube-stack open-telemetry/opentelemetry-kube-stack \\
                     'xpack.observability_onboarding.otelKubernetesPanel.theOperatorAutomatesTheLabel',
                     {
                       defaultMessage:
-                        'Enable automatic instrumentation for your applications by annotating the pods template (spec.template.metadata.annotations) in your Deployment or relevant workload object (StatefulSet, Job, CronJob, etc.)',
+                        'The Operator automates the injection of auto-instrumentation libraries into the annotated pods for some languages.',
                     }
                   )}
                 </p>
@@ -225,9 +229,27 @@ helm install opentelemetry-kube-stack open-telemetry/opentelemetry-kube-stack \\
                   ]}
                 />
                 <EuiSpacer />
-                <EuiCodeBlock paddingSize="m" language="yaml">
-                  {`# To annotate specific deployment Pods modify its manifest
-apiVersion: apps/v1
+                <p
+                  css={css`
+                    font-weight: ${theme.euiTheme.font.weight.bold};
+                  `}
+                >
+                  {i18n.translate(
+                    'xpack.observability_onboarding.otelKubernetesPanel.step3a.title',
+                    { defaultMessage: '3(a) - Start with one of these annotations methods:' }
+                  )}
+                </p>
+                <EuiSpacer />
+                <EuiAccordion
+                  id={'otelKubernetesAccordionSingleDeployment'}
+                  paddingSize="s"
+                  buttonContent={i18n.translate(
+                    'xpack.observability_onboarding.otelKubernetesPanel.annotation.deployment',
+                    { defaultMessage: 'Annotate specific deployment Pods modifying its manifest' }
+                  )}
+                >
+                  <EuiCodeBlock paddingSize="m" language="yaml" isCopyable={true}>
+                    {`apiVersion: apps/v1
 kind: Deployment
 metadata:
   name: myapp
@@ -242,24 +264,43 @@ spec:
       containers:
       - image: myapplication-image
         name: app
-      ...
-
-# To annotate all resources in a namespace
-kubectl annotate namespace my-namespace instrumentation.opentelemetry.io/inject-${idSelected}="${namespace}/elastic-instrumentation"
-
-# Restart your deployment
-kubectl rollout restart deployment myapp -n my-namespace
+      ...`}
+                  </EuiCodeBlock>
+                </EuiAccordion>
+                <EuiSpacer />
+                <EuiAccordion
+                  id={'otelKubernetesAccordionAllResources'}
+                  paddingSize="s"
+                  buttonContent={i18n.translate(
+                    'xpack.observability_onboarding.otelKubernetesPanel.annotation.resources',
+                    { defaultMessage: 'Annotate all resources in a namespace' }
+                  )}
+                >
+                  <EuiCodeBlock paddingSize="m" language="bash" isCopyable={true}>
+                    {`kubectl annotate namespace my-namespace instrumentation.opentelemetry.io/inject-${idSelected}="${namespace}/elastic-instrumentation"`}
+                  </EuiCodeBlock>
+                </EuiAccordion>
+                <EuiSpacer />
+                <p
+                  css={css`
+                    font-weight: ${theme.euiTheme.font.weight.bold};
+                  `}
+                >
+                  {i18n.translate(
+                    'xpack.observability_onboarding.otelKubernetesPanel.step3b.title',
+                    {
+                      defaultMessage:
+                        '3(b) - Restart deployment and ensure the annotations are applied and the auto-instrumentation library is injected:',
+                    }
+                  )}
+                </p>
+                <EuiSpacer />
+                <EuiCodeBlock paddingSize="m" language="bash" isCopyable={true}>
+                  {`kubectl rollout restart deployment myapp -n my-namespace
 
-# Check annotations have been applied correctly and auto-instrumentation library is injected
 kubectl describe pod <myapp-pod-name> -n my-namespace`}
                 </EuiCodeBlock>
                 <EuiSpacer />
-                <CopyToClipboardButton
-                  textToCopy={`annotations:
-    instrumentation.opentelemetry.io/inject-${idSelected}: "${namespace}/elastic-instrumentation"`}
-                  data-test-subj={`observabilityOnboardingOtelKubernetesInstrumentApplicationCopyToClipboard-${idSelected}`}
-                />
-                <EuiSpacer />
                 <p>
                   <FormattedMessage
                     id="xpack.observability_onboarding.otelKubernetesPanel.forOtherLanguagesThatLabel"