Skip to content

Commit

Permalink
Update the annotation step in the OTel Kubernetes flow (elastic#204260)
Browse files Browse the repository at this point in the history 
## 📓 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 elastic#201130

---------

Co-authored-by: Elastic Machine <[email protected]>
Co-authored-by: Mike Birnstiehl <[email protected]>
  • Loading branch information
@gbamparop @elasticmachine @mdbirnstiehl
3 people authored Dec 19, 2024
1 parent b189fe7 commit 92bc22b
Showing 1 changed file with 59 additions and 18 deletions.
77 changes: 59 additions & 18 deletions ..._onboarding/public/application/quickstart_flows/otel_kubernetes/otel_kubernetes_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 (
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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"
Expand Down

0 comments on commit 92bc22b

Please sign in to comment.