[Uptime] [Synthetics Integration] browser - add script recorder option #115184

dominiqueclarke · 2021-10-15T13:06:56Z

Summary

Adds the option to import scripts generated by the Elastic Synthetics Recorder.

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.

Stop all instances of elasticsearch or kibana
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

Start your local kibana instance using env BUILD_TS_REFS_DISABLE=true yarn kbn bootstrap && yarn start
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
Run elastic-package stack up -d -v --services "elasticsearch" --version 8.0.0-SNAPSHOT.
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" } '
Allow your local kibana to start up
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.
Run elastic-package stack up --version 8.0.0-SNAPSHOT -v --services "package-registry,kibana,elastic-agent,fleet-server" 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.
Navigate to your local instance of kibana at http://localhost:5602

Testing happy path

Navigate to the synthetics integration at fleet/integrations/synthetics-0.3.1/add-integration
Add a policy name, then select the browser type from the dropdown
Select the "Script recorder" tab.
Upload an inline script file. This should be a synthetics script starting with step. There are a few you can use in the synthetics repo in the examples/inline directory if you have it pulled down, or you can use the script recorder to actually create a script.
Save the integration and navigate to Uptime
Verify that the journey was ran

Testing invalid file

Navigate to the synthetics integration at fleet/integrations/synthetics-0.3.1/add-integration
Add a policy name, then select the browser type from the dropdown
Select the "Script recorder" tab.
Upload anything besides a javascript file. Observe the error.

Testing non inline journey

Navigate to the synthetics integration at fleet/integrations/synthetics-0.3.1/add-integration
Add a policy name, then select the browser type from the dropdown
Select the "Script recorder" tab.
Upload a .js file that does not start with step and is therefore not an inline journey. Observe the error.

…ptime-synthetics-integration-browser-add-script-recorder-option

…browser-add-script-recorder-option

…cript-recorder-option' of https://github.com/dominiqueclarke/kibana into feature/366-uptime-synthetics-integration-browser-add-script-recorder-option

elasticmachine · 2021-10-15T13:36:41Z

Pinging @elastic/uptime (Team:uptime)

…ptime-synthetics-integration-browser-add-script-recorder-option

dominiqueclarke · 2021-10-18T12:31:34Z

@elasticmachine merge upstream

…browser-add-script-recorder-option

dominiqueclarke · 2021-10-18T17:27:46Z

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

+    }
+  };
+
+  // @ts-expect-error update types


I don't remember why I added this. I'll remove it because I don't think it's necessary. If it is, I'll add a comment.

You're referring to the @ts-expect-error?

justinkambic · 2021-10-18T19:57:17Z

One thing that is strangely happening for me when using the integration is the appearance of supported TLS protocols for a ZIP URL, when I'm trying to configure a monitor with the Script Recorder option.

justinkambic

Had a few comments but overall looks great. Let's get this merged ASAP.

justinkambic · 2021-10-18T21:04:40Z

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

+  const [showScript, setShowScript] = useState(false);
+  const { isEditable } = usePolicyConfigContext();
+
+  const handleUpload = useCallback(


Why not call the hook at the parent level?

By parent level, you mean in the SourceFields component where ScriptRecorderFields is rendered?

I suppose the reason I have it here is separation of concerns/domain. Uploading is only relevant to the ScriptRecorderFields, not the rest of the options in SourceFields, like zip url or inline.

Does that answer your question? I'm uncertain if I understood fully.

Sure that's fine, just wanted to make sure we had a reason for not simply wrapping the callback where it's declared vs. after it's been passed as a prop. Looking at the callback we declare to pass here, I don't see any problem with leaving it as it is.

justinkambic · 2021-10-18T21:07:26Z

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

+        <EuiFlyout
+          ownFocus
+          onClose={() => setShowScript(false)}
+          aria-labelledby="syntheticsBrowerScriptBlockHeader"


justinkambic · 2021-10-18T21:12:47Z

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

+  );
+}
+
+const MOCK_FILE_NAME = i18n.translate(


Suggested change

const MOCK_FILE_NAME = i18n.translate(

const PLACEHOLDER_FILE_NAME = i18n.translate(

For clarity's sake can we rename this to avoid overloading the term MOCK?

justinkambic · 2021-10-18T23:45:19Z

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

+
+export function Uploader({ onUpload }: Props) {
+  const fileReader = useRef<null | FileReader>(null);
+  const [error, setError] = useState<string | null>('');


Suggested change

const [error, setError] = useState<string | null>('');

const [error, setError] = useState<string | null>(null);

Any reason why not?

justinkambic · 2021-10-18T23:48:06Z

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

+      const parsedContent = `${content}`;
+
+      if (content?.trim().slice(0, 4) !== 'step') {
+        throw new Error('inline scripts must begin with the keyword "step"');


Suggested change

throw new Error('inline scripts must begin with the keyword "step"');

throw new Error('Inline scripts must begin with the keyword "step"');

justinkambic · 2021-10-18T23:50:00Z

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

+      const parsedContent = `${content}`;
+
+      if (content?.trim().slice(0, 4) !== 'step') {
+        throw new Error('inline scripts must begin with the keyword "step"');


Since we're only handling this error I think we don't need to throw it in the first place. Would be faster to use a conditional block, if I'm understanding this ok.

justinkambic · 2021-10-18T23:50:27Z

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

+    }
+  };
+
+  // @ts-expect-error update types


You're referring to the @ts-expect-error?

justinkambic · 2021-10-19T01:56:53Z

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

+  };
+
+  return (
+    <>


Suggested change

<>

Remove.

…ptime-synthetics-integration-browser-add-script-recorder-option

justinkambic

Checked that the TLS protocol issue was fixed, and feedback implementation seems fine.

LGTM WFG.

dominiqueclarke · 2021-10-19T17:37:29Z

@elasticmachine merge upstream

…browser-add-script-recorder-option

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

drewpost · 2021-10-19T19:14:51Z

All looks good to me. Ship it.

…cript-recorder-option' of https://github.com/dominiqueclarke/kibana into feature/366-uptime-synthetics-integration-browser-add-script-recorder-option

dominiqueclarke · 2021-10-19T23:06:58Z

@elasticmachine merge upstream

…browser-add-script-recorder-option

dominiqueclarke · 2021-10-20T01:59:57Z

@elasticmachine merge upstream

…browser-add-script-recorder-option

kibanamachine · 2021-10-20T04:10:08Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`uptime`	666	669	+3

Async chunks

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

id	before	after	diff
`uptime`	573.2KB	578.5KB	+5.2KB

History

💔 Build #163031 failed ab6da96
💔 Build #162944 failed 4fdf075
💛 Build #162866 was flaky 7ec019a
💔 Build #162721 failed 5e1730b
💔 Build #162663 failed 71d8980

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

elastic#115184) * Add script recorder tab for browser based monitors * implement policy edit flow for script recorder * add tests and translations * adjust types * update metadata key and add test * merge master * adjust usePolicy and source_field * revert merge master * adjust types * use reusable hook * update zip url tls default fields * rename content constant * adjust error handling and remove ts-ignore * adjust error default value * remove unnecessary fragment * adjust types * update tech preview content Co-authored-by: Kibana Machine <[email protected]>

kibanamachine · 2021-10-20T04:16:22Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

#115184) (#115698) * Add script recorder tab for browser based monitors * implement policy edit flow for script recorder * add tests and translations * adjust types * update metadata key and add test * merge master * adjust usePolicy and source_field * revert merge master * adjust types * use reusable hook * update zip url tls default fields * rename content constant * adjust error handling and remove ts-ignore * adjust error default value * remove unnecessary fragment * adjust types * update tech preview content Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Dominique Clarke <[email protected]>

dominiqueclarke and others added 15 commits October 4, 2021 21:38

Add script recorder tab for browser based monitors

2880878

implement policy edit flow for script recorder

e0be3fb

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

40f1582

…ptime-synthetics-integration-browser-add-script-recorder-option

add tests and translations

d1f5640

adjust types

15ed67c

Merge branch 'master' into feature/366-uptime-synthetics-integration-…

ebf7fc0

…browser-add-script-recorder-option

Merge branch 'master' into feature/366-uptime-synthetics-integration-…

a919046

…browser-add-script-recorder-option

Merge branch 'master' into feature/366-uptime-synthetics-integration-…

556197d

…browser-add-script-recorder-option

update metadata key and add test

ec5182f

Merge branch 'feature/366-uptime-synthetics-integration-browser-add-s…

878d847

…cript-recorder-option' of https://github.com/dominiqueclarke/kibana into feature/366-uptime-synthetics-integration-browser-add-script-recorder-option

merge master

e279b0f

adjust usePolicy and source_field

b6aa047

revert merge master

5baa93c

merge master

5e54444

adjust types

424f4be

dominiqueclarke added auto-backport Deprecated - use backport:version if exact versions are needed enhancement New value added to drive a business result release_note:enhancement Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability v7.16.0 v8.0.0 labels Oct 15, 2021

dominiqueclarke marked this pull request as ready for review October 15, 2021 13:36

dominiqueclarke requested a review from a team as a code owner October 15, 2021 13:36

use reusable hook

e2ccf3a

dominiqueclarke force-pushed the feature/366-uptime-synthetics-integration-browser-add-script-recorder-option branch from 5ed2368 to e2ccf3a Compare October 15, 2021 14:44

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

7e00efe

…ptime-synthetics-integration-browser-add-script-recorder-option

dominiqueclarke changed the title ~~Feature/366 uptime synthetics integration browser add script recorder option~~ [Uptime] [Synthetics Integration] browser - add script recorder option Oct 15, 2021

Merge branch 'master' into feature/366-uptime-synthetics-integration-…

076e76b

…browser-add-script-recorder-option

dominiqueclarke commented Oct 18, 2021

View reviewed changes

justinkambic reviewed Oct 19, 2021

View reviewed changes

dominiqueclarke added 7 commits October 19, 2021 08:29

update zip url tls default fields

8d2b7a2

rename content constant

cba8915

adjust error handling and remove ts-ignore

1818143

adjust error default value

5b71bf7

remove unnecessary fragment

71d8980

adjust types

8f36291

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

5e1730b

…ptime-synthetics-integration-browser-add-script-recorder-option

justinkambic approved these changes Oct 19, 2021

View reviewed changes

Merge branch 'master' into feature/366-uptime-synthetics-integration-…

7ec019a

…browser-add-script-recorder-option

drewpost reviewed Oct 19, 2021

View reviewed changes

x-pack/plugins/uptime/public/components/fleet_package/browser/source_field.tsx Outdated Show resolved Hide resolved

x-pack/plugins/uptime/public/components/fleet_package/browser/source_field.tsx Outdated Show resolved Hide resolved

dominiqueclarke added 2 commits October 19, 2021 16:29

update tech preview content

0b4e87c

Merge branch 'feature/366-uptime-synthetics-integration-browser-add-s…

4fdf075

…cript-recorder-option' of https://github.com/dominiqueclarke/kibana into feature/366-uptime-synthetics-integration-browser-add-script-recorder-option

Merge branch 'master' into feature/366-uptime-synthetics-integration-…

ab6da96

…browser-add-script-recorder-option

Merge branch 'master' into feature/366-uptime-synthetics-integration-…

c1c4b11

…browser-add-script-recorder-option

dominiqueclarke merged commit 7800367 into elastic:master Oct 20, 2021

dominiqueclarke deleted the feature/366-uptime-synthetics-integration-browser-add-script-recorder-option branch October 20, 2021 04:13

kibanamachine mentioned this pull request Oct 20, 2021

[7.x] [Uptime] [Synthetics Integration] browser - add script recorder option (#115184) #115698

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Uptime] [Synthetics Integration] browser - add script recorder option #115184

[Uptime] [Synthetics Integration] browser - add script recorder option #115184

dominiqueclarke commented Oct 15, 2021 •

edited

Loading

elasticmachine commented Oct 15, 2021

dominiqueclarke commented Oct 18, 2021

dominiqueclarke Oct 18, 2021

justinkambic Oct 18, 2021

justinkambic commented Oct 18, 2021

justinkambic left a comment

justinkambic Oct 18, 2021

dominiqueclarke Oct 19, 2021

justinkambic Oct 19, 2021

justinkambic Oct 18, 2021

justinkambic Oct 18, 2021

justinkambic Oct 18, 2021

justinkambic Oct 18, 2021

justinkambic Oct 18, 2021

justinkambic Oct 18, 2021

justinkambic Oct 19, 2021

justinkambic left a comment

dominiqueclarke commented Oct 19, 2021

drewpost commented Oct 19, 2021

dominiqueclarke commented Oct 19, 2021

dominiqueclarke commented Oct 20, 2021

kibanamachine commented Oct 20, 2021

kibanamachine commented Oct 20, 2021

	const MOCK_FILE_NAME = i18n.translate(
	const PLACEHOLDER_FILE_NAME = i18n.translate(

	const [error, setError] = useState<string \| null>('');
	const [error, setError] = useState<string \| null>(null);

	throw new Error('inline scripts must begin with the keyword "step"');
	throw new Error('Inline scripts must begin with the keyword "step"');

[Uptime] [Synthetics Integration] browser - add script recorder option #115184

[Uptime] [Synthetics Integration] browser - add script recorder option #115184

Conversation

dominiqueclarke commented Oct 15, 2021 • edited Loading

Summary

elasticmachine commented Oct 15, 2021

dominiqueclarke commented Oct 18, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

justinkambic commented Oct 18, 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

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 left a comment

Choose a reason for hiding this comment

dominiqueclarke commented Oct 19, 2021

drewpost commented Oct 19, 2021

dominiqueclarke commented Oct 19, 2021

dominiqueclarke commented Oct 20, 2021

kibanamachine commented Oct 20, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

kibanamachine commented Oct 20, 2021

💚 Backport successful

dominiqueclarke commented Oct 15, 2021 •

edited

Loading