[DOCS] Management: Updated Watcher docs to show new buttons (#20446) (#…

…20584)

docs/management/watcher-ui/create-advanced-watch.asciidoc

@@ -4,17 +4,15 @@
 Advanced watches are for people who are more familiar with Elasticsearch query syntax and the watcher framework overall. The creation UI is more closely aligned with using the REST apis directly. For 
 more information, see {ref}/query-dsl.html[Query DSL].
 
-To create a new advanced watch:
+To create an advanced watch:
 
-. Select the `Create new watch` button
-image:management/watcher-ui/images/advanced-watch/advanced-watch-select.png["Create a Watch",link="management/watcher-ui/images/advanced-watch/advanced-watch-select.png"]
-
-. Select `Advanced Watch`
+* Click the *Create advanced watch* button.
 
 ==== Advanced Watch UI
 
 This screen lets you define the core properties of an advanced watch.
 
+[role="screenshot"]
 image:management/watcher-ui/images/advanced-watch/advanced-watch-create.png["Create Advanced Watch",link="management/watcher-ui/images/advanced-watch/advanced-watch-create.png"]
 
 The `ID` refers to the identifier used by Elasticsearch, whereas `Name` is the more user-friendly way to identify the watch. Refer to the 
@@ -24,6 +22,7 @@ for the Watch JSON.
 [float]
 === Simulate
 
+[role="screenshot"]
 image:management/watcher-ui/images/advanced-watch/advanced-watch-simulate.png["Simulate Advanced Watch",link="management/watcher-ui/images/advanced-watch/advanced-watch-simulate.png"]
 
 This screen allows you to override parts of the watch and then run a simulation of it.
@@ -40,6 +39,7 @@ Some implementation details on overrides:
 
 After starting the simulation, the UI will show a results screen.
 
+[role="screenshot"]
 image:management/watcher-ui/images/advanced-watch/advanced-watch-simulated.png["Simulated Advanced Watch",link="management/watcher-ui/images/advanced-watch/advanced-watch-simulated.png"]
 
 The possible simulation statuses for watches are:

docs/management/watcher-ui/create-threshold-alert.asciidoc

@@ -3,34 +3,29 @@
 
 You can create a threshold alert to periodically check when your data goes above or below a certain threshold within a given time interval. It's one of the most common type of alerts that you can create using Watcher. For more advanced watches, see the <<watcher-create-advanced-watch>>.
 
-To create a new threshold alert:
+To create a threshold alert:
 
-. Select the `Create new watch` button
-image:management/watcher-ui/images/create-watch-select.png["Create a Watch",link="management/watcher-ui/images/create-watch-select.png"]
-
-. Select `Threshold Alert`
-
-Next, let's look at the UI and how to use it.
+* Click the *Create threshold alert* button.
 
 ==== Inputs & Triggers
 
-To create a threshold alert, you need to first configure the inputs and triggers.
+You must first configure the inputs and triggers.
 
 . Add a `name` for the alert.
 . Choose one or more indices that have a time-based field as the alert input.
 . Configure a trigger interval.
-
++
+[role="screenshot"]
 image:management/watcher-ui/images/threshold-alert/create-threshold-alert-created.png["Created Threshold Alert",link="management/watcher-ui/images/threshold-alert/create-threshold-alert-created.png"]
 
-Next, you will be able to specify the conditions to trigger the alert.
-
 ==== Condition
 
 Here, you can configure the condition that will cause alert to trigger. The UI is interactive and selecting the various elements within the expression will display a UI to change the values.
 
+[role="screenshot"]
 image:management/watcher-ui/images/threshold-alert/threshold-alert-aggType.png["Threshold Alert Agg Type",link="management/watcher-ui/images/threshold-alert/threshold-alert-aggType.png"]
 
-Let's look at a few examples of common alerts based on x-pack monitoring data:
+Here are a few examples of common alerts based on x-pack monitoring data:
 
 * High heap usage:
 image:management/watcher-ui/images/threshold-alert/high-heap-usage.png["Threshold Alert Example High Heap Usage",link="management/watcher-ui/images/threshold-alert/high-heap-usage.png"]

docs/management/watcher-ui/getting-started.asciidoc

@@ -10,8 +10,9 @@ To access {watcher} UI within {kib}:
 locally, go to `http://localhost:5601/`.
 
 . Click **Management** in the side navigation, then select **Watcher** under `Elasticsearch`.
-
-image::management/watcher-ui/images/watches.png["Watch list",link="management/watcher-ui/images/watches.png"]
++
+[role="screenshot"]
+image::images/management-watcher-buttons.png["Watch list",link="management/watcher-ui/images/watches.png"]
 
 The watch list page within {watcher} UI enables you to view all existing watches including stateful information about each watch. This includes `State`, `Last Fired` and `Last Triggered`.