Timeline docs should be updated with the new UI.

[logeekal]

Description

Security solution is coming up with minor changes in the Timeline UI and all the changes have been covered in:

• [Security Solution] - Timeline UI refactor kibana#168230.
• [Security Solution] Add new timeline changes tour kibana#172030

All the UI modifications are listed in the PR description. Please reach out to me if you some issue or you have some questions.

These Changes are coming in both Serverless and ESS in 8.12 release.

[logeekal]

@nastasha-solomon , updated the tour PR link.

[nastasha-solomon]

The tour copy review is being tracked in #4369.

The issue linked in this issue's description (elastic/kibana#172030) tracks the implementation of the tour.

[nastasha-solomon]

Serverless doc updates:

(Same updates were made to the ESS docs)

Updates to the Investigate events in Timeline page:

• Intro

  • Might need to mention the collapsed query builder in the second para.
  • Refresh -events-timeline-ui-updated.png. Note that KPIs have been removed in 8.12. They might be redesigned and re-added in 8.13.
  • Briefly describe how unsaved and recently saved Timeline are portrayed. Can update the sentence under the screenshot.

• View and refine Timeline results

  • Update the last sentence that says "click Data view to the right of the date and time picker".
  • Refresh -events-timeline-ui-renderer.png. The query bar and associated elements have been updated.

• Edit existing filters

  • Refresh -events-timeline-ui-filter-options.png. The icon on the left side of the menu and for the Load saved query option has changed.

• Filter Timeline results with EQL

  • Refresh -events-correlation-tab-eql-query.png

New or modified functionality that's not doc'd and needs to be added to the Investigate events in Timeline page:

• Favorites button - This button was accompanied by text (see image of 8.11 design above) in 8.11 and earlier. In 8.12, the favorite button is the starEmpty icon to the right of the Timeline title. By clicking the star, users can favorite or unfavorite a Timeline.
  • Repurpose the tip at the start of the page and use it to describe the favoriting feature. Really don't need to mention the attach to case functionality as a "tip" when there's a whole section on this further down.
    • NOTE: This was redesigned in [Security Solution] Timeline UI refactor revision - Design feedback kibana#173015.
• Create new and open existing Timeline buttons - These only existed on the main Timeline main page in 8.11, so they'll need to be doc'd for 8.12.
  • Create a new section above Attach a Timeline to a case. Name the new section: Create new or open existing Timelines
    
• Collapse and expand query builder button - This is net new functionality.
  • Add a line about the default state of the query builder to the Narrow or expand your KQL query section. Also explain where to find the button because it's not labeled in the UI -- it's a button with the Timeline icon in the center. When users hover over the button, a tooltip with instructions of how to use the button appears.
• Time range lock button - This button syncs (locks) or un-syncs (unlocks) the Timeline time range with/from the underlying page's time range.

Updates to the Create Timeline templates page:

• Refresh the following:
  • Steps 1-2 need to be expanded to include the new flow of creating a new Timeline template from an open Timeline.
  • -events-create-template-ui.png
  • -events-create-a-timeline-filter.png

Updates to the Data views in Elastic Security page:

• Create or modify a data view
  • Refresh -getting-started-dataview-filter-example.gif

Updates to the Timeline schema page:

• Refresh -reference-timeline-object-ui.png - The top portion of the UI has completely changed, so I'll need to retake the image and re-apply the annotations (numbers) in the appropriate order so they align with the list following the image.
• When revise above image, need to refresh list to show where updated objects are.
• Remove the description reference in the following places:
  • The -reference-timeline-object-ui.png (number 2 sticker)
  • The numbered list following the screenshot

Updates to the Launch Timeline from investigation guides page:

• -detections-ig-alert-flyout.png - Additional info about the change required here:
• The Serverless docs don't match the ESS docs. The ESS docs have the new expandable flyout and the additional instruction for interacting with the new Investigation section in the flyout. So, I'll need to refresh the screenshot in the Serverless docs, add the second image and additional text, and re-refresh the screenshots in the ESS docs to account for new flyout updates that went into a recent Serverless release.
• -detections-ig-timeline.png
• -detections-ig-timeline-query.png
• -detections-ig-timeline-template-fields.png

[logeekal]

This heading states Narrow or expand your KQL query but it talks about query filters. Should we rename it to just query instead of KQL Query?

---

Favorites button - This button was accompanied by text (see image of 8.11 design above) in 8.11 and earlier. In 8.12, the favorite button is the starEmpty icon to the right of the Timeline title. By clicking the star, users can favorite or unfavorite a Timeline.

There is still some discussion here. I have meeting with design tomorrow, I will confirm you about the direction we are going for this.

---

Probably you have already noted it. But https://docs.elastic.co/serverless/security/timeline-object-schema also needs updated screenshot. I am putting it here since it is not mentioned in your comment.

[nastasha-solomon]

Thanks for the additional notes, @logeekal! I expanded the list of doc updates to include the updates needed to the Timeline schema page and will check in with you tomorrow on design decisions made about the favorites button and expand/collapse query builder button.

RE your question about the section title:

This heading states Narrow or expand your KQL query but it talks about query filters. Should we rename it to just query instead of KQL Query?

Does the query builder use KQL or is it using a different query language? I always thought it was a visual representation of the text-based KQL query bar above it, but maybe I'm wrong?

[logeekal]

Hey @nastasha-solomon ,

Below are my responses.

Filter Timeline results with EQL

Refresh -events-correlation-tab-eql-query.png

Below is the replacement screenshot :

Does the query builder use KQL or is it using a different query language? I always thought it was a visual representation of the text-based KQL query bar above it, but maybe I'm wrong?

I would say, it is a subset of KQL but not exactly KQL. It cannot do NOT ( ... complete query ) which can be done in KQL. I will ask team today for confirmation and get back to you.

[nastasha-solomon]

elastic/kibana#173015 introduces some additional UI changes that'll impact screenshots and potentially instructions for opening an existing Timeline, creating a new Timeline, and creating a new Timeline template.

I plan to lump the newest UI changes into https://github.com/elastic/staging-serverless-security-docs/pull/240 so I can consolidate everything into a single docs PR.

[logeekal]

@nastasha-solomon , I have updated the EQL screenshot in above comment with the new changes. So you can take from there directly.

[nastasha-solomon]

Noticed a handful of additional screenshots that need to be refreshed. Adding them to the list and committing them to the ESS and Serverless doc PRs.