Skip to content

Commit

Permalink
Enable Kubernetes Otel flow (#196531)
Browse files Browse the repository at this point in the history 
Resolves
[#4035](elastic/observability-dev#4035)

## Summary

Enable Kubernetes Otel flow

## Screenshot

<img width="1189" alt="Screenshot 2024-10-16 at 13 21 24"
src="https://github.com/user-attachments/assets/d1e87756-bfee-497a-9861-9912542e13a9">

---------

Co-authored-by: Joe Reuter <[email protected]>
  • Loading branch information
@thomheymann @flash1293
thomheymann and flash1293 authored Oct 17, 2024
1 parent 57c4b40 commit e92e020
Show file tree
Hide file tree
Showing 17 changed files with 355 additions and 594 deletions.
4 changes: 2 additions & 2 deletions ...observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const OnboardingFlowForm: FunctionComponent = () => {
'Monitor your host and the services running on it, set-up SLO, get alerted, remediate performance issues',
}
),
logos: ['kubernetes', 'opentelemetry', 'apache', 'mysql'],
logos: ['opentelemetry', 'apache', 'mysql'],
},
{
id: 'kubernetes',
Expand Down Expand Up @@ -86,7 +86,7 @@ export const OnboardingFlowForm: FunctionComponent = () => {
'Monitor the frontend and backend application that you have developed, set-up synthetic monitors',
}
),
logos: ['opentelemetry', 'java', 'javascript', 'dotnet'],
logos: ['opentelemetry', 'java', 'ruby', 'dotnet'],
},
{
id: 'cloud',
Expand Down
149 changes: 126 additions & 23 deletions ...lity_onboarding/public/application/onboarding_flow_form/use_custom_cards_for_category.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ export function useCustomCardsForCategory(
const { href: autoDetectUrl } = reactRouterNavigate(history, `/auto-detect/${location.search}`);
const { href: otelLogsUrl } = reactRouterNavigate(history, `/otel-logs/${location.search}`);
const { href: kubernetesUrl } = reactRouterNavigate(history, `/kubernetes/${location.search}`);
const { href: otelKubernetesUrl } = reactRouterNavigate(
history,
`/otel-kubernetes/${location.search}`
);

const apmUrl = `${getUrlForApp?.('apm')}/${isServerless ? 'onboarding' : 'tutorial'}`;
const otelApmUrl = isServerless ? `${apmUrl}?agent=openTelemetry` : apmUrl;
Expand All @@ -44,9 +48,14 @@ export function useCustomCardsForCategory(
id: 'auto-detect-logs',
name: 'auto-detect-logs-virtual',
type: 'virtual',
title: 'Auto-detect Integrations with Elastic Agent',
title: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.autoDetectTitle',
{
defaultMessage: 'Auto-detect Integrations with Elastic Agent',
}
),
description: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.scanYourHostForLabel',
'xpack.observability_onboarding.useCustomCardsForCategory.autoDetectDescription',
{
defaultMessage: 'Scan your host for log and metric files, auto-install integrations',
}
Expand Down Expand Up @@ -75,8 +84,19 @@ export function useCustomCardsForCategory(
id: 'otel-logs',
name: 'custom-logs-virtual',
type: 'virtual',
title: 'Elastic Distribution for OTel Collector',
description: 'Collect logs and host metrics using the Elastic Distro for OTel Collector ',
title: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.logsOtelTitle',
{
defaultMessage: 'Host monitoring with EDOT Collector',
}
),
description: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.logsOtelDescription',
{
defaultMessage:
'Collect logs and host metrics with the Elastic Distro for OTel Collector',
}
),
extraLabelsBadges: [
<EuiFlexItem grow={false}>
<LogoIcon logo="apple" size="m" />
Expand Down Expand Up @@ -105,8 +125,19 @@ export function useCustomCardsForCategory(
id: 'kubernetes-quick-start',
name: 'kubernetes-quick-start',
type: 'virtual',
title: 'Elastic Agent',
description: 'Monitor your Kubernetes cluster with Elastic Agent, collect container logs',
title: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.kubernetesTitle',
{
defaultMessage: 'Kubernetes monitoring with Elastic Agent',
}
),
description: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.kubernetesDescription',
{
defaultMessage:
'Monitor your Kubernetes cluster with Elastic Agent, collect container logs',
}
),
extraLabelsBadges: [
<EuiFlexItem grow={false}>
<LogoIcon logo="kubernetes" size="m" />
Expand All @@ -125,11 +156,22 @@ export function useCustomCardsForCategory(
isQuickstart: true,
},
{
id: 'otel-logs',
name: 'custom-logs-virtual',
id: 'otel-kubernetes',
name: 'otel-kubernetes-virtual',
type: 'virtual',
title: 'Elastic Distribution for OTel Collector',
description: 'Collect logs, metrics and traces for Kubernetes cluster monitoring',
title: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.kubernetesOtelTitle',
{
defaultMessage: 'Kubernetes monitoring with EDOT Collector',
}
),
description: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.kubernetesOtelDescription',
{
defaultMessage:
'Unified Kubernetes observability with Elastic Distro for OTel Collector',
}
),
extraLabelsBadges: [
<EuiFlexItem grow={false}>
<LogoIcon logo="kubernetes" size="m" />
Expand All @@ -142,9 +184,10 @@ export function useCustomCardsForCategory(
src: http?.staticAssets.getPluginAssetHref('opentelemetry.svg') ?? '',
},
],
url: otelLogsUrl,
url: otelKubernetesUrl,
version: '',
integration: '',
isQuickstart: true,
},
];

Expand All @@ -153,8 +196,18 @@ export function useCustomCardsForCategory(
{
id: 'apm-virtual',
type: 'virtual',
title: 'Elastic APM',
description: 'Collect distributed traces from your applications with Elastic APM',
title: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.apmTitle',
{
defaultMessage: 'Elastic APM',
}
),
description: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.apmDescription',
{
defaultMessage: 'Collect distributed traces from your applications with Elastic APM',
}
),
name: 'apm',
categories: ['observability'],
icons: [
Expand All @@ -170,8 +223,18 @@ export function useCustomCardsForCategory(
{
id: 'otel-virtual',
type: 'virtual',
title: 'OpenTelemetry',
description: 'Collect distributed traces with OpenTelemetry',
title: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.apmOtelTitle',
{
defaultMessage: 'OpenTelemetry',
}
),
description: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.apmOtelDescription',
{
defaultMessage: 'Collect distributed traces with OpenTelemetry',
}
),
name: 'otel',
categories: ['observability'],
icons: [
Expand All @@ -187,8 +250,18 @@ export function useCustomCardsForCategory(
{
id: 'synthetics-virtual',
type: 'virtual',
title: 'Synthetic monitor',
description: 'Monitor endpoints, pages, and user journeys',
title: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.syntheticsTitle',
{
defaultMessage: 'Synthetic monitor',
}
),
description: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.syntheticsDescription',
{
defaultMessage: 'Monitor endpoints, pages, and user journeys',
}
),
name: 'synthetics',
categories: ['observability'],
icons: [
Expand All @@ -208,8 +281,18 @@ export function useCustomCardsForCategory(
{
id: 'azure-logs-virtual',
type: 'virtual',
title: 'Azure',
description: 'Collect logs from Microsoft Azure',
title: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.azureTitle',
{
defaultMessage: 'Azure',
}
),
description: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.azureDescription',
{
defaultMessage: 'Collect logs from Microsoft Azure',
}
),
name: 'azure',
categories: ['observability'],
icons: [],
Expand All @@ -222,8 +305,18 @@ export function useCustomCardsForCategory(
{
id: 'aws-logs-virtual',
type: 'virtual',
title: 'AWS',
description: 'Collect logs from Amazon Web Services (AWS)',
title: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.awsTitle',
{
defaultMessage: 'AWS',
}
),
description: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.awsDescription',
{
defaultMessage: 'Collect logs from Amazon Web Services (AWS)',
}
),
name: 'aws',
categories: ['observability'],
icons: [],
Expand All @@ -236,8 +329,18 @@ export function useCustomCardsForCategory(
{
id: 'gcp-logs-virtual',
type: 'virtual',
title: 'Google Cloud Platform',
description: 'Collect logs from Google Cloud Platform',
title: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.gcpTitle',
{
defaultMessage: 'Google Cloud Platform',
}
),
description: i18n.translate(
'xpack.observability_onboarding.useCustomCardsForCategory.gcpDescription',
{
defaultMessage: 'Collect logs from Google Cloud Platform',
}
),
name: 'gcp',
categories: ['observability'],
icons: [],
Expand Down
19 changes: 10 additions & 9 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 @@ -30,6 +30,10 @@ import { CopyToClipboardButton } from '../shared/copy_to_clipboard_button';
import { ObservabilityOnboardingContextValue } from '../../../plugin';
import { useKubernetesFlow } from '../kubernetes/use_kubernetes_flow';

const OTEL_HELM_CHARTS_REPO = 'https://open-telemetry.github.io/opentelemetry-helm-charts';
const OTEL_KUBE_STACK_VERSION = '0.3.0';
const OTEL_KUBE_STACK_VALUES_FILE_URL =
'https://raw.githubusercontent.com/elastic/opentelemetry/refs/heads/main/resources/kubernetes/operator/helm/values.yaml';
const CLUSTER_OVERVIEW_DASHBOARD_ID = 'kubernetes_otel-cluster-overview';

export const OtelKubernetesPanel: React.FC = () => {
Expand All @@ -48,10 +52,7 @@ export const OtelKubernetesPanel: React.FC = () => {
}

const namespace = 'opentelemetry-operator-system';
const valuesFile =
'https://raw.githubusercontent.com/elastic/opentelemetry/refs/heads/main/resources/kubernetes/operator/helm/values.yaml';

const addRepoCommand = `helm repo add open-telemetry 'https://open-telemetry.github.io/opentelemetry-helm-charts' --force-update`;
const addRepoCommand = `helm repo add open-telemetry '${OTEL_HELM_CHARTS_REPO}' --force-update`;
const installStackCommand = data
? `kubectl create namespace ${namespace}
kubectl create secret generic elastic-secret-otel \\
Expand All @@ -60,8 +61,8 @@ kubectl create secret generic elastic-secret-otel \\
--from-literal=elastic_api_key='${data.apiKeyEncoded}'
helm install opentelemetry-kube-stack open-telemetry/opentelemetry-kube-stack \\
--namespace ${namespace} \\
--create-namespace \\
--values '${valuesFile}'`
--values '${OTEL_KUBE_STACK_VALUES_FILE_URL}' \\
--version '${OTEL_KUBE_STACK_VERSION}'`
: undefined;

return (
Expand Down Expand Up @@ -143,7 +144,7 @@ helm install opentelemetry-kube-stack open-telemetry/opentelemetry-kube-stack \\
<EuiFlexItem grow={false}>
<EuiButtonEmpty
iconType="download"
href={valuesFile}
href={OTEL_KUBE_STACK_VALUES_FILE_URL}
flush="left"
target="_blank" // The `download` attribute does not work cross-origin so it's better to open the file in a new tab
data-test-subj="observabilityOnboardingOtelKubernetesPanelDownloadValuesFileButton"
Expand Down Expand Up @@ -218,7 +219,7 @@ kind: Pod
metadata:
name: my-app
annotations:
instrumentation.opentelemetry.io/inject-${idSelected}: "true"
instrumentation.opentelemetry.io/inject-${idSelected}: "${namespace}/elastic-instrumentation"
spec:
containers:
- name: my-app
Expand All @@ -227,7 +228,7 @@ spec:
<EuiSpacer />
<CopyToClipboardButton
textToCopy={`annotations:
instrumentation.opentelemetry.io/inject-${idSelected}: "true"`}
instrumentation.opentelemetry.io/inject-${idSelected}: "${namespace}/elastic-instrumentation"`}
data-test-subj={`observabilityOnboardingOtelKubernetesInstrumentApplicationCopyToClipboard-${idSelected}`}
/>
<EuiSpacer />
Expand Down
Loading

0 comments on commit e92e020

Please sign in to comment.