Merge pull request #416 from shorowitz2021/additional-updates

in S4R updated screenshots and text to match updated UI

Author: rcastley

content/en/splunk4rookies/observability-cloud/7-log-observer/4-log-view-chart.md

@@ -22,12 +22,11 @@ As with the previous Log Timeline chart, we will add a version of this chart to
 * Ensure **Log View** is selected as the **Chart Type**.
   ![log view](../images/log-view.png?classes=left&width=30vw)
 * To see your dashboard click {{% button style="blue" %}}Save and go to dashboard{{% /button %}}.
-* The result should be similar to the dashboard below:
+* The result should be similar to the dashboard below: 
   ![Custom Dashboard](../images/log-observer-custom-dashboard.png)
 * As the last step in this exercise, let us add your dashboard to your workshop team page, this will make it easy to find later in the workshop.
-* At the top of the page, click on the ***...*** to the left of your dashboard name.
-  ![linking](../images/linking.png)
-* Select **Link to teams** from the drop-down.
+* At the top of the page, click on the vertical 3 dots menu **⋮** on the top right, select **Dashboard Group Actions** > **Link to teams**.
+  ![linking](../images/linking.png) 
 * In the following **Link to teams** dialog box, find the Workshop team that your instructor will have provided for you and click {{% button style="blue" %}}Done{{% /button %}}.
 
 {{% /notice %}}

content/en/splunk4rookies/observability-cloud/7-log-observer/images/linking-old.png

@@ -8,7 +8,6 @@ In Splunk Observability Cloud from the main menu, click on **Synthetics**. Click
 During our investigation in the RUM section, we found there was an issue with the **Place Order** Transaction. Let's see if we can confirm this from the Synthetics test as well. We will be using the metric **First byte time** for the 4th page of the test, which is the **Place Order** step.
 
 {{% notice title="Exercise" style="green" icon="running" %}}
-
 * In the **Search** box enter **[WORKSHOP NAME]** and select the test for your workshop (your instructor will advise as to which one to select).
 * Under **Performance KPIs** set the Time Picker to **Last 1 hour** and hit enter.
 * Click on **Location** and from the drop-down select **Page**. The next filter will be populated with the pages that are part of the test.

content/en/splunk4rookies/observability-cloud/7-log-observer/images/linking.png

@@ -12,24 +12,24 @@ The screenshot below doesn't contain a red banner with an error in it however yo
 {{% /notice %}}
 
 ![waterfall](../images/synth-waterfall.png)
-
-1. **Filmstrip:** Offers a set of screenshots of site performance so that you can see how the page responds in real-time.
-2. **Video:** This lets you see exactly what a user trying to load your site from the location and device of a particular test run would experience.
-3. **Browser test metrics:**  A View that offers you a picture of website performance.
-4. **Synthetic transactions:**  List of the Synthetic transactions that made up the interaction with the site
-5. **Waterfall chart**  The waterfall chart is a visual representation of the interaction between the test runner and the site being tested.
+1. **Filter:** Focus in on specific parts of your test; filters the filmstrip, video, and waterfall. 
+2. **Filmstrip:** Offers a set of screenshots of site performance so that you can see how the page responds in real-time.
+3. **Waterfall chart:**  The waterfall chart is a visual representation of the interaction between the test runner and the site being tested.
+4. **Video:** This lets you see exactly what a user trying to load your site from the location and device of a particular test run would experience.
+5. **Browser test metrics:**  A view that offers you a picture of website performance.
 
 By default, Splunk Synthetics provides screenshots and video capture of the test. This is useful for debugging issues. You can see, for example, the slow loading of large images, the slow rendering of a page etc.
 
 {{% notice title="Exercise" style="green" icon="running" %}}
 
+
 * Use your mouse to scroll left and right through the filmstrip to see how the site was being rendered during the test run.
-* In the Video pane, press on the play button **▶** to see the test playback. If you click the ellipses **⋮** you can change the *playback speed*, view it *Picture in Picture* and even *Download* the video.
-* In the Synthetic Transaction pane, under the header *Business Transactions*, click on the first button {{% button style="blue" %}}**Home**{{% /button %}}
+* In the Video pane, press on the play button **▶** to see the test playback. If you click the vertical three dots **⋮** you can change the *playback speed*, view it *Picture in Picture* and even *Download* the video.
+* Using the filter above the filmstrip, under the header *Synthetic Transactions*, click on **Home**
 * The waterfall below will show all the objects that make up the page. The first line is the HTML page itself. The next lines are the objects that make up the page (HTML, CSS, JavaScript, Images, Fonts, etc.).
 * In the waterfall find the line **GET** *splunk-otel-web.js*.
 * Click on the **>** button to open the metadata section to see the Request/Response Header information.
-* In the Synthetic Transaction pane, click on the second Business Transaction {{% button style="blue" %}}**Shop**{{% /button %}}. Note that the filmstrip adjusts and moves to the beginning of the new transaction.
-* Repeat this for all the other Transactions, then finally select the{{% button style="blue" %}}**PlaceOrder**{{% /button %}} transaction.
+* In the filter, switch to the second Synthetic Transaction **Shop**. Note that the filmstrip and video adjust and move to the beginning of the new transaction.
+* Repeat this for all the other Transactions, then finally select the **PlaceOrder** transaction.
 
 {{% /notice %}}

content/en/splunk4rookies/observability-cloud/7-log-observer/images/log-observer-custom-dashboard-old.png

@@ -14,8 +14,8 @@ Given you can run these tests 24/7, it is an ideal tool to get warned early if y
 * Select the workshop test again and click the {{% button %}}**Create Detector**{{% /button %}} button at the top of the page.
 
   ![synth detector](../images/synth-detector.png)
-* Edit the text **New Synthetics Detector** (**1**) and replace it with `INITIALS -` [WORKSHOPNAME]`.
-* Ensure that {{% button %}}Run duration{{% /button %}} and {{% button %}}Static threshold{{% /button %}} are selected.
+* Edit the text **New Synthetics Detector** (**1**) and replace it with `INITIALS - [WORKSHOPNAME]`.
+* Change the alert criteria so that the metric is Run Duration (instead of Uptime) and the condition is Static Threshold.
 * Set the **Trigger threshold** (**2**) to be around `65,000` to `68,000` and hit enter to update the chart.  Make sure you have more than one spike cutting through the threshold line as shown above (you may have to adjust the threshold value a bit to match your actual latency).
 * Leave the rest as default.
 * Note that there is now a row of red and white triangles appearing below the spikes (**3**). The red triangles let you know that your detector found that your test was above the given threshold & the white triangle indicates that the result returned below the threshold. Each red triangle will trigger an alert.