[Security Solution] 7.11 Timeline EVOLUTION

[patrykkopycinski]

Summary

• Timeline is always a full screen modal
• When Timeline is open, the details of an event shall be displayed in the Event Details section of the split pane
• Timeline's Events Table (grid view) was updated to support row-selection, to indicate which event in the table is selected
• Added Persistent Timeline Taskbar (single document interface)
• Header Updates / Call to Action
• The Attach timeline to new | existing case actions have been migrated to a new always-visible "Call to Action" button, to encourage these workflows
• The "lock" icon is replaced by a Sync time with current page toggle switch
• The "star" icon is replaced by a Add to Favorites toggle button
• Convert the Timeline body to a fixed-width split pane (w/header)

This PR is focused on layout changes, accessibility improvements will be addressed in the followup PR

Checklist

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios

[tylersmalley]

@elasticmachine merge upstream

[XavierM]

Reading more and more your PR, I agree with you we should get more generic selector, the same way that we did/fix it for sourcerer.

[XavierM]

nit -> we should have a try catch just in case that the stringify blow out

[XavierM]

nit ->

if (columnHeaders.some((c) => c.id === column.id)) {
          dispatch(
            timelineActions.removeColumn({
              columnId: column.id,
              id: timelineId,
            })
          );
        } else {
          dispatch(
            timelineActions.upsertColumn({
              column,
              id: timelineId,
              index: 1,
            })
          );
        }

[XavierM]

by the way we had the same code in solution/public/common/components/event_details/event_fields_browser.tsx

[XavierM]

with the timeline in footer, I think we should disable the fixed header when the size of the screen is too small.

[XavierM]

I have this user feeling when I open a timeline, it is slower than before. Do you have the same feeling? if you do we should keep this in mind and fix it in another PR.

[XavierM]

I reviewed all the lines of this PR and I played/tested the timeline and other features from the app. Everything seems to work as expected. I think we should merge it and see if other people are discovering issue that I missed.

There is a lot improvement in this PR thanks to you @patrykkopycinski and you are also giving a revolution to timeline. We/I appreciate all this work.

Would you mind creating a ticket about improving our timeline selector so we do not have to get the full timeline object and memoized specific attributes. Like you say, it will improve timeline.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 725da90

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
securitySolution	2104	2105	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
securitySolution	8.0MB	8.0MB	+14.0KB

Distributable file count

id	before	after	diff
default	47650	47659	+9

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
securitySolution	210.3KB	210.2KB	-130.0B

Unknown metric groups

async chunk count

id	before	after	diff
securitySolution	19	22	+3

History

• 💚 Build #91647 succeeded 1fb1e2a
• 💔 Build #91603 failed a0c8617
• 💚 Build #91238 succeeded 52a848e
• 💚 Build #91233 succeeded b7e87e7
• 💚 Build #91222 succeeded d155380

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream