[ESS] Timeline docs should be updated with the new UI (#4483)

* First draft * Adding more text changes * Fixed terminology * Updating IG page * Refreshing * Adding Nat's edits * Update docs/events/timeline-ui-overview.asciidoc * Update docs/events/timeline-templates.asciidoc Co-authored-by: natasha-moore-elastic <[email protected]> * Update docs/events/timeline-templates.asciidoc Co-authored-by: natasha-moore-elastic <[email protected]> * Removing borders * Removed breadcrumb trail * Update docs/events/timeline-templates.asciidoc * Update docs/events/timeline-ui-overview.asciidoc Co-authored-by: Benjamin Ironside Goldstein <[email protected]> * Update docs/events/timeline-ui-overview.asciidoc Co-authored-by: Benjamin Ironside Goldstein <[email protected]> * Update docs/events/timeline-ui-overview.asciidoc Co-authored-by: Benjamin Ironside Goldstein <[email protected]> --------- Co-authored-by: natasha-moore-elastic <[email protected]> Co-authored-by: Benjamin Ironside Goldstein <[email protected]>
elastic · Jan 2, 2024 · 68daf4d · 68daf4d
1 parent 80de46e
commit 68daf4d
Show file tree

Hide file tree

Showing 17 changed files with 38 additions and 25 deletions.
diff --git a/docs/detections/images/ig-alert-flyout-invest-tab.png b/docs/detections/images/ig-alert-flyout-invest-tab.png
diff --git a/docs/detections/images/ig-alert-flyout.png b/docs/detections/images/ig-alert-flyout.png
diff --git a/docs/detections/images/ig-timeline-query.png b/docs/detections/images/ig-timeline-query.png
diff --git a/docs/detections/images/ig-timeline-template-fields.png b/docs/detections/images/ig-timeline-template-fields.png
diff --git a/docs/detections/images/ig-timeline.png b/docs/detections/images/ig-timeline.png
diff --git a/docs/detections/investigation-guide-actions.asciidoc b/docs/detections/investigation-guide-actions.asciidoc
@@ -11,7 +11,7 @@ Detection rule investigation guides suggest steps for triaging, analyzing, and r
 IMPORTANT: Interactive investigation guides are compatible between {stack} versions 8.7.0 and later. Query buttons created in 8.6.x use different syntax and won't render correctly in later versions, and vice versa.
 
 [role="screenshot"]
-image::images/ig-alert-flyout.png[Alert details flyout with interactive investigation guide,450]
+image::images/ig-alert-flyout.png[Alert details flyout with interactive investigation guide,400]
 
 Under the Investigation section, click **Show investigation guide** to open the **Investigation** tab in the left panel of the alert details flyout. 
 
@@ -122,5 +122,5 @@ image::images/ig-timeline-query.png[Timeline query,500]
 When viewing an interactive investigation guide in contexts unconnected to a specific alert (such a rule's details page), queries open as <<timeline-templates-ui,Timeline templates>>, and `parameter` fields are treated as Timeline template fields.
 
 [role="screenshot"]
-image::images/ig-timeline-template-fields.png[Timeline template,500]
+image::images/ig-timeline-template-fields.png[Timeline template,400]
 
diff --git a/docs/events/images/add-new-timeline-button.png b/docs/events/images/add-new-timeline-button.png
diff --git a/docs/events/images/correlation-tab-eql-query.png b/docs/events/images/correlation-tab-eql-query.png
diff --git a/docs/events/images/create-a-timeline-filter.png b/docs/events/images/create-a-timeline-filter.png
diff --git a/docs/events/images/favorite-icon.png b/docs/events/images/favorite-icon.png
diff --git a/docs/events/images/query-builder-button.png b/docs/events/images/query-builder-button.png
diff --git a/docs/events/images/timeline-ui-updated.png b/docs/events/images/timeline-ui-updated.png
diff --git a/docs/events/timeline-templates.asciidoc b/docs/events/timeline-templates.asciidoc
@@ -71,11 +71,12 @@ filter (refer to <<pivot>>).
 [[create-timeline-template]]
 === Create a Timeline template
 
-. Go to *Timelines* -> *Templates*.
-. Click *Create new timeline template*.
+. Choose one of the following:
 +
-[role="screenshot"]
-image::images/create-template-ui.png[Shows a new Timeline template]
+
+** Go to **Timelines** → **Templates**, then click **Create new Timeline template**.
+** Go to the Timeline bar (which is at the bottom of most pages), click the image:images/add-new-timeline-button.png[Click the add new button,20,20] button, then click **Create new Timeline template**.
+** From an open Timeline  or Timeline template, click **New** -> **New Timeline template**.
 
 . To add filters, click *Add field*, and then select the required option:
 

diff --git a/docs/events/timeline-ui-overview.asciidoc b/docs/events/timeline-ui-overview.asciidoc
@@ -7,30 +7,43 @@ You can add alerts from multiple indices to a Timeline to facilitate advanced in
 You can drag or send fields of interest to a Timeline to create the desired query. For example, you can add fields from tables and histograms
 on the *Overview*, *Alerts*, *Hosts*, and *Network* pages, as well as from
 other Timelines. Alternatively, you can add a query directly in Timeline
-by clicking *+ Add field*.
+by expanding the <<narrow-expand,query builder>> and clicking **+ Add field**.
 
 [role="screenshot"]
 image::images/timeline-ui-updated.png[example Timeline with several events]
 
-To avoid losing your changes, you must save the Timeline before moving to a different {security-app} page.
-
-If you change an existing Timeline, you can use the **Save as new timeline** toggle to make a new copy of the Timeline, without overwriting the original one.
-
-TIP: You can record and share your findings with others by attaching your Timeline to a
-<<cases-overview, case>>.
-
 In addition to Timelines, you can create and attach Timeline templates to
 <<detection-engine-overview, detection rules>>. Timeline templates allow you to
 define the source event fields used when you investigate alerts in
 Timeline. You can select whether the fields use predefined values or values
 retrieved from the alert. For more information, refer to <<timeline-templates-ui>>.
 
+[discrete]
+[[open-create-timeline]]
+
+== Create new or open existing Timeline
+
+To make a new Timeline, choose one of the following:
+
+* Go to **Timelines**, then click **Create new Timeline**. 
+* Go to the Timeline bar (which is at the bottom of most pages), click the image:images/add-new-timeline-button.png[Click the add new button,20,20] button, then click **Create new Timeline template**.
+* From an open Timeline or Timeline template, click **New** -> **New Timeline**.
+
+To open an existing Timeline, choose one of the following: 
+
+* Go to the Timelines page, then click a Timeline's title. 
+* Go to the Timeline bar, click the image:images/add-new-timeline-button.png[Click the add new button,20,20] button, then click **Open Timeline**.
+* From an open Timeline  or Timeline template, click **Open**, then select a Timeline. 
+
+To avoid losing your changes, save the Timeline before moving to a different {security-app} page. If you change an existing Timeline, you can use the **Save as new timeline** toggle to make a new copy of the Timeline without overwriting the original one.
+
+TIP: Click the star icon (image:images/favorite-icon.png[Click the favorite icon,20,20]) to favorite your Timeline and quickly find it later.
 
 [discrete]
 [[refine-timeline-results]]
 == View and refine Timeline results
 
-You can select whether Timeline displays detection alerts and other raw events, or just alerts. By default, Timeline displays both raw events and alerts. To hide raw events and display alerts only, click *Data view* to the right of the date and time picker, then select *Show only detection alerts*.
+You can select whether Timeline displays detection alerts and other raw events, or just alerts. By default, Timeline displays both raw events and alerts. To hide raw events and display alerts only, click *Data view* to the left of the KQL query bar, then select *Show only detection alerts*.
 
 [discrete]
 [[timeline-inspect-events-alerts]]
@@ -63,11 +76,11 @@ You can also modify a Timeline's display in other ways:
 
 [discrete]
 [[narrow-expand]]
-== Narrow or expand your KQL query
+== Use the Timeline query builder
+
+Expand the query builder by clicking the query builder button (image:images/query-builder-button.png[Click the query builder button,20,20]) to the right of the KQL query bar. Drop in fields to build a query that filters Timeline results. The fields' relative placement specifies their logical relationships: horizontally adjacent filters use `AND`, while vertically adjacent filters use `OR`. 
 
-By placing fields within the drop zone, you turn them into query filters.
-Their relative placement specifies their logical relationships: horizontally adjacent filters use `AND`,
-while vertically adjacent filters use `OR`.
+TIP: Collapse the query builder to provide more space for Timeline results by clicking the query builder button (image:images/query-builder-button.png[Click the query builder button,20,20]).
 
 [discrete]
 [[pivot]]

diff --git a/docs/getting-started/images/dataview-filter-example.gif b/docs/getting-started/images/dataview-filter-example.gif
diff --git a/docs/reference/images/timeline-object-ui.png b/docs/reference/images/timeline-object-ui.png
diff --git a/docs/reference/timeline-schema.asciidoc b/docs/reference/timeline-schema.asciidoc
@@ -14,15 +14,14 @@ This screenshot maps the Timeline UI components to their JSON objects:
 image::images/timeline-object-ui.png[]
 
 . <<timeline-object-title, Title>> (`title`)
-. <<timeline-object-desc, Description>> (`description`)
 . <<timeline-object-global-notes, Global notes>> (`globalNotes`)
+. <<timeline-object-dataViewId, Data view>> (`dataViewId`)
+. <<timeline-object-kqlquery, KQL bar query>> (`kqlQuery`)
 . <<timeline-object-daterange, Time filter>> (`dateRange`)
+. <<timeline-object-filters, Additional filters>> (`filters`)
+. <<timeline-object-kqlmode, KQL bar mode>> (`kqlMode`)
 . <<timeline-object-dropzone, Dropzone>> (each clause is contained in
 its own `dataProviders` object)
-. <<timeline-object-kqlmode, KQL bar mode>> (`kqlMode`)
-. <<timeline-object-kqlquery, KQL bar query>> (`kqlQuery`)
-. <<timeline-object-dataViewId, Data view>> (`dataViewId`)
-. <<timeline-object-filters, Additional filters>> (`filters`)
 . <<timeline-object-columns, Column headers>> (`columns`)
 . <<timeline-object-event-notes, Event-specific notes>> (`eventNotes`)
 
@@ -47,7 +46,7 @@ timestamp.
 * `start`: The time from which events are searched, using a 13-digit Epoch
 timestamp.
 
-|[[timeline-object-desc]]`description` |String |The Timeline's description.
+|`description` |String |The Timeline's description.
 |[[timeline-object-event-notes]]`eventNotes` |<<eventNotes-obj, eventNotes[]>>
 |Notes added to specific events in the Timeline.
 |`eventType` |String a|Event types displayed in