Merge branch 'apm-tutorial-token' of github.com:cauemarcondes/kibana …

…into apm-tutorial-storybook

src/plugins/home/public/application/components/tutorial/instruction.js

@@ -18,6 +18,7 @@ import {
   EuiCopy,
   EuiButton,
   EuiLoadingSpinner,
+  EuiErrorBoundary,
 } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -31,6 +32,8 @@ export function Instruction({
   textPre,
   replaceTemplateStrings,
   customComponentName,
+  variantId,
+  isCloudEnabled,
 }) {
   const { tutorialService, http, uiSettings, getBasePath } = getServices();
 
@@ -96,18 +99,22 @@ export function Instruction({
 
       {commandBlock}
 
-      {post}
-
       {LazyCustomComponent && (
         <Suspense fallback={<EuiLoadingSpinner />}>
-          <LazyCustomComponent
-            basePath={getBasePath()}
-            isDarkTheme={uiSettings.get('theme:darkMode')}
-            http={http}
-          />
+          <EuiErrorBoundary>
+            <LazyCustomComponent
+              basePath={getBasePath()}
+              isDarkTheme={uiSettings.get('theme:darkMode')}
+              http={http}
+              variantId={variantId}
+              isCloudEnabled={isCloudEnabled}
+            />
+          </EuiErrorBoundary>
         </Suspense>
       )}
 
+      {post}
+
       <EuiSpacer />
     </div>
   );
@@ -120,4 +127,6 @@ Instruction.propTypes = {
   textPre: PropTypes.string,
   replaceTemplateStrings: PropTypes.func.isRequired,
   customComponentName: PropTypes.string,
+  variantId: PropTypes.string,
+  isCloudEnabled: PropTypes.bool.isRequired,
 };

src/plugins/home/public/application/components/tutorial/instruction_set.js

@@ -187,6 +187,8 @@ class InstructionSetUi extends React.Component {
           textPost={instruction.textPost}
           replaceTemplateStrings={this.props.replaceTemplateStrings}
           customComponentName={instruction.customComponentName}
+          variantId={instructionVariant.id}
+          isCloudEnabled={this.props.isCloudEnabled}
         />
       );
       return {
@@ -320,6 +322,7 @@ InstructionSetUi.propTypes = {
   paramValues: PropTypes.object.isRequired,
   setParameter: PropTypes.func,
   replaceTemplateStrings: PropTypes.func.isRequired,
+  isCloudEnabled: PropTypes.bool.isRequired,
 };
 
 export const InstructionSet = injectI18n(InstructionSetUi);

src/plugins/home/public/application/components/tutorial/tutorial.js

@@ -301,6 +301,7 @@ class TutorialUi extends React.Component {
           setParameter={this.setParameter}
           replaceTemplateStrings={this.props.replaceTemplateStrings}
           key={index}
+          isCloudEnabled={this.props.isCloudEnabled}
         />
       );
     });

x-pack/plugins/apm/public/plugin.ts

@@ -175,6 +175,16 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
       () => import('./tutorial/tutorial_fleet_instructions')
     );
 
+    pluginSetupDeps.home?.tutorials.registerCustomComponent(
+      'TutorialConfigAgent',
+      () => import('./tutorial/config_agent')
+    );
+
+    pluginSetupDeps.home?.tutorials.registerCustomComponent(
+      'TutorialConfigAgentRumScript',
+      () => import('./tutorial/config_agent/rum_script')
+    );
+
     plugins.observability.dashboard.register({
       appName: 'apm',
       hasData: async () => {

x-pack/plugins/apm/public/tutorial/config_agent/commands/django.ts

@@ -0,0 +1,72 @@
+/*
+ * 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 django = `# ${i18n.translate(
+  'xpack.apm.tutorial.djangoClient.configure.commands.addAgentComment',
+  {
+    defaultMessage: 'Add the agent to the installed apps',
+  }
+)}
+INSTALLED_APPS = (
+'elasticapm.contrib.django',
+# ...
+)
+
+ELASTIC_APM = {curlyOpen}
+# ${i18n.translate(
+  'xpack.apm.tutorial.djangoClient.configure.commands.setRequiredServiceNameComment',
+  {
+    defaultMessage: 'Set the required service name. Allowed characters:',
+  }
+)}
+# ${i18n.translate(
+  'xpack.apm.tutorial.djangoClient.configure.commands.allowedCharactersComment',
+  {
+    defaultMessage: 'a-z, A-Z, 0-9, -, _, and space',
+  }
+)}
+'SERVICE_NAME': '',
+
+# ${i18n.translate(
+  'xpack.apm.tutorial.djangoClient.configure.commands.useIfApmServerRequiresTokenComment',
+  {
+    defaultMessage: 'Use if APM Server requires a secret token',
+  }
+)}
+'SECRET_TOKEN': '{{{secretToken}}}',
+
+# ${i18n.translate(
+  'xpack.apm.tutorial.djangoClient.configure.commands.setCustomApmServerUrlComment',
+  {
+    defaultMessage:
+      'Set the custom APM Server URL (default: {defaultApmServerUrl})',
+    values: { defaultApmServerUrl: 'http://localhost:8200' },
+  }
+)}
+'SERVER_URL': '{{{apmServerUrl}}}',
+
+# ${i18n.translate(
+  'xpack.apm.tutorial.djangoClient.configure.commands.setServiceEnvironmentComment',
+  {
+    defaultMessage: 'Set the service environment',
+  }
+)}
+'ENVIRONMENT': 'production',
+{curlyClose}
+
+# ${i18n.translate(
+  'xpack.apm.tutorial.djangoClient.configure.commands.addTracingMiddlewareComment',
+  {
+    defaultMessage: 'To send performance metrics, add our tracing middleware:',
+  }
+)}
+MIDDLEWARE = (
+'elasticapm.contrib.django.middleware.TracingMiddleware',
+#...
+)`;

x-pack/plugins/apm/public/tutorial/config_agent/commands/dotnet.ts

@@ -0,0 +1,14 @@
+/*
+ * 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.
+ */
+export const dotnet = `{
+"ElasticApm": {
+"SecretToken": "{{{secretToken}}}",
+"ServerUrls": "{{{apmServerUrl}}}", //Set custom APM Server URL (default: http://localhost:8200)
+"ServiceName": "MyApp", //allowed characters: a-z, A-Z, 0-9, -, _, and space. Default is the entry assembly of the application
+"Environment": "production", // Set the service environment
+}
+}`;

x-pack/plugins/apm/public/tutorial/config_agent/commands/flask.ts

@@ -0,0 +1,70 @@
+/*
+ * 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 flask = `# ${i18n.translate(
+  'xpack.apm.tutorial.flaskClient.configure.commands.initializeUsingEnvironmentVariablesComment',
+  {
+    defaultMessage: 'initialize using environment variables',
+  }
+)}
+from elasticapm.contrib.flask import ElasticAPM
+app = Flask(__name__)
+apm = ElasticAPM(app)
+
+# ${i18n.translate(
+  'xpack.apm.tutorial.flaskClient.configure.commands.configureElasticApmComment',
+  {
+    defaultMessage:
+      "or configure to use ELASTIC_APM in your application's settings",
+  }
+)}
+from elasticapm.contrib.flask import ElasticAPM
+app.config['ELASTIC_APM'] = {curlyOpen}
+# ${i18n.translate(
+  'xpack.apm.tutorial.flaskClient.configure.commands.setRequiredServiceNameComment',
+  {
+    defaultMessage: 'Set the required service name. Allowed characters:',
+  }
+)}
+# ${i18n.translate(
+  'xpack.apm.tutorial.flaskClient.configure.commands.allowedCharactersComment',
+  {
+    defaultMessage: 'a-z, A-Z, 0-9, -, _, and space',
+  }
+)}
+'SERVICE_NAME': '',
+
+# ${i18n.translate(
+  'xpack.apm.tutorial.flaskClient.configure.commands.useIfApmServerRequiresTokenComment',
+  {
+    defaultMessage: 'Use if APM Server requires a secret token',
+  }
+)}
+'SECRET_TOKEN': '{{{secretToken}}}',
+
+# ${i18n.translate(
+  'xpack.apm.tutorial.flaskClient.configure.commands.setCustomApmServerUrlComment',
+  {
+    defaultMessage:
+      'Set the custom APM Server URL (default: {defaultApmServerUrl})',
+    values: { defaultApmServerUrl: 'http://localhost:8200' },
+  }
+)}
+'SERVER_URL': '{{{apmServerUrl}}}',
+
+# ${i18n.translate(
+  'xpack.apm.tutorial.flaskClient.configure.commands.setServiceEnvironmentComment',
+  {
+    defaultMessage: 'Set the service environment',
+  }
+)}
+'ENVIRONMENT': 'production',
+{curlyClose}
+
+apm = ElasticAPM(app)`;