adding environment credencials

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

@@ -31,6 +31,8 @@ export function Instruction({
   textPre,
   replaceTemplateStrings,
   customComponentName,
+  variantId,
+  isCloudEnabled,
 }) {
   const { tutorialService, http, uiSettings, getBasePath } = getServices();
 
@@ -96,18 +98,20 @@ export function Instruction({
 
       {commandBlock}
 
-      {post}
-
       {LazyCustomComponent && (
         <Suspense fallback={<EuiLoadingSpinner />}>
           <LazyCustomComponent
             basePath={getBasePath()}
             isDarkTheme={uiSettings.get('theme:darkMode')}
             http={http}
+            variantId={variantId}
+            isCloudEnabled={isCloudEnabled}
           />
         </Suspense>
       )}
 
+      {post}
+
       <EuiSpacer />
     </div>
   );
@@ -120,4 +124,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/components/shared/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/components/shared/tutorial/config_agent/commands/dotnet.ts

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+// TODO: ${'http://localhost:8200'}' fallback server_url
+
+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/components/shared/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)`;

x-pack/plugins/apm/public/components/shared/tutorial/config_agent/commands/get_commands.ts

@@ -0,0 +1,44 @@
+/*
+ * 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 Mustache from 'mustache';
+import { java } from './java';
+import { node } from './node';
+import { django } from './django';
+import { flask } from './flask';
+import { rails } from './rails';
+import { rack } from './rack';
+import { go } from './go';
+import { dotnet } from './dotnet';
+import { php } from './php';
+import { rum, rumScript } from './rum';
+
+const commands: Record<string, string> = {
+  java,
+  node,
+  django,
+  flask,
+  rails,
+  rack,
+  go,
+  dotnet,
+  php,
+  js: rum,
+  js_script: rumScript,
+};
+
+export function getCommands({
+  variantId,
+  environmentDetails,
+}: {
+  variantId: string;
+  environmentDetails: {
+    apmServerUrl?: string;
+    secretToken?: string;
+  };
+}) {
+  return Mustache.render(commands[variantId], environmentDetails);
+}

x-pack/plugins/apm/public/components/shared/tutorial/config_agent/commands/go.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 go = `# ${i18n.translate(
+  'xpack.apm.tutorial.goClient.configure.commands.initializeUsingEnvironmentVariablesComment',
+  {
+    defaultMessage: 'Initialize using environment variables:',
+  }
+)}
+
+# ${i18n.translate(
+  'xpack.apm.tutorial.goClient.configure.commands.setServiceNameComment',
+  {
+    defaultMessage:
+      'Set the service name. Allowed characters: # a-z, A-Z, 0-9, -, _, and space.',
+  }
+)}
+# ${i18n.translate(
+  'xpack.apm.tutorial.goClient.configure.commands.usedExecutableNameComment',
+  {
+    defaultMessage:
+      'If ELASTIC_APM_SERVICE_NAME is not specified, the executable name will be used.',
+  }
+)}
+export ELASTIC_APM_SERVICE_NAME=
+
+# ${i18n.translate(
+  'xpack.apm.tutorial.goClient.configure.commands.setCustomApmServerUrlComment',
+  {
+    defaultMessage:
+      'Set custom APM Server URL (default: {defaultApmServerUrl})',
+    values: { defaultApmServerUrl: 'http://localhost:8200' },
+  }
+)}
+export ELASTIC_APM_SERVER_URL={{apmServerUrl}}
+
+# ${i18n.translate(
+  'xpack.apm.tutorial.goClient.configure.commands.useIfApmRequiresTokenComment',
+  {
+    defaultMessage: 'Use if APM Server requires a secret token',
+  }
+)}
+export ELASTIC_APM_SECRET_TOKEN={{secretToken}}
+
+# ${i18n.translate(
+  'xpack.apm.tutorial.goClient.configure.commands.setServiceEnvironment',
+  {
+    defaultMessage: 'Set the service environment',
+  }
+)}
+export ELASTIC_APM_ENVIRONMENT=
+`;

x-pack/plugins/apm/public/components/shared/tutorial/config_agent/commands/java.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 java = `java -javaagent:/path/to/elastic-apm-agent-<version>.jar \\
+-Delastic.apm.service_name=my-application \\
+-Delastic.apm.server_urls= {{apmServerUrl}} \\
+-Delastic.apm.secret_token= {{secretToken}} \\
+-Delastic.apm.environment=production \\
+-Delastic.apm.application_packages=org.example \\
+-jar my-application.jar`;