Skip to content

Commit 60bc456

Browse files
committed
add use synthetics UI
1 parent 99057f7 commit 60bc456

File tree

4 files changed

+122
-12
lines changed

4 files changed

+122
-12
lines changed

raw-migrated-files/docs-content/serverless/observability-synthetics-create-test.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ step('make an API request', async () => {
208208

209209
The Elastic Synthetics `request` parameter is similar to [other request objects that are exposed by Playwright](https://playwright.dev/docs/api/class-apirequestcontext) with a few key differences:
210210

211-
* The Elastic Synthetics `request` parameter comes built into the library so it doesn’t have to be imported separately, which reduces the amount of code needed and allows you to make API requests in [inline journeys](../../../solutions/observability/apps/create-monitors-in-synthetics-app.md#observability-synthetics-get-started-ui-add-a-browser-monitor).
211+
* The Elastic Synthetics `request` parameter comes built into the library so it doesn’t have to be imported separately, which reduces the amount of code needed and allows you to make API requests in [inline journeys](../../../solutions/observability/apps/create-monitors-in-synthetics-app.md#synthetics-get-started-ui-add-a-browser-monitor).
212212
* The top level `request` object exposed by Elastic Synthetics has its own isolated cookie storage unlike Playwright’s `context.request` and `page.request`, which share cookie storage with the corresponding [`BrowserContext`](https://playwright.dev/docs/api/class-browsercontext).
213213
* If you want to control the creation of the `request` object, you can do so by passing options via [`--playwright-options`](../../../solutions/observability/apps/use-synthetics-cli.md#elastic-synthetics-command) or in the [`synthetics.config.ts` file](../../../solutions/observability/apps/configure-synthetics-projects.md).
214214

raw-migrated-files/observability-docs/observability/synthetics-command-reference.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ If the journey contains external NPM packages other than the `@elastic/synthetic
137137
`--auth <string>`
138138
: API key used for [{{kib}} authentication](../../../deploy-manage/api-keys/elasticsearch-api-keys.md). You can also set the API key via the `SYNTHETICS_API_KEY` environment variable.
139139

140-
If you are pushing to a [{{private-location}}](../../../solutions/observability/apps/create-monitors-in-synthetics-app.md#private-locations), you must use an API key generated in 8.4 or higher.
140+
If you are pushing to a [{{private-location}}](../../../solutions/observability/apps/create-monitors-in-synthetics-app.md), you must use an API key generated in 8.4 or higher.
141141

142142
To create an API key, you must be logged into {{kib}} as a user with the privileges described in [Writer role](../../../solutions/observability/apps/writer-role.md).
143143

raw-migrated-files/observability-docs/observability/synthetics-create-test.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ step('make an API request', async () => {
209209

210210
The Elastic Synthetics `request` parameter is similar to [other request objects that are exposed by Playwright](https://playwright.dev/docs/api/class-apirequestcontext) with a few key differences:
211211

212-
* The Elastic Synthetics `request` parameter comes built into the library so it doesn’t have to be imported separately, which reduces the amount of code needed and allows you to make API requests in [inline journeys](../../../solutions/observability/apps/create-monitors-in-synthetics-app.md#synthetics-get-started-ui-browser).
212+
* The Elastic Synthetics `request` parameter comes built into the library so it doesn’t have to be imported separately, which reduces the amount of code needed and allows you to make API requests in [inline journeys](../../../solutions/observability/apps/create-monitors-in-synthetics-app.md#synthetics-get-started-ui-add-a-browser-monitor).
213213
* The top level `request` object exposed by Elastic Synthetics has its own isolated cookie storage unlike Playwright’s `context.request` and `page.request`, which share cookie storage with the corresponding [`BrowserContext`](https://playwright.dev/docs/api/class-browsercontext).
214214
* If you want to control the creation of the `request` object, you can do so by passing options via [`--playwright-options`](../../../solutions/observability/apps/use-synthetics-cli.md#elastic-synthetics-command) or in the [`synthetics.config.ts` file](../../../solutions/observability/apps/configure-synthetics-projects.md).
215215

solutions/observability/apps/create-monitors-in-synthetics-app.md

Lines changed: 119 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,131 @@
22
mapped_urls:
33
- https://www.elastic.co/guide/en/observability/current/synthetics-get-started-ui.html
44
- https://www.elastic.co/guide/en/serverless/current/observability-synthetics-get-started-ui.html
5+
6+
navigation_title: "Use the Synthetics UI"
57
---
68

7-
# Create monitors in the Synthetics app
9+
# Create monitors in the Synthetics UI [synthetics-get-started-ui]
10+
11+
You can create synthetic monitors directly in the UI by opening an Observability project and navigating to **Synthetics**.
12+
13+
:::{image} ../../../images/observability-synthetics-get-started-ui.png
14+
:alt: Diagram showing which pieces of software are used to configure monitors
15+
:::
16+
17+
This is one of [two approaches](../../../solutions/observability/apps/get-started.md) you can use to set up a synthetic monitor.
18+
19+
20+
## Prerequisites [synthetics-get-started-ui-prerequisites]
21+
22+
### Serverless projects
23+
For serverless Observability projects, you must be signed in as a user with [Editor](../../../solutions/observability/apps/grant-users-access-to-secured-resources.md) access.
24+
25+
### Elastic Stack deployments
26+
For Elastic Stack deployments, you must be signed into {{kib}} as a user with at least [synthetics write permissions](../../../solutions/observability/apps/writer-role.md), and Monitor Management must be enabled by an administrator as described in [Setup role](../../../solutions/observability/apps/setup-role.md).
27+
28+
You should decide where you want to run the monitors before getting started. You can run monitors on one or both of the following:
29+
30+
* **Elastic’s global managed testing infrastructure**: With Elastic’s global managed testing infrastructure, you can create and run monitors in multiple locations without having to manage your own infrastructure. Elastic takes care of software updates and capacity planning for you.
31+
* **{{private-location}}s**: {{private-location}}s allow you to run monitors from your own premises. To use {{private-location}}s you must create a {{private-location}} before continuing. For step-by-step instructions, refer to [Monitor resources on private networks](../../../solutions/observability/apps/monitor-resources-on-private-networks.md).
32+
33+
Executing synthetic tests on Elastic’s global managed testing infrastructure incurs an additional charge. Tests are charged under one of two new billing dimensions depending on the monitor type. For *browser monitor* usage, there is a fee per test run. For *lightweight monitor* usage, there is a fee per region in which you run any monitors regardless of the number of test runs. For more details, refer to the [{{obs-serverless}} pricing page](https://www.elastic.co/pricing/serverless-observability).
34+
35+
36+
## Add a lightweight monitor [synthetics-get-started-ui-add-a-lightweight-monitor]
37+
38+
To use the UI to add a lightweight monitor:
39+
40+
1. Find `Synthetics` in the [global search field](/explore-analyze/find-and-organize/find-apps-and-objects.md).
41+
2. Click **Create monitor**.
42+
3. Set the monitor type to **HTTP Ping**, **TCP Ping**, or **ICMP Ping**.
43+
4. In *Locations*, select one or more locations.
44+
45+
::::{note}
46+
If you don’t see any locations listed, refer to the [troubleshooting guide](../../../troubleshoot/observability/troubleshooting-synthetics.md#synthetics-troubleshooting-no-locations) for guidance.
47+
48+
::::
49+
50+
51+
:::::{note}
52+
If you’ve [added a {{private-location}}](../../../solutions/observability/apps/monitor-resources-on-private-networks.md), you’ll see your the {{private-location}} in the list of *Locations*.
53+
54+
:::{image} ../../../images/serverless-private-locations-monitor-locations.png
55+
:alt: Screenshot of Monitor locations options including a {private-location}
56+
:class: screenshot
57+
:::
58+
59+
:::::
60+
61+
5. Set the *Frequency*, and configure the monitor as needed.
62+
6. Click **Advanced options** to see more ways to configure your monitor.
63+
7. (Optional) Click **Run test** to verify that the test is valid.
64+
8. Click **Create monitor**.
65+
66+
:::{image} ../../../images/observability-synthetics-get-started-ui-lightweight.png
67+
:alt: Synthetics Create monitor UI
68+
:class: screenshot
69+
:::
70+
71+
72+
73+
## Add a browser monitor [synthetics-get-started-ui-add-a-browser-monitor]
74+
75+
You can also create a browser monitor in the UI using an **Inline script**.
76+
77+
An inline script contains a single journey that you manage individually. Inline scripts can be quick to set up, but can also be more difficult to manage. Each browser monitor configured using an inline script can contain only *one* journey, which must be maintained directly in the UI.
78+
79+
If you depend on external packages, have your journeys next to your code repository, or want to embed and manage more than one journey from a single monitor configuration, use a [Synthetics project](../../../solutions/observability/apps/create-monitors-with-project-monitors.md) instead.
80+
81+
To use the UI to add a browser monitor:
82+
83+
1. Click **Create monitor**.
84+
2. Set the monitor type to **Multistep**.
85+
3. In *Locations*, select one or more locations.
86+
87+
::::{note}
88+
If you don’t see any locations listed, refer to the [troubleshooting guide](../../../troubleshoot/observability/troubleshooting-synthetics.md#synthetics-troubleshooting-no-locations) for guidance.
89+
90+
::::
91+
92+
4. Set the *Frequency*.
93+
5. Add steps to the **Script editor** code block directly. The `journey` keyword isn’t required, and variables like `page` and `params` will be part of your script’s scope. You cannot `import` any dependencies when using inline browser monitors.
94+
95+
:::{image} ../../../images/observability-synthetics-ui-inline-script.png
96+
:alt: Configure a synthetic monitor using an inline script in Elastic {{fleet}}
97+
:class: screenshot
98+
:::
99+
100+
::::{note}
101+
Alternatively, you can use the **Script recorder** option. You can use the Elastic Synthetics Recorder to interact with a web page, export journey code that reflects all the actions you took, and upload the results in the UI. For more information, refer to [Use the Synthetics Recorder](../../../solutions/observability/apps/use-synthetics-recorder.md).
102+
103+
::::
104+
105+
6. Click **Advanced options** to see more ways to configure your monitor.
106+
107+
* Use **Data options** to add context to the data coming from your monitors.
108+
* Use the **Synthetics agent options** to provide fine-tuned configuration for the synthetics agent. Read more about available options in [Use the Synthetics CLI](../../../solutions/observability/apps/use-synthetics-cli.md).
109+
110+
7. (Optional) Click **Run test** to verify that the test is valid.
111+
8. Click **Create monitor**.
112+
113+
114+
## View in your Observability project [synthetics-get-started-ui-view-in-your-observability-project]
115+
116+
Navigate to **Synthetics**, where you can see screenshots of each run, set up alerts in case of test failures, and more.
8117

9-
% What needs to be done: Align serverless/stateful
118+
If a test does fail (shown as `down` in the Synthetics UI), you’ll be able to view the step script that failed, any errors, and a stack trace. For more information, refer to [Analyze data from synthetic monitors](../../../solutions/observability/apps/analyze-data-from-synthetic-monitors.md#synthetics-analyze-journeys).
10119

11-
% Use migrated content from existing pages that map to this page:
120+
::::{note}
121+
When a monitor is created or updated, the first run might not occur immediately, but the time it takes for the first run to occur will be less than the monitor’s configured frequency. For example, if you create a monitor and configure it to run every 10 minutes, the first run will occur within 10 minutes of being created. After the first run, the monitor will begin running regularly based on the configured frequency. You can run a manual test if you want to see the results more quickly.
12122

13-
% - [ ] ./raw-migrated-files/observability-docs/observability/synthetics-get-started-ui.md
14-
% - [ ] ./raw-migrated-files/docs-content/serverless/observability-synthetics-get-started-ui.md
123+
::::
15124

16-
% Internal links rely on the following IDs being on this page (e.g. as a heading ID, paragraph ID, etc):
17125

18-
$$$observability-synthetics-get-started-ui-add-a-browser-monitor$$$
126+
## Next steps [synthetics-get-started-ui-next-steps]
19127

20-
$$$private-locations$$$
128+
Learn more about:
21129

22-
$$$synthetics-get-started-ui-browser$$$
130+
* [Writing user journeys](../../../solutions/observability/apps/write-synthetic-test.md) to use as inline scripts
131+
* Using the [Synthetics Recorder](../../../solutions/observability/apps/use-synthetics-recorder.md)
132+
* [Configuring lightweight monitors](../../../solutions/observability/apps/configure-lightweight-monitors.md)

0 commit comments

Comments
 (0)