[APM] Auto attachment for java agent beta in APM integration settings

x-pack/plugins/apm/common/fleet.ts

@@ -8,7 +8,7 @@ import semverParse from 'semver/functions/parse';
 
 export const POLICY_ELASTIC_AGENT_ON_CLOUD = 'policy-elastic-agent-on-cloud';
 
-export const SUPPORTED_APM_PACKAGE_VERSION = '7.16.0';
+export const SUPPORTED_APM_PACKAGE_VERSION = '8.0.0-dev4'; // TODO update to just '8.0.0' once published
 
 export function isPrereleaseVersion(version: string) {
   return semverParse(version)?.prerelease?.length ?? 0 > 0;

x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_accordion.tsx

@@ -12,19 +12,29 @@ import {
   EuiSpacer,
   EuiText,
   EuiCodeBlock,
+  EuiTabbedContent,
+  EuiBetaBadge,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
-import { CreateAgentInstructions } from './agent_instructions_mappings';
+import React, { ComponentType } from 'react';
+import styled from 'styled-components';
+import {
+  AgentRuntimeAttachmentProps,
+  CreateAgentInstructions,
+} from './agent_instructions_mappings';
 import {
   Markdown,
   useKibana,
 } from '../../../../../../../src/plugins/kibana_react/public';
 import { AgentName } from '../../../../typings/es_schemas/ui/fields/agent';
 import { AgentIcon } from '../../shared/agent_icon';
-import { NewPackagePolicy } from '../apm_policy_form/typings';
+import type {
+  NewPackagePolicy,
+  PackagePolicy,
+  PackagePolicyEditExtensionComponentProps,
+} from '../apm_policy_form/typings';
 import { getCommands } from '../../../tutorial/config_agent/commands/get_commands';
-import { replaceTemplateStrings } from './replace_template_strings';
+import { renderMustache } from './render_mustache';
 
 function AccordionButtonContent({
   agentName,
@@ -97,96 +107,175 @@ function TutorialConfigAgent({
 }
 
 interface Props {
+  policy: PackagePolicy;
   newPolicy: NewPackagePolicy;
+  onChange: PackagePolicyEditExtensionComponentProps['onChange'];
   agentName: AgentName;
   title: string;
   variantId: string;
   createAgentInstructions: CreateAgentInstructions;
+  AgentRuntimeAttachment?: ComponentType<AgentRuntimeAttachmentProps>;
 }
 
+const StyledEuiAccordion = styled(EuiAccordion)`
+  // This is an alternative fix suggested by the EUI team to fix drag elements inside EuiAccordion
+  // This Issue tracks the fix on the Eui side https://github.com/elastic/eui/issues/3548#issuecomment-639041283
+  .euiAccordion__childWrapper {
+    transform: none;
+  }
+`;
+
 export function AgentInstructionsAccordion({
+  policy,
   newPolicy,
+  onChange,
   agentName,
   title,
   createAgentInstructions,
   variantId,
+  AgentRuntimeAttachment,
 }: Props) {
   const docLinks = useKibana().services.docLinks;
   const vars = newPolicy?.inputs?.[0]?.vars;
   const apmServerUrl = vars?.url.value;
   const secretToken = vars?.secret_token.value;
   const steps = createAgentInstructions(apmServerUrl, secretToken);
+  const stepsElements = steps.map(
+    (
+      { title: stepTitle, textPre, textPost, customComponentName, commands },
+      index
+    ) => {
+      const commandBlock = commands
+        ? renderMustache({
+            text: commands,
+            docLinks,
+          })
+        : '';
+
+      return (
+        <section key={index}>
+          <EuiText>
+            <h4>{stepTitle}</h4>
+          </EuiText>
+          <EuiSpacer size="s" />
+          <EuiText color="subdued" size="s">
+            {textPre && (
+              <InstructionsContent
+                markdown={renderMustache({ text: textPre, docLinks })}
+              />
+            )}
+            {commandBlock && (
+              <>
+                <EuiSpacer size="s" />
+                <EuiCodeBlock isCopyable language="bash">
+                  {commandBlock}
+                </EuiCodeBlock>
+              </>
+            )}
+            {customComponentName === 'TutorialConfigAgent' && (
+              <TutorialConfigAgent
+                variantId={variantId}
+                apmServerUrl={apmServerUrl}
+                secretToken={secretToken}
+              />
+            )}
+            {customComponentName === 'TutorialConfigAgentRumScript' && (
+              <TutorialConfigAgent
+                variantId="js_script"
+                apmServerUrl={apmServerUrl}
+                secretToken={secretToken}
+              />
+            )}
+            {textPost && (
+              <>
+                <EuiSpacer />
+                <InstructionsContent
+                  markdown={renderMustache({ text: textPost, docLinks })}
+                />
+              </>
+            )}
+          </EuiText>
+          <EuiSpacer />
+        </section>
+      );
+    }
+  );
+
+  const manualInstrumentationContent = (
+    <>
+      <EuiSpacer />
+      {stepsElements}
+    </>
+  );
+
   return (
-    <EuiAccordion
+    <StyledEuiAccordion
       id={agentName}
       buttonContent={
         <AccordionButtonContent agentName={agentName} title={title} />
       }
     >
-      <EuiSpacer />
-      {steps.map(
-        (
-          {
-            title: stepTitle,
-            textPre,
-            textPost,
-            customComponentName,
-            commands,
-          },
-          index
-        ) => {
-          const commandBlock = replaceTemplateStrings(
-            Array.isArray(commands) ? commands.join('\n') : commands || '',
-            docLinks
-          );
-          return (
-            <section key={index}>
-              <EuiText>
-                <h4>{stepTitle}</h4>
-              </EuiText>
-              <EuiSpacer size="s" />
-              <EuiText color="subdued" size="s">
-                {textPre && (
-                  <InstructionsContent
-                    markdown={replaceTemplateStrings(textPre, docLinks)}
-                  />
-                )}
-                {commandBlock && (
-                  <>
-                    <EuiSpacer size="s" />
-                    <EuiCodeBlock isCopyable language="bash">
-                      {commandBlock}
-                    </EuiCodeBlock>
-                  </>
-                )}
-                {customComponentName === 'TutorialConfigAgent' && (
-                  <TutorialConfigAgent
-                    variantId={variantId}
-                    apmServerUrl={apmServerUrl}
-                    secretToken={secretToken}
-                  />
-                )}
-                {customComponentName === 'TutorialConfigAgentRumScript' && (
-                  <TutorialConfigAgent
-                    variantId="js_script"
-                    apmServerUrl={apmServerUrl}
-                    secretToken={secretToken}
-                  />
-                )}
-                {textPost && (
+      {AgentRuntimeAttachment ? (
+        <>
+          <EuiSpacer />
+          <EuiTabbedContent
+            tabs={[
+              {
+                id: 'manual-instrumentation',
+                name: i18n.translate(
+                  'xpack.apm.fleetIntegration.apmAgent.runtimeAttachment.manualInstrumentation',
+                  { defaultMessage: 'Manual instrumentation' }
+                ),
+                content: manualInstrumentationContent,
+              },
+              {
+                id: 'auto-attachment',
+                name: (
+                  <EuiFlexGroup
+                    justifyContent="flexStart"
+                    alignItems="baseline"
+                    gutterSize="s"
+                  >
+                    <EuiFlexItem grow={false}>
+                      {i18n.translate(
+                        'xpack.apm.fleetIntegration.apmAgent.runtimeAttachment.autoAttachment',
+                        { defaultMessage: 'Auto-Attachment' }
+                      )}
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiBetaBadge
+                        label={i18n.translate(
+                          'xpack.apm.fleetIntegration.apmAgent.runtimeAttachment.betaBadge.label',
+                          { defaultMessage: 'BETA' }
+                        )}
+                        tooltipContent={i18n.translate(
+                          'xpack.apm.fleetIntegration.apmAgent.runtimeAttachment.betaBadge.tooltipContent',
+                          {
+                            defaultMessage:
+                              'Auto-attachment for Java is not GA. Please help us by reporting any bugs.',
+                          }
+                        )}
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                ),
+                content: (
                   <>
                     <EuiSpacer />
-                    <InstructionsContent
-                      markdown={replaceTemplateStrings(textPost, docLinks)}
+                    <AgentRuntimeAttachment
+                      policy={policy}
+                      newPolicy={newPolicy}
+                      onChange={onChange}
                     />
                   </>
-                )}
-              </EuiText>
-              <EuiSpacer />
-            </section>
-          );
-        }
+                ),
+              },
+            ]}
+          />
+        </>
+      ) : (
+        manualInstrumentationContent
       )}
-    </EuiAccordion>
+    </StyledEuiAccordion>
   );
 }

x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_mappings.ts

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { ComponentType } from 'react';
 import {
   createDotNetAgentInstructions,
   createDjangoAgentInstructions,
@@ -18,6 +19,18 @@ import {
   createRackAgentInstructions,
 } from '../../../../common/tutorial/instructions/apm_agent_instructions';
 import { AgentName } from '../../../../typings/es_schemas/ui/fields/agent';
+import { JavaRuntimeAttachment } from './runtime_attachment/supported_agents/java_runtime_attachment';
+import {
+  NewPackagePolicy,
+  PackagePolicy,
+  PackagePolicyEditExtensionComponentProps,
+} from '../apm_policy_form/typings';
+
+export interface AgentRuntimeAttachmentProps {
+  policy: PackagePolicy;
+  newPolicy: NewPackagePolicy;
+  onChange: PackagePolicyEditExtensionComponentProps['onChange'];
+}
 
 export type CreateAgentInstructions = (
   apmServerUrl?: string,
@@ -35,12 +48,14 @@ export const ApmAgentInstructionsMappings: Array<{
   title: string;
   variantId: string;
   createAgentInstructions: CreateAgentInstructions;
+  AgentRuntimeAttachment?: ComponentType<AgentRuntimeAttachmentProps>;
 }> = [
   {
     agentName: 'java',
     title: 'Java',
     variantId: 'java',
     createAgentInstructions: createJavaAgentInstructions,
+    AgentRuntimeAttachment: JavaRuntimeAttachment,
   },
   {
     agentName: 'rum-js',

x-pack/plugins/apm/public/components/fleet_integration/apm_agents/index.tsx

@@ -21,19 +21,28 @@ interface Props {
   onChange: PackagePolicyEditExtensionComponentProps['onChange'];
 }
 
-export function ApmAgents({ newPolicy }: Props) {
+export function ApmAgents({ policy, newPolicy, onChange }: Props) {
   return (
     <div>
       {ApmAgentInstructionsMappings.map(
-        ({ agentName, title, createAgentInstructions, variantId }) => (
+        ({
+          agentName,
+          title,
+          createAgentInstructions,
+          variantId,
+          AgentRuntimeAttachment,
+        }) => (
           <Fragment key={agentName}>
             <EuiPanel>
               <AgentInstructionsAccordion
                 agentName={agentName}
                 title={title}
-                newPolicy={newPolicy}
                 createAgentInstructions={createAgentInstructions}
                 variantId={variantId}
+                AgentRuntimeAttachment={AgentRuntimeAttachment}
+                policy={policy}
+                newPolicy={newPolicy}
+                onChange={onChange}
               />
             </EuiPanel>
             <EuiSpacer />

x-pack/plugins/apm/public/components/fleet_integration/apm_agents/replace_template_strings.ts → x-pack/plugins/apm/public/components/fleet_integration/apm_agents/render_mustache.ts

@@ -10,12 +10,17 @@ import Mustache from 'mustache';
 
 const TEMPLATE_TAGS = ['{', '}'];
 
-export function replaceTemplateStrings(
-  text: string,
-  docLinks?: CoreStart['docLinks']
-) {
-  Mustache.parse(text, TEMPLATE_TAGS);
-  return Mustache.render(text, {
+export function renderMustache({
+  text,
+  docLinks,
+}: {
+  text: string | string[];
+  docLinks?: CoreStart['docLinks'];
+}) {
+  const template = Array.isArray(text) ? text.join('\n') : text;
+
+  Mustache.parse(template, TEMPLATE_TAGS);
+  return Mustache.render(template, {
     config: {
       docs: {
         base_url: docLinks?.ELASTIC_WEBSITE_URL,