diff --git a/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/commands/get_commands.test.ts b/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/commands/get_commands.test.ts index e178d1fd0d517..5dc66e2230524 100644 --- a/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/commands/get_commands.test.ts +++ b/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/commands/get_commands.test.ts @@ -12,7 +12,7 @@ describe('getCommands', () => { it('renders empty command', () => { const commands = getCommands({ variantId: 'foo', - environmentDetails: { + policyDetails: { apmServerUrl: 'localhost:8220', secretToken: 'foobar', }, @@ -24,7 +24,7 @@ describe('getCommands', () => { it('renders empty commands', () => { const commands = getCommands({ variantId: 'java', - environmentDetails: {}, + policyDetails: {}, }); expect(commands).toMatchInlineSnapshot(` "java -javaagent:/path/to/elastic-apm-agent-.jar \\\\ @@ -39,7 +39,7 @@ describe('getCommands', () => { it('renders with secret token and url', () => { const commands = getCommands({ variantId: 'java', - environmentDetails: { + policyDetails: { apmServerUrl: 'localhost:8220', secretToken: 'foobar', }, @@ -60,7 +60,7 @@ describe('getCommands', () => { it('renders empty commands', () => { const commands = getCommands({ variantId: 'js', - environmentDetails: {}, + policyDetails: {}, }); expect(commands).not.toBe(''); expect(commands).toMatchInlineSnapshot(` @@ -84,7 +84,7 @@ describe('getCommands', () => { it('renders with secret token and url', () => { const commands = getCommands({ variantId: 'js', - environmentDetails: { + policyDetails: { apmServerUrl: 'localhost:8220', secretToken: 'foobar', }, @@ -113,7 +113,7 @@ describe('getCommands', () => { it('renders empty commands', () => { const commands = getCommands({ variantId: 'node', - environmentDetails: {}, + policyDetails: {}, }); expect(commands).not.toBe(''); expect(commands).toMatchInlineSnapshot(` @@ -138,7 +138,7 @@ describe('getCommands', () => { it('renders with secret token and url', () => { const commands = getCommands({ variantId: 'node', - environmentDetails: { + policyDetails: { apmServerUrl: 'localhost:8220', secretToken: 'foobar', }, @@ -168,7 +168,7 @@ describe('getCommands', () => { it('renders empty commands', () => { const commands = getCommands({ variantId: 'django', - environmentDetails: {}, + policyDetails: {}, }); expect(commands).not.toBe(''); expect(commands).toMatchInlineSnapshot(` @@ -203,7 +203,7 @@ describe('getCommands', () => { it('renders with secret token and url', () => { const commands = getCommands({ variantId: 'django', - environmentDetails: { + policyDetails: { apmServerUrl: 'localhost:8220', secretToken: 'foobar', }, @@ -243,7 +243,7 @@ describe('getCommands', () => { it('renders empty commands', () => { const commands = getCommands({ variantId: 'flask', - environmentDetails: {}, + policyDetails: {}, }); expect(commands).not.toBe(''); expect(commands).toMatchInlineSnapshot(` @@ -275,7 +275,7 @@ describe('getCommands', () => { it('renders with secret token and url', () => { const commands = getCommands({ variantId: 'flask', - environmentDetails: { + policyDetails: { apmServerUrl: 'localhost:8220', secretToken: 'foobar', }, @@ -312,7 +312,7 @@ describe('getCommands', () => { it('renders empty commands', () => { const commands = getCommands({ variantId: 'rails', - environmentDetails: {}, + policyDetails: {}, }); expect(commands).not.toBe(''); expect(commands).toMatchInlineSnapshot(` @@ -335,7 +335,7 @@ describe('getCommands', () => { it('renders with secret token and url', () => { const commands = getCommands({ variantId: 'rails', - environmentDetails: { + policyDetails: { apmServerUrl: 'localhost:8220', secretToken: 'foobar', }, @@ -363,7 +363,7 @@ describe('getCommands', () => { it('renders empty commands', () => { const commands = getCommands({ variantId: 'rack', - environmentDetails: {}, + policyDetails: {}, }); expect(commands).not.toBe(''); expect(commands).toMatchInlineSnapshot(` @@ -386,7 +386,7 @@ describe('getCommands', () => { it('renders with secret token and url', () => { const commands = getCommands({ variantId: 'rack', - environmentDetails: { + policyDetails: { apmServerUrl: 'localhost:8220', secretToken: 'foobar', }, @@ -414,7 +414,7 @@ describe('getCommands', () => { it('renders empty commands', () => { const commands = getCommands({ variantId: 'go', - environmentDetails: {}, + policyDetails: {}, }); expect(commands).not.toBe(''); expect(commands).toMatchInlineSnapshot(` @@ -438,7 +438,7 @@ describe('getCommands', () => { it('renders with secret token and url', () => { const commands = getCommands({ variantId: 'go', - environmentDetails: { + policyDetails: { apmServerUrl: 'localhost:8220', secretToken: 'foobar', }, @@ -467,7 +467,7 @@ describe('getCommands', () => { it('renders empty commands', () => { const commands = getCommands({ variantId: 'dotnet', - environmentDetails: {}, + policyDetails: {}, }); expect(commands).not.toBe(''); expect(commands).toMatchInlineSnapshot(` @@ -484,7 +484,7 @@ describe('getCommands', () => { it('renders with secret token and url', () => { const commands = getCommands({ variantId: 'dotnet', - environmentDetails: { + policyDetails: { apmServerUrl: 'localhost:8220', secretToken: 'foobar', }, @@ -506,7 +506,7 @@ describe('getCommands', () => { it('renders empty commands', () => { const commands = getCommands({ variantId: 'php', - environmentDetails: {}, + policyDetails: {}, }); expect(commands).not.toBe(''); expect(commands).toMatchInlineSnapshot(` @@ -519,7 +519,7 @@ describe('getCommands', () => { it('renders with secret token and url', () => { const commands = getCommands({ variantId: 'php', - environmentDetails: { + policyDetails: { apmServerUrl: 'localhost:8220', secretToken: 'foobar', }, diff --git a/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/commands/get_commands.ts b/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/commands/get_commands.ts index b76c5f37cb001..73a388c3f735e 100644 --- a/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/commands/get_commands.ts +++ b/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/commands/get_commands.ts @@ -32,10 +32,10 @@ const commandsMap: Record = { export function getCommands({ variantId, - environmentDetails, + policyDetails, }: { variantId: string; - environmentDetails: { + policyDetails: { apmServerUrl?: string; secretToken?: string; }; @@ -44,5 +44,5 @@ export function getCommands({ if (!commands) { return ''; } - return Mustache.render(commands, environmentDetails); + return Mustache.render(commands, policyDetails); } diff --git a/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/environment_configuration_selector.tsx b/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/environment_configuration_selector.tsx deleted file mode 100644 index 745e6cd0ec70b..0000000000000 --- a/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/environment_configuration_selector.tsx +++ /dev/null @@ -1,134 +0,0 @@ -/* - * 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 { - EuiButtonEmpty, - EuiFlexGroup, - EuiFlexItem, - EuiPopover, - EuiPopoverFooter, - EuiPopoverTitle, - EuiSelectable, - EuiSelectableOption, - EuiButton, -} from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; -import React, { useEffect, useState } from 'react'; -import styled from 'styled-components'; -import { px } from '../../../../style/variables'; - -export type EnvironmentConfigurationOption = EuiSelectableOption & { - apmServerUrl?: string; - secretToken?: string; - checked?: 'on'; -}; - -const StyledEuiButtomEmpty = styled(EuiButton)` - .euiButtonContent { - display: flex; - justify-content: space-between; - } -`; - -interface Props { - options: EnvironmentConfigurationOption[]; - selectedOption?: EnvironmentConfigurationOption; - onChange: (selectedOption?: EnvironmentConfigurationOption) => void; - fleetLink: { - label: string; - href: string; - }; -} - -function findCheckedOption(options: EnvironmentConfigurationOption[]) { - return options.find(({ checked }) => checked === 'on'); -} - -export function EnvironmentConfigurationSelector({ - options, - selectedOption, - onChange, - fleetLink, -}: Props) { - const [isPopoverOpen, setIsPopoverOpen] = useState(false); - const [availableOptions, setAvailableOptions] = useState< - EnvironmentConfigurationOption[] - >(options); - - useEffect(() => { - const checkedOption = findCheckedOption(availableOptions); - onChange(checkedOption); - }, [availableOptions, onChange]); - - function toggleIsPopoverOpen() { - setIsPopoverOpen((state) => !state); - } - - return ( - - {selectedOption?.label} - - } - isOpen={isPopoverOpen} - closePopover={toggleIsPopoverOpen} - > -
- { - const nextSelectedOption = findCheckedOption(newOptions); - // When there is no checked option don't update the options so we always have at least one option selected - if (nextSelectedOption) { - setAvailableOptions(newOptions); - setIsPopoverOpen(false); - } - }} - singleSelection - > - {(list, search) => { - return ( - <> - {search} - {list} - - - - - {fleetLink.label} - - - - - - ); - }} - -
- - ); -} diff --git a/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/get_policy_options.test.ts b/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/get_policy_options.test.ts new file mode 100644 index 0000000000000..df5583d85b3f2 --- /dev/null +++ b/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/get_policy_options.test.ts @@ -0,0 +1,342 @@ +/* + * 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 { getPolicyOptions } from './get_policy_options'; +import { APIReturnType } from '../../../../services/rest/createCallApmApi'; + +type APIResponseType = APIReturnType<'GET /api/apm/fleet/agents'>; + +const policyElasticAgentOnCloudAgent = { + id: 'policy-elastic-agent-on-cloud', + name: 'Elastic Cloud agent policy', + apmServerUrl: 'apm_cloud_url', + secretToken: 'apm_cloud_token', +}; + +const agents = [ + { + id: '1', + name: 'agent foo', + apmServerUrl: 'foo', + secretToken: 'foo', + }, + { + id: '2', + name: 'agent bar', + apmServerUrl: 'bar', + secretToken: 'bar', + }, +]; + +describe('getPolicyOptions', () => { + describe('running on cloud', () => { + describe('with APM on cloud', () => { + it('shows apm on cloud standalone option', () => { + const data: APIResponseType = { + agents: [], + cloudStandaloneSetup: { + apmServerUrl: 'cloud_url', + secretToken: 'cloud_token', + }, + }; + const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + isCloudEnabled: true, + data, + }); + expect(defaultSelectedOption).toEqual({ + key: 'cloud_standalone', + label: 'Default Standalone configuration', + apmServerUrl: 'cloud_url', + secretToken: 'cloud_token', + }); + expect(availableOptions).toEqual([ + { + key: 'cloud_standalone', + label: 'Default Standalone configuration', + apmServerUrl: 'cloud_url', + secretToken: 'cloud_token', + }, + ]); + }); + it('shows apm on cloud standalone option and fleet agents options', () => { + const data: APIResponseType = { + agents, + cloudStandaloneSetup: { + apmServerUrl: 'cloud_url', + secretToken: 'cloud_token', + }, + }; + const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + isCloudEnabled: true, + data, + }); + expect(defaultSelectedOption).toEqual({ + key: 'cloud_standalone', + label: 'Default Standalone configuration', + apmServerUrl: 'cloud_url', + secretToken: 'cloud_token', + }); + expect(availableOptions).toEqual([ + { + key: 'cloud_standalone', + label: 'Default Standalone configuration', + apmServerUrl: 'cloud_url', + secretToken: 'cloud_token', + }, + { + label: 'Fleet policies', + options: [ + { + key: '1', + label: 'agent foo', + apmServerUrl: 'foo', + secretToken: 'foo', + }, + { + key: '2', + label: 'agent bar', + apmServerUrl: 'bar', + secretToken: 'bar', + }, + ], + }, + ]); + }); + it('selects policy elastic agent on cloud when available', () => { + const data: APIResponseType = { + agents: [policyElasticAgentOnCloudAgent, ...agents], + cloudStandaloneSetup: { + apmServerUrl: 'cloud_url', + secretToken: 'cloud_token', + }, + }; + const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + isCloudEnabled: true, + data, + }); + expect(defaultSelectedOption).toEqual({ + key: 'policy-elastic-agent-on-cloud', + label: 'Elastic Cloud agent policy', + apmServerUrl: 'apm_cloud_url', + secretToken: 'apm_cloud_token', + }); + expect(availableOptions).toEqual([ + { + key: 'cloud_standalone', + label: 'Default Standalone configuration', + apmServerUrl: 'cloud_url', + secretToken: 'cloud_token', + }, + { + label: 'Fleet policies', + options: [ + { + key: 'policy-elastic-agent-on-cloud', + label: 'Elastic Cloud agent policy', + apmServerUrl: 'apm_cloud_url', + secretToken: 'apm_cloud_token', + }, + { + key: '1', + label: 'agent foo', + apmServerUrl: 'foo', + secretToken: 'foo', + }, + { + key: '2', + label: 'agent bar', + apmServerUrl: 'bar', + secretToken: 'bar', + }, + ], + }, + ]); + }); + }); + describe('with APM on prem', () => { + it('shows apm on prem standalone option', () => { + const data: APIResponseType = { + agents: [], + cloudStandaloneSetup: undefined, + }; + const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + isCloudEnabled: true, + data, + }); + expect(defaultSelectedOption).toEqual({ + key: 'onPrem_standalone', + label: 'Default Standalone configuration', + apmServerUrl: 'http://localhost:8200', + secretToken: '', + }); + expect(availableOptions).toEqual([ + { + key: 'onPrem_standalone', + label: 'Default Standalone configuration', + apmServerUrl: 'http://localhost:8200', + secretToken: '', + }, + ]); + }); + it('shows apm on prem standalone option and fleet agents options', () => { + const data: APIResponseType = { + agents, + cloudStandaloneSetup: undefined, + }; + const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + isCloudEnabled: true, + data, + }); + expect(defaultSelectedOption).toEqual({ + key: 'onPrem_standalone', + label: 'Default Standalone configuration', + apmServerUrl: 'http://localhost:8200', + secretToken: '', + }); + expect(availableOptions).toEqual([ + { + key: 'onPrem_standalone', + label: 'Default Standalone configuration', + apmServerUrl: 'http://localhost:8200', + secretToken: '', + }, + { + label: 'Fleet policies', + options: [ + { + key: '1', + label: 'agent foo', + apmServerUrl: 'foo', + secretToken: 'foo', + }, + { + key: '2', + label: 'agent bar', + apmServerUrl: 'bar', + secretToken: 'bar', + }, + ], + }, + ]); + }); + it('selects policy elastic agent on cloud when available', () => { + const data: APIResponseType = { + agents: [policyElasticAgentOnCloudAgent, ...agents], + cloudStandaloneSetup: undefined, + }; + const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + isCloudEnabled: true, + data, + }); + expect(defaultSelectedOption).toEqual({ + key: 'policy-elastic-agent-on-cloud', + label: 'Elastic Cloud agent policy', + apmServerUrl: 'apm_cloud_url', + secretToken: 'apm_cloud_token', + }); + expect(availableOptions).toEqual([ + { + key: 'onPrem_standalone', + label: 'Default Standalone configuration', + apmServerUrl: 'http://localhost:8200', + secretToken: '', + checked: undefined, + }, + { + label: 'Fleet policies', + options: [ + { + key: 'policy-elastic-agent-on-cloud', + label: 'Elastic Cloud agent policy', + apmServerUrl: 'apm_cloud_url', + secretToken: 'apm_cloud_token', + }, + { + key: '1', + label: 'agent foo', + apmServerUrl: 'foo', + secretToken: 'foo', + }, + { + key: '2', + label: 'agent bar', + apmServerUrl: 'bar', + secretToken: 'bar', + }, + ], + }, + ]); + }); + }); + }); + describe('Running on prem', () => { + it('shows apm on prem standalone option', () => { + const data: APIResponseType = { + agents: [], + cloudStandaloneSetup: undefined, + }; + const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + isCloudEnabled: false, + data, + }); + expect(defaultSelectedOption).toEqual({ + key: 'onPrem_standalone', + label: 'Default Standalone configuration', + apmServerUrl: 'http://localhost:8200', + secretToken: '', + }); + expect(availableOptions).toEqual([ + { + key: 'onPrem_standalone', + label: 'Default Standalone configuration', + apmServerUrl: 'http://localhost:8200', + secretToken: '', + }, + ]); + }); + it('shows apm on prem standalone option and fleet agents options', () => { + const data: APIResponseType = { + agents, + cloudStandaloneSetup: undefined, + }; + const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + isCloudEnabled: false, + data, + }); + expect(defaultSelectedOption).toEqual({ + key: 'onPrem_standalone', + label: 'Default Standalone configuration', + apmServerUrl: 'http://localhost:8200', + secretToken: '', + }); + expect(availableOptions).toEqual([ + { + key: 'onPrem_standalone', + label: 'Default Standalone configuration', + apmServerUrl: 'http://localhost:8200', + secretToken: '', + }, + { + label: 'Fleet policies', + options: [ + { + key: '1', + label: 'agent foo', + apmServerUrl: 'foo', + secretToken: 'foo', + }, + { + key: '2', + label: 'agent bar', + apmServerUrl: 'bar', + secretToken: 'bar', + }, + ], + }, + ]); + }); + }); +}); diff --git a/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/get_policy_options.ts b/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/get_policy_options.ts new file mode 100644 index 0000000000000..d56d7bda4070f --- /dev/null +++ b/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/get_policy_options.ts @@ -0,0 +1,76 @@ +/* + * 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 { APIResponseType } from './'; +import { PolicySelectorOption } from './policy_selector'; + +const POLICY_ELASTIC_AGENT_ON_CLOUD = 'policy-elastic-agent-on-cloud'; + +const DEFAULT_STANDALONE_CONFIG_LABEL = i18n.translate( + 'xpack.apm.tutorial.agent_config.defaultStandaloneConfig', + { defaultMessage: 'Default Standalone configuration' } +); + +const onPremStandaloneOption = { + key: 'onPrem_standalone', + label: DEFAULT_STANDALONE_CONFIG_LABEL, + apmServerUrl: 'http://localhost:8200', + secretToken: '', +}; + +export function getPolicyOptions({ + isCloudEnabled, + data, +}: { + isCloudEnabled: boolean; + data: APIResponseType; +}) { + const availableOptions: PolicySelectorOption[] = []; + let defaultSelectedOption: PolicySelectorOption; + // When running on cloud and apm.url is defined + if (isCloudEnabled && data.cloudStandaloneSetup?.apmServerUrl) { + // pushes APM cloud standalone + const cloudStandaloneOption = { + key: 'cloud_standalone', + label: DEFAULT_STANDALONE_CONFIG_LABEL, + apmServerUrl: data.cloudStandaloneSetup?.apmServerUrl, + secretToken: data.cloudStandaloneSetup?.secretToken, + }; + availableOptions.push(cloudStandaloneOption); + defaultSelectedOption = cloudStandaloneOption; + } else { + // pushes APM onprem standalone + availableOptions.push(onPremStandaloneOption); + defaultSelectedOption = onPremStandaloneOption; + } + + if (data.agents.length) { + // Adds fleet policies group label and remaining agents with APM integration + availableOptions.push({ + label: i18n.translate( + 'xpack.apm.tutorial.agent_config.fleetPoliciesLabel', + { defaultMessage: 'Fleet policies' } + ), + options: data.agents.map( + (agent): PolicySelectorOption => { + const agentOption = { + key: agent.id, + label: agent.name, + apmServerUrl: agent.apmServerUrl, + secretToken: agent.secretToken, + }; + if (agent.id === POLICY_ELASTIC_AGENT_ON_CLOUD) { + defaultSelectedOption = agentOption; + } + return agentOption; + } + ), + }); + } + + return { availableOptions, defaultSelectedOption }; +} diff --git a/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/index.test.tsx b/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/index.test.tsx index fdfcc13f9725b..1fec1c76430eb 100644 --- a/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/index.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/index.test.tsx @@ -4,320 +4,3 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import { APIReturnType } from '../../../../services/rest/createCallApmApi'; -import { getEnvironmentConfigurationOptions } from './'; - -type APIResponseType = APIReturnType<'GET /api/apm/fleet/agents'>; - -const policyElasticAgentOnCloud = { - id: '3', - name: 'policy-elastic-agent-on-cloud', - apmServerUrl: 'baz', - secretToken: 'baz', -}; - -const agents = [ - { - id: '1', - name: 'agent foo', - apmServerUrl: 'foo', - secretToken: 'foo', - }, - { - id: '2', - name: 'agent bar', - apmServerUrl: 'bar', - secretToken: 'bar', - }, -]; - -describe('Tutorial config agent', () => { - describe('getEnvironmentConfigurationOptions', () => { - describe('running on cloud', () => { - describe('with APM on cloud', () => { - it('shows apm on cloud standalone option', () => { - const data: APIResponseType = { - agents: [], - cloudStandaloneSetup: { - apmServerUrl: 'foo', - secretToken: 'bar', - }, - hasPolicyElasticOnCloud: false, - }; - const options = getEnvironmentConfigurationOptions({ - isCloudEnabled: true, - data, - }); - expect(options).toEqual([ - { - key: 'cloud_standalone', - label: 'Default Standalone configuration', - apmServerUrl: 'foo', - secretToken: 'bar', - checked: 'on', - }, - ]); - }); - it('shows apm on cloud standalone option and fleet agents options', () => { - const data: APIResponseType = { - agents, - cloudStandaloneSetup: { - apmServerUrl: 'foo', - secretToken: 'bar', - }, - hasPolicyElasticOnCloud: false, - }; - const options = getEnvironmentConfigurationOptions({ - isCloudEnabled: true, - data, - }); - expect(options).toEqual([ - { - key: 'cloud_standalone', - label: 'Default Standalone configuration', - apmServerUrl: 'foo', - secretToken: 'bar', - checked: 'on', - }, - { - isGroupLabel: true, - key: 'fleet_policies', - label: 'Fleet policies', - }, - { - key: '1', - label: 'agent foo', - apmServerUrl: 'foo', - secretToken: 'foo', - checked: undefined, - }, - { - key: '2', - label: 'agent bar', - apmServerUrl: 'bar', - secretToken: 'bar', - checked: undefined, - }, - ]); - }); - it('selects policy elastic agent on cloud when available', () => { - const data: APIResponseType = { - agents: [policyElasticAgentOnCloud, ...agents], - cloudStandaloneSetup: { - apmServerUrl: 'foo', - secretToken: 'bar', - }, - hasPolicyElasticOnCloud: true, - }; - const options = getEnvironmentConfigurationOptions({ - isCloudEnabled: true, - data, - }); - expect(options).toEqual([ - { - key: 'cloud_standalone', - label: 'Default Standalone configuration', - apmServerUrl: 'foo', - secretToken: 'bar', - checked: undefined, - }, - { - isGroupLabel: true, - key: 'fleet_policies', - label: 'Fleet policies', - }, - { - key: '3', - label: 'policy-elastic-agent-on-cloud', - apmServerUrl: 'baz', - secretToken: 'baz', - checked: 'on', - }, - { - key: '1', - label: 'agent foo', - apmServerUrl: 'foo', - secretToken: 'foo', - checked: undefined, - }, - { - key: '2', - label: 'agent bar', - apmServerUrl: 'bar', - secretToken: 'bar', - checked: undefined, - }, - ]); - }); - }); - describe('with APM on prem', () => { - it('shows apm on prem standalone option', () => { - const data: APIResponseType = { - agents: [], - cloudStandaloneSetup: undefined, - hasPolicyElasticOnCloud: false, - }; - const options = getEnvironmentConfigurationOptions({ - isCloudEnabled: true, - data, - }); - expect(options).toEqual([ - { - key: 'onPrem_standalone', - label: 'Default Standalone configuration', - apmServerUrl: 'http://localhost:8200', - secretToken: '', - checked: 'on', - }, - ]); - }); - it('shows apm on prem standalone option and fleet agents options', () => { - const data: APIResponseType = { - agents, - cloudStandaloneSetup: undefined, - hasPolicyElasticOnCloud: false, - }; - const options = getEnvironmentConfigurationOptions({ - isCloudEnabled: true, - data, - }); - expect(options).toEqual([ - { - key: 'onPrem_standalone', - label: 'Default Standalone configuration', - apmServerUrl: 'http://localhost:8200', - secretToken: '', - checked: 'on', - }, - { - isGroupLabel: true, - key: 'fleet_policies', - label: 'Fleet policies', - }, - { - key: '1', - label: 'agent foo', - apmServerUrl: 'foo', - secretToken: 'foo', - checked: undefined, - }, - { - key: '2', - label: 'agent bar', - apmServerUrl: 'bar', - secretToken: 'bar', - checked: undefined, - }, - ]); - }); - it('selects policy elastic agent on cloud when available', () => { - const data: APIResponseType = { - agents: [policyElasticAgentOnCloud, ...agents], - cloudStandaloneSetup: undefined, - hasPolicyElasticOnCloud: true, - }; - const options = getEnvironmentConfigurationOptions({ - isCloudEnabled: true, - data, - }); - expect(options).toEqual([ - { - key: 'onPrem_standalone', - label: 'Default Standalone configuration', - apmServerUrl: 'http://localhost:8200', - secretToken: '', - checked: undefined, - }, - { - isGroupLabel: true, - key: 'fleet_policies', - label: 'Fleet policies', - }, - { - key: '3', - label: 'policy-elastic-agent-on-cloud', - apmServerUrl: 'baz', - secretToken: 'baz', - checked: 'on', - }, - { - key: '1', - label: 'agent foo', - apmServerUrl: 'foo', - secretToken: 'foo', - checked: undefined, - }, - { - key: '2', - label: 'agent bar', - apmServerUrl: 'bar', - secretToken: 'bar', - checked: undefined, - }, - ]); - }); - }); - }); - describe('Running on prem', () => { - it('shows apm on prem standalone option', () => { - const data: APIResponseType = { - agents: [], - cloudStandaloneSetup: undefined, - hasPolicyElasticOnCloud: false, - }; - const options = getEnvironmentConfigurationOptions({ - isCloudEnabled: false, - data, - }); - expect(options).toEqual([ - { - key: 'onPrem_standalone', - label: 'Default Standalone configuration', - apmServerUrl: 'http://localhost:8200', - secretToken: '', - checked: 'on', - }, - ]); - }); - it('shows apm on prem standalone option and fleet agents options', () => { - const data: APIResponseType = { - agents, - cloudStandaloneSetup: undefined, - hasPolicyElasticOnCloud: false, - }; - const options = getEnvironmentConfigurationOptions({ - isCloudEnabled: false, - data, - }); - expect(options).toEqual([ - { - key: 'onPrem_standalone', - label: 'Default Standalone configuration', - apmServerUrl: 'http://localhost:8200', - secretToken: '', - checked: 'on', - }, - { - isGroupLabel: true, - key: 'fleet_policies', - label: 'Fleet policies', - }, - { - key: '1', - label: 'agent foo', - apmServerUrl: 'foo', - secretToken: 'foo', - checked: undefined, - }, - { - key: '2', - label: 'agent bar', - apmServerUrl: 'bar', - secretToken: 'bar', - checked: undefined, - }, - ]); - }); - }); - }); -}); diff --git a/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/index.tsx b/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/index.tsx index 34719e3f0a712..e5badb81928c2 100644 --- a/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/index.tsx @@ -17,20 +17,11 @@ import React, { useEffect, useMemo, useState } from 'react'; import styled from 'styled-components'; import { APIReturnType } from '../../../../services/rest/createCallApmApi'; import { CopyCommands } from '../copy_commands'; -import { - EnvironmentConfigurationOption, - EnvironmentConfigurationSelector, -} from './environment_configuration_selector'; +import { PolicySelectorOption, PolicySelector } from './policy_selector'; import { getCommands } from './commands/get_commands'; +import { getPolicyOptions } from './get_policy_options'; -const POLICY_ELASTIC_AGENT_ON_CLOUD = 'policy-elastic-agent-on-cloud'; - -interface Props { - variantId: string; - http: HttpStart; - basePath: string; - isCloudEnabled: boolean; -} +export type APIResponseType = APIReturnType<'GET /api/apm/fleet/agents'>; const CentralizedContainer = styled.div` display: flex; @@ -38,13 +29,6 @@ const CentralizedContainer = styled.div` align-items: center; `; -type APIResponseType = APIReturnType<'GET /api/apm/fleet/agents'>; - -const DEFAULT_STANDALONE_CONFIG_LABEL = i18n.translate( - 'xpack.apm.tutorial.agent_config.defaultStandaloneConfig', - { defaultMessage: 'Default Standalone configuration' } -); - const MANAGE_FLEET_POLICIES_LABEL = i18n.translate( 'xpack.apm.tutorial.agent_config.manageFleetPolicies', { defaultMessage: 'Manage fleet policies' } @@ -55,65 +39,11 @@ const GET_STARTED_WITH_FLEET_LABEL = i18n.translate( { defaultMessage: 'Get started with fleet' } ); -export function getEnvironmentConfigurationOptions({ - isCloudEnabled, - data, -}: { +interface Props { + variantId: string; + http: HttpStart; + basePath: string; isCloudEnabled: boolean; - data: APIResponseType; -}) { - const newOptions: EnvironmentConfigurationOption[] = []; - // When running on cloud and apm.url is defined - if (isCloudEnabled && data.cloudStandaloneSetup?.apmServerUrl) { - // pushes APM cloud standalone - newOptions.push({ - key: 'cloud_standalone', - label: DEFAULT_STANDALONE_CONFIG_LABEL, - apmServerUrl: data.cloudStandaloneSetup?.apmServerUrl, - secretToken: data.cloudStandaloneSetup?.secretToken, - checked: data.hasPolicyElasticOnCloud ? undefined : 'on', - }); - } else { - // pushes APM onprem standalone - newOptions.push({ - key: 'onPrem_standalone', - label: DEFAULT_STANDALONE_CONFIG_LABEL, - apmServerUrl: 'http://localhost:8200', - secretToken: '', - checked: data.hasPolicyElasticOnCloud ? undefined : 'on', - }); - } - - if (data.agents.length) { - // Adds fleet policies group label - newOptions.push({ - key: 'fleet_policies', - label: i18n.translate( - 'xpack.apm.tutorial.agent_config.fleetPoliciesLabel', - { defaultMessage: 'Fleet policies' } - ), - isGroupLabel: true, - }); - // remaining agents with APM integration - newOptions.push( - ...data.agents.map( - ({ - id, - name, - apmServerUrl, - secretToken, - }): EnvironmentConfigurationOption => ({ - key: id, - label: name, - apmServerUrl, - secretToken, - checked: name === POLICY_ELASTIC_AGENT_ON_CLOUD ? 'on' : undefined, - }) - ) - ); - } - - return newOptions; } function TutorialAgentSecretTokenSelector({ @@ -124,14 +54,10 @@ function TutorialAgentSecretTokenSelector({ }: Props) { const [data, setData] = useState({ agents: [], - hasPolicyElasticOnCloud: false, cloudStandaloneSetup: undefined, }); const [isLoading, setIsLoading] = useState(true); - const [ - selectedOption, - setSelectedOption, - ] = useState(); + const [selectedOption, setSelectedOption] = useState(); useEffect(() => { async function fetchData() { @@ -142,14 +68,19 @@ function TutorialAgentSecretTokenSelector({ } catch (e) { console.error('Error while fetching fleet agents.', e); } - setIsLoading(false); } fetchData(); }, [http]); // Depending the environment running (onPrem/Cloud) different values must be available and automatically selected const options = useMemo(() => { - return getEnvironmentConfigurationOptions({ isCloudEnabled, data }); + const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + isCloudEnabled, + data, + }); + setSelectedOption(defaultSelectedOption); + setIsLoading(false); + return availableOptions; }, [data, isCloudEnabled]); if (isLoading) { @@ -162,7 +93,7 @@ function TutorialAgentSecretTokenSelector({ const commands = getCommands({ variantId, - environmentDetails: { + policyDetails: { apmServerUrl: selectedOption?.apmServerUrl, secretToken: selectedOption?.secretToken, }, @@ -183,7 +114,7 @@ function TutorialAgentSecretTokenSelector({ <> - diff --git a/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/policy_selector.tsx b/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/policy_selector.tsx new file mode 100644 index 0000000000000..54b84ad6926c4 --- /dev/null +++ b/x-pack/plugins/apm/public/components/shared/tutorial/config_agent/policy_selector.tsx @@ -0,0 +1,62 @@ +/* + * 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 { + EuiComboBox, + EuiComboBoxOptionOption, + EuiFormRow, + EuiLink, + EuiText, +} from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import React from 'react'; + +export type PolicySelectorOption = EuiComboBoxOptionOption & { + apmServerUrl?: string; + secretToken?: string; +}; + +interface Props { + options: PolicySelectorOption[]; + selectedOption?: PolicySelectorOption; + onChange: (selectedOption?: PolicySelectorOption) => void; + fleetLink: { + label: string; + href: string; + }; +} + +export function PolicySelector({ + options, + selectedOption, + onChange, + fleetLink, +}: Props) { + return ( + + {fleetLink.label} + + } + > + { + onChange(selectedOptions[0]); + }} + /> + + ); +} diff --git a/x-pack/plugins/apm/server/routes/fleet.ts b/x-pack/plugins/apm/server/routes/fleet.ts index 3e16228ef1b99..3b3cf61c383e3 100644 --- a/x-pack/plugins/apm/server/routes/fleet.ts +++ b/x-pack/plugins/apm/server/routes/fleet.ts @@ -54,12 +54,7 @@ const fleetAgentsRoute = createApmServerRoute({ fleetPluginStart, }); - const hasPolicyElasticOnCloud = agents.some( - ({ name }) => name === POLICY_ELASTIC_AGENT_ON_CLOUD - ); - return { - hasPolicyElasticOnCloud, cloudStandaloneSetup, agents: agents.map((agent) => { const packagePolicy = policiesGroupedById[agent.id];