From cb93335d96b21b82c1b4aa0ec516dcbcbb954063 Mon Sep 17 00:00:00 2001 From: cauemarcondes Date: Thu, 24 Jun 2021 13:30:59 -0400 Subject: [PATCH] refactoring --- .../components/tutorial/instruction.js | 10 - .../config_agent/config_agent.stories.tsx | 54 +-- .../config_agent/get_policy_options.test.ts | 332 +++++++++--------- .../config_agent/get_policy_options.ts | 96 ++--- .../tutorial/config_agent/index.test.tsx | 23 +- .../public/tutorial/config_agent/index.tsx | 18 +- .../tutorial/config_agent/policy_selector.tsx | 46 ++- .../tutorial_fleet_instructions.stories.tsx | 12 +- x-pack/plugins/apm/server/routes/fleet.ts | 4 +- 9 files changed, 298 insertions(+), 297 deletions(-) diff --git a/src/plugins/home/public/application/components/tutorial/instruction.js b/src/plugins/home/public/application/components/tutorial/instruction.js index b0b87ef438c96..e4b3b3f321bf9 100644 --- a/src/plugins/home/public/application/components/tutorial/instruction.js +++ b/src/plugins/home/public/application/components/tutorial/instruction.js @@ -115,16 +115,6 @@ export function Instruction({ {post} - {LazyCustomComponent && ( - }> - - - )} - ); diff --git a/x-pack/plugins/apm/public/tutorial/config_agent/config_agent.stories.tsx b/x-pack/plugins/apm/public/tutorial/config_agent/config_agent.stories.tsx index 69bc425374dc4..73162eb3f18fd 100644 --- a/x-pack/plugins/apm/public/tutorial/config_agent/config_agent.stories.tsx +++ b/x-pack/plugins/apm/public/tutorial/config_agent/config_agent.stories.tsx @@ -16,20 +16,20 @@ import { APIReturnType } from '../..//services/rest/createCallApmApi'; export type APIResponseType = APIReturnType<'GET /api/apm/fleet/agents'>; interface Args { - variantId: string; - environment: 'cloud' | 'onprem'; - addAgents: boolean; - addPolicyOnCloudAgent: boolean; + apmAgent: string; + onPrem: boolean; + hasFleetPoliciesWithApmIntegration: boolean; + hasCloudPolicyWithApmIntegration: boolean; } -const policyElasticAgentOnCloudAgent: APIResponseType['agents'][0] = { +const policyElasticAgentOnCloudAgent: APIResponseType['fleetAgents'][0] = { id: 'policy-elastic-agent-on-cloud', name: 'Elastic Cloud agent policy', apmServerUrl: 'apm_cloud_url', secretToken: 'apm_cloud_token', }; -const _agents: APIResponseType['agents'] = [ +const fleetAgents: APIResponseType['fleetAgents'] = [ { id: '1', name: 'agent foo', @@ -45,16 +45,18 @@ const _agents: APIResponseType['agents'] = [ ]; function Wrapper({ - addAgents, - variantId, - environment, - addPolicyOnCloudAgent, + hasFleetPoliciesWithApmIntegration, + apmAgent, + onPrem, + hasCloudPolicyWithApmIntegration, }: Args) { const http = ({ get: () => ({ - agents: [ - ...(addAgents ? _agents : []), - ...(addPolicyOnCloudAgent ? [policyElasticAgentOnCloudAgent] : []), + fleetAgents: [ + ...(hasFleetPoliciesWithApmIntegration ? fleetAgents : []), + ...(hasCloudPolicyWithApmIntegration + ? [policyElasticAgentOnCloudAgent] + : []), ], cloudStandaloneSetup: { apmServerUrl: 'cloud_url', @@ -66,8 +68,8 @@ function Wrapper({ ); } @@ -76,17 +78,17 @@ export const Integration: Story = (_args) => { }; Integration.args = { - variantId: 'java', - environment: 'onprem', - addAgents: false, - addPolicyOnCloudAgent: false, + apmAgent: 'java', + onPrem: true, + hasFleetPoliciesWithApmIntegration: false, + hasCloudPolicyWithApmIntegration: false, }; export default { title: 'app/Tutorial/AgentConfig', component: TutorialConfigAgent, argTypes: { - variantId: { + apmAgent: { control: { type: 'select', options: [ @@ -104,14 +106,14 @@ export default { ], }, }, - environment: { - control: { type: 'select', options: ['onprem', 'cloud'] }, + onPrem: { + control: { type: 'boolean', options: [true, false] }, }, - addAgents: { - control: { type: 'inline-radio', options: [true, false] }, + hasFleetPoliciesWithApmIntegration: { + control: { type: 'boolean', options: [true, false] }, }, - addPolicyOnCloudAgent: { - control: { type: 'inline-radio', options: [true, false] }, + hasCloudPolicyWithApmIntegration: { + control: { type: 'boolean', options: [true, false] }, }, }, }; diff --git a/x-pack/plugins/apm/public/tutorial/config_agent/get_policy_options.test.ts b/x-pack/plugins/apm/public/tutorial/config_agent/get_policy_options.test.ts index 8a0a970268656..c22c9cbfaf3e3 100644 --- a/x-pack/plugins/apm/public/tutorial/config_agent/get_policy_options.test.ts +++ b/x-pack/plugins/apm/public/tutorial/config_agent/get_policy_options.test.ts @@ -16,7 +16,7 @@ const policyElasticAgentOnCloudAgent = { secretToken: 'apm_cloud_token', }; -const agents = [ +const fleetAgents = [ { id: '1', name: 'agent foo', @@ -36,122 +36,121 @@ describe('getPolicyOptions', () => { describe('with APM on cloud', () => { it('shows apm on cloud standalone option', () => { const data: APIResponseType = { - agents: [], + fleetAgents: [], cloudStandaloneSetup: { apmServerUrl: 'cloud_url', secretToken: 'cloud_token', }, }; - const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + const options = getPolicyOptions({ isCloudEnabled: true, data, }); - expect(defaultSelectedOption).toEqual({ - key: 'cloud_standalone', - label: 'Default Standalone configuration', - apmServerUrl: 'cloud_url', - secretToken: 'cloud_token', - }); - expect(availableOptions).toEqual([ + expect(options).toEqual([ { - key: 'cloud_standalone', + key: 'cloud', + type: 'standalone', label: 'Default Standalone configuration', apmServerUrl: 'cloud_url', secretToken: 'cloud_token', + isVisible: true, + isSelected: true, }, ]); }); it('shows apm on cloud standalone option and fleet agents options', () => { const data: APIResponseType = { - agents, + fleetAgents, cloudStandaloneSetup: { apmServerUrl: 'cloud_url', secretToken: 'cloud_token', }, }; - const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + const options = getPolicyOptions({ isCloudEnabled: true, data, }); - expect(defaultSelectedOption).toEqual({ - key: 'cloud_standalone', - label: 'Default Standalone configuration', - apmServerUrl: 'cloud_url', - secretToken: 'cloud_token', - }); - expect(availableOptions).toEqual([ + + expect(options).toEqual([ { - key: 'cloud_standalone', + key: 'cloud', + type: 'standalone', label: 'Default Standalone configuration', apmServerUrl: 'cloud_url', secretToken: 'cloud_token', + isVisible: true, + isSelected: true, + }, + + { + key: '1', + type: 'fleetAgents', + label: 'agent foo', + apmServerUrl: 'foo', + secretToken: 'foo', + isVisible: true, + isSelected: false, }, { - label: 'Fleet policies', - options: [ - { - key: '1', - label: 'agent foo', - apmServerUrl: 'foo', - secretToken: 'foo', - }, - { - key: '2', - label: 'agent bar', - apmServerUrl: 'bar', - secretToken: 'bar', - }, - ], + key: '2', + type: 'fleetAgents', + label: 'agent bar', + apmServerUrl: 'bar', + secretToken: 'bar', + isVisible: true, + isSelected: false, }, ]); }); it('selects policy elastic agent on cloud when available', () => { const data: APIResponseType = { - agents: [policyElasticAgentOnCloudAgent, ...agents], + fleetAgents: [policyElasticAgentOnCloudAgent, ...fleetAgents], cloudStandaloneSetup: { apmServerUrl: 'cloud_url', secretToken: 'cloud_token', }, }; - const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + const options = 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([ + + expect(options).toEqual([ { - key: 'cloud_standalone', + key: 'cloud', + type: 'standalone', label: 'Default Standalone configuration', apmServerUrl: 'cloud_url', secretToken: 'cloud_token', + isVisible: true, + isSelected: false, }, { - 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', - }, - ], + key: 'policy-elastic-agent-on-cloud', + type: 'fleetAgents', + label: 'Elastic Cloud agent policy', + apmServerUrl: 'apm_cloud_url', + secretToken: 'apm_cloud_token', + isVisible: true, + isSelected: true, + }, + { + key: '1', + type: 'fleetAgents', + label: 'agent foo', + apmServerUrl: 'foo', + secretToken: 'foo', + isVisible: true, + isSelected: false, + }, + { + key: '2', + type: 'fleetAgents', + label: 'agent bar', + apmServerUrl: 'bar', + secretToken: 'bar', + isVisible: true, + isSelected: false, }, ]); }); @@ -159,114 +158,112 @@ describe('getPolicyOptions', () => { describe('with APM on prem', () => { it('shows apm on prem standalone option', () => { const data: APIResponseType = { - agents: [], + fleetAgents: [], cloudStandaloneSetup: undefined, }; - const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + const options = getPolicyOptions({ isCloudEnabled: true, data, }); - expect(defaultSelectedOption).toEqual({ - key: 'onPrem_standalone', - label: 'Default Standalone configuration', - apmServerUrl: 'http://localhost:8200', - secretToken: '', - }); - expect(availableOptions).toEqual([ + + expect(options).toEqual([ { - key: 'onPrem_standalone', + key: 'onPrem', + type: 'standalone', label: 'Default Standalone configuration', apmServerUrl: 'http://localhost:8200', secretToken: '', + isVisible: true, + isSelected: true, }, ]); }); it('shows apm on prem standalone option and fleet agents options', () => { const data: APIResponseType = { - agents, + fleetAgents, cloudStandaloneSetup: undefined, }; - const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + const options = getPolicyOptions({ isCloudEnabled: true, data, }); - expect(defaultSelectedOption).toEqual({ - key: 'onPrem_standalone', - label: 'Default Standalone configuration', - apmServerUrl: 'http://localhost:8200', - secretToken: '', - }); - expect(availableOptions).toEqual([ + expect(options).toEqual([ { - key: 'onPrem_standalone', + key: 'onPrem', + type: 'standalone', label: 'Default Standalone configuration', apmServerUrl: 'http://localhost:8200', secretToken: '', + isVisible: true, + isSelected: true, + }, + + { + key: '1', + type: 'fleetAgents', + label: 'agent foo', + apmServerUrl: 'foo', + secretToken: 'foo', + isVisible: true, + isSelected: false, }, { - label: 'Fleet policies', - options: [ - { - key: '1', - label: 'agent foo', - apmServerUrl: 'foo', - secretToken: 'foo', - }, - { - key: '2', - label: 'agent bar', - apmServerUrl: 'bar', - secretToken: 'bar', - }, - ], + key: '2', + type: 'fleetAgents', + label: 'agent bar', + apmServerUrl: 'bar', + secretToken: 'bar', + isVisible: true, + isSelected: false, }, ]); }); it('selects policy elastic agent on cloud when available', () => { const data: APIResponseType = { - agents: [policyElasticAgentOnCloudAgent, ...agents], + fleetAgents: [policyElasticAgentOnCloudAgent, ...fleetAgents], cloudStandaloneSetup: undefined, }; - const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + const options = 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([ + + expect(options).toEqual([ { - key: 'onPrem_standalone', + key: 'onPrem', + type: 'standalone', label: 'Default Standalone configuration', apmServerUrl: 'http://localhost:8200', secretToken: '', - checked: undefined, + isVisible: true, + isSelected: false, }, { - 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', - }, - ], + key: 'policy-elastic-agent-on-cloud', + type: 'fleetAgents', + label: 'Elastic Cloud agent policy', + apmServerUrl: 'apm_cloud_url', + secretToken: 'apm_cloud_token', + isVisible: true, + isSelected: true, + }, + { + key: '1', + type: 'fleetAgents', + label: 'agent foo', + apmServerUrl: 'foo', + secretToken: 'foo', + isVisible: true, + isSelected: false, + }, + { + key: '2', + type: 'fleetAgents', + label: 'agent bar', + apmServerUrl: 'bar', + secretToken: 'bar', + isVisible: true, + isSelected: false, }, ]); }); @@ -275,66 +272,63 @@ describe('getPolicyOptions', () => { describe('Running on prem', () => { it('shows apm on prem standalone option', () => { const data: APIResponseType = { - agents: [], + fleetAgents: [], cloudStandaloneSetup: undefined, }; - const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + const options = getPolicyOptions({ isCloudEnabled: false, data, }); - expect(defaultSelectedOption).toEqual({ - key: 'onPrem_standalone', - label: 'Default Standalone configuration', - apmServerUrl: 'http://localhost:8200', - secretToken: '', - }); - expect(availableOptions).toEqual([ + + expect(options).toEqual([ { - key: 'onPrem_standalone', + key: 'onPrem', + type: 'standalone', label: 'Default Standalone configuration', apmServerUrl: 'http://localhost:8200', secretToken: '', + isVisible: true, + isSelected: true, }, ]); }); it('shows apm on prem standalone option and fleet agents options', () => { const data: APIResponseType = { - agents, + fleetAgents, cloudStandaloneSetup: undefined, }; - const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + const options = getPolicyOptions({ isCloudEnabled: false, data, }); - expect(defaultSelectedOption).toEqual({ - key: 'onPrem_standalone', - label: 'Default Standalone configuration', - apmServerUrl: 'http://localhost:8200', - secretToken: '', - }); - expect(availableOptions).toEqual([ + + expect(options).toEqual([ { - key: 'onPrem_standalone', + key: 'onPrem', + type: 'standalone', label: 'Default Standalone configuration', apmServerUrl: 'http://localhost:8200', secretToken: '', + isVisible: true, + isSelected: true, + }, + { + key: '1', + type: 'fleetAgents', + label: 'agent foo', + apmServerUrl: 'foo', + secretToken: 'foo', + isVisible: true, + isSelected: false, }, { - label: 'Fleet policies', - options: [ - { - key: '1', - label: 'agent foo', - apmServerUrl: 'foo', - secretToken: 'foo', - }, - { - key: '2', - label: 'agent bar', - apmServerUrl: 'bar', - secretToken: 'bar', - }, - ], + key: '2', + type: 'fleetAgents', + label: 'agent bar', + apmServerUrl: 'bar', + secretToken: 'bar', + isVisible: true, + isSelected: false, }, ]); }); diff --git a/x-pack/plugins/apm/public/tutorial/config_agent/get_policy_options.ts b/x-pack/plugins/apm/public/tutorial/config_agent/get_policy_options.ts index d56d7bda4070f..9a8008d69efec 100644 --- a/x-pack/plugins/apm/public/tutorial/config_agent/get_policy_options.ts +++ b/x-pack/plugins/apm/public/tutorial/config_agent/get_policy_options.ts @@ -6,7 +6,6 @@ */ import { i18n } from '@kbn/i18n'; import { APIResponseType } from './'; -import { PolicySelectorOption } from './policy_selector'; const POLICY_ELASTIC_AGENT_ON_CLOUD = 'policy-elastic-agent-on-cloud'; @@ -15,12 +14,7 @@ const DEFAULT_STANDALONE_CONFIG_LABEL = i18n.translate( { defaultMessage: 'Default Standalone configuration' } ); -const onPremStandaloneOption = { - key: 'onPrem_standalone', - label: DEFAULT_STANDALONE_CONFIG_LABEL, - apmServerUrl: 'http://localhost:8200', - secretToken: '', -}; +export type PolicyOption = ReturnType[0]; export function getPolicyOptions({ isCloudEnabled, @@ -29,48 +23,54 @@ export function getPolicyOptions({ 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, + const isCloudVisible = !!( + isCloudEnabled && data.cloudStandaloneSetup?.apmServerUrl + ); + + const fleetAgentsOptions = data.fleetAgents.map((agent) => { + return { + key: agent.id, + type: 'fleetAgents', + label: agent.name, + apmServerUrl: agent.apmServerUrl, + secretToken: agent.secretToken, + isVisible: true, + isSelected: agent.id === POLICY_ELASTIC_AGENT_ON_CLOUD, }; - 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; - } - ), - }); - } + const hasFleetAgentsSelected = fleetAgentsOptions.some( + ({ isSelected }) => isSelected + ); - return { availableOptions, defaultSelectedOption }; + return [ + { + key: 'cloud', + type: 'standalone', + label: DEFAULT_STANDALONE_CONFIG_LABEL, + apmServerUrl: data.cloudStandaloneSetup?.apmServerUrl, + secretToken: data.cloudStandaloneSetup?.secretToken, + isVisible: isCloudVisible, + isSelected: !hasFleetAgentsSelected, + }, + { + key: 'onPrem', + type: 'standalone', + label: DEFAULT_STANDALONE_CONFIG_LABEL, + apmServerUrl: 'http://localhost:8200', + secretToken: '', + isVisible: !isCloudVisible, + isSelected: !hasFleetAgentsSelected, + }, + ...fleetAgentsOptions, + // { + // key: 'fleet_policies', + // label: i18n.translate( + // 'xpack.apm.tutorial.agent_config.fleetPoliciesLabel', + // { defaultMessage: 'Fleet policies' } + // ), + // isVisible: !!data.fleetAgents.length, + // options: fleetAgentsOptions, + // }, + ].filter(({ isVisible }) => isVisible); } diff --git a/x-pack/plugins/apm/public/tutorial/config_agent/index.test.tsx b/x-pack/plugins/apm/public/tutorial/config_agent/index.test.tsx index 0c0f01ad80e4b..8f8afe58506a6 100644 --- a/x-pack/plugins/apm/public/tutorial/config_agent/index.test.tsx +++ b/x-pack/plugins/apm/public/tutorial/config_agent/index.test.tsx @@ -16,7 +16,7 @@ const policyElasticAgentOnCloudAgent = { secretToken: 'apm_cloud_token', }; -const agents = [ +const fleetAgents = [ { id: '1', name: 'agent foo', @@ -32,13 +32,6 @@ const agents = [ ]; describe('TutorialConfigAgent', () => { - beforeAll(() => { - jest.spyOn(console, 'error').mockImplementation(() => null); - }); - - afterAll(() => { - jest.restoreAllMocks(); - }); it('renders loading component while API is being called', () => { const component = render( { ({ get: jest.fn().mockReturnValue({ cloudStandaloneSetup: undefined, - agents, + fleetAgents, }), } as unknown) as HttpStart } @@ -108,7 +101,7 @@ describe('TutorialConfigAgent', () => { ({ get: jest.fn().mockReturnValue({ cloudStandaloneSetup: undefined, - agents, + fleetAgents, }), } as unknown) as HttpStart } @@ -120,7 +113,7 @@ describe('TutorialConfigAgent', () => { await screen.findByText('Default Standalone configuration') ).toBeInTheDocument(); expect( - component.getByTestId('policySelector_onPrem_standalone') + component.getByTestId('policySelector_onPrem') ).toBeInTheDocument(); const commands = component.getByTestId('commands').innerHTML; expect(commands).not.toEqual(''); @@ -147,7 +140,7 @@ describe('TutorialConfigAgent', () => { apmServerUrl: 'cloud_url', secretToken: 'cloud_token', }, - agents, + fleetAgents, }), } as unknown) as HttpStart } @@ -158,9 +151,7 @@ describe('TutorialConfigAgent', () => { expect( await screen.findByText('Default Standalone configuration') ).toBeInTheDocument(); - expect( - component.getByTestId('policySelector_cloud_standalone') - ).toBeInTheDocument(); + expect(component.getByTestId('policySelector_cloud')).toBeInTheDocument(); const commands = component.getByTestId('commands').innerHTML; expect(commands).not.toEqual(''); expect(commands).toMatchInlineSnapshot(` @@ -184,7 +175,7 @@ describe('TutorialConfigAgent', () => { apmServerUrl: 'cloud_url', secretToken: 'cloud_token', }, - agents: [...agents, policyElasticAgentOnCloudAgent], + fleetAgents: [...fleetAgents, policyElasticAgentOnCloudAgent], }), } as unknown) as HttpStart } diff --git a/x-pack/plugins/apm/public/tutorial/config_agent/index.tsx b/x-pack/plugins/apm/public/tutorial/config_agent/index.tsx index 48220f59418a1..755c3eca55868 100644 --- a/x-pack/plugins/apm/public/tutorial/config_agent/index.tsx +++ b/x-pack/plugins/apm/public/tutorial/config_agent/index.tsx @@ -16,10 +16,10 @@ import { HttpStart } from 'kibana/public'; import React, { useEffect, useMemo, useState } from 'react'; import styled from 'styled-components'; import { APIReturnType } from '../..//services/rest/createCallApmApi'; -import { CopyCommands } from './copy_commands'; -import { PolicySelectorOption, PolicySelector } from './policy_selector'; import { getCommands } from './commands/get_commands'; -import { getPolicyOptions } from './get_policy_options'; +import { CopyCommands } from './copy_commands'; +import { getPolicyOptions, PolicyOption } from './get_policy_options'; +import { PolicySelector } from './policy_selector'; export type APIResponseType = APIReturnType<'GET /api/apm/fleet/agents'>; @@ -53,12 +53,11 @@ function TutorialConfigAgent({ isCloudEnabled, }: Props) { const [data, setData] = useState({ - agents: [], + fleetAgents: [], cloudStandaloneSetup: undefined, }); const [isLoading, setIsLoading] = useState(true); - const [selectedOption, setSelectedOption] = useState(); - console.log('### caue ~ selectedOption', selectedOption); + const [selectedOption, setSelectedOption] = useState(); useEffect(() => { async function fetchData() { @@ -77,10 +76,13 @@ function TutorialConfigAgent({ // Depending the environment running (onPrem/Cloud) different values must be available and automatically selected const options = useMemo(() => { - const { availableOptions, defaultSelectedOption } = getPolicyOptions({ + const availableOptions = getPolicyOptions({ isCloudEnabled, data, }); + const defaultSelectedOption = availableOptions.find( + ({ isSelected }) => isSelected + ); setSelectedOption(defaultSelectedOption); setIsLoading(false); return availableOptions; @@ -102,7 +104,7 @@ function TutorialConfigAgent({ }, }); - const hasFleetAgents = !!data.agents.length; + const hasFleetAgents = !!data.fleetAgents.length; const fleetLink = hasFleetAgents ? { label: MANAGE_FLEET_POLICIES_LABEL, diff --git a/x-pack/plugins/apm/public/tutorial/config_agent/policy_selector.tsx b/x-pack/plugins/apm/public/tutorial/config_agent/policy_selector.tsx index 4c76c822ab3ac..ccebf3ec839be 100644 --- a/x-pack/plugins/apm/public/tutorial/config_agent/policy_selector.tsx +++ b/x-pack/plugins/apm/public/tutorial/config_agent/policy_selector.tsx @@ -13,17 +13,14 @@ import { EuiText, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { groupBy } from 'lodash'; import React from 'react'; - -export type PolicySelectorOption = EuiComboBoxOptionOption & { - apmServerUrl?: string; - secretToken?: string; -}; +import { PolicyOption } from './get_policy_options'; interface Props { - options: PolicySelectorOption[]; - selectedOption?: PolicySelectorOption; - onChange: (selectedOption?: PolicySelectorOption) => void; + options: PolicyOption[]; + selectedOption?: PolicyOption; + onChange: (selectedOption?: PolicyOption) => void; fleetLink: { label: string; href: string; @@ -36,6 +33,25 @@ export function PolicySelector({ onChange, fleetLink, }: Props) { + const { fleetAgents, standalone } = groupBy(options, 'type'); + + const standaloneComboboxOptions: EuiComboBoxOptionOption[] = standalone.map( + ({ key, label }) => ({ key, label }) + ); + + const fleetAgentsComboboxOptions = fleetAgents?.length + ? [ + { + key: 'fleet_policies', + label: i18n.translate( + 'xpack.apm.tutorial.agent_config.fleetPoliciesLabel', + { defaultMessage: 'Fleet policies' } + ), + options: fleetAgents.map(({ key, label }) => ({ key, label })), + }, + ] + : []; + return ( { - console.log('### caue ~ selectedOptions', selectedOptions); - onChange(selectedOptions[0]); + const newSelectedOption = options.find( + ({ key }) => key === selectedOptions[0].key + ); + onChange(newSelectedOption); }} /> diff --git a/x-pack/plugins/apm/public/tutorial/tutorial_fleet_instructions/tutorial_fleet_instructions.stories.tsx b/x-pack/plugins/apm/public/tutorial/tutorial_fleet_instructions/tutorial_fleet_instructions.stories.tsx index 80e742295fade..c0494bfe8660d 100644 --- a/x-pack/plugins/apm/public/tutorial/tutorial_fleet_instructions/tutorial_fleet_instructions.stories.tsx +++ b/x-pack/plugins/apm/public/tutorial/tutorial_fleet_instructions/tutorial_fleet_instructions.stories.tsx @@ -13,12 +13,12 @@ import { HttpStart } from 'kibana/public'; import TutorialFleetInstructions from '.'; interface Args { - hasFleetPolicyWithApmIntegration: boolean; + hasFleetPoliciesWithApmIntegration: boolean; } -function Wrapper({ hasFleetPolicyWithApmIntegration }: Args) { +function Wrapper({ hasFleetPoliciesWithApmIntegration }: Args) { const http = ({ - get: () => ({ hasData: hasFleetPolicyWithApmIntegration }), + get: () => ({ hasData: hasFleetPoliciesWithApmIntegration }), } as unknown) as HttpStart; return ( = (_args) => { }; Instructions.args = { - hasFleetPolicyWithApmIntegration: true, + hasFleetPoliciesWithApmIntegration: true, }; diff --git a/x-pack/plugins/apm/server/routes/fleet.ts b/x-pack/plugins/apm/server/routes/fleet.ts index 16de075a7eecd..3c394d35ca0e3 100644 --- a/x-pack/plugins/apm/server/routes/fleet.ts +++ b/x-pack/plugins/apm/server/routes/fleet.ts @@ -61,7 +61,7 @@ const fleetAgentsRoute = createApmServerRoute({ const policiesGroupedById = keyBy(packagePolicies.items, 'policy_id'); // fetches all agents with the found package policies - const agents = await getFleetAgents({ + const fleetAgents = await getFleetAgents({ policyIds: Object.keys(policiesGroupedById), core, fleetPluginStart, @@ -69,7 +69,7 @@ const fleetAgentsRoute = createApmServerRoute({ return { cloudStandaloneSetup, - agents: agents.map((agent) => { + fleetAgents: fleetAgents.map((agent) => { const packagePolicy = policiesGroupedById[agent.id]; const apmServerCompiledInputs = packagePolicy.inputs[0].compiled_input['apm-server'];