[SIEM] Fix Timeline footer styling #59587

patrykkopycinski · 2020-03-06T20:20:00Z

Summary

Use EuiFlyoutFooter component in place of custom javascript useResizeObserver logic

Checklist

Delete any items that are not applicable to this PR.

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
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
This was checked for cross-browser compatibility, including a check against IE11

For maintainers

This was checked for breaking API changes and was labeled appropriately

…line-footer-styles # Conflicts: # x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx

elasticmachine · 2020-03-06T20:20:03Z

Pinging @elastic/siem (Team:SIEM)

x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx

andrew-goldstein · 2020-03-06T21:02:52Z

x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx

      <TimelineKqlFetch id={id} indexPattern={indexPattern} inputId="timeline" />
-      {combinedQueries != null ? (


I'm seeing a change in behavior while desk testing (not necessarily related to this location) where the Timeline is populated by default, even on a fresh reload of the SIEM app.

As a result, Create new timeline appears to not work, because the timeline is populated with data even though there are no filters or KQL entered.

Seeing the following in the JS console while desk testing (not necessarily related to this location) when clicking the Load more button:

react_devtools_backend.js:6 Warning: Encountered two children with the same key, `j2xwvXABOOUskGlPa61E`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. in div (created by EventsTbody) in EventsTbody (created by EventsComponent) in EventsComponent in div (created by EventsTable) in EventsTable in div (created by TimelineBody) in TimelineBody in Unknown in Unknown in Unknown (created by ConnectFunction) in ConnectFunction (created by Query) in div (created by EuiFlyoutBody) in div (created by EuiFlyoutBody) in div (created by EuiFlyoutBody) in EuiFlyoutBody (created by StyledEuiFlyoutBody) in StyledEuiFlyoutBody (created by Query) in ManageTimelineContextComponent (created by Query) in Query (created by TimelineQueryComponent) in TimelineQueryComponent (created by EnhancedType) in EnhancedType (created by ConnectFunction) in ConnectFunction (created by TimelineComponent) in div (created by TimelineContainer) in TimelineContainer (created by TimelineComponent) in TimelineComponent (created by Query) in Query in Unknown in Unknown in Unknown (created by ConnectFunction) in ConnectFunction in div (created by Resizable) in Resizable (created by StyledResizable) in StyledResizable (created by FlyoutPaneComponent) in div (created by EuiFlyout) in div (created by FocusLock) in FocusLock (created by EuiFocusTrap) in div (created by OutsideEventDetector) in OutsideEventDetector (created by EuiFocusTrap) in EuiOutsideClickDetector (created by EuiFocusTrap) in EuiFocusTrap (created by EuiFlyout) in EuiFlyout (created by FlyoutPaneComponent) in div (created by EuiFlyoutContainer) in EuiFlyoutContainer (created by FlyoutPaneComponent) in FlyoutPaneComponent in div (created by Visible) in Visible in Unknown (created by ConnectFunction) in ConnectFunction (created by Query) in Provider (created by App) in App (created by ErrorBoundary) in ErrorBoundary (created by DragDropContext) in DragDropContext in Unknown in Unknown (created by ConnectFunction) in ConnectFunction (created by Query) in Query in Unknown (created by HomePage) in main (created by Main) in Main (created by HomePage) in div (created by WrappedByAutoSizer) in WrappedByAutoSizer (created by HomePage) in HomePage (created by PageRouterComponent) in Route (created by PageRouterComponent) in Switch (created by PageRouterComponent) in Router (created by PageRouterComponent) in ManageRoutesSpyComponent (created by PageRouterComponent) in PageRouterComponent (created by AppPluginRootComponent) in Unknown (created by AppPluginRootComponent) in ThemeProvider (created by AppPluginRootComponent) in ApolloProvider (created by AppPluginRootComponent) in Provider (created by AppPluginRootComponent) in ManageGlobalToaster (created by AppPluginRootComponent) in AppPluginRootComponent (created by StartAppComponent) in EuiContext (created by I18nContext) in PseudoLocaleWrapper (created by I18nProvider) in IntlProvider (created by I18nProvider) in I18nProvider (created by I18nContext) in I18nContext (created by StartAppComponent) in EuiErrorBoundary (created by StartAppComponent) in StartAppComponent (created by SiemAppComponent) in Provider (created by SiemAppComponent) in SiemAppComponent

Seeing an issue (not necessarily related to this location) where items dragged from the timeline "fall behind" the header, per the following screenshot:

Fields in expanded events also fall behind, per the following gif:

Seeing an issue where the columns in the Events table cannot be re-ordered, per the following gif:

Seeing an issue in the Events table where a column cannot be added via D&D from an expanded event, per the following gif:

…line-footer-styles

andrew-goldstein · 2020-03-09T18:06:46Z

x-pack/legacy/plugins/siem/public/components/flyout/index.test.tsx

-          .find('[data-test-subj="timeline-title"]')
-          .first()
-          .props().placeholder
-      ).toContain('Untitled Timeline');


Is there an equivalent version of this test?

https://github.com/elastic/kibana/pull/59587/files#diff-0783c66236e96928476bfba4b76d1fd3R104

…line-footer-styles

x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx

x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/column_header.tsx

…line-footer-styles

andrew-goldstein · 2020-03-12T16:04:48Z

x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/column_header.tsx

-  const handleResizeStop: ResizeCallback = (e, direction, ref, delta) => {
-    onColumnResized({ columnId: header.id, delta: delta.width });
-  };
+  const resizableEnable = useMemo(() => ({ right: true }), []);


This pure function doesn't appear to capture any variables via closure, (as opposed to for example, resizableSize below it).

Consider declaring resizableEnable outside the scope of this component, because it doesn't appear that every instance of the component needs its own memoized version of resizableEnable.

andrew-goldstein · 2020-03-12T16:25:58Z

Seeing the following error when clicking the Load more button:

Warning: Encountered two children with the same key, `884d7db499eb0ab0b7f4680279edecd3e9bbf8a04a0ff4e9b42d6dedd8d04a45`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    in div (created by EventsTbody)
    in EventsTbody (created by EventsComponent)
    in EventsComponent
    in div (created by EventsTable)
    in EventsTable
    in div (created by TimelineBody)
    in TimelineBody
    in Unknown
    in Unknown
    in Unknown (created by ConnectFunction)
    in ConnectFunction (created by Query)
    in div (created by EuiFlyoutBody)
    in div (created by EuiFlyoutBody)
    in div (created by EuiFlyoutBody)
    in EuiFlyoutBody (created by StyledEuiFlyoutBody)
    in StyledEuiFlyoutBody (created by Query)
    in ManageTimelineContextComponent (created by Query)
    in Query (created by TimelineQueryComponent)
    in TimelineQueryComponent (created by EnhancedType)
    in EnhancedType (created by ConnectFunction)
    in ConnectFunction (created by TimelineComponent)
    in div (created by TimelineContainer)
    in TimelineContainer (created by TimelineComponent)
    in TimelineComponent (created by Query)
    in Query
    in Unknown
    in Unknown
    in Unknown (created by ConnectFunction)
    in ConnectFunction
    in div (created by Resizable)
    in Resizable (created by StyledResizable)
    in StyledResizable (created by FlyoutPaneComponent)
    in div (created by EuiFlyout)
    in div (created by FocusLock)
    in FocusLock (created by EuiFocusTrap)
    in div (created by OutsideEventDetector)
    in OutsideEventDetector (created by EuiFocusTrap)
    in EuiOutsideClickDetector (created by EuiFocusTrap)
    in EuiFocusTrap (created by EuiFlyout)
    in EuiFlyout (created by FlyoutPaneComponent)
    in div (created by EuiFlyoutContainer)
    in EuiFlyoutContainer (created by FlyoutPaneComponent)
    in FlyoutPaneComponent
    in div (created by Visible)
    in Visible
    in Unknown (created by ConnectFunction)
    in ConnectFunction (created by Query)
    in Provider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext
    in Unknown
    in Unknown (created by ConnectFunction)
    in ConnectFunction (created by Query)
    in Query
    in Unknown (created by HomePage)
    in main (created by Main)
    in Main (created by HomePage)
    in div (created by WrappedByAutoSizer)
    in WrappedByAutoSizer (created by HomePage)
    in HomePage (created by PageRouterComponent)
    in Route (created by PageRouterComponent)
    in Switch (created by PageRouterComponent)
    in Router (created by PageRouterComponent)
    in ManageRoutesSpyComponent (created by PageRouterComponent)
    in PageRouterComponent (created by AppPluginRootComponent)
    in Unknown (created by AppPluginRootComponent)
    in ThemeProvider (created by AppPluginRootComponent)
    in ApolloProvider (created by AppPluginRootComponent)
    in Provider (created by AppPluginRootComponent)
    in ManageGlobalToaster (created by AppPluginRootComponent)
    in AppPluginRootComponent (created by StartAppComponent)
    in EuiContext (created by I18nContext)
    in PseudoLocaleWrapper (created by I18nProvider)
    in IntlProvider (created by I18nProvider)
    in I18nProvider (created by I18nContext)
    in I18nContext (created by StartAppComponent)
    in EuiErrorBoundary (created by StartAppComponent)
    in StartAppComponent (created by SiemAppComponent)
    in Provider (created by SiemAppComponent)
    in SiemAppComponent

andrew-goldstein · 2020-03-12T19:58:04Z

When resizing a timeline with many filters like the screenshot below, performance in Firefox feels like it's dipped from "sluggish" in master to "nearly unresponsive":

…line-footer-styles

x-pack/legacy/plugins/siem/public/components/timeline/properties/index.test.tsx

andrew-goldstein · 2020-03-13T23:17:58Z

When adding notes, the note area is taking up the entire width instead of just the visible area. As a result, the Add note and Cancel actions are cut off, per the screenshot below:

patrykkopycinski · 2020-03-15T08:49:29Z

@elasticmachine merge upstream

andrew-goldstein · 2020-03-16T15:54:33Z

x-pack/legacy/plugins/siem/public/components/utils.ts

+
+export const useThrottledResizeObserver = (wait = 100) => {
+  const [size, setSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
+  const onResize = useMemo(() => throttle(wait, setSize), [wait]);


is it possible to use useCallback here?

andrew-goldstein

Thanks @patrykkopycinski for all the hard work that went into the fixes and refactoring in this PR! 🙏
Cross-browser desk testing in Chrome 80.0.3987.132, Firefox 74.0, and Safari 13.0.5 is looking solid 👍👍👍
LGTM 🚀

patrykkopycinski · 2020-03-17T08:05:03Z

@elasticmachine merge upstream

kibanamachine · 2020-03-17T09:51:08Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: fde205c

History

💚 Build #33293 succeeded 415dcf6
💔 Build #33283 failed b86ca0e
💔 Build #33210 failed 581952d
💚 Build #32876 succeeded ff46c1f
💚 Build #32678 succeeded 79c4874

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

* master: (30 commits) [TSVB] fix text color when using custom background color (elastic#60261) Fix import to timefilter from in TSVB (elastic#60296) [NP] Get rid of usage redirectWhenMissing service (elastic#59777) [SIEM] Fix Timeline footer styling (elastic#59587) [ML] Fixes to error handling for analytics jobs and file data viz (elastic#60249) Give better stack traces for Unhandled Promise Rejection warnings (elastic#60235) resolves elastic#58905 (elastic#60120) Added variables button for text fields in Pagerduty component. (elastic#60189) adds test that action vars are rendered for alert action parms (elastic#60310) Closes 59786 by removing the update toast (elastic#60172) [EPM] Packages list tabs (elastic#60167) Added message variables button for Webhook body form field (elastic#60174) Revert "adds new test (elastic#60064)" [Maps] move MapSavedObject type out of telemetry (elastic#60127) [Reporting] Fix error handling for job handler in route (elastic#60161) [Endpoint] TEST: verify alerts page header says 'Alerts' (elastic#60206) EMT-248: implement ack resource to accept event payload to acknowledge agent actions (elastic#60218) Migrate dual validated range (elastic#59689) Embeddable triggers (elastic#58440) [Endpoint] Sample data generator CLI script (elastic#59952) ...

patrykkopycinski added 3 commits March 6, 2020 11:26

[SIEM] Timeline foot styles

47e1d66

Merge branch 'master' of github.com:elastic/kibana into fix/siem-time…

70a89b3

…line-footer-styles # Conflicts: # x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx

use euiflyoutfooter

9112822

patrykkopycinski added Team:SIEM v8.0.0 release_note:skip Skip the PR/issue when compiling release notes v7.7.0 labels Mar 6, 2020

patrykkopycinski requested a review from andrew-goldstein March 6, 2020 20:20

patrykkopycinski self-assigned this Mar 6, 2020

andrew-goldstein reviewed Mar 6, 2020

View reviewed changes

x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx Outdated Show resolved Hide resolved

andrew-goldstein reviewed Mar 6, 2020

View reviewed changes

patrykkopycinski added 10 commits March 6, 2020 22:28

cleanup

555e261

Merge branch 'master' of github.com:elastic/kibana into fix/siem-time…

04efb97

…line-footer-styles

cleanup

d169380

fix tests

316b4e4

cleanup

01f843e

styling

6baefc0

fix types

f07ad6a

callback

f49e250

snapshot

500239c

fix translation file

b343cac

patrykkopycinski requested a review from andrew-goldstein March 9, 2020 16:02

cleanup

67780cc

andrew-goldstein reviewed Mar 9, 2020

View reviewed changes

patrykkopycinski added 5 commits March 10, 2020 00:07

Merge branch 'master' of github.com:elastic/kibana into fix/siem-time…

ccbafc2

…line-footer-styles

WIP

2b3562c

Merge branch 'master' of github.com:elastic/kibana into fix/siem-time…

3f018d6

…line-footer-styles

cleanup

58a4024

Merge branch 'master' of github.com:elastic/kibana into fix/siem-time…

283a79e

…line-footer-styles

andrew-goldstein reviewed Mar 11, 2020

View reviewed changes

x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx Show resolved Hide resolved

andrew-goldstein reviewed Mar 11, 2020

View reviewed changes

x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/column_header.tsx Outdated Show resolved Hide resolved

patrykkopycinski added 4 commits March 12, 2020 00:34

PR comments

97a73e2

fix unnecessary rerenders

129bb4e

Merge branch 'master' of github.com:elastic/kibana into fix/siem-time…

b62f127

…line-footer-styles

Merge branch 'master' of github.com:elastic/kibana into fix/siem-time…

79c4874

…line-footer-styles

andrew-goldstein reviewed Mar 12, 2020

View reviewed changes

Fix Events load more

ff46c1f

patrykkopycinski added 2 commits March 13, 2020 11:53

Merge branch 'master' of github.com:elastic/kibana into fix/siem-time…

5e269d4

…line-footer-styles

Fix resize issue on FF

581952d

andrew-goldstein reviewed Mar 13, 2020

View reviewed changes

x-pack/legacy/plugins/siem/public/components/timeline/properties/index.test.tsx Outdated Show resolved Hide resolved

patrykkopycinski added 2 commits March 14, 2020 22:50

FIx Timeline event note size

b2dd107

Fix types

b86ca0e

Merge branch 'master' into fix/siem-timeline-footer-styles

415dcf6

andrew-goldstein reviewed Mar 16, 2020

View reviewed changes

andrew-goldstein approved these changes Mar 17, 2020

View reviewed changes

Merge branch 'master' into fix/siem-timeline-footer-styles

fde205c

patrykkopycinski merged commit 55003b6 into elastic:master Mar 17, 2020

patrykkopycinski deleted the fix/siem-timeline-footer-styles branch March 17, 2020 10:50

patrykkopycinski mentioned this pull request Mar 17, 2020

[7.x] [SIEM] Fix Timeline footer styling (#59587) #60362

Merged

patrykkopycinski added a commit to patrykkopycinski/kibana that referenced this pull request Mar 17, 2020

[SIEM] Fix Timeline footer styling (elastic#59587)

f659314

patrykkopycinski added a commit that referenced this pull request Mar 17, 2020

[SIEM] Fix Timeline footer styling (#59587) (#60362)

6d10ca8

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SIEM] Fix Timeline footer styling #59587

[SIEM] Fix Timeline footer styling #59587

patrykkopycinski commented Mar 6, 2020

elasticmachine commented Mar 6, 2020

andrew-goldstein Mar 6, 2020

andrew-goldstein Mar 9, 2020

andrew-goldstein Mar 9, 2020

andrew-goldstein Mar 9, 2020

andrew-goldstein Mar 9, 2020

andrew-goldstein Mar 9, 2020

andrew-goldstein Mar 9, 2020

patrykkopycinski Mar 9, 2020

andrew-goldstein Mar 12, 2020

andrew-goldstein commented Mar 12, 2020

andrew-goldstein commented Mar 12, 2020

andrew-goldstein commented Mar 13, 2020

patrykkopycinski commented Mar 15, 2020

andrew-goldstein Mar 16, 2020

andrew-goldstein left a comment

patrykkopycinski commented Mar 17, 2020

kibanamachine commented Mar 17, 2020

		<TimelineKqlFetch id={id} indexPattern={indexPattern} inputId="timeline" />
		{combinedQueries != null ? (

[SIEM] Fix Timeline footer styling #59587

[SIEM] Fix Timeline footer styling #59587

Conversation

patrykkopycinski commented Mar 6, 2020

Summary

Checklist

For maintainers

elasticmachine commented Mar 6, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrew-goldstein commented Mar 12, 2020

andrew-goldstein commented Mar 12, 2020

andrew-goldstein commented Mar 13, 2020

patrykkopycinski commented Mar 15, 2020

Choose a reason for hiding this comment

andrew-goldstein left a comment

Choose a reason for hiding this comment

patrykkopycinski commented Mar 17, 2020

kibanamachine commented Mar 17, 2020

💚 Build Succeeded

History