[Serverless][8.16] New notes experience - Impacted screenshots and mi…

…sc updates (#6072)

* Re-adds images

* Adds notes to landing page for investigative tools

* Fix Serverless TOC

* Fixes threat intel images

* Adds size configs

* fixes file name

* Minor tweaks

docs/detections/alerts-view-details.asciidoc

@@ -52,7 +52,7 @@ IMPORTANT: If you've enabled grouping on the Alerts page, the alert details flyo
 [[preview-panel]]
 === Preview panel 
 
-Some areas in the flyout provide previews when you click on them. For example, clicking **Show rule summary** in the rule description displays a preview of the rule's details. To close the preview, click **x**. 
+Some areas in the flyout provide previews when you click on them. For example, clicking **Show rule summary** in the rule description displays a preview of the rule's details. To close the preview, click **Back** or **x**. 
 
 [role="screenshot"]
 image::images/alert-details-flyout-preview-panel.gif[Preview panel of the alert details flyout, 65%]
@@ -67,13 +67,13 @@ The left panel provides an expanded view of what's shown in the right panel. To
 +
 
 [role="screenshot"]
-image::images/expand-details-button.png[Expand details button at the top of the alert details flyout, 45%]
+image::images/expand-details-button.png[Expand details button at the top of the alert details flyout, 65%]
 
 * Click one of the section titles on the **Overview** tab within the right panel. 
 +
 
 [role="screenshot"]
-image::images/alert-details-flyout-left-panel.png[Left panel of the alert details flyout, 45%]
+image::images/alert-details-flyout-left-panel.png[Left panel of the alert details flyout, 65%]
 
 [discrete]
 [[about-section]]
@@ -201,7 +201,7 @@ From the right panel, click **Threat intelligence** to open the expanded Threat
 NOTE: The expanded threat intelligence view queries indices specified in the `securitySolution:defaultThreatIndex` advanced setting. Refer to <<update-threat-intel-indices, Update default Elastic Security threat intelligence indices>> to learn more about threat intelligence indices. 
 
 [role="screenshot"]
-image::images/expanded-threat-intelligence-view.png[Expanded view of threat intelligence on the alert, 70%]
+image::images/expanded-threat-intelligence-view.png[Expanded view of threat intelligence on the alert, 80%]
 
 The expanded Threat intelligence view shows individual indicators within the alert document. You can expand and collapse indicator details by clicking the arrow button at the end of the indicator label. Each indicator is labeled with values from the `matched.field` and `matched.atomic` fields and displays the threat intelligence provider. 
 
@@ -256,7 +256,7 @@ NOTE: To access data about alerts related by process ancestry, you must have a h
 From the right panel, click **Correlations** to open the expanded Correlations view within the left panel. 
 
 [role="screenshot"]
-image::images/expanded-correlations-view.png[Expanded view of correlation data, 65%]
+image::images/expanded-correlations-view.png[Expanded view of correlation data, 75%]
 
 In the expanded view, corelation data is organized into several tables:
 

docs/events/timeline-ui-overview.asciidoc

@@ -58,7 +58,7 @@ Many types of events automatically appear in preconfigured views that provide re
 contextual information, called *Event renderers*. All event renderers are turned off by default. To turn them on, use the **Event renderers** toggle at the top of the results pane. To only turn on specific event renderers, click the gear (image:images/customize-event-renderers.png[The customize event renderer button,20,20]) icon next to the toggle, and select the ones you want enabled. Close the **Customize event renderers** pane when you're done. Your changes are automatically applied to Timeline.
 
 [role="screenshot"]
-image::images/timeline-ui-renderer.png[example timeline with the event renderer highlighted]
+image::images/timeline-ui-renderer.png[example timeline with the event renderer highlighted, 70%]
 
 The example above displays the Flow event renderer, which highlights the movement of
 data between its source and destination. If you see a particular part of the rendered event that
@@ -101,7 +101,7 @@ TIP: Collapse the query builder to provide more space for Timeline results by cl
 Click a filter to access additional operations such as *Add filter*, *Clear all*, *Load saved query*, and more:
 
 [role="screenshot"]
-image::images/timeline-ui-filter-options.png[width=30%]
+image::images/timeline-ui-filter-options.png[width=60%]
 
 Here are examples of various types of filters:
 

docs/serverless/alerts/view-alert-details.asciidoc

@@ -13,7 +13,7 @@ preview:[]
 To learn more about an alert, click the **View details** button from the Alerts table. This opens the alert details flyout, which helps you understand and manage the alert.
 
 [role="screenshot"]
-image::images/view-alert-details/-detections-open-alert-details-flyout.gif[Expandable flyout]
+image::images/view-alert-details/-detections-open-alert-details-flyout.gif[Expandable flyout, 90%]
 
 Use the alert details flyout to begin an investigation, open a case, or plan a response. Click **Take action** at the bottom of the flyout to find more options for interacting with the alert.
 
@@ -30,12 +30,12 @@ The alert details flyout has a right panel, a preview panel, and a left panel. E
 The right panel provides an overview of the alert. Expand any of the collapsed sections to learn more about the alert. You can also hover over fields on the **Overview** and **Table** tabs to display available <<inline-actions,inline actions>>.
 
 [role="screenshot"]
-image::images/view-alert-details/-detections-alert-details-flyout-right-panel.png[Right panel of the alert details flyout]
+image::images/view-alert-details/-detections-alert-details-flyout-right-panel.png[Right panel of the alert details flyout, 65%]
 
 From the right panel, you can also:
 
 * Click **Expand details** to open the <<left-panel,left panel>>, which shows more information about sections in the right panel.
-* Click the **Chat** icon (image:images/icons/discuss.svg[Chat]) to access the <<security-ai-assistant>>.
+* Click the **Chat** icon (image:images/view-alert-details/-detections-ai-assistant-chat.png[AI assistant chat icon,15,15]) to access the <<security-ai-assistant>>.
 * Click the **Share alert** icon (image:images/icons/share.svg[Share alert]) to get a shareable alert URL. We _do not_ recommend copying the URL from your browser's address bar, which can lead to inconsistent results if you've set up filters or relative time ranges for the Alerts page.
 +
 [NOTE]
@@ -61,10 +61,10 @@ If you've enabled grouping on the Alerts page, the alert details flyout won't op
 [[preview-panel]]
 === Preview panel
 
-Some areas in the flyout provide previews when you click on them. For example, clicking **Show rule summary** in the rule description displays a preview of the rule's details. To close the preview, click **x**.
+Some areas in the flyout provide previews when you click on them. For example, clicking **Show rule summary** in the rule description displays a preview of the rule's details. To close the preview, click **Back** or **x**.
 
 [role="screenshot"]
-image::images/view-alert-details/-detections-alert-details-flyout-preview-panel.gif[Preview panel of the alert details flyout]
+image::images/view-alert-details/-detections-alert-details-flyout-preview-panel.gif[Preview panel of the alert details flyout, 65%]
 
 [discrete]
 [[left-panel]]
@@ -75,11 +75,11 @@ The left panel provides an expanded view of what's shown in the right panel. To
 * Click **Expand details** at the top of the right panel.
 +
 [role="screenshot"]
-image:images/view-alert-details/-detections-expand-details-button.png[Expand details button at the top of the alert details flyout]
+image:images/view-alert-details/-detections-expand-details-button.png[Expand details button at the top of the alert details flyout, 65%]
 * Click one of the section titles on the **Overview** tab within the right panel.
 +
 [role="screenshot"]
-image:images/view-alert-details/-detections-alert-details-flyout-left-panel.png[Left panel of the alert details flyout]
+image:images/view-alert-details/-detections-alert-details-flyout-left-panel.png[Left panel of the alert details flyout, 65%]
 
 [discrete]
 [[about-section]]
@@ -88,7 +88,7 @@ image:images/view-alert-details/-detections-alert-details-flyout-left-panel.png[
 The About section is located on the **Overview** tab in the right panel. It provides a brief description of the rule that's related to the alert and an explanation of what generated the alert.
 
 [role="screenshot"]
-image::images/view-alert-details/-detections-about-section-rp.png[About section of the Overview tab]
+image::images/view-alert-details/-detections-about-section-rp.png[About section of the Overview tab, 65%]
 
 The About section has the following information:
 
@@ -109,7 +109,7 @@ The event renderer only displays if an event renderer exists for the alert type.
 The Investigation section is located on the **Overview** tab in the right panel. It offers a couple of ways to begin investigating the alert.
 
 [role="screenshot"]
-image::images/view-alert-details/-detections-investigation-section-rp.png[Investigation section of the Overview tab]
+image::images/view-alert-details/-detections-investigation-section-rp.png[Investigation section of the Overview tab, 65%]
 
 The Investigation section provides the following information:
 
@@ -128,7 +128,7 @@ Add an <<add-ig-actions-rule,investigation guide>> to a rule when creating a new
 The Visualizations section is located on the **Overview** tab in the right panel. It offers a glimpse of the processes that led up to the alert and occurred after it.
 
 [role="screenshot"]
-image::images/view-alert-details/-detections-visualizations-section-rp.png[Visualizations section of the Overview tab]
+image::images/view-alert-details/-detections-visualizations-section-rp.png[Visualizations section of the Overview tab, 65%]
 
 Click **Visualizations** to display the following previews:
 
@@ -150,7 +150,7 @@ To use the **Visualize** tab, you must turn on the `securitySolution:enableVisua
 The **Visualize** tab allows you to maintain the context of the Alerts table, while providing a more detailed view of alerts that you're investigating in the event analyzer or Session View. To open the tab, click **Session view preview** or **Analyzer preview** from the right panel.
 
 [role="screenshot"]
-image::images/view-alert-details/-detections-visualize-tab-lp.png[Expanded view of visualization details]
+image::images/view-alert-details/-detections-visualize-tab-lp.png[Expanded view of visualization details, 80%]
 
 As you examine the alert's related processes, you can also preview the alerts and events which are associated with those processes. Then, if you want to learn more about a particular alert or event, you can click **Show full alert details** to open the full details flyout.
 
@@ -164,7 +164,7 @@ image::images/view-alert-details/-detections-visualize-tab-lp-alert-details.gif[
 The Insights section is located on the **Overview** tab in the right panel. It offers different perspectives from which you can assess the alert. Click **Insights** to display overviews for <<entities-overview,related entities>>, <<threat-intelligence-overview,threat intelligence>>, <<correlations-overview,correlated data>>, and <<prevalence-overview,host and user prevalence>>.
 
 [role="screenshot"]
-image::images/view-alert-details/-detections-insights-section-rp.png[Insights section of the Overview tab]
+image::images/view-alert-details/-detections-insights-section-rp.png[Insights section of the Overview tab, 65%]
 
 [discrete]
 [[entities-overview]]
@@ -173,7 +173,7 @@ image::images/view-alert-details/-detections-insights-section-rp.png[Insights se
 The Entities overview provides high-level details about the user and host that are related to the alert. Host and user risk classifications are also available if you have the Security Analytics Complete <<elasticsearch-manage-project,project feature>>.
 
 [role="screenshot"]
-image::images/view-alert-details/-detections-entities-overview.png[Overview of the entity details  section in the right panel]
+image::images/view-alert-details/-detections-entities-overview.png[Overview of the entity details  section in the right panel, 60%]
 
 [discrete]
 [[expanded-entities-view]]
@@ -182,7 +182,7 @@ image::images/view-alert-details/-detections-entities-overview.png[Overview of t
 From the right panel, click **Entities** to open a detailed view of the host and user associated with the alert. The expanded view also includes risk scores and classifications (if you have the Security Analytics Complete <<elasticsearch-manage-project,project feature>>) and activity on related hosts and users.
 
 [role="screenshot"]
-image::images/view-alert-details/-detections-expanded-entities-view.png[Expanded view of entity details]
+image::images/view-alert-details/-detections-expanded-entities-view.png[Expanded view of entity details, 70%]
 
 [discrete]
 [[threat-intelligence-overview]]
@@ -191,7 +191,7 @@ image::images/view-alert-details/-detections-expanded-entities-view.png[Expanded
 The Threat intelligence overview shows matched indicators, which provide threat intelligence relevant to the alert.
 
 [role="screenshot"]
-image::images/view-alert-details/-detections-threat-intelligence-overview.png[Overview of threat intelligence on the alert]
+image::images/view-alert-details/-detections-threat-intelligence-overview.png[Overview of threat intelligence on the alert, 70%]
 
 The Threat intelligence overview provides the following information:
 
@@ -210,7 +210,7 @@ The expanded threat intelligence view queries indices specified in the `security
 ====
 
 [role="screenshot"]
-image::images/view-alert-details/-detections-expanded-threat-intelligence-view.png[Expanded view of threat intelligence on the alert]
+image::images/view-alert-details/-detections-expanded-threat-intelligence-view.png[Expanded view of threat intelligence on the alert, 80%]
 
 The expanded Threat intelligence view shows individual indicators within the alert document. You can expand and collapse indicator details by clicking the arrow button at the end of the indicator label. Each indicator is labeled with values from the `matched.field` and `matched.atomic` fields and displays the threat intelligence provider.
 
@@ -249,7 +249,7 @@ When searching for threat intelligence, {elastic-sec} queries the alert document
 The Correlations overview shows how an alert is related to other alerts and offers ways to investigate related alerts. Use this information to quickly find patterns between alerts and then take action.
 
 [role="screenshot"]
-image::images/view-alert-details/-detections-correlations-overview.png[Overview of available correlation data]
+image::images/view-alert-details/-detections-correlations-overview.png[Overview of available correlation data, 60%]
 
 The Correlations overview provides the following information:
 
@@ -266,7 +266,7 @@ The Correlations overview provides the following information:
 From the right panel, click **Correlations** to open the expanded Correlations view within the left panel.
 
 [role="screenshot"]
-image::images/view-alert-details/-detections-expanded-correlations-view.png[Expanded view of correlation data]
+image::images/view-alert-details/-detections-expanded-correlations-view.png[Expanded view of correlation data, 75%]
 
 In the expanded view, corelation data is organized into several tables:
 
@@ -312,7 +312,7 @@ The expanded Prevalence view provides the following details:
 The **Response** section is located on the **Overview** tab in the right panel. It shows <<security-rules-create,response actions>> that were added to the rule associated with the alert. Click **Response** to display the response action's results in the left panel.
 
 [role="screenshot"]
-image::images/view-alert-details/-detections-response-action-rp.png[Response section of the Overview tab]
+image::images/view-alert-details/-detections-response-action-rp.png[Response section of the Overview tab, 50%]
 
 [discrete]
 [[expanded-notes-view]]
@@ -325,4 +325,4 @@ The **Notes** tab (located in the left panel) shows all notes attached to the al
 Go to the **Notes** <<manage-notes,page>> to find notes that were added to other alerts.
 ====
 
-image::images/view-alert-details/-detections-notes-tab-lp.png[Notes tab in the left panel]
+image::images/view-alert-details/-detections-notes-tab-lp.png[Notes tab in the left panel, 70%]

docs/serverless/index.asciidoc

@@ -178,12 +178,12 @@ include::./osquery/invest-guide-run-osquery.asciidoc[leveloffset=+4]
 include::./osquery/alerts-run-osquery.asciidoc[leveloffset=+4]
 include::./osquery/view-osquery-results.asciidoc[leveloffset=+4]
 include::./osquery/osquery-placeholder-fields.asciidoc[leveloffset=+4]
+include::./investigate/add-manage-notes.asciidoc[leveloffset=+3]
 include::./investigate/indicators-of-compromise.asciidoc[leveloffset=+3]
 include::./investigate/cases-overview.asciidoc[leveloffset=+3]
 include::./investigate/case-permissions.asciidoc[leveloffset=+4]
 include::./investigate/cases-open-manage.asciidoc[leveloffset=+4]
 include::./investigate/cases-settings.asciidoc[leveloffset=+4]
-include::./investigate/add-manage-notes.asciidoc[leveloffset=+4]
 
 include::./assets/asset-management.asciidoc[leveloffset=+2]
 

docs/serverless/investigate/investigate-events.asciidoc

@@ -14,3 +14,4 @@ These features are available in the {security-app}'s side navigation menu:
 * **Investigations** → <<security-timelines-ui,**Timelines**>>: Workspace for investigations and threat hunting.
 * **Investigations** → <<security-query-operating-systems,**Osquery**>>: Run live and scheduled queries on operating systems.
 * <<security-indicators-of-compromise,**Intelligence**>>: Indicators of compromise used for threat intelligence.
+* <<security-add-manage-notes,**Notes**>>: Use notes to coordinate responses, conduct threat hunting, and share investigative findings.

docs/serverless/investigate/timeline-templates-ui.asciidoc

@@ -55,17 +55,17 @@ Regular Timeline filter::
 Clicking **Convert to template field** changes the filter to a template filter:
 +
 [role="screenshot"]
-image::images/timeline-templates-ui/-events-template-filter-value.png[]
+image::images/timeline-templates-ui/-events-template-filter-value.png[width=30%]
 
 Template filter::
 +
 [role="screenshot"]
-image:images/timeline-templates-ui/-events-timeline-template-filter.png[]
+image:images/timeline-templates-ui/-events-timeline-template-filter.png[width=30%]
 +
 When you <<man-templates-ui,convert a template to a Timeline>>, template filters with placeholders are disabled:
 +
 [role="screenshot"]
-image::images/timeline-templates-ui/-events-invalid-filter.png[]
+image::images/timeline-templates-ui/-events-invalid-filter.png[width=30%]
 +
 To enable the filter, either specify a value or change it to a field's existing filter (refer to <<pivot,Edit existing filters>>).