[APM] Fleet: Add secret_token to agent instructions in legacy Getting…

… Started guide (#102669) * Register tutorial on APM plugin * using files from apm * removing tutorial from apm_oss * removing export * fixing i18n * adding fleet section * adding fleet information on APM tutorial * adding fleet typing * fixing i18n * adding fleet information on APM tutorial * checks apm fleet integration when pushing button * adding fleet information on APM tutorial * refactoring * registering status check callback * addin custom component registration function * fixing TS issue * addressing PR comments * fixing tests * adding i18n * fixing issues * adding environment credencials * refactoring * adjusting size * adding unit test * adding unit test * refactoring * addressing PR comments * refactoring eui component * adding unit test * fixing TS issue * fixing TS issue * adding help text * renaming * moving tutorial to a common directory * moving files * updating apm int version * adding storybook * adding storybook * refactoring * removing commented code * fixing unit tests * addressing PR comments * fixing lint errors * changing to url * addressing PR comments Co-authored-by: Kibana Machine <[email protected]>
elastic · Jun 29, 2021 · 3b5bd02 · 3b5bd02
1 parent af62b05
commit 3b5bd02
Show file tree

Hide file tree

Showing 34 changed files with 2,229 additions and 365 deletions.
diff --git a/...ns/home/public/application/components/tutorial/__snapshots__/instruction_set.test.js.snap b/...ns/home/public/application/components/tutorial/__snapshots__/instruction_set.test.js.snap
diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/tutorial.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/tutorial.test.js.snap
diff --git a/src/plugins/home/public/application/components/tutorial/instruction.js b/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,
 };
diff --git a/src/plugins/home/public/application/components/tutorial/instruction_set.js b/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);
diff --git a/src/plugins/home/public/application/components/tutorial/instruction_set.test.js b/src/plugins/home/public/application/components/tutorial/instruction_set.test.js
@@ -49,6 +49,7 @@ test('render', () => {
       offset={1}
       paramValues={{}}
       replaceTemplateStrings={() => {}}
+      isCloudEnabled={false}
     />
   );
   expect(component).toMatchSnapshot(); // eslint-disable-line
@@ -74,6 +75,7 @@ describe('statusCheckState', () => {
         statusCheckConfig={statusCheckConfig}
         replaceTemplateStrings={() => {}}
         statusCheckState={StatusCheckStates.FETCHING}
+        isCloudEnabled={false}
       />
     );
     expect(component).toMatchSnapshot(); // eslint-disable-line
@@ -90,6 +92,7 @@ describe('statusCheckState', () => {
         statusCheckConfig={statusCheckConfig}
         replaceTemplateStrings={() => {}}
         statusCheckState={StatusCheckStates.FETCHING}
+        isCloudEnabled={false}
       />
     );
     expect(component).toMatchSnapshot(); // eslint-disable-line
@@ -106,6 +109,7 @@ describe('statusCheckState', () => {
         statusCheckConfig={statusCheckConfig}
         replaceTemplateStrings={() => {}}
         statusCheckState={StatusCheckStates.ERROR}
+        isCloudEnabled={false}
       />
     );
     expect(component).toMatchSnapshot(); // eslint-disable-line
@@ -122,6 +126,7 @@ describe('statusCheckState', () => {
         statusCheckConfig={statusCheckConfig}
         replaceTemplateStrings={() => {}}
         statusCheckState={StatusCheckStates.NO_DATA}
+        isCloudEnabled={false}
       />
     );
     expect(component).toMatchSnapshot(); // eslint-disable-line
@@ -138,6 +143,7 @@ describe('statusCheckState', () => {
         statusCheckConfig={statusCheckConfig}
         replaceTemplateStrings={() => {}}
         statusCheckState={StatusCheckStates.HAS_DATA}
+        isCloudEnabled={false}
       />
     );
     expect(component).toMatchSnapshot(); // eslint-disable-line

diff --git a/src/plugins/home/public/application/components/tutorial/tutorial.js b/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}
         />
       );
     });

diff --git a/x-pack/plugins/apm/public/plugin.ts b/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 () => {

diff --git a/x-pack/plugins/apm/public/tutorial/config_agent/commands/django.ts b/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',
+#...
+)`;
diff --git a/x-pack/plugins/apm/public/tutorial/config_agent/commands/dotnet.ts b/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
+}
+}`;