[8.15 & Serverless] Update the Security Timeline Documentation in accordance with new Unified Timeline changes

docs/events/timeline-ui-overview.asciidoc

@@ -55,8 +55,7 @@ To further inspect an event or detection alert, click the *View details* button.
 == Configure Timeline event context and display
 
 Many types of events automatically appear in preconfigured views that provide relevant
-contextual information, called *Event Renderers*. You can display and turn them on or off
-with the Settings menu in the upper left corner of the results pane:
+contextual information, called *Event renderers*. All event renders 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 renders, click the gear (image:images/customize-event-renderers.png[The customize event renderer button,20,20]) button 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]
@@ -67,13 +66,25 @@ interests you, you can drag it up to the drop zone below the query bar for furth
 
 You can also modify a Timeline's display in other ways:
 
-* Add, remove, reorder, or resize columns
-* Create <<runtime-fields,runtime fields>> and display them in the Timeline
+* <<add-remove-timeline-fields,Add and remove fields>> from Timeline
+* Create <<runtime-fields,runtime fields>> and display them in Timeline
+* Reorder and resize columns
 * View the Timeline in full screen mode
 * Add or delete notes on individual events
 * Add or delete investigation notes on the entire Timeline
 * Pin interesting events to the Timeline
 
+[discrete]
+[[add-remove-timeline-fields]]
+== Add and remove fields from Timeline
+
+The Timeline table shows fields that are available for alerts and events in the selected data view. You can modify the table to display fields that interest you. Use the sidebar to search for specific fields or scroll through it to find fields of interest. Fields that you select display as columns in the table.
+
+To add a field from the sidebar, hover over it, and click the **Add field as a column** button (image:images/add-field-button.png[The button that lets you to add a field as a column,20,20]), or drag and drop the field into the table. To remove a field, hover over it, and click the **Remove field as a column** button (image:images/remove-field-button.png[The button that lets you to remove a field as a column,20,20]). 
+
+[role="screenshot"]
+image::images/timeline-sidebar.png[Shows the sidebar that allows you to configure the columns that display in Timeline]
+
 [discrete]
 [[narrow-expand]]
 == Use the Timeline query builder

docs/reference/runtime-fields.asciidoc

@@ -11,16 +11,17 @@ To create a runtime field:
 
 . Go to a page that lists alerts or events (for example, *Alerts* or *Timelines* -> *_Name of Timeline_*).
 
-. Click the *Fields* toolbar button in the table's upper-left. The *Fields* browser opens.
+. Do one of the following:
+** In the Alerts table, click the *Fields* toolbar button in the table's upper-left. From the *Fields* browser, click *Create field*. The *Create field* flyout opens.
 +
 [role="screenshot"]
 image::images/fields-browser.png[Fields browser]
-
-. Click *Create field*. The *Create field* flyout opens.
++
+** In Timeline, go to the bottom of the sidebar, then click *Add a field*. The *Create field* flyout opens.
 +
 [role="screenshot"]
-image::images/create-field-flyout.png[Create field flyout]
-
+image::images/create-runtime-fields-timeline.png[Create runtime fields button in Timeline]
++
 . Enter a *Name* for the new field.
 
 . Select a *Type* for the field's data type.

docs/serverless/explore/runtime-fields.mdx

@@ -17,17 +17,19 @@ You can create a runtime field and add it to your detection alerts or events fro
 Runtime fields can impact performance because they're evaluated each time a query runs. Refer to [Runtime fields](((ref))/runtime.html) for more information.
 </DocCallOut>
 
-To create a runtime field:
+To create a runtime field: 
 
 1. Go to a page that lists alerts or events (for example, **Alerts** or **Timelines** → **_Name of Timeline_**).
 
-1. Click the **Fields** toolbar button in the table's upper-left. The **Fields** browser opens.
+1. Do one of the following:
+
+   * In the Alerts table, click the **Fields** toolbar button in the table's upper-left. From the **Fields** browser, click **Create field**. The **Create field** flyout opens. 
 
     ![Fields browser](../images/runtime-fields/-reference-fields-browser.png)
 
-1. Click **Create field**. The **Create field** flyout opens.
+   * In Timeline, go to the bottom of the sidebar, then click **Add a field**. The **Create field** flyout opens.
 
-    ![Create field flyout](../images/runtime-fields/-reference-create-field-flyout.png)
+    ![Create runtime fields button in Timeline](../images/runtime-fields/-reference-create-runtime-fields-timeline.png)
 
 1. Enter a **Name** for the new field.
 

docs/serverless/investigate/timelines-ui.mdx

@@ -62,8 +62,7 @@ To further inspect an event or detection alert, click the **View details** butto
 ## Configure Timeline event context and display
 
 Many types of events automatically appear in preconfigured views that provide relevant
-contextual information, called **Event Renderers**. You can display and turn them on or off
-with the Settings menu in the upper left corner of the results pane:
+contextual information, called **Event Renderers**. All event renders 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 renders, click the gear (<DocIcon type="gear" title="The customize event renderer button" />) button 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.
 
 ![example timeline with the event renderer highlighted](../images/timelines-ui/-events-timeline-ui-renderer.png)
 
@@ -73,13 +72,24 @@ interests you, you can drag it up to the drop zone below the query bar for furth
 
 You can also modify a Timeline's display in other ways:
 
-* Add, remove, reorder, or resize columns
+* <DocLink slug="/serverless/security/timelines-ui" section="add-remove-timeline-fields">Add and remove fields</DocLink> from Timeline
 * Create <DocLink slug="/serverless/security/runtime-fields">runtime fields</DocLink> and display them in the Timeline
+* Reorder and resize columns
 * View the Timeline in full screen mode
 * Add or delete notes on individual events
 * Add or delete investigation notes on the entire Timeline
 * Pin interesting events to the Timeline
 
+<div id="add-remove-timeline-fields"></div>
+
+## Add and remove fields from Timeline
+
+The Timeline table shows fields that are available for alerts and events in the selected data view. You can modify the table to display fields that interest you. Use the sidebar to search for specific fields or scroll through it to find fields of interest. Fields that you select display as columns in the table.
+
+To add a field from the sidebar, hover over it, and click the **Add field as a column** button (<DocIcon type="plusInCircle" title="The button that lets you to add a field as a column" />), or drag and drop the field into the table. To remove a field, hover over it, and click the **Remove field as a column** button (<DocIcon type="cross" title="The button that lets you to remove a field as a column" />).
+
+<DocImage size="xl" url="../images/timelines-ui/-events-timeline-sidebar.png" alt="Shows the sidebar that allows you to configure the columns that display in Timeline" />
+
 <div id="narrow-expand"></div>
 
 ## Use the Timeline query builder
@@ -96,7 +106,7 @@ Collapse the query builder and provide more space for Timeline results by clicki
 
 Click a filter to access additional operations such as **Add filter**, **Clear all**, **Load saved query**, and more:
 
-<DocImage size="m" url="../images/timelines-ui/-events-timeline-ui-filter-options.png" alt="" />
+<DocImage size="l" url="../images/timelines-ui/-events-timeline-ui-filter-options.png" alt="" />
 
 Here are examples of various types of filters: