[APM] Serverless Onboarding with Custom Tutorials

config/serverless.oblt.yml

@@ -19,3 +19,11 @@ xpack.serverless.plugin.developer.projectSwitcher.currentType: 'observability'
 
 ## Disable adding the component template `.fleet_agent_id_verification-1` to every index template for each datastream for each integration
 xpack.fleet.agentIdVerificationEnabled: false
+
+## APM Serverless Onboarding flow
+xpack.apm.serverlessOnboarding: true
+
+## Required for force installation of APM Package
+xpack.fleet.packages:
+  - name: apm
+    version: latest

test/plugin_functional/test_suites/core_plugins/rendering.ts

@@ -177,6 +177,8 @@ export default function ({ getService }: PluginFunctionalProviderContext) {
         'xpack.apm.serviceMapEnabled (boolean)',
         'xpack.apm.ui.enabled (boolean)',
         'xpack.apm.ui.maxTraceItems (number)',
+        'xpack.apm.managedServiceUrl (any)',
+        'xpack.apm.serverlessOnboarding (any)',
         'xpack.apm.latestAgentVersionsUrl (string)',
         'xpack.cases.files.allowedMimeTypes (array)',
         'xpack.cases.files.maxSize (number)',

x-pack/plugins/apm/common/tutorial/tutorials.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { CustomIntegration } from '@kbn/custom-integrations-plugin/common';
+
+const APM_INTEGRATION_CATEGORIES = ['observability', 'apm'];
+
+export const apmTutorialCustomIntegration: Omit<CustomIntegration, 'type'> = {
+  id: 'apm',
+  title: i18n.translate('xpack.apm.tutorial.specProvider.name', {
+    defaultMessage: 'APM',
+  }),
+  categories: APM_INTEGRATION_CATEGORIES,
+  uiInternalPath: '/app/apm/onboarding',
+  description: i18n.translate('xpack.apm.tutorial.introduction', {
+    defaultMessage:
+      'Collect performance metrics from your applications with Elastic APM.',
+  }),
+  icons: [
+    {
+      type: 'eui',
+      src: 'apmApp',
+    },
+  ],
+  shipper: 'tutorial',
+  isBeta: false,
+};

x-pack/plugins/apm/kibana.jsonc

@@ -45,6 +45,7 @@
       "spaces",
       "taskManager",
       "usageCollection",
+      "customIntegrations", // Move this to requiredPlugins after completely migrating from the Tutorials Home App
       "licenseManagement"
     ],
     "requiredBundles": [

x-pack/plugins/apm/public/components/app/onboarding/agent_config_instructions.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiCodeBlock, EuiSpacer } from '@elastic/eui';
+import {
+  getApmAgentCommands,
+  getApmAgentVariables,
+  getApmAgentLineNumbers,
+  getApmAgentHighlightLang,
+} from './commands/get_apm_agent_commands';
+import { AgentConfigurationTable } from './agent_config_table';
+
+export function AgentConfigInstructions({
+  variantId,
+  apmServerUrl,
+  secretToken,
+  apiKey,
+  createApiKey,
+  createApiKeyLoading,
+}: {
+  variantId: string;
+  apmServerUrl: string;
+  secretToken?: string;
+  apiKey?: string | null;
+  createApiKey?: () => void;
+  createApiKeyLoading?: boolean;
+}) {
+  const commands = getApmAgentCommands({
+    variantId,
+    apmServerUrl,
+    secretToken,
+    apiKey,
+  });
+
+  const variables = getApmAgentVariables(variantId, secretToken);
+  const lineNumbers = getApmAgentLineNumbers(variantId, apiKey);
+  const highlightLang = getApmAgentHighlightLang(variantId);
+
+  return (
+    <>
+      <EuiSpacer />
+      <AgentConfigurationTable
+        variables={variables}
+        data={{ apmServerUrl, secretToken, apiKey }}
+        createApiKey={createApiKey}
+        createApiKeyLoading={createApiKeyLoading}
+      />
+      <EuiSpacer />
+
+      <EuiCodeBlock
+        isCopyable
+        language={highlightLang || 'bash'}
+        data-test-subj="commands"
+        lineNumbers={lineNumbers}
+        whiteSpace="pre"
+      >
+        {commands}
+      </EuiCodeBlock>
+    </>
+  );
+}

x-pack/plugins/apm/public/components/app/onboarding/agent_config_table.tsx

@@ -0,0 +1,106 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import type { ValuesType } from 'utility-types';
+import { get } from 'lodash';
+import {
+  EuiBasicTable,
+  EuiText,
+  EuiBasicTableColumn,
+  EuiButton,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+function ConfigurationValueColumn({
+  columnKey,
+  value,
+  createApiKey,
+  createApiKeyLoading,
+}: {
+  columnKey: string;
+  value: string | null;
+  createApiKey?: () => void;
+  createApiKeyLoading?: boolean;
+}) {
+  const shouldRenderCreateApiKeyButton =
+    columnKey === 'apiKey' && value === null;
+
+  if (shouldRenderCreateApiKeyButton) {
+    return (
+      <EuiButton
+        data-test-subj="createApiKeyAndId"
+        fill
+        onClick={createApiKey}
+        isLoading={createApiKeyLoading}
+      >
+        {i18n.translate('xpack.apm.tutorial.apiKey.create', {
+          defaultMessage: 'Create API Key',
+        })}
+      </EuiButton>
+    );
+  }
+
+  return (
+    <EuiText size="s" color="accent">
+      {value}
+    </EuiText>
+  );
+}
+
+export function AgentConfigurationTable({
+  variables,
+  data,
+  createApiKey,
+  createApiKeyLoading,
+}: {
+  variables: { [key: string]: string };
+  data: {
+    apmServerUrl?: string;
+    secretToken?: string;
+    apiKey?: string | null;
+  };
+  createApiKey?: () => void;
+  createApiKeyLoading?: boolean;
+}) {
+  if (!variables) return null;
+
+  const defaultValues = {
+    apmServiceName: 'my-service-name',
+    apmEnvironment: 'my-environment',
+  };
+
+  const columns: Array<EuiBasicTableColumn<ValuesType<typeof items>>> = [
+    {
+      field: 'setting',
+      name: i18n.translate('xpack.apm.onboarding.agent.column.configSettings', {
+        defaultMessage: 'Configuration setting',
+      }),
+    },
+    {
+      field: 'value',
+      name: i18n.translate('xpack.apm.onboarding.agent.column.configValue', {
+        defaultMessage: 'Configuration value',
+      }),
+      render: (_, { value, key }) => (
+        <ConfigurationValueColumn
+          columnKey={key}
+          value={value}
+          createApiKey={createApiKey}
+          createApiKeyLoading={createApiKeyLoading}
+        />
+      ),
+    },
+  ];
+
+  const items = Object.entries(variables).map(([key, value]) => ({
+    setting: value,
+    value: get({ ...data, ...defaultValues }, key),
+    key,
+  }));
+  return <EuiBasicTable items={items} columns={columns} />;
+}

x-pack/plugins/apm/public/components/app/onboarding/commands/django.ts

@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const djangoVariables = (secretToken?: string) => ({
+  apmServiceName: 'SERVICE_NAME',
+  ...(secretToken && { secretToken: 'SECRET_TOKEN' }),
+  ...(!secretToken && { apiKey: 'API_KEY' }),
+  apmServerUrl: 'SERVER_URL',
+  apmEnvironment: 'ENVIRONMENT',
+});
+
+export const djangoHighlightLang = 'py';
+
+export const djangoLineNumbers = () => ({
+  start: 1,
+  highlight: '1, 3, 5, 7, 9, 12, 15, 18-19,  21, 23, 25',
+});
+
+export const django = `INSTALLED_APPS = (
+  # ${i18n.translate(
+    'xpack.apm.onboarding.djangoClient.configure.commands.addAgentComment',
+    {
+      defaultMessage: 'Add the agent to installed apps',
+    }
+  )}
+  'elasticapm.contrib.django',
+  # ...
+)
+
+ELASTIC_APM = {
+  # {{serviceNameHint}}
+  'SERVICE_NAME': 'my-service-name',
+
+  {{^secretToken}}
+  # {{apiKeyHint}}
+  'API_KEY': '{{{apiKey}}}',
+  {{/secretToken}}
+  {{#secretToken}}
+  # {{secretTokenHint}}
+  'SECRET_TOKEN': '{{{secretToken}}}',
+  {{/secretToken}}
+
+  # {{{serverUrlHint}}}
+  'SERVER_URL': '{{{apmServerUrl}}}',
+
+  # {{{serviceEnvironmentHint}}}
+  'ENVIRONMENT': 'my-environment',
+}
+
+MIDDLEWARE = (
+  # ${i18n.translate(
+    'xpack.apm.onboarding.djangoClient.configure.commands.addTracingMiddlewareComment',
+    {
+      defaultMessage: 'Add our tracing middleware to send performance metrics',
+    }
+  )}
+  'elasticapm.contrib.django.middleware.TracingMiddleware',
+  #...
+)`;

x-pack/plugins/apm/public/components/app/onboarding/commands/dotnet.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const dotnetVariables = (secretToken?: string) => ({
+  apmServiceName: 'ServiceName',
+  ...(secretToken && { secretToken: 'SecretToken' }),
+  ...(!secretToken && { apiKey: 'ApiKey' }),
+  apmServerUrl: 'ServerUrl',
+  apmEnvironment: 'Environment',
+});
+
+export const dotnetHighlightLang = 'dotnet';
+
+export const dotnetLineNumbers = () => ({
+  start: 1,
+  highlight: '1-2, 4, 6, 8, 10-12',
+});
+
+export const dotnet = `{
+  "ElasticApm": {
+    /// {{serviceNameHint}} ${i18n.translate(
+      'xpack.apm.onboarding.dotnetClient.createConfig.commands.defaultServiceName',
+      {
+        defaultMessage: 'Default is the entry assembly of the application.',
+      }
+    )}
+    "ServiceName": "my-service-name",
+    {{^secretToken}}
+    /// {{apiKeyHint}}
+    "ApiKey": "{{{apiKey}}}",
+    {{/secretToken}}
+    {{#secretToken}}
+    /// {{secretTokenHint}}
+    "SecretToken": "{{{secretToken}}}",
+    {{/secretToken}}
+    /// {{{serverUrlHint}}}
+    "ServerUrl": "{{{apmServerUrl}}}",
+    /// {{{serviceEnvironmentHint}}}
+    "Environment": "my-environment",
+  }
+}`;