-
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] Decompose Timelines TGrid component and moved to security_solution #140151
[Security Solution] Decompose Timelines TGrid component and moved to security_solution #140151
Conversation
…ompose-layers-part1 # Conflicts: # x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx # x-pack/plugins/timelines/public/components/t_grid/integrated/index.tsx
…ompose-layers-part1 # Conflicts: # x-pack/plugins/security_solution/public/common/components/event_rendered_view/index.tsx # x-pack/plugins/security_solution/public/common/components/event_rendered_view/selector/index.tsx # x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx # x-pack/plugins/timelines/public/components/t_grid/body/index.tsx # x-pack/plugins/timelines/public/components/t_grid/integrated/index.tsx # x-pack/plugins/timelines/public/components/t_grid/standalone/index.tsx # x-pack/plugins/timelines/public/components/t_grid/styles.tsx
…ompose-layers-part1 # Conflicts: # x-pack/plugins/timelines/public/components/t_grid/standalone/index.tsx
…-part1' into timelines-tgrid-decompose-layers-part1
…ompose-layers-part1 # Conflicts: # x-pack/plugins/timelines/public/store/t_grid/model.ts
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.
The Show top <field>
popover action in the alerts page appears to be ignoring the Additional filters > Include building block alerts
setting.
As a result (for example), the Top host.name
popover will (incorrectly) not count building block alerts, even when they are shown in the table.
To reproduce:
- Filter the alerts page such that all the alerts are from an EQL sequence rule
Expected results
- The entire alerts page is filtered to only include EQL sequence alerts, per screenshot below:
- Add an "exists" filter for the
host.name
field, to make testing easier
Expected results
- A
host.name: exists
filter is included at the top of the alerts page, per the screenshot below:
- Now that all the page-level filters are in place, note the count of alerts shown in the table
Expected results
- Per the screenshot below, the alert count does NOT include building block alerts
- There are no building block alerts shown in the table above
- Inspect the table query
Expected result
- The table query includes the following clause:
"must_not": [
{
"exists": {
"field": "kibana.alert.building_block_type"
}
}
-
Close the table query inspector
-
Open the
host.name
popover for any row, and clickShow top values
Expected result
- When hovering over the values in the Top host.name graph, the sum of the values is equal to the count of alerts in the table, per the screenshot below:
- Inspect the
Top host.name
query
Expected result
- The
Inspect Top host.name
query request includes the following clause:
"must_not": [
{
"exists": {
"field": "kibana.alert.building_block_type"
}
}
-
Close the
Inspect Top host.name
-
Close the
Top host.name
popover -
Open the
Additional filters
drop down, and select theInclude building block alerts
option, per the screenshot below:
Expected results
- The alerts table is updated to display building block alerts
- The alerts table count now includes building block alerts, per the screenshot below:
- Once again, inspect the table query
Expected result
- The table query does NOT include the following clause:
"must_not": [
{
"exists": {
"field": "kibana.alert.building_block_type"
}
}
- Once again, open the
host.name
popover for any row, and clickShow top values
Expected result
- When hovering over the values in the Top host.name graph, the sum of the values is equal to the count of alerts in the table
Actual result
- The sum in the
Top host.name
does NOT equal the alert table count, per the screenshot below:
- Once again, inspect the
Top host.name
query
Expected result
- The
Inspect Top host.name
query does NOT include the following clause:
"must_not": [
{
"exists": {
"field": "kibana.alert.building_block_type"
}
}
Actual result
- The
Inspect Top host.name
query includes the (unexpected) clause, per the screenshot below:
The issue is only sometimes-reproducible. It's easier to reproduce with alerts that don't have an After some debugging, it looks like the issue is the As a result of the const rowRenderer =
getRowRenderer != null
? getRowRenderer({ data: ecsData, rowRenderers })
: rowRenderers.find((x) => x.isInstance(ecsData)) ?? null; was defaulting to the The fix (in my local checkout of the PR branch): is to add the following import: import { getRowRenderer } from '../../../timelines/components/timeline/body/renderers/get_row_renderer'; to and then pass it to the {tableView === 'eventRenderedView' && (
<EventRenderedView
events={nonDeletedEvents}
getRowRenderer={getRowRenderer}
leadingControlColumns={transformedLeadingControlColumns}
pagination={{
pageIndex: pageInfo.activePage,
pageSize: itemsPerPage,
totalItemCount: totalCountMinusDeleted,
pageSizeOptions: itemsPerPageOptions,
showPerPageOptions: true,
}}
rowRenderers={rowRenderers}
scopeId={tableId}
onChangePage={onChangePage}
onChangeItemsPerPage={onChangeItemsPerPage}
additionalControls={alertBulkActions}
unitCountText={unitCountText}
/>
)} Before the fix above, the Event rendered view in the PR branch looks like this: after the fix, it renders as-expected: |
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 @YulNaumenko for all the improvements to the code in this PR 🙏
LGTM 🚀
x-pack/plugins/security_solution/public/common/components/events_tab/events_query_tab_body.tsx
Outdated
Show resolved
Hide resolved
x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
Outdated
Show resolved
Hide resolved
type: 'embedded', | ||
unit, | ||
})} | ||
<StyledEuiPanel |
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.
And it's back! Thanks for doing this work 💪🏾 🎉
setSelected: dataTableActions.setSelected, | ||
}; | ||
|
||
const connector = connect(undefined, mapDispatchToProps); |
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.
Is it possible to remove the connected
and just use useDispatch
for the onRowSelected
and onSelectPage
? I don't think we get any benefit from connect
over hooks when were not actually pulling in any state
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 still need that connect
for making checkboxes working. I didn't dig into details of its implementation, but we can revisit existing code in the follow up issue.
x-pack/plugins/security_solution/public/common/components/events_viewer/right_top_menu.tsx
Outdated
Show resolved
Hide resolved
...ugins/security_solution/public/common/components/toolbar/bulk_actions/alert_bulk_actions.tsx
Outdated
Show resolved
Hide resolved
setStore: (store: Store) => void; | ||
}; | ||
|
||
export const TGrid = (props: TGridComponent) => { |
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.
👌🏾
...gins/security_solution/public/detections/components/rules/rule_preview/preview_histogram.tsx
Outdated
Show resolved
Hide resolved
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 again for doing this work! Just had some nits. 🚀 LGTM!
@elasticmachine merge upstream |
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 this cleanup work, LGTM!
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.
LGT-AWP!
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.
Looks good from alerts area code 🚀
💛 Build succeeded, but was flaky
Failed CI StepsTest Failures
Metrics [docs]Module Count
Public APIs missing comments
Async chunks
Public APIs missing exports
Page load bundle
Unknown metric groupsAPI count
async chunk count
ESLint disabled in files
ESLint disabled line counts
Total ESLint disabled count
History
To update your PR or re-run it, just comment with: cc @YulNaumenko |
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.
LGTM
Resolves #143152
Observability changes
This changes is a result of removal some types from
timelines
plugin:cleaned up timelines plugin related types,
replaced
Pick<ActionProps,'data' | 'eventId' | 'ecsData' | 'setEventsDeleted' >
with the props which were actually used:In this PR we still have references to
@kbn/timelines-plugin
, which needs to be changed later.Threat Hunting team are going to think about replacing
TimelineNonEcsData
with the other type definition (maybeNonEcsData
?) and movingEcs
type to the nontimelines
related plugin/package.Security Solution changes
Before the current PR changes the components dependencies around
TGrid
looked like the image below:After decomposition the
timelines
plugin hosted TGrid HOC and moving all the data tables related sub-components tosecurity_solution
plugin the new components architecture got the next shape:security_solution
plugin changes includes the next things:x-pack/plugins/security_solution/common/types
, which is widely used across the related components.timeline
plugin tosecurity_solution
many test files which had the reference totGridReducer
now cleaned up from the unnecessary logic:and
TableState
references was replaced with the next changes:tGridActions
withdataTableActions
name.control_columns
tosecurity_solution
common plugin components:RowCheckBox
,HeaderCheckBox
andtransformControlColumns
:RowActionComponent
moved fromtimelines
plugin tox-pack/plugins/security_solution/public/common/components/control_columns/row_action
without changes.transformControlColumns
moved from timelines plugin tox-pack/plugins/security_solution/public/common/components/control_columns/transform_control_columns.tsx
. Removed not used propertyhasAlertsCrudPermissions
, added unit test.useDraggableKeyboardWrapper
to security_solution, added reference touseAddToTimeline
, by using timelines plugin with kibana services. Added unit tests.security_solution
asdata_table
store:BodyComponent
toDataTableComponent
x-pack/plugins/security_solution/public/common/components/data_table/index.tsx
Removed some unused properties:
hasAlertsCrudPermissions, appId, getRowRenderer, isEventViewer, tableView, totalSelectAllAlerts, trailingControlColumns
. Current DataTableComponent is a subset of the previous BodyComponent, which includes only table related functionality:TimelineExpandedDetail
toExpandedDetail
to make the type more generic for usage.AlertBulkActionsComponent
moved from timelines plugin tox-pack/plugins/security_solution/public/common/components/toolbar/bulk_actions/alert_bulk_actions.tsx
, just renaming changes.Added
x-pack/plugins/security_solution/public/common/components/toolbar/bulk_actions/types.ts
to consolidate typesuseBulkActionItems
moved from timelines plugin tox-pack/plugins/security_solution/public/common/components/toolbar/bulk_actions/use_bulk_action_items.tsx
. Changed links, renamedAlertsStatus
toAlertWorkflowStatus
, removedin-progress
case handling.useUpdateAlertsStatus
moved from timelines plugin tox-pack/plugins/security_solution/public/common/components/toolbar/bulk_actions/use_update_alerts.ts
. Cleaned up the code from handling Observability API.x-pack/plugins/security_solution/public/common/lib/kuery/index.ts
with the actual implementations ofinstead of referencing timelines plugin.
EventRenderedView
component to security_solution common components. Later planning to make it as a package.EventsViewer
component became the stateful component which is responsible for the data representation managing. Some part from TGridIntegratedComponent and BodyComponent was merged under its logic:x-pack/plugins/security_solution/public/common/components/header_actions
AlertCount
toUnitCount
.security_solution
configuration forAPM_USER_INTERACTIONS
createStore
interface by using the direct reference todataTableReducer
instead of passing down it's value through the params.Timeline plugin changes
security_solution
: