[Uptime] [Synthetics Integration] add new advanced options

[dominiqueclarke]

Fixes #109732

This PR adds UI components for the ignore_https_errors and filter_journeys options.

This PR also refactors some of the common options across monitor type for better code reuse, and renames a few files.

Testing

Setting up your e2e testing environment
Overview: You will need to run a local version of kibana and package registry to test pending changes, but will use elastic-package to run a snapshot view of elasticsearch, fleet-server, and elastic-agent. Since fleet server relies on kibana, we'll also use elastic-package to start a snapshot view of kibana exclusively for bootstrapping fleet-server, but will point our local version of kibana to a separate port. So we'll be running two versions of Kibana.

1. Stop all instances of elasticsearch or kibana
2. Checkout this PR. In kibana.dev.yml settings, add remove kibana.index and xpack.task_manager.index to remove legacy multitenancy features. This ensures that both our instances of Kibana can share saved objects related to fleet and agent. Also, add the following keys:

xpack.encryptedSavedObjects.encryptionKey: "12345678901234567890123456789012"
xpack.fleet.registryUrl: "http://localhost:8080"
server.port: 5602

4. Start your local kibana instance using env BUILD_TS_REFS_DISABLE=true yarn kbn bootstrap && yarn start
5. Checkout synthetics - add new ssl and filter params for browser monitors integrations#1778. Navigate to packages/synthetics in the repo directory. Run elastic-package clean, then elastic-package build.
6. Update elastic package. It was recently updated to add support for the elastic-agent-complete image which contains support for running synthetics agent via heartbeat. Run go get github.com/elastic/elastic-package
7. Run elastic-package stack up -d -v --services "elasticsearch,fleet-server,elastic-agent,package-registry" --version 8.0.0-SNAPSHOT in the packages/synthetics directory. This will start up elasticsearch, fleet-server, elastic-agent, package registry AND kibana. This is because fleet-server requires kibana for bootstrapping.
8. Change the password to kibana_system user curl -u elastic:changeme -X POST "http://localhost:9200/_security/user/kibana_system/_password?pretty" -H 'Content-Type: application/json' -d' { "password" : "changeme" } '
9. Navigate to your local instance of kibana at http://localhost:5602

Testing filter tags

1. Navigate to the synthetics integration at fleet/integrations/synthetics-0.3.1/add-integration
2. Add a policy name, then select the browser type from the dropdown
3. Fill out the form with the following options: Zip url: https://github.com/elastic/synthetics-demo/archive/refs/heads/main.zip, folder e-commerce, params { "url": "https://elastic-synthetics.vercel.app/" }
4. Open the browser advanced fields option and add the following option to tags

5. Save the integration and navigate to Uptime 6. Verify that only this journey was ran (the name may be different depending on what you named your policy

Testing filter match

1. Navigate to the synthetics integration at fleet/integrations/synthetics-0.3.1/add-integration
2. Add a policy name, then select the browser type from the dropdown
3. Fill out the form with the following options: Zip url: https://github.com/elastic/synthetics-demo/archive/refs/heads/main.zip, folder e-commerce, params { "url": "https://elastic-synthetics.vercel.app/" }
4. Open the browser advanced fields option and add the following option to the match field

5. Save the integration and navigate to Uptime 6. Verify that only this journey was ran (the name may be different depending on what you named your policy

Testing ignore http errors

1. Navigate to the synthetics integration at fleet/integrations/synthetics-0.3.1/add-integration
2. Add a policy name, then select the browser type from the dropdown
3. Fill out the form with the following options: Inline script:

step("load homepage", async () => {
    await page.goto('https://wrong.host.badssl.com/');
});

4. Open the browser advanced fields option click ignore http errors

5. Save the integration and navigate to Uptime 6. Click on the journey to go to the journey details page 7. Verify that the wrong.host.badssl image appears, indicating that an ssl error was ignored

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)

[paulb-elastic]

Is it worth clarifying that these can be comma separated lists of tags/filters?

Also, is it worth adding an example as a placeholder attribute (something like homepage*,product*), so users have an idea what the syntax is for adding something in here (or would that confuse things more)?

[dominiqueclarke]

Is it worth clarifying that these can be comma separated lists of tags/filters?

Also, is it worth adding an example as a placeholder attribute (something like homepage*,product*), so users have an idea what the syntax is for adding something in here (or would that confuse things more)?

@paulb-elastic
The component used for the tags is a combo box, so users can add individual tags without having to create a comma separated list.
We could still add a placeholder as an example if it's unclear. We could also add a placeholder for the filter match if desired.

[dominiqueclarke]

@elasticmachine merge upstream

[dominiqueclarke]

@elasticmachine merge upstream

[dominiqueclarke]

@elasticmachine merge upstream

[justinkambic]

Some nit comments about copy but the smoke testing worked for me, and rest LGTM

[justinkambic]

Suggested change

	defaultMessage="Run only journeys with a name or tags that matches the provided glob."
	defaultMessage="Run only journeys with a name or tag that matches the provided glob."

Think this is cleaner copy.

[justinkambic]

Suggested change

	defaultMessage="Run only journeys with the given tag(s), or globs."
	defaultMessage="Run only journeys with the given tags, or globs."

Think we can skip this since globs is plural.

[dominiqueclarke]

@elasticmachine merge upstream

[dominiqueclarke]

@elasticmachine merge upstream

[drewpost]

I think we should clarify somewhere that this is for when you're running a suite of tests vs using the recorder of inline. I was a bit confused. I also think perhaps we should look at a different word than filter. Something about "Selective Tests" "Use this option to apply these monitor settings to a subset of the tests in your suite". (or something along those lines)

As I understand this, you're not really filtering per-se, you more choosing a subset to apply an action to (in this case, the monitor frequency, name etc that you set above) WDYT?

[dominiqueclarke]

@drewpost That makes sense. I can hide these settings when inline or recorder is selected.

I think the statement about "not really filtering" is generally correct, though it will filter in the sense that only that subset will be run. Maybe add an additional sentence: "Only the configured subset will be run by this monitor."

[dominiqueclarke]

@elasticmachine merge upstream

[dominiqueclarke]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: ab9ee88
• Storybooks Preview
• Documentation Changes

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
uptime	659	660	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
uptime	568.6KB	564.6KB	-4.0KB

History

• 💔 Build #159769 failed 8359b80
• 💔 Build #159708 failed 3b437ba
• 💔 Build #159669 failed 44f2f94
• 💔 Build #159486 failed e258540
• 💔 Build #159000 failed a9c660d

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[justinkambic]

LGTM - reviewed that the filters field will only appear when you have entered a zip URL.

[kibanamachine]

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.