-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Security Solution] Remove sourcerer browser fields hover actions to help performance #131363
[Security Solution] Remove sourcerer browser fields hover actions to help performance #131363
Conversation
73e1a56
to
40465da
Compare
@@ -97,6 +97,8 @@ const FAILURES_COLUMN: Columns<AuthenticationsEdges, AuthenticationsEdges> = { | |||
operator: IS_OPERATOR, | |||
}, | |||
}} | |||
isAggregatable={true} | |||
fieldType={'keyword'} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fieldType="keyword"
💅
// this component is rendered in the context of the active timeline. This | ||
// behavior enables the 'All events' view by appending the alerts index | ||
// to the index pattern. | ||
const activeScope: SourcererScopeName = |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for cleaning this up
@@ -69,6 +69,8 @@ export const DraggableScoreComponent = ({ | |||
key={`draggable-score-draggable-wrapper-${id}`} | |||
dataProvider={dataProviderProp} | |||
render={render} | |||
isAggregatable={true} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We could do isAggregatable
and fieldType="keyword"
@@ -219,6 +239,8 @@ interface RowItemOverflowProps { | |||
maxOverflowItems: number; | |||
overflowIndexStart: number; | |||
rowItems: string[]; | |||
fieldType?: string; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should these be optional considering we're defaulting the values so they should always be defined? Just want to prevent any errors in the future by someone accidentally removing these
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
removed the default values
@@ -72,37 +72,39 @@ const EventsComponent: React.FC<Props> = ({ | |||
tabType, | |||
leadingControlColumns, | |||
trailingControlColumns, | |||
}) => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
merge conflict change?
@@ -50,9 +50,10 @@ export const plainColumnRenderer: ColumnRenderer = { | |||
asPlainText={asPlainText} | |||
contextId={`plain-column-renderer-formatted-field-value-${timelineId}`} | |||
eventId={eventId} | |||
fieldFormat={field.format || ''} | |||
fieldFormat={field.format ?? ''} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍🏾
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is awesome work, thanks for dealing with the tedium of this 😓 LGTM! 🚀 Just had a few minor comments about code style:
Tested the presence and functionality of the hover actions in: Tgrid tables(alert, rule, hosts, network) pages, detail pages (rule, host, network, user), timeline (query, correlation, pinned), details flyout
If there's no lint rule for it I don't want to hear it! |
Kidding, will address both your's and Jan's comments |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉
@@ -26,6 +26,8 @@ describe('Bytes', () => { | |||
contextId="test" | |||
eventId="abc" | |||
fieldName="network.bytes" | |||
fieldType="string" | |||
isAggregatable={true} | |||
isDraggable={true} | |||
value={`1234567`} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, we should really have a lint rule for this :D Is there some sort of styleguide for Kibana?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the improvement!
💚 Build SucceededMetrics [docs]Async chunks
History
To update your PR or re-run it, just comment with: |
💔 All backports failed
Manual backportTo create the backport manually run:
Questions ?Please refer to the Backport tool documentation |
…help performance (elastic#131363) * Batch setState calls to make sure all state updates are applied evenly * Remove sourcerer hook from useHoverActions and pass needed fields as props * Update snapshots, remove ReactDOM batching * Make row renderers aggregatable where appropriate * add pagination to details table * Fix hover actions on host/network details * Remove unneeded props * fix table pagination tests * update test * Show top n for authentications and threat indicator match rules * Fix anomaly score, entity, influence, and user id show top N * Pass props on wrapper and not data provider * Add missing row renderer draggables to use top N props * Update snapshots * Pr feedback Co-authored-by: Michael Olorunnisola <michael.olorunnisola@elastic.co> Co-authored-by: Robert Austin <robert.austin@elastic.co> (cherry picked from commit f3c1ad7) # Conflicts: # x-pack/plugins/security_solution/public/common/components/authentication/helpers.tsx # x-pack/plugins/security_solution/public/common/lib/cell_actions/expanded_cell_value_actions.tsx
…ns to help performance (#131363) (#132261) * [Security Solution] Remove sourcerer browser fields hover actions to help performance (#131363) * Batch setState calls to make sure all state updates are applied evenly * Remove sourcerer hook from useHoverActions and pass needed fields as props * Update snapshots, remove ReactDOM batching * Make row renderers aggregatable where appropriate * add pagination to details table * Fix hover actions on host/network details * Remove unneeded props * fix table pagination tests * update test * Show top n for authentications and threat indicator match rules * Fix anomaly score, entity, influence, and user id show top N * Pass props on wrapper and not data provider * Add missing row renderer draggables to use top N props * Update snapshots * Pr feedback Co-authored-by: Michael Olorunnisola <michael.olorunnisola@elastic.co> Co-authored-by: Robert Austin <robert.austin@elastic.co> (cherry picked from commit f3c1ad7) # Conflicts: # x-pack/plugins/security_solution/public/common/components/authentication/helpers.tsx # x-pack/plugins/security_solution/public/common/lib/cell_actions/expanded_cell_value_actions.tsx * meant to delete this * fix some lint rules i hope Co-authored-by: Kevin Qualters <56408403+kqualters-elastic@users.noreply.github.com>
Summary
useHoverActions was previously using the useSourcererDataView in every single table cell being rendered on the page to derive information that could already be derived from existing props or a place where the behavior of cells is hard coded, as in most of the cells in basic tables in security solution. This had a massively negative impact on performance, as useSourcererDataView would make network requests when called in some cases, leading to the cluster to fallover, and was probably a tremendous use of memory as well given the size of browser fields in most cases. This pr removes use of that hook, and passes existing props down to the hover actions logic to help performance. Specifically, in event viewer based tables, the fieldFromBrowserField prop already contained the information needed to determine if a field should show the top N cell action. In timeline based views, the
header: ColumnHeaderOptions
prop (which is more or less a BrowserField with some optional fields and some fields renamed slightly, not sure why) is used to show the top N cell action. For the basic tables where column definitions are defined manually, the props are defined alongside the render behavior for the cell. I think the isAllowedType array we are currently using might need to be revisited, as some of those types are not valid elasticsearch field data types, but this pr is just to maintain the existing functionality.Areas of the app affected:
Any part of the security solution that has a table cell that uses hover actions.
How This Improves Performance
The useHoverActions hook previously made use of sourcerer hooks directly, and since this hover actions hook is used in every single cell in a table, in some places this would fire off a network request to the index multiple times. For hover actions, even 1 request is too many, as the information that browserFields was used for was already available mostly as props, this created a whole lot of wasted memory in the app.
All variations of hover actions should be working as before:
hover_actions.mp4
Checklist
8.2.1 Perf PR Checklist