From e1bbd3e0ad331ca39357be406627a74d378d2a9f Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 19 Dec 2024 23:55:27 +1100
Subject: [PATCH] [8.x] Update the annotation step in the OTel Kubernetes flow
 (#204260) (#204917)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Backport

This will backport the following commits from `main` to `8.x`:
- [Update the annotation step in the OTel Kubernetes flow
(#204260)](https://github.com/elastic/kibana/pull/204260)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Giorgos
Bamparopoulos","email":"georgios.bamparopoulos@elastic.co"},"sourceCommit":{"committedDate":"2024-12-19T11:07:11Z","message":"Update
the annotation step in the OTel Kubernetes flow (#204260)\n\n## 📓
Summary\r\nUpdates the third optional step in the OpenTelemetry flow for
Kubernetes\r\naccording to the latest designs. It splits the guidelines
by providing\r\ninstructions to annotate specific pods as well as all
the resources in\r\nthe namespace.\r\n\r\n## Before\r\n<img
width=\"1061\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/1c334244-47ea-493d-b8ef-6bf002f97616\"\r\n/>\r\n\r\n##
After\r\n### Amsterdam\r\n<img width=\"930\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/91bec562-c1dc-4c8c-b58e-d9b71a9d6978\"\r\n/>\r\n\r\n\r\n###
Amsterdam (Dark mode)\r\n<img width=\"931\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/673deb18-588d-4845-9419-3ad00bbae1e2\"\r\n/>\r\n\r\n###
Borealis\r\n<img width=\"934\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a79aee17-708a-4809-becc-6a4ba2ffa020\"\r\n/>\r\n\r\n\r\n\r\n\r\nCloses
https://github.com/elastic/kibana/issues/201130\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>\r\nCo-authored-by: Mike
Birnstiehl
<114418652+mdbirnstiehl@users.noreply.github.com>","sha":"92bc22b84046a4595d3f2a674cc0286b37ff4788","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","ci:project-deploy-observability"],"title":"Update
the annotation step in the OTel Kubernetes
flow","number":204260,"url":"https://github.com/elastic/kibana/pull/204260","mergeCommit":{"message":"Update
the annotation step in the OTel Kubernetes flow (#204260)\n\n## 📓
Summary\r\nUpdates the third optional step in the OpenTelemetry flow for
Kubernetes\r\naccording to the latest designs. It splits the guidelines
by providing\r\ninstructions to annotate specific pods as well as all
the resources in\r\nthe namespace.\r\n\r\n## Before\r\n<img
width=\"1061\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/1c334244-47ea-493d-b8ef-6bf002f97616\"\r\n/>\r\n\r\n##
After\r\n### Amsterdam\r\n<img width=\"930\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/91bec562-c1dc-4c8c-b58e-d9b71a9d6978\"\r\n/>\r\n\r\n\r\n###
Amsterdam (Dark mode)\r\n<img width=\"931\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/673deb18-588d-4845-9419-3ad00bbae1e2\"\r\n/>\r\n\r\n###
Borealis\r\n<img width=\"934\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a79aee17-708a-4809-becc-6a4ba2ffa020\"\r\n/>\r\n\r\n\r\n\r\n\r\nCloses
https://github.com/elastic/kibana/issues/201130\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>\r\nCo-authored-by: Mike
Birnstiehl
<114418652+mdbirnstiehl@users.noreply.github.com>","sha":"92bc22b84046a4595d3f2a674cc0286b37ff4788"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/204260","number":204260,"mergeCommit":{"message":"Update
the annotation step in the OTel Kubernetes flow (#204260)\n\n## 📓
Summary\r\nUpdates the third optional step in the OpenTelemetry flow for
Kubernetes\r\naccording to the latest designs. It splits the guidelines
by providing\r\ninstructions to annotate specific pods as well as all
the resources in\r\nthe namespace.\r\n\r\n## Before\r\n<img
width=\"1061\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/1c334244-47ea-493d-b8ef-6bf002f97616\"\r\n/>\r\n\r\n##
After\r\n### Amsterdam\r\n<img width=\"930\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/91bec562-c1dc-4c8c-b58e-d9b71a9d6978\"\r\n/>\r\n\r\n\r\n###
Amsterdam (Dark mode)\r\n<img width=\"931\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/673deb18-588d-4845-9419-3ad00bbae1e2\"\r\n/>\r\n\r\n###
Borealis\r\n<img width=\"934\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a79aee17-708a-4809-becc-6a4ba2ffa020\"\r\n/>\r\n\r\n\r\n\r\n\r\nCloses
https://github.com/elastic/kibana/issues/201130\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>\r\nCo-authored-by: Mike
Birnstiehl
<114418652+mdbirnstiehl@users.noreply.github.com>","sha":"92bc22b84046a4595d3f2a674cc0286b37ff4788"}}]}]
BACKPORT-->

Co-authored-by: Giorgos Bamparopoulos <georgios.bamparopoulos@elastic.co>
---
 .../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"