[SIEM] Adds custom tooltip to map for dragging fields to timeline

[spong]

Summary

Resolves #46301, by adding a custom tooltip for the map that enables dragging to the timeline.

Features:

• Adds new portal pattern to enable DnD from outside the main react component tree
• Adds <DraggablePortalContext> component to enable DnD from within an EuiPopover
  • Just wrap EuiPopover contents in <DraggablePortalContext.Provider value={true}></...> and all child DefaultDraggable's will now function correctly
• Displays netflow renderer within tooltip for line features, w/ draggable src/dest.bytes
• Displays detailed description list within tooltip for point features. Fields include:
  • host.name
  • source/destination.ip
  • source/destination.domain
  • source/destination.geo.country_iso_code
  • source/destination.as.organization.name
• Retains ability to add filter to KQL bar

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately
• This includes a feature addition or change that requires a release note and was labeled appropriately

[elasticmachine]

Pinging @elastic/siem

[andrew-goldstein]

should this read something like previousButton is disabled and nextButton is functioning when featureIndex is 0?

[andrew-goldstein]

consider structuring the tests in this file such that there is one expect per test

[spong]

Fixed wording to be less ambiguous as part of structuring tests to only have one expect each. Also bundled in appropriately named groups as well. Test structure is as follows:

[spong]

Any thoughts on how to better handle this situation? In this instance, the map tooltip EuiPopover is managed in the maps code, so we can't pass in our own z-index. When you don't specify your own z-index, the tooltip EuiPopover does some calculation to ensure it's under any flyout that would appear. This isn't necessary in this implementation as we have an outside click detector that'll close the popover.

The map tooltip EuiPopover ends up with the following z-index:

.euiPopover__panel.euiPopover__panel-isOpen {
    z-index: 9900 !important;
}

[andrew-goldstein]

is i18n required here (for the values Host, Source IP, etc, and in the destinationFieldMappings const below)?

[spong]

Nice catch! And that's why you should always write your i18n the same time you write any user facing string, ha! 🙂

[andrew-goldstein]

Just noting (per a conversation with @spong ), that the re-parenting provided by react-reverse-portal here is required here because when MapToolTip is rendered in the embeddables component tree (the default behavior), it doesn't have access to the Redux store, which is required to register and un-register the draggable.

[spong]

That's correct. Adding the following comment to embeddable_map to make it clear for anyone meandering through this code at a later date. Thanks for specifying!

    // This portalNode provided by react-reverse-portal allows us re-parent the MapToolTip within our
    // own component tree instead of the embeddables (default). This is necessary to have access to
    // the Redux store, theme provider, etc, which is required to register and un-register the draggable
    // Search InPortal/OutPortal for implementation touch points
    const portalNode = React.useMemo(() => createPortalNode(), []);

[andrew-goldstein]

createPortalNode() feels like an effect, which makes me wonder if useEffect is technically more appropriate than useMemo here, due to following statement in the useMemo reference:

Remember that the function passed to useMemo runs during rendering. Don’t do anything there that you wouldn’t normally do while rendering. For example, side effects belong in useEffect, not useMemo.

What do you think?

[spong]

I was following suit from the example docs, but as you pointed out later in the docs it certainly sounds like an effect. Feels like a grey area -- let's keep an eye on any wonky behavior, but maintain it as described in the example.

Thanks for calling attention to this 🙂

[andrew-goldstein]

does Source require i18n?

[andrew-goldstein]

i18n?

[andrew-goldstein]

optional nit: replace all the repeated features[featureIndex].layerId and features[featureIndex].id with

const layerId = features[featureIndex].layerId;
const featureId = features[featureIndex].id;

and then just refer to layerId, featureId

[andrew-goldstein]

Will this cleanup code (resetting loading indicators) execute if any of the promises in

const featurePropsPromises = await Promise.all(...

reject?

[spong]

So just dug a bit into this and it would've resulted in an unhandled Promise rejection and the cleanup not running. One option would be to reject, but would need to do that for each promise, so I opted for try/catch/finally and adding an error state. Thanks for calling attention to this!

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 5a3066a

[andrew-goldstein]

Thanks @spong for tenaciously overcoming all the technical challenges required to achieve drag and drop from portal content, and for making it possible to re-use the techniques you established going forward with other embedded content and portals! 🚀

The new feature that summarizes the data transferred between source and destination when clicking a line was useful while desk testing for quickly determining whether or not some of the more... unusual hosts talking to well-known hosts were just a blip on the radar (during the selected date range).

Tested locally in Chrome, Firefox, and Safari.

🔴 LGTM 🔵

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 8d8a1c1

[spong]

When testing in IE11 ran into #47609. Will use that issue for tracking and resolve after FF for 7.5.