[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 <[email protected]>
elastic · Oct 12, 2021 · 076ebc4 · 076ebc4
1 parent 1f3c99b
commit 076ebc4
Show file tree

Hide file tree

Showing 14 changed files with 289 additions and 366 deletions.
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
@@ -9,22 +9,32 @@ 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', () => ({
   htmlIdGenerator: () => () => `id-${Math.random()}`,
 }));
 
 describe('<BrowserAdvancedFields />', () => {
-  const WrappedComponent = ({ defaultValues }: { defaultValues?: IBrowserAdvancedFields }) => {
+  const WrappedComponent = ({
+    defaultValues = defaultConfig,
+    defaultSimpleFields = defaultBrowserSimpleFields,
+  }: {
+    defaultValues?: IBrowserAdvancedFields;
+    defaultSimpleFields?: IBrowserSimpleFields;
+  }) => {
     return (
-      <BrowserAdvancedFieldsContextProvider defaultValues={defaultValues}>
-        <BrowserAdvancedFields />
-      </BrowserAdvancedFieldsContextProvider>
+      <BrowserSimpleFieldsContextProvider defaultValues={defaultSimpleFields}>
+        <BrowserAdvancedFieldsContextProvider defaultValues={defaultValues}>
+          <BrowserAdvancedFields />
+        </BrowserAdvancedFieldsContextProvider>
+      </BrowserSimpleFieldsContextProvider>
     );
   };
 
@@ -46,4 +56,29 @@ describe('<BrowserAdvancedFields />', () => {
 
     expect(screenshots.value).toEqual('off');
   });
+
+  it('only displayed filter options when zip url is truthy', () => {
+    const { queryByText, getByText, rerender } = render(<WrappedComponent />);
+
+    expect(
+      queryByText(
+        /Use these options to apply the selected monitor settings to a subset of the tests in your suite./
+      )
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <WrappedComponent
+        defaultSimpleFields={{
+          ...defaultBrowserSimpleFields,
+          [ConfigKeys.SOURCE_ZIP_URL]: 'https://elastic.zip',
+        }}
+      />
+    );
+
+    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
@@ -10,20 +10,23 @@ 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';
 
 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"
     >
       <EuiSpacer size="m" />
+      {simpleFields[ConfigKeys.SOURCE_ZIP_URL] && (
+        <EuiDescribedFormGroup
+          title={
+            <h4>
+              <FormattedMessage
+                id="xpack.uptime.createPackagePolicy.stepConfigure.browserAdvancedSettings.filtering.title"
+                defaultMessage="Selective tests"
+              />
+            </h4>
+          }
+          description={
+            <FormattedMessage
+              id="xpack.uptime.createPackagePolicy.stepConfigure.browserAdvancedSettings.filtering.description"
+              defaultMessage="Use these options to apply the selected monitor settings to a subset of the tests in your suite. Only the configured subset will be run by this monitor."
+            />
+          }
+        >
+          <EuiSpacer size="s" />
+          <EuiFormRow
+            label={
+              <FormattedMessage
+                id="xpack.uptime.createPackagePolicy.stepConfigure.browserAdvancedSettings.journeyFiltersMatch.label"
+                defaultMessage="Filter match"
+              />
+            }
+            labelAppend={<OptionalLabel />}
+            helpText={
+              <FormattedMessage
+                id="xpack.uptime.createPackagePolicy.stepConfigure.browserAdvancedSettings.journeyFiltersMatch.helpText"
+                defaultMessage="Run only journeys with a name that matches the provided glob with this monitor."
+              />
+            }
+          >
+            <EuiFieldText
+              value={fields[ConfigKeys.JOURNEY_FILTERS_MATCH]}
+              onChange={(event) =>
+                handleInputChange({
+                  value: event.target.value,
+                  configKey: ConfigKeys.JOURNEY_FILTERS_MATCH,
+                })
+              }
+              data-test-subj="syntheticsBrowserJourneyFiltersMatch"
+            />
+          </EuiFormRow>
+          <EuiFormRow
+            label={
+              <FormattedMessage
+                id="xpack.uptime.createPackagePolicy.stepConfigure.browserAdvancedSettings.journeyFiltersTags.label"
+                defaultMessage="Filter tags"
+              />
+            }
+            labelAppend={<OptionalLabel />}
+            helpText={
+              <FormattedMessage
+                id="xpack.uptime.createPackagePolicy.stepConfigure.browserAdvancedSettings.journeyFiltersTags.helpText"
+                defaultMessage="Run only journeys with the given tags with this monitor."
+              />
+            }
+          >
+            <ComboBox
+              selectedOptions={fields[ConfigKeys.JOURNEY_FILTERS_TAGS]}
+              onChange={(value) =>
+                handleInputChange({ value, configKey: ConfigKeys.JOURNEY_FILTERS_TAGS })
+              }
+              data-test-subj="syntheticsBrowserJourneyFiltersTags"
+            />
+          </EuiFormRow>
+        </EuiDescribedFormGroup>
+      )}
       <EuiDescribedFormGroup
         title={
           <h4>
@@ -56,6 +128,34 @@ export const BrowserAdvancedFields = () => {
         }
       >
         <EuiSpacer size="s" />
+        <EuiFormRow
+          helpText={
+            <>
+              <FormattedMessage
+                id="xpack.uptime.createPackagePolicy.stepConfigure.browserAdvancedSettings.ignoreHttpsErrors.helpText"
+                defaultMessage="Set this option to true to disable TLS/SSL validation in the synthetics browser. This is useful for testing sites that use self-signed certs."
+              />
+            </>
+          }
+          data-test-subj="syntheticsBrowserIgnoreHttpsErrors"
+        >
+          <EuiCheckbox
+            id="syntheticsBrowserIgnoreHttpsErrorsCheckbox"
+            checked={fields[ConfigKeys.IGNORE_HTTPS_ERRORS]}
+            label={
+              <FormattedMessage
+                id="xpack.uptime.createPackagePolicy.stepConfigure.browserAdvancedSettings.ignoreHttpsErrors.label"
+                defaultMessage="Ignore HTTPS errors"
+              />
+            }
+            onChange={(event) =>
+              handleInputChange({
+                value: event.target.checked,
+                configKey: ConfigKeys.IGNORE_HTTPS_ERRORS,
+              })
+            }
+          />
+        </EuiFormRow>
         <EuiFormRow
           label={
             <FormattedMessage

diff --git a/x-pack/plugins/uptime/public/components/fleet_package/browser/formatters.ts b/x-pack/plugins/uptime/public/components/fleet_package/browser/formatters.ts
@@ -25,5 +25,10 @@ export const browserFormatters: BrowserFormatMap = {
   [ConfigKeys.SCREENSHOTS]: null,
   [ConfigKeys.SYNTHETICS_ARGS]: (fields) =>
     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
@@ -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
@@ -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<Props>(({ validate }) => {
           )}
         />
       </EuiFormRow>
-      <EuiFormRow
-        label={
-          <FormattedMessage
-            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.APMServiceName.label"
-            defaultMessage="APM service name"
-          />
-        }
-        labelAppend={<OptionalLabel />}
-        helpText={
-          <FormattedMessage
-            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.APMServiceName.helpText"
-            defaultMessage="APM service name for this monitor. Corresponds to the service.name ECS field. Set this when monitoring an app that is also using APM to enable integrations between Uptime and APM data in Kibana."
-          />
-        }
-      >
-        <EuiFieldText
-          value={fields[ConfigKeys.APM_SERVICE_NAME]}
-          onChange={(event) =>
-            handleInputChange({
-              value: event.target.value,
-              configKey: ConfigKeys.APM_SERVICE_NAME,
-            })
-          }
-          data-test-subj="syntheticsAPMServiceName"
-        />
-      </EuiFormRow>
-      <EuiFormRow
-        label={
-          <FormattedMessage
-            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.label"
-            defaultMessage="Timeout in seconds"
-          />
-        }
-        isInvalid={!!validate[ConfigKeys.TIMEOUT]?.(fields)}
-        error={
-          parseInt(fields[ConfigKeys.TIMEOUT], 10) < 0 ? (
-            <FormattedMessage
-              id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.moreThanZeroError"
-              defaultMessage="Timeout must be greater than or equal to 0"
-            />
-          ) : (
-            <FormattedMessage
-              id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.lessThanIntervalError"
-              defaultMessage="Timeout must be less than the monitor interval"
-            />
-          )
-        }
-        helpText={
-          <FormattedMessage
-            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.helpText"
-            defaultMessage="The total time allowed for testing the connection and exchanging data."
-          />
-        }
-      >
-        <EuiFieldNumber
-          min={0}
-          value={fields[ConfigKeys.TIMEOUT]}
-          onChange={(event) =>
-            handleInputChange({
-              value: event.target.value,
-              configKey: ConfigKeys.TIMEOUT,
-            })
-          }
-          step={'any'}
-        />
-      </EuiFormRow>
-      <EuiFormRow
-        label={
-          <FormattedMessage
-            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.tags.label"
-            defaultMessage="Tags"
-          />
-        }
-        labelAppend={<OptionalLabel />}
-        helpText={
-          <FormattedMessage
-            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.tags.helpText"
-            defaultMessage="A list of tags that will be sent with the monitor event. Press enter to add a new tag. Displayed in Uptime and enables searching by tag."
-          />
-        }
-      >
-        <ComboBox
-          selectedOptions={fields[ConfigKeys.TAGS]}
-          onChange={(value) => handleInputChange({ value, configKey: ConfigKeys.TAGS })}
-          data-test-subj="syntheticsTags"
-        />
-      </EuiFormRow>
+      <CommonFields fields={fields} onChange={handleInputChange} validate={validate} />
     </>
   );
 });