From 7bb8cd086cc3e9c08c444a7782bdb5e32a11c5bd Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 12 Apr 2022 12:49:18 -0500 Subject: [PATCH] [APM] Service environment should be selected when you edit the agent configuration (#129929) (#130034) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fixing env selected * lets see if it works now * fixing test (cherry picked from commit a395f411b7e717c612d714f0fcee874eaba9cfa9) Co-authored-by: Cauê Marcondes <55978943+cauemarcondes@users.noreply.github.com> --- .../settings/agent_configurations.spec.ts | 106 ++++++++++++++++++ .../service_page/form_row_select.tsx | 24 ++-- .../form_row_suggestions_select.tsx | 3 + .../service_page/service_page.tsx | 2 + 4 files changed, 123 insertions(+), 12 deletions(-) create mode 100644 x-pack/plugins/apm/ftr_e2e/cypress/integration/power_user/settings/agent_configurations.spec.ts diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/integration/power_user/settings/agent_configurations.spec.ts b/x-pack/plugins/apm/ftr_e2e/cypress/integration/power_user/settings/agent_configurations.spec.ts new file mode 100644 index 0000000000000..61749461bdbda --- /dev/null +++ b/x-pack/plugins/apm/ftr_e2e/cypress/integration/power_user/settings/agent_configurations.spec.ts @@ -0,0 +1,106 @@ +/* + * 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 { apm, timerange } from '@elastic/apm-synthtrace'; +import url from 'url'; +import { synthtrace } from '../../../../synthtrace'; + +const timeRange = { + rangeFrom: '2021-10-10T00:00:00.000Z', + rangeTo: '2021-10-10T00:15:00.000Z', +}; + +const agentConfigHref = url.format({ + pathname: '/app/apm/settings/agent-configuration', +}); + +function generateData({ + from, + to, + serviceName, +}: { + from: number; + to: number; + serviceName: string; +}) { + const range = timerange(from, to); + + const service1 = apm + .service(serviceName, 'production', 'java') + .instance('service-1-prod-1') + .podId('service-1-prod-1-pod'); + + const service2 = apm + .service(serviceName, 'development', 'nodejs') + .instance('opbeans-node-prod-1'); + + return range + .interval('1m') + .rate(1) + .spans((timestamp, index) => [ + ...service1 + .transaction('GET /apple 🍎 ') + .timestamp(timestamp) + .duration(1000) + .success() + .serialize(), + ...service2 + .transaction('GET /banana 🍌') + .timestamp(timestamp) + .duration(500) + .success() + .serialize(), + ]); +} + +describe('Agent configuration', () => { + before(async () => { + const { rangeFrom, rangeTo } = timeRange; + + await synthtrace.index( + generateData({ + from: new Date(rangeFrom).getTime(), + to: new Date(rangeTo).getTime(), + serviceName: 'opbeans-node', + }) + ); + }); + + after(async () => { + await synthtrace.clean(); + }); + + beforeEach(() => { + cy.loginAsPowerUser(); + cy.visit(agentConfigHref); + }); + + it('persists service enviroment when clicking on edit button', () => { + cy.intercept( + 'GET', + '/api/apm/settings/agent-configuration/environments?*' + ).as('serviceEnvironmentApi'); + cy.contains('Create configuration').click(); + cy.get('[data-test-subj="serviceNameComboBox"]') + .click() + .type('opbeans-node') + .type('{enter}'); + + cy.contains('opbeans-node').realClick(); + cy.wait('@serviceEnvironmentApi'); + + cy.get('[data-test-subj="serviceEnviromentComboBox"]') + .click({ force: true }) + .type('prod') + .type('{enter}'); + cy.contains('production').realClick(); + cy.contains('Next step').click(); + cy.contains('Create configuration'); + cy.contains('Edit').click(); + cy.wait('@serviceEnvironmentApi'); + cy.contains('production'); + }); +}); diff --git a/x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/service_page/form_row_select.tsx b/x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/service_page/form_row_select.tsx index be716042a63ce..bfde04af12b94 100644 --- a/x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/service_page/form_row_select.tsx +++ b/x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/service_page/form_row_select.tsx @@ -5,14 +5,14 @@ * 2.0. */ -import React, { useState, useEffect } from 'react'; -import { i18n } from '@kbn/i18n'; import { - EuiDescribedFormGroup, + EuiComboBox, EuiComboBoxOptionOption, + EuiDescribedFormGroup, EuiFormRow, - EuiComboBox, } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import React, { useMemo } from 'react'; interface Props { title: string; description: string; @@ -22,6 +22,7 @@ interface Props { isDisabled: boolean; value?: string; onChange: (value?: string) => void; + dataTestSubj?: string; } export function FormRowSelect({ @@ -32,23 +33,21 @@ export function FormRowSelect({ options, isDisabled, onChange, + value, + dataTestSubj, }: Props) { - const [selectedOptions, setSelected] = useState< - Array> | undefined - >([]); + const selectedOptions = useMemo(() => { + const optionFound = options?.find((option) => option.value === value); + return optionFound ? [optionFound] : undefined; + }, [options, value]); const handleOnChange = ( nextSelectedOptions: Array> ) => { const [selectedOption] = nextSelectedOptions; - setSelected(nextSelectedOptions); onChange(selectedOption.value); }; - useEffect(() => { - setSelected(undefined); - }, [isLoading]); - return ( diff --git a/x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/service_page/form_row_suggestions_select.tsx b/x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/service_page/form_row_suggestions_select.tsx index f3f680ff4a9ff..5fa3a46b00901 100644 --- a/x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/service_page/form_row_suggestions_select.tsx +++ b/x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/service_page/form_row_suggestions_select.tsx @@ -19,6 +19,7 @@ interface Props { value?: string; allowAll?: boolean; onChange: (value?: string) => void; + dataTestSubj?: string; } export function FormRowSuggestionsSelect({ @@ -29,6 +30,7 @@ export function FormRowSuggestionsSelect({ value, allowAll = true, onChange, + dataTestSubj, }: Props) { return ( diff --git a/x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/service_page/service_page.tsx b/x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/service_page/service_page.tsx index 9f8d3ca1318b5..1ede5cd5405c7 100644 --- a/x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/service_page/service_page.tsx +++ b/x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/service_page/service_page.tsx @@ -105,6 +105,7 @@ export function ServicePage({ newConfig, setNewConfig, onClickNext }: Props) { service: { name, environment: '' }, })); }} + dataTestSubj="serviceNameComboBox" /> {/* Environment options */}