[Uptime][Synthetics Integration] Add browser monitors configuration options #102928

dominiqueclarke · 2021-06-22T14:46:00Z

Summary

This PR adds the corresponding UI to support browser monitor configuration within the Synthetics integration package.

Testing
This feature involves coordinated changes from kibana, integrations, and beats. In order to test e2e, it is necessary to pull down each PR separately. However, there are a few things you can test without every piece.

If you only have Kibana
- Evaluate the design and flow
- Evaluate that the monitor type dropdown only shows datastreams available from the integration package. To do this, you can change the version in the url to 0.2.1, which only contains http, tcp, and icmp and confirm that the monitor type dropdown only contains http, tcp, and icmp.
If you have Kibana and the integration package
- Save the integration policy and verify the keys in the integration policy yaml are correct and correspond to the appropriate heartbeat configuration fields. Reference: https://www.elastic.co/guide/en/beats/heartbeat/current/monitor-browser-options.html
- Edit the integration policy, ensure all the inputs have the appropriate value, change fields, resave the policy, and verify the keys have been updated in the integration policy yaml
If you have Kibana, the integration package, and agent
- Test that browser monitors with configured with a zip url are processed by agent and appear in Uptime
- Test that browser monitors configured with inline scripts are processed by agent and appear in Uptime

FULL DEV ENVIRONMENT SETUP INSTRUCTIONS: https://docs.google.com/document/d/1mS_94T0zRBtdJZVWLWc_B7iswTfkrGJXn9XMyt9JZjY/edit

Checklist

Uptime PR Checklist

The following considerations have been addressed

Accessibility has been considered, relevant aria tags and other accessibility features implemented
Telemetry has been added where relevant
Docs have been added to this PR covering any new, changed, or removed features
Testing for expected behavior is in place
- Automated tests exist to cover expected and edge case conditions
- User acceptance testing has been carried out to ensure the feature functions as expected within the context of how it will be used
- Any special/edge cases that need to be manually tested must be documented
- Ensure the new layout works responsively (including down to small phone widths, where makes sense for the user flow, e.g. the error page when reacting to an alert)

elasticmachine · 2021-06-22T14:46:02Z

Pinging @elastic/uptime (Team:uptime)

dominiqueclarke · 2021-06-22T16:32:56Z

x-pack/plugins/uptime/public/components/fleet_package/http/advanced_fields.tsx

-              : undefined
-          }
+          isInvalid={!!validate[ConfigKeys.RESPONSE_HEADERS_CHECK]?.(fields)}
+          error={[


I do not remember why this was made an array. My gut tells me that this is not needed.

It's probably ok to change it then; it seems to accept ReactNode | ReactNode[], so we aren't losing anything by simplifying it to a string.

shahzad31 · 2021-06-23T12:51:47Z

x-pack/plugins/uptime/public/components/fleet_package/browser/simple_fields.tsx

+        }
+      >
+        <SourceField
+          onChange={useCallback(


hmm inline memo, or call back hooks, i was tempted to do this other day , not sure if it has any implications, probably none.

As long as it's not conditional I think it's fine. My preference is to keep all hook usage isolated to its own block in the root of the function though, just because I find it to be more readable.

shahzad31 · 2021-06-23T14:15:56Z

Initial smoke testing seems to be fine
no validation for URL fields?

justinkambic

Just some basic comments, code is looking pretty good.

justinkambic · 2021-06-24T14:47:17Z

x-pack/plugins/uptime/public/components/fleet_package/browser/simple_fields.tsx

+        }
+      >
+        <SourceField
+          onChange={useCallback(


As long as it's not conditional I think it's fine. My preference is to keep all hook usage isolated to its own block in the root of the function though, just because I find it to be more readable.

justinkambic · 2021-06-24T14:57:14Z

x-pack/plugins/uptime/public/components/fleet_package/browser/simple_fields.tsx

+        error={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.error"
+            defaultMessage="Timeout must be 0 or greater and less than schedule interval"


This copy is confusing. Could we break this up and conditionally render one or the other?

// pseudocode error={ timeout < 0 ? <FormattedMessage id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.lessThanZeroError" defaultMessage="Timeout may not be less than 0" /> : <FormattedMessage id="greaterThanTimeout" defaultMessage=""Timeout cannot be less than schedule interval" />

justinkambic · 2021-06-24T15:02:24Z

x-pack/plugins/uptime/public/components/fleet_package/browser/source_field.tsx

+    {
+      id: 'syntheticsBrowserZipURLConfig',
+      name: (
+        <FormattedMessage


Seems we are repeating this definition in the content section below, extract to a common definition above?

dominiqueclarke · 2021-06-28T01:44:00Z

@elasticmachine merge upstream

…-monitors

…ynthetics-integration-browser-monitors

dominiqueclarke · 2021-07-27T15:34:41Z

@elasticmachine merge upstream

…-monitors

dominiqueclarke · 2021-08-02T12:22:36Z

@elasticmachine merge upstream

…-monitors

…ynthetics-integration-browser-monitors

… the integration package

justinkambic · 2021-08-13T21:43:30Z

During smoke testing I did notice a weird little UI glitch where the form says the script is required, even when there's a valid script present:

dominiqueclarke · 2021-08-16T12:47:51Z

@elasticmachine merge upstream

…-monitors

justinkambic · 2021-08-16T13:02:10Z

x-pack/plugins/uptime/public/components/fleet_package/validation.tsx

+
+    return (
+      !timeout ||
+      parseFloat(timeout as ICustomFields[ConfigKeys.TIMEOUT]) < 0 ||


Could extract this cast to a var before the return statement, to avoid the repetition.

justinkambic · 2021-08-16T13:44:28Z

x-pack/plugins/uptime/public/components/fleet_package/tcp/simple_fields.tsx

+          parseInt(fields[ConfigKeys.TIMEOUT], 10) < 0 ? (
+            <FormattedMessage
+              id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.lessThanZeroError"
+              defaultMessage="Timeout must be less than 0"


Seems like this is a typo.

Suggested change

defaultMessage="Timeout must be less than 0"

defaultMessage="Timeout must be greater than 0"

justinkambic · 2021-08-16T13:46:23Z

x-pack/plugins/uptime/public/components/fleet_package/tcp/simple_fields.tsx

+          ) : (
+            <FormattedMessage
+              id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.moreThanIntervalError"
+              defaultMessage="Timeout cannot be more than the monitor interval"


I think "greater than" might be a little nicer. Just my opinion though.

Suggested change

defaultMessage="Timeout cannot be more than the monitor interval"

defaultMessage="Timeout cannot be greater than the monitor interval"

I updated this to say Timeout must be less than the monitor interval. I thought that was more consistent. Thoughts?

Seems fine to me.

justinkambic · 2021-08-16T14:00:20Z

...ins/uptime/public/components/fleet_package/synthetics_policy_edit_extension_wrapper.test.tsx

@@ -458,7 +519,7 @@ describe('<SyntheticsPolicyEditExtension />', () => {
    const urlError = getByText('URL is required');
    const monitorIntervalError = getByText('Monitor interval is required');
    const maxRedirectsError = getByText('Max redirects must be 0 or greater');
-    const timeoutError = getByText('Timeout must be 0 or greater and less than schedule interval');
+    const timeoutError = getByText('Timeout must be less than 0');


Think this is a typo.

Suggested change

const timeoutError = getByText('Timeout must be less than 0');

const timeoutError = getByText('Timeout must be greater than 0');

justinkambic · 2021-08-16T14:00:38Z

...ins/uptime/public/components/fleet_package/synthetics_policy_edit_extension_wrapper.test.tsx

+    await waitFor(() => {
+      const hostError = getByText('Zip URL is required');
+      const monitorIntervalError = getByText('Monitor interval is required');
+      const timeoutError = getByText('Timeout must be less than 0');


Suggested change

const timeoutError = getByText('Timeout must be less than 0');

const timeoutError = getByText('Timeout must be greater than 0');

justinkambic · 2021-08-16T15:17:50Z

x-pack/plugins/uptime/public/components/fleet_package/browser/simple_fields.tsx

+        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 tab. Displayed in Uptime and enables searching by tag."


Again I'm not a copy expert but I think this conveys the necessary information. cc @andrewvc

Suggested change

defaultMessage="A list of tags that will be sent with the monitor event. Press enter to add a new tab. Displayed in Uptime and enables searching by tag."

defaultMessage="A list of tags to apply to the monitor event. Press enter to add a new tab. Enables searching by tag."

Pulled from documentation https://www.elastic.co/guide/en/beats/heartbeat/current/monitor-options.html

x-pack/plugins/uptime/public/components/fleet_package/browser/source_field.tsx

justinkambic · 2021-08-16T15:30:57Z

x-pack/plugins/uptime/public/components/fleet_package/browser/source_field.tsx

+      ),
+      content: (
+        <EuiFormRow
+          isInvalid={!!config.inlineScript}


You didn't implement a custom AST analyzer? 😉

justinkambic · 2021-08-16T15:37:05Z

x-pack/plugins/uptime/public/components/fleet_package/common/formatters.ts

+  [ConfigKeys.TIMEOUT]: (fields) => secondsToCronFormatter(fields[ConfigKeys.TIMEOUT]),
+};
+
+export const arrayToYamlFormatter = (value: string[] = []) =>


This code doesn't seem like it's directly tested.

That's true. It is covered by functional tests that ultimately test the input of the form to the output of the yaml integration policy, but I'll add tests.

x-pack/plugins/uptime/public/components/fleet_package/custom_fields.test.tsx

…simple_fields.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co>

…source_field.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co>

…ields.test.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co>

…ple_fields.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co>

justinkambic · 2021-08-16T19:34:22Z

This is looking great, I've done another round of smoke testing and it appears to be working fantastically. You've addressed most of the necessary code as well. I have noticed that the false error message I noticed in my earlier review is still happening. Haven't noticed any other blocking issues though.

kibanamachine · 2021-08-16T23:13:28Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`uptime`	566	588	+22

Async chunks

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

id	before	after	diff
`uptime`	954.5KB	982.9KB	+28.4KB

History

💚 Build #145882 succeeded 8fca58f
💔 Build #145859 failed 89c4e41
💔 Build #145848 failed 8bb800a
💔 Build #145796 failed 2692b76
💛 Build #145671 was flaky b04adce

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

justinkambic

LGTM!

…ptions (elastic#102928) * update types * add browser context * update validation * add browser fields to custom fields * add browser simple fields and source field * add browser context to create and edit wrappers * update content * add formatters for formatting javascript values to integration policy yaml * fix policy name bug * adjust tests * adjust types * add normalizers for converting yaml to javascript * update default values * add params field to browser monitors * adjust types, formatters and normalizers to account for browser advanced fields * add browser advanced fields context and components * adjust http and tcp providers * adjust use_update_policy and wrappers * update types * update content * adjust timeout content * adjust zip url content * adjust content * remove unused content * hide monitor options that do not have corresponding data streams from the integration package * Update x-pack/plugins/uptime/public/components/fleet_package/browser/simple_fields.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co> * Update x-pack/plugins/uptime/public/components/fleet_package/browser/source_field.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co> * Update x-pack/plugins/uptime/public/components/fleet_package/custom_fields.test.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co> * Update x-pack/plugins/uptime/public/components/fleet_package/http/simple_fields.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co> * adjust content * adjust validation * adjust tests * adjust normalizers and formatters and add tests * resolves validation error with inline scripts Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Justin Kambic <justin.kambic@elastic.co>

kibanamachine · 2021-08-17T13:51:32Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

…ptions (#102928) (#108911) * update types * add browser context * update validation * add browser fields to custom fields * add browser simple fields and source field * add browser context to create and edit wrappers * update content * add formatters for formatting javascript values to integration policy yaml * fix policy name bug * adjust tests * adjust types * add normalizers for converting yaml to javascript * update default values * add params field to browser monitors * adjust types, formatters and normalizers to account for browser advanced fields * add browser advanced fields context and components * adjust http and tcp providers * adjust use_update_policy and wrappers * update types * update content * adjust timeout content * adjust zip url content * adjust content * remove unused content * hide monitor options that do not have corresponding data streams from the integration package * Update x-pack/plugins/uptime/public/components/fleet_package/browser/simple_fields.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co> * Update x-pack/plugins/uptime/public/components/fleet_package/browser/source_field.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co> * Update x-pack/plugins/uptime/public/components/fleet_package/custom_fields.test.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co> * Update x-pack/plugins/uptime/public/components/fleet_package/http/simple_fields.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co> * adjust content * adjust validation * adjust tests * adjust normalizers and formatters and add tests * resolves validation error with inline scripts Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Justin Kambic <justin.kambic@elastic.co> Co-authored-by: Dominique Clarke <doclarke71@gmail.com> Co-authored-by: Justin Kambic <justin.kambic@elastic.co>

dominiqueclarke added 6 commits June 22, 2021 10:29

update types

4eb60be

add browser context

87e846c

update validation

d693313

add browser fields to custom fields

d3f3754

add browser simple fields and source field

3df2004

add browser context to create and edit wrappers

46714b0

dominiqueclarke added release_note:enhancement enhancement New value added to drive a business result v8.0.0 Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability v7.14.0 auto-backport Deprecated: Automatically backport this PR after it's merged labels Jun 22, 2021

dominiqueclarke requested a review from a team as a code owner June 22, 2021 14:46

dominiqueclarke marked this pull request as draft June 22, 2021 14:46

dominiqueclarke commented Jun 22, 2021

View reviewed changes

update content

26b2a4b

dominiqueclarke marked this pull request as ready for review June 23, 2021 02:18

shahzad31 reviewed Jun 23, 2021

View reviewed changes

justinkambic reviewed Jun 24, 2021

View reviewed changes

Merge branch 'master' into feature/276-synthetics-integration-browser…

b405a88

…-monitors

spalger added v7.15.0 and removed v7.14.0 labels Jun 30, 2021

Merge branch 'master' of github.com:elastic/kibana into feature/276-s…

e84a2c0

…ynthetics-integration-browser-monitors

Merge branch 'master' into feature/276-synthetics-integration-browser…

5c45720

…-monitors

Merge branch 'master' into feature/276-synthetics-integration-browser…

44726a2

…-monitors

dominiqueclarke added 4 commits August 13, 2021 10:22

adjust content

fe5e743

Merge branch 'master' of github.com:elastic/kibana into feature/276-s…

8fee545

…ynthetics-integration-browser-monitors

remove unused content

f27135c

hide monitor options that do not have corresponding data streams from…

4919aba

… the integration package

dominiqueclarke force-pushed the feature/276-synthetics-integration-browser-monitors branch from f158d1c to 4919aba Compare August 13, 2021 19:54

Merge branch 'master' into feature/276-synthetics-integration-browser…

b04adce

…-monitors

justinkambic reviewed Aug 16, 2021

View reviewed changes

dominiqueclarke and others added 7 commits August 16, 2021 12:27

Update x-pack/plugins/uptime/public/components/fleet_package/browser/…

21298d8

…simple_fields.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co>

Update x-pack/plugins/uptime/public/components/fleet_package/browser/…

cca591e

…source_field.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co>

Update x-pack/plugins/uptime/public/components/fleet_package/custom_f…

e6ed20e

…ields.test.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co>

Update x-pack/plugins/uptime/public/components/fleet_package/http/sim…

2692b76

…ple_fields.tsx Co-authored-by: Justin Kambic <justin.kambic@elastic.co>

adjust content

8bb800a

adjust validation

0938dc9

adjust tests

8fca58f

dominiqueclarke force-pushed the feature/276-synthetics-integration-browser-monitors branch from 89c4e41 to 8fca58f Compare August 16, 2021 19:17

dominiqueclarke added 2 commits August 16, 2021 16:38

adjust normalizers and formatters and add tests

f16df68

resolves validation error with inline scripts

a790aef

justinkambic approved these changes Aug 17, 2021

View reviewed changes

dominiqueclarke merged commit 8bfd5e2 into elastic:master Aug 17, 2021

kibanamachine mentioned this pull request Aug 17, 2021

[7.x] [Uptime][Synthetics Integration] Add browser monitors configuration options (#102928) #108911

Merged

dominiqueclarke mentioned this pull request Aug 23, 2021

[Uptime] [Synthetics integration] Add synthetics integration browser type functional tests #109730

Closed

This was referenced Mar 30, 2022

[Request] Add info on all Elastic Synthetics "Advanced Browser options" elastic/observability-docs#1726

Closed

[Request] Add info on Elastic Synthetics "Inline Script" option to quickstart elastic/observability-docs#1727

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Uptime][Synthetics Integration] Add browser monitors configuration options #102928

[Uptime][Synthetics Integration] Add browser monitors configuration options #102928

dominiqueclarke commented Jun 22, 2021 •

edited

elasticmachine commented Jun 22, 2021

dominiqueclarke Jun 22, 2021

justinkambic Aug 16, 2021

shahzad31 Jun 23, 2021

justinkambic Jun 24, 2021

shahzad31 commented Jun 23, 2021

justinkambic left a comment

justinkambic Jun 24, 2021

justinkambic Jun 24, 2021

justinkambic Jun 24, 2021

dominiqueclarke commented Jun 28, 2021

dominiqueclarke commented Jul 27, 2021

dominiqueclarke commented Aug 2, 2021

justinkambic commented Aug 13, 2021

dominiqueclarke commented Aug 16, 2021

justinkambic Aug 16, 2021

justinkambic Aug 16, 2021

justinkambic Aug 16, 2021

dominiqueclarke Aug 16, 2021

justinkambic Aug 16, 2021

justinkambic Aug 16, 2021

justinkambic Aug 16, 2021

justinkambic Aug 16, 2021

dominiqueclarke Aug 16, 2021

justinkambic Aug 16, 2021

justinkambic Aug 16, 2021

dominiqueclarke Aug 16, 2021

justinkambic commented Aug 16, 2021

kibanamachine commented Aug 16, 2021

justinkambic left a comment

kibanamachine commented Aug 17, 2021

	defaultMessage="Timeout must be less than 0"
	defaultMessage="Timeout must be greater than 0"

	defaultMessage="Timeout cannot be more than the monitor interval"
	defaultMessage="Timeout cannot be greater than the monitor interval"

	const timeoutError = getByText('Timeout must be less than 0');
	const timeoutError = getByText('Timeout must be greater than 0');

	defaultMessage="A list of tags that will be sent with the monitor event. Press enter to add a new tab. Displayed in Uptime and enables searching by tag."
	defaultMessage="A list of tags to apply to the monitor event. Press enter to add a new tab. Enables searching by tag."

[Uptime][Synthetics Integration] Add browser monitors configuration options #102928

[Uptime][Synthetics Integration] Add browser monitors configuration options #102928

Conversation

dominiqueclarke commented Jun 22, 2021 • edited

Summary

Checklist

Uptime PR Checklist

elasticmachine commented Jun 22, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shahzad31 commented Jun 23, 2021

justinkambic left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dominiqueclarke commented Jun 28, 2021

dominiqueclarke commented Jul 27, 2021

dominiqueclarke commented Aug 2, 2021

justinkambic commented Aug 13, 2021

dominiqueclarke commented Aug 16, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

justinkambic commented Aug 16, 2021

kibanamachine commented Aug 16, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

justinkambic left a comment

Choose a reason for hiding this comment

kibanamachine commented Aug 17, 2021

💚 Backport successful

dominiqueclarke commented Jun 22, 2021 •

edited