From 076ebc468dddb77ccf76c896aed6138547e97704 Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Tue, 12 Oct 2021 12:39:43 -0400 Subject: [PATCH] [Uptime] [Synthetics Integration] add new advanced options (#112454) * refactor common fields * add ignore_https_errors and journey filters options * adjust formatters and normalizers * adjust content and hide fields when zip url is not defined * adjust content again * update tests * adjust tests * adjust tests Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../browser/advanced_fields.test.tsx | 45 ++++++- .../fleet_package/browser/advanced_fields.tsx | 102 +++++++++++++++- .../fleet_package/browser/formatters.ts | 5 + .../fleet_package/browser/normalizers.ts | 7 ++ .../fleet_package/browser/simple_fields.tsx | 93 +------------- .../fleet_package/common/common_fields.tsx | 113 ++++++++++++++++++ .../contexts/browser_context_advanced.tsx | 3 + ..._context.tsx => http_context_advanced.tsx} | 0 .../fleet_package/contexts/index.ts | 4 +- ...p_context.tsx => tcp_context_advanced.tsx} | 0 .../fleet_package/http/simple_fields.tsx | 92 +------------- .../fleet_package/icmp/simple_fields.tsx | 90 +------------- .../fleet_package/tcp/simple_fields.tsx | 93 +------------- .../public/components/fleet_package/types.tsx | 8 +- 14 files changed, 289 insertions(+), 366 deletions(-) create mode 100644 x-pack/plugins/uptime/public/components/fleet_package/common/common_fields.tsx rename x-pack/plugins/uptime/public/components/fleet_package/contexts/{advanced_fields_http_context.tsx => http_context_advanced.tsx} (100%) rename x-pack/plugins/uptime/public/components/fleet_package/contexts/{advanced_fields_tcp_context.tsx => tcp_context_advanced.tsx} (100%) diff --git a/x-pack/plugins/uptime/public/components/fleet_package/browser/advanced_fields.test.tsx b/x-pack/plugins/uptime/public/components/fleet_package/browser/advanced_fields.test.tsx index aa1f7ca07e3d8..fabf6da49cf47 100644 --- a/x-pack/plugins/uptime/public/components/fleet_package/browser/advanced_fields.test.tsx +++ b/x-pack/plugins/uptime/public/components/fleet_package/browser/advanced_fields.test.tsx @@ -9,10 +9,12 @@ import React from 'react'; import { fireEvent } from '@testing-library/react'; import { render } from '../../../lib/helper/rtl_helpers'; import { BrowserAdvancedFields } from './advanced_fields'; -import { ConfigKeys, IBrowserAdvancedFields } from '../types'; +import { ConfigKeys, IBrowserAdvancedFields, IBrowserSimpleFields } from '../types'; import { BrowserAdvancedFieldsContextProvider, + BrowserSimpleFieldsContextProvider, defaultBrowserAdvancedFields as defaultConfig, + defaultBrowserSimpleFields, } from '../contexts'; jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({ @@ -20,11 +22,19 @@ jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({ })); describe('', () => { - const WrappedComponent = ({ defaultValues }: { defaultValues?: IBrowserAdvancedFields }) => { + const WrappedComponent = ({ + defaultValues = defaultConfig, + defaultSimpleFields = defaultBrowserSimpleFields, + }: { + defaultValues?: IBrowserAdvancedFields; + defaultSimpleFields?: IBrowserSimpleFields; + }) => { return ( - - - + + + + + ); }; @@ -46,4 +56,29 @@ describe('', () => { expect(screenshots.value).toEqual('off'); }); + + it('only displayed filter options when zip url is truthy', () => { + const { queryByText, getByText, rerender } = render(); + + expect( + queryByText( + /Use these options to apply the selected monitor settings to a subset of the tests in your suite./ + ) + ).not.toBeInTheDocument(); + + rerender( + + ); + + expect( + getByText( + /Use these options to apply the selected monitor settings to a subset of the tests in your suite./ + ) + ).toBeInTheDocument(); + }); }); diff --git a/x-pack/plugins/uptime/public/components/fleet_package/browser/advanced_fields.tsx b/x-pack/plugins/uptime/public/components/fleet_package/browser/advanced_fields.tsx index 28e2e39c79554..61af9f8ec6143 100644 --- a/x-pack/plugins/uptime/public/components/fleet_package/browser/advanced_fields.tsx +++ b/x-pack/plugins/uptime/public/components/fleet_package/browser/advanced_fields.tsx @@ -10,13 +10,15 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { EuiAccordion, EuiSelect, + EuiFieldText, + EuiCheckbox, EuiFormRow, EuiDescribedFormGroup, EuiSpacer, } from '@elastic/eui'; import { ComboBox } from '../combo_box'; -import { useBrowserAdvancedFieldsContext } from '../contexts'; +import { useBrowserAdvancedFieldsContext, useBrowserSimpleFieldsContext } from '../contexts'; import { ConfigKeys, ScreenshotOption } from '../types'; @@ -24,6 +26,7 @@ import { OptionalLabel } from '../optional_label'; export const BrowserAdvancedFields = () => { const { fields, setFields } = useBrowserAdvancedFieldsContext(); + const { fields: simpleFields } = useBrowserSimpleFieldsContext(); const handleInputChange = useCallback( ({ value, configKey }: { value: unknown; configKey: ConfigKeys }) => { @@ -39,6 +42,75 @@ export const BrowserAdvancedFields = () => { data-test-subj="syntheticsBrowserAdvancedFieldsAccordion" > + {simpleFields[ConfigKeys.SOURCE_ZIP_URL] && ( + + + + } + description={ + + } + > + + + } + labelAppend={} + helpText={ + + } + > + + handleInputChange({ + value: event.target.value, + configKey: ConfigKeys.JOURNEY_FILTERS_MATCH, + }) + } + data-test-subj="syntheticsBrowserJourneyFiltersMatch" + /> + + + } + labelAppend={} + helpText={ + + } + > + + handleInputChange({ value, configKey: ConfigKeys.JOURNEY_FILTERS_TAGS }) + } + data-test-subj="syntheticsBrowserJourneyFiltersTags" + /> + + + )} @@ -56,6 +128,34 @@ export const BrowserAdvancedFields = () => { } > + + + + } + data-test-subj="syntheticsBrowserIgnoreHttpsErrors" + > + + } + onChange={(event) => + handleInputChange({ + value: event.target.checked, + configKey: ConfigKeys.IGNORE_HTTPS_ERRORS, + }) + } + /> + arrayToJsonFormatter(fields[ConfigKeys.SYNTHETICS_ARGS]), + [ConfigKeys.JOURNEY_FILTERS_MATCH]: (fields) => + stringToJsonFormatter(fields[ConfigKeys.JOURNEY_FILTERS_MATCH]), + [ConfigKeys.JOURNEY_FILTERS_TAGS]: (fields) => + arrayToJsonFormatter(fields[ConfigKeys.JOURNEY_FILTERS_TAGS]), + [ConfigKeys.IGNORE_HTTPS_ERRORS]: null, ...commonFormatters, }; diff --git a/x-pack/plugins/uptime/public/components/fleet_package/browser/normalizers.ts b/x-pack/plugins/uptime/public/components/fleet_package/browser/normalizers.ts index 53bbf611d490c..0107fb3884f41 100644 --- a/x-pack/plugins/uptime/public/components/fleet_package/browser/normalizers.ts +++ b/x-pack/plugins/uptime/public/components/fleet_package/browser/normalizers.ts @@ -39,5 +39,12 @@ export const browserNormalizers: BrowserNormalizerMap = { [ConfigKeys.PARAMS]: getBrowserNormalizer(ConfigKeys.PARAMS), [ConfigKeys.SCREENSHOTS]: getBrowserNormalizer(ConfigKeys.SCREENSHOTS), [ConfigKeys.SYNTHETICS_ARGS]: getBrowserJsonToJavascriptNormalizer(ConfigKeys.SYNTHETICS_ARGS), + [ConfigKeys.JOURNEY_FILTERS_MATCH]: getBrowserJsonToJavascriptNormalizer( + ConfigKeys.JOURNEY_FILTERS_MATCH + ), + [ConfigKeys.JOURNEY_FILTERS_TAGS]: getBrowserJsonToJavascriptNormalizer( + ConfigKeys.JOURNEY_FILTERS_TAGS + ), + [ConfigKeys.IGNORE_HTTPS_ERRORS]: getBrowserNormalizer(ConfigKeys.IGNORE_HTTPS_ERRORS), ...commonNormalizers, }; diff --git a/x-pack/plugins/uptime/public/components/fleet_package/browser/simple_fields.tsx b/x-pack/plugins/uptime/public/components/fleet_package/browser/simple_fields.tsx index 0e2f10b96fe6d..7c7a6b199adcb 100644 --- a/x-pack/plugins/uptime/public/components/fleet_package/browser/simple_fields.tsx +++ b/x-pack/plugins/uptime/public/components/fleet_package/browser/simple_fields.tsx @@ -7,13 +7,12 @@ import React, { memo, useMemo, useCallback } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiFormRow, EuiFieldText, EuiFieldNumber } from '@elastic/eui'; +import { EuiFormRow } from '@elastic/eui'; import { ConfigKeys, Validation } from '../types'; import { useBrowserSimpleFieldsContext } from '../contexts'; -import { ComboBox } from '../combo_box'; -import { OptionalLabel } from '../optional_label'; import { ScheduleField } from '../schedule_field'; import { SourceField } from './source_field'; +import { CommonFields } from '../common/common_fields'; interface Props { validate: Validation; @@ -91,93 +90,7 @@ export const BrowserSimpleFields = memo(({ validate }) => { )} /> - - } - labelAppend={} - helpText={ - - } - > - - handleInputChange({ - value: event.target.value, - configKey: ConfigKeys.APM_SERVICE_NAME, - }) - } - data-test-subj="syntheticsAPMServiceName" - /> - - - } - isInvalid={!!validate[ConfigKeys.TIMEOUT]?.(fields)} - error={ - parseInt(fields[ConfigKeys.TIMEOUT], 10) < 0 ? ( - - ) : ( - - ) - } - helpText={ - - } - > - - handleInputChange({ - value: event.target.value, - configKey: ConfigKeys.TIMEOUT, - }) - } - step={'any'} - /> - - - } - labelAppend={} - helpText={ - - } - > - handleInputChange({ value, configKey: ConfigKeys.TAGS })} - data-test-subj="syntheticsTags" - /> - + ); }); diff --git a/x-pack/plugins/uptime/public/components/fleet_package/common/common_fields.tsx b/x-pack/plugins/uptime/public/components/fleet_package/common/common_fields.tsx new file mode 100644 index 0000000000000..57d5094958ca3 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/fleet_package/common/common_fields.tsx @@ -0,0 +1,113 @@ +/* + * 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 React from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { EuiFormRow, EuiFieldText, EuiFieldNumber } from '@elastic/eui'; +import { ConfigKeys, Validation, ICommonFields } from '../types'; +import { ComboBox } from '../combo_box'; +import { OptionalLabel } from '../optional_label'; + +interface Props { + validate: Validation; + fields: ICommonFields; + onChange: ({ value, configKey }: { value: string | string[]; configKey: ConfigKeys }) => void; +} + +export function CommonFields({ fields, onChange, validate }: Props) { + return ( + <> + + } + labelAppend={} + helpText={ + + } + > + + onChange({ + value: event.target.value, + configKey: ConfigKeys.APM_SERVICE_NAME, + }) + } + data-test-subj="syntheticsAPMServiceName" + /> + + + } + isInvalid={!!validate[ConfigKeys.TIMEOUT]?.(fields)} + error={ + parseInt(fields[ConfigKeys.TIMEOUT], 10) < 0 ? ( + + ) : ( + + ) + } + helpText={ + + } + > + + onChange({ + value: event.target.value, + configKey: ConfigKeys.TIMEOUT, + }) + } + step={'any'} + /> + + + } + labelAppend={} + helpText={ + + } + > + onChange({ value, configKey: ConfigKeys.TAGS })} + data-test-subj="syntheticsTags" + /> + + + ); +} diff --git a/x-pack/plugins/uptime/public/components/fleet_package/contexts/browser_context_advanced.tsx b/x-pack/plugins/uptime/public/components/fleet_package/contexts/browser_context_advanced.tsx index 3f3bb8f14c269..bc766462f18ae 100644 --- a/x-pack/plugins/uptime/public/components/fleet_package/contexts/browser_context_advanced.tsx +++ b/x-pack/plugins/uptime/public/components/fleet_package/contexts/browser_context_advanced.tsx @@ -22,6 +22,9 @@ interface IBrowserAdvancedFieldsContextProvider { export const initialValues: IBrowserAdvancedFields = { [ConfigKeys.SCREENSHOTS]: ScreenshotOption.ON, [ConfigKeys.SYNTHETICS_ARGS]: [], + [ConfigKeys.JOURNEY_FILTERS_MATCH]: '', + [ConfigKeys.JOURNEY_FILTERS_TAGS]: [], + [ConfigKeys.IGNORE_HTTPS_ERRORS]: false, }; const defaultContext: IBrowserAdvancedFieldsContext = { diff --git a/x-pack/plugins/uptime/public/components/fleet_package/contexts/advanced_fields_http_context.tsx b/x-pack/plugins/uptime/public/components/fleet_package/contexts/http_context_advanced.tsx similarity index 100% rename from x-pack/plugins/uptime/public/components/fleet_package/contexts/advanced_fields_http_context.tsx rename to x-pack/plugins/uptime/public/components/fleet_package/contexts/http_context_advanced.tsx diff --git a/x-pack/plugins/uptime/public/components/fleet_package/contexts/index.ts b/x-pack/plugins/uptime/public/components/fleet_package/contexts/index.ts index e955d2d7d4d50..4d76a6d8f8d67 100644 --- a/x-pack/plugins/uptime/public/components/fleet_package/contexts/index.ts +++ b/x-pack/plugins/uptime/public/components/fleet_package/contexts/index.ts @@ -21,7 +21,7 @@ export { HTTPAdvancedFieldsContextProvider, initialValues as defaultHTTPAdvancedFields, useHTTPAdvancedFieldsContext, -} from './advanced_fields_http_context'; +} from './http_context_advanced'; export { TCPSimpleFieldsContext, TCPSimpleFieldsContextProvider, @@ -39,7 +39,7 @@ export { TCPAdvancedFieldsContextProvider, initialValues as defaultTCPAdvancedFields, useTCPAdvancedFieldsContext, -} from './advanced_fields_tcp_context'; +} from './tcp_context_advanced'; export { BrowserSimpleFieldsContext, BrowserSimpleFieldsContextProvider, diff --git a/x-pack/plugins/uptime/public/components/fleet_package/contexts/advanced_fields_tcp_context.tsx b/x-pack/plugins/uptime/public/components/fleet_package/contexts/tcp_context_advanced.tsx similarity index 100% rename from x-pack/plugins/uptime/public/components/fleet_package/contexts/advanced_fields_tcp_context.tsx rename to x-pack/plugins/uptime/public/components/fleet_package/contexts/tcp_context_advanced.tsx diff --git a/x-pack/plugins/uptime/public/components/fleet_package/http/simple_fields.tsx b/x-pack/plugins/uptime/public/components/fleet_package/http/simple_fields.tsx index c4de1d53fe998..90f94324fe657 100644 --- a/x-pack/plugins/uptime/public/components/fleet_package/http/simple_fields.tsx +++ b/x-pack/plugins/uptime/public/components/fleet_package/http/simple_fields.tsx @@ -10,9 +10,9 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { EuiFormRow, EuiFieldText, EuiFieldNumber } from '@elastic/eui'; import { ConfigKeys, Validation } from '../types'; import { useHTTPSimpleFieldsContext } from '../contexts'; -import { ComboBox } from '../combo_box'; import { OptionalLabel } from '../optional_label'; import { ScheduleField } from '../schedule_field'; +import { CommonFields } from '../common/common_fields'; interface Props { validate: Validation; @@ -50,7 +50,7 @@ export const HTTPSimpleFields = memo(({ validate }) => { /> (({ validate }) => { unit={fields[ConfigKeys.SCHEDULE].unit} /> - - } - labelAppend={} - helpText={ - - } - > - - handleInputChange({ - value: event.target.value, - configKey: ConfigKeys.APM_SERVICE_NAME, - }) - } - data-test-subj="syntheticsAPMServiceName" - /> - (({ validate }) => { } /> - - } - isInvalid={!!validate[ConfigKeys.TIMEOUT]?.(fields)} - error={ - parseInt(fields[ConfigKeys.TIMEOUT], 10) < 0 ? ( - - ) : ( - - ) - } - helpText={ - - } - > - - handleInputChange({ - value: event.target.value, - configKey: ConfigKeys.TIMEOUT, - }) - } - step={'any'} - /> - - - } - labelAppend={} - helpText={ - - } - > - handleInputChange({ value, configKey: ConfigKeys.TAGS })} - data-test-subj="syntheticsTags" - /> - + ); }); diff --git a/x-pack/plugins/uptime/public/components/fleet_package/icmp/simple_fields.tsx b/x-pack/plugins/uptime/public/components/fleet_package/icmp/simple_fields.tsx index 92afe4c5072e1..32c843f1ce114 100644 --- a/x-pack/plugins/uptime/public/components/fleet_package/icmp/simple_fields.tsx +++ b/x-pack/plugins/uptime/public/components/fleet_package/icmp/simple_fields.tsx @@ -10,9 +10,9 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { EuiFormRow, EuiFieldText, EuiFieldNumber } from '@elastic/eui'; import { ConfigKeys, Validation } from '../types'; import { useICMPSimpleFieldsContext } from '../contexts'; -import { ComboBox } from '../combo_box'; import { OptionalLabel } from '../optional_label'; import { ScheduleField } from '../schedule_field'; +import { CommonFields } from '../common/common_fields'; interface Props { validate: Validation; @@ -113,93 +113,7 @@ export const ICMPSimpleFields = memo(({ validate }) => { step={'any'} /> - - } - labelAppend={} - helpText={ - - } - > - - handleInputChange({ - value: event.target.value, - configKey: ConfigKeys.APM_SERVICE_NAME, - }) - } - data-test-subj="syntheticsAPMServiceName" - /> - - - } - isInvalid={!!validate[ConfigKeys.TIMEOUT]?.(fields)} - error={ - parseInt(fields[ConfigKeys.TIMEOUT], 10) < 0 ? ( - - ) : ( - - ) - } - helpText={ - - } - > - - handleInputChange({ - value: event.target.value, - configKey: ConfigKeys.TIMEOUT, - }) - } - step={'any'} - /> - - - } - labelAppend={} - helpText={ - - } - > - handleInputChange({ value, configKey: ConfigKeys.TAGS })} - data-test-subj="syntheticsTags" - /> - + ); }); diff --git a/x-pack/plugins/uptime/public/components/fleet_package/tcp/simple_fields.tsx b/x-pack/plugins/uptime/public/components/fleet_package/tcp/simple_fields.tsx index 37f0c82595e02..53a0074a47d73 100644 --- a/x-pack/plugins/uptime/public/components/fleet_package/tcp/simple_fields.tsx +++ b/x-pack/plugins/uptime/public/components/fleet_package/tcp/simple_fields.tsx @@ -7,12 +7,11 @@ import React, { memo } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiFormRow, EuiFieldText, EuiFieldNumber } from '@elastic/eui'; +import { EuiFormRow, EuiFieldText } from '@elastic/eui'; import { ConfigKeys, Validation } from '../types'; import { useTCPSimpleFieldsContext } from '../contexts'; -import { ComboBox } from '../combo_box'; -import { OptionalLabel } from '../optional_label'; import { ScheduleField } from '../schedule_field'; +import { CommonFields } from '../common/common_fields'; interface Props { validate: Validation; @@ -80,93 +79,7 @@ export const TCPSimpleFields = memo(({ validate }) => { unit={fields[ConfigKeys.SCHEDULE].unit} /> - - } - labelAppend={} - helpText={ - - } - > - - handleInputChange({ - value: event.target.value, - configKey: ConfigKeys.APM_SERVICE_NAME, - }) - } - data-test-subj="syntheticsAPMServiceName" - /> - - - } - isInvalid={!!validate[ConfigKeys.TIMEOUT]?.(fields)} - error={ - parseInt(fields[ConfigKeys.TIMEOUT], 10) < 0 ? ( - - ) : ( - - ) - } - helpText={ - - } - > - - handleInputChange({ - value: event.target.value, - configKey: ConfigKeys.TIMEOUT, - }) - } - step={'any'} - /> - - - } - labelAppend={} - helpText={ - - } - > - handleInputChange({ value, configKey: ConfigKeys.TAGS })} - data-test-subj="syntheticsTags" - /> - + ); }); diff --git a/x-pack/plugins/uptime/public/components/fleet_package/types.tsx b/x-pack/plugins/uptime/public/components/fleet_package/types.tsx index 89581bf993339..db736f1bae4d2 100644 --- a/x-pack/plugins/uptime/public/components/fleet_package/types.tsx +++ b/x-pack/plugins/uptime/public/components/fleet_package/types.tsx @@ -76,9 +76,13 @@ export enum ScreenshotOption { export enum ConfigKeys { APM_SERVICE_NAME = 'service.name', HOSTS = 'hosts', + IGNORE_HTTPS_ERRORS = 'ignore_https_errors', + JOURNEY_FILTERS_MATCH = 'filter_journeys.match', + JOURNEY_FILTERS_TAGS = 'filter_journeys.tags', MAX_REDIRECTS = 'max_redirects', MONITOR_TYPE = 'type', NAME = 'name', + PARAMS = 'params', PASSWORD = 'password', PROXY_URL = 'proxy_url', PROXY_USE_LOCAL_RESOLVER = 'proxy_use_local_resolver', @@ -101,7 +105,6 @@ export enum ConfigKeys { SOURCE_ZIP_PASSWORD = 'source.zip_url.password', SOURCE_ZIP_FOLDER = 'source.zip_url.folder', SYNTHETICS_ARGS = 'synthetics_args', - PARAMS = 'params', TLS_CERTIFICATE_AUTHORITIES = 'ssl.certificate_authorities', TLS_CERTIFICATE = 'ssl.certificate', TLS_KEY = 'ssl.key', @@ -198,6 +201,9 @@ export type IBrowserSimpleFields = { export interface IBrowserAdvancedFields { [ConfigKeys.SYNTHETICS_ARGS]: string[]; [ConfigKeys.SCREENSHOTS]: string; + [ConfigKeys.JOURNEY_FILTERS_MATCH]: string; + [ConfigKeys.JOURNEY_FILTERS_TAGS]: string[]; + [ConfigKeys.IGNORE_HTTPS_ERRORS]: boolean; } export type HTTPFields = IHTTPSimpleFields & IHTTPAdvancedFields & ITLSFields;