[Security Solution][RAC] Implement hover actions by michaelolo24 · Pull Request #105500 · elastic/kibana

michaelolo24 · 2021-07-13T19:39:33Z

Summary

WIP This PR does not change any existing architecture, but rather introduces the HoverActions component to security solution with styling matching what currently exists within discover, allowing other team members currently working in other parts of the security solution to pull in and utilize it. In lieu of potentially breaking existing code and for the sake of time, it made more sense to copy DraggableWrapperHoverContent, refactor it for our upcoming needs, and then allow us to modify it as we implement it across the application.

Manual Testing: Below see a sample image of when the new hoverActions component is used to replace the DraggableWrapperHoverContent component within the DraggableWrapper component.

elasticmachine · 2021-07-14T00:52:21Z

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

angorayc · 2021-07-14T11:41:24Z

...ins/security_solution/public/common/components/hover_actions/use_get_timeline_id_from_dom.ts

+import { useState, useEffect } from 'react';
+import { SELECTOR_TIMELINE_GLOBAL_CONTAINER } from '../../../timelines/components/timeline/styles';
+
+export const useGetTimelineIdFromDOM = function (


Is this being used else where?

angorayc

Thank you Michael, checked it with Chrome, all work well.

kibanamachine · 2021-07-15T18:23:10Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`timelines`	209	223	+14

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`timelines`	758	759	+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`	6.3MB	6.3MB	+254.0B
`timelines`	265.3KB	261.4KB	-3.9KB
total			-3.6KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`timelines`	22	23	+1

Page load bundle

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

id	before	after	diff
`timelines`	210.2KB	231.3KB	+21.1KB

Unknown metric groups

API count

id	before	after	diff
`timelines`	877	878	+1

History

💔 Build #138827 failed f9c7a3e
💔 Build #138792 failed a768e7a
💚 Build #138331 succeeded 4d15069
💔 Build #138285 failed 5bb7821

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

jbudz

limits.yml LGTM

packages/kbn-optimizer/limits.yml

michaelolo24 · 2021-07-16T11:57:38Z

@spalger created the issue we discussed here: #105941

spalger

LGTM, sorry, thought I filed this yesterday

kibanamachine · 2021-07-16T19:56:43Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

Co-authored-by: Michael Olorunnisola <michael.olorunnisola@elastic.co>

…enshots below: ![o11y_alerts](https://user-images.githubusercontent.com/4459398/126273572-7e02e3b1-c075-4b1a-9b77-03a6843d6b72.png) ![security_solution_alerts](https://user-images.githubusercontent.com/4459398/126279321-60d8c118-a97f-4c3f-b997-a966f7755d33.png) Related RAC Issue: elastic/security-team#1299 To reduce the size of the `timelines` and `security_solution` plugins, legacy TGrid code and the dependency on `react-beautiful-dnd` will be removed in a follow-up PR. - Related issue: elastic#105941 The legacy code and dependencies will be deleted when the following tasks are completed (in follow-up PRs): - Sorting: Map `redux` sort state to `EuiDataGrid`'s `sorting` prop - Actions: Migrate draggable hover actions to `EuiDataGrid` `cellActions` - related PR: <elastic#105500> - Integrate with the Field Browser for adding / removing columns - related PR: <elastic#105207> - Use `BrowserFields` to display field metadata when hovering over a column - related PR: <elastic#105207> - Migrate Security Solution's actions column config from a single column to multiple columns To desk test this PR, you must enable feature flags in the Observability and Security Solution: - To desk test the `Observability > Alerts` page, add the following settings to `config/kibana.dev.yml`: ``` xpack.observability.unsafe.cases.enabled: true xpack.observability.unsafe.alertingExperience.enabled: true xpack.ruleRegistry.write.enabled: true ``` - To desk test the TGrid in the following Security Solution, edit `x-pack/plugins/security_solution/common/experimental_features.ts` and in the `allowedExperimentalValues` section set: ```typescript tGridEnabled: true, ```

## [RAC] [TGrid] Migrate the TGrid's rendering to `EuiDataGrid` This PR migrates TGrid's rendering to use `EuiDataGrid`, per the screenshots below: ![o11y_alerts](https://user-images.githubusercontent.com/4459398/126413504-e825a5a2-1cb5-475e-b514-01fb819793e1.png) ![security_solution_alerts](https://user-images.githubusercontent.com/4459398/126413546-28df8f28-fa81-4b97-91c6-667589ea683c.png) Related RAC Issue: elastic/security-team#1299 ### Prerequisites to deleting legacy code (reducing bundle sizes) To reduce the size of the `timelines` and `security_solution` plugins, legacy TGrid code and the dependency on `react-beautiful-dnd` will be removed in a follow-up PR. - Related issue: #105941 The legacy code and dependencies will be deleted when the following tasks are completed (in follow-up PRs): - Sorting: Map `redux` sort state to `EuiDataGrid`'s `sorting` prop - Actions: Migrate draggable hover actions to `EuiDataGrid` `cellActions` - related PR: <#105500> - Use `BrowserFields` to display field metadata when hovering over a column - related PR: <#105207> - Migrate Security Solution's actions column config from a single column to multiple columns ### Desk testing To desk test this PR, you must enable feature flags in the Observability and Security Solution: - To desk test the `Observability > Alerts` page, add the following settings to `config/kibana.dev.yml`: ``` xpack.observability.unsafe.cases.enabled: true xpack.observability.unsafe.alertingExperience.enabled: true xpack.ruleRegistry.write.enabled: true ``` - To desk test the TGrid in the following Security Solution, edit `x-pack/plugins/security_solution/common/experimental_features.ts` and in the `allowedExperimentalValues` section set: ```typescript tGridEnabled: true, ```

…#106199) ## [RAC] [TGrid] Migrate the TGrid's rendering to `EuiDataGrid` This PR migrates TGrid's rendering to use `EuiDataGrid`, per the screenshots below: ![o11y_alerts](https://user-images.githubusercontent.com/4459398/126413504-e825a5a2-1cb5-475e-b514-01fb819793e1.png) ![security_solution_alerts](https://user-images.githubusercontent.com/4459398/126413546-28df8f28-fa81-4b97-91c6-667589ea683c.png) Related RAC Issue: elastic/security-team#1299 ### Prerequisites to deleting legacy code (reducing bundle sizes) To reduce the size of the `timelines` and `security_solution` plugins, legacy TGrid code and the dependency on `react-beautiful-dnd` will be removed in a follow-up PR. - Related issue: elastic#105941 The legacy code and dependencies will be deleted when the following tasks are completed (in follow-up PRs): - Sorting: Map `redux` sort state to `EuiDataGrid`'s `sorting` prop - Actions: Migrate draggable hover actions to `EuiDataGrid` `cellActions` - related PR: <elastic#105500> - Use `BrowserFields` to display field metadata when hovering over a column - related PR: <elastic#105207> - Migrate Security Solution's actions column config from a single column to multiple columns ### Desk testing To desk test this PR, you must enable feature flags in the Observability and Security Solution: - To desk test the `Observability > Alerts` page, add the following settings to `config/kibana.dev.yml`: ``` xpack.observability.unsafe.cases.enabled: true xpack.observability.unsafe.alertingExperience.enabled: true xpack.ruleRegistry.write.enabled: true ``` - To desk test the TGrid in the following Security Solution, edit `x-pack/plugins/security_solution/common/experimental_features.ts` and in the `allowedExperimentalValues` section set: ```typescript tGridEnabled: true, ```

#106348) ## [RAC] [TGrid] Migrate the TGrid's rendering to `EuiDataGrid` This PR migrates TGrid's rendering to use `EuiDataGrid`, per the screenshots below: ![o11y_alerts](https://user-images.githubusercontent.com/4459398/126413504-e825a5a2-1cb5-475e-b514-01fb819793e1.png) ![security_solution_alerts](https://user-images.githubusercontent.com/4459398/126413546-28df8f28-fa81-4b97-91c6-667589ea683c.png) Related RAC Issue: elastic/security-team#1299 ### Prerequisites to deleting legacy code (reducing bundle sizes) To reduce the size of the `timelines` and `security_solution` plugins, legacy TGrid code and the dependency on `react-beautiful-dnd` will be removed in a follow-up PR. - Related issue: #105941 The legacy code and dependencies will be deleted when the following tasks are completed (in follow-up PRs): - Sorting: Map `redux` sort state to `EuiDataGrid`'s `sorting` prop - Actions: Migrate draggable hover actions to `EuiDataGrid` `cellActions` - related PR: <#105500> - Use `BrowserFields` to display field metadata when hovering over a column - related PR: <#105207> - Migrate Security Solution's actions column config from a single column to multiple columns ### Desk testing To desk test this PR, you must enable feature flags in the Observability and Security Solution: - To desk test the `Observability > Alerts` page, add the following settings to `config/kibana.dev.yml`: ``` xpack.observability.unsafe.cases.enabled: true xpack.observability.unsafe.alertingExperience.enabled: true xpack.ruleRegistry.write.enabled: true ``` - To desk test the TGrid in the following Security Solution, edit `x-pack/plugins/security_solution/common/experimental_features.ts` and in the `allowedExperimentalValues` section set: ```typescript tGridEnabled: true, ``` Co-authored-by: Andrew Goldstein <andrew-goldstein@users.noreply.github.com>

implement hover actions

5bb7821

michaelolo24 added release_note:enhancement v8.0.0 auto-backport Deprecated - use backport:version if exact versions are needed v7.15.0 labels Jul 13, 2021

michaelolo24 added 2 commits July 13, 2021 20:35

add toggle column action

243fa89

fix import

4d15069

michaelolo24 added release_note:skip Skip the PR/issue when compiling release notes Team:Threat Hunting Security Solution Threat Hunting Team and removed release_note:enhancement labels Jul 14, 2021

michaelolo24 marked this pull request as ready for review July 14, 2021 00:52

michaelolo24 requested a review from a team as a code owner July 14, 2021 00:52

angorayc reviewed Jul 14, 2021

View reviewed changes

angorayc approved these changes Jul 14, 2021

View reviewed changes

move hover actions into timelines

a768e7a

michaelolo24 requested a review from a team as a code owner July 15, 2021 14:08

andrew-goldstein approved these changes Jul 15, 2021

View reviewed changes

michaelolo24 added 4 commits July 15, 2021 10:45

remove unused file

19e95ea

Merge branch 'master' into implement-new-hover-actions

b8f82ca

suspensify components

f9c7a3e

remove bloat and update limits

7b6d6b6

michaelolo24 requested a review from a team as a code owner July 15, 2021 16:11

jbudz approved these changes Jul 15, 2021

View reviewed changes

spalger suggested changes Jul 15, 2021

View reviewed changes

packages/kbn-optimizer/limits.yml Show resolved Hide resolved

michaelolo24 enabled auto-merge (squash) July 16, 2021 16:56

michaelolo24 requested review from spalger and removed request for spalger July 16, 2021 17:26

michaelolo24 requested a review from spalger July 16, 2021 18:03

spalger approved these changes Jul 16, 2021

View reviewed changes

michaelolo24 merged commit 9c5d5c1 into elastic:master Jul 16, 2021

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jul 16, 2021

[Security Solution][RAC] Implement hover actions (elastic#105500)

7ce2ba1

kibanamachine mentioned this pull request Jul 16, 2021

[7.x] [Security Solution][RAC] Implement hover actions (#105500) #106021

Merged

kibanamachine added a commit that referenced this pull request Jul 16, 2021

[Security Solution][RAC] Implement hover actions (#105500) (#106021)

b1e1a9e

Co-authored-by: Michael Olorunnisola <michael.olorunnisola@elastic.co>

andrew-goldstein mentioned this pull request Jul 20, 2021

[RAC] [TGrid] Migrate the TGrid's rendering to EuiDataGrid #106199

Merged

michaelolo24 added the Theme: rac label obsolete label Jul 22, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution][RAC] Implement hover actions#105500

[Security Solution][RAC] Implement hover actions#105500
michaelolo24 merged 8 commits intoelastic:masterfrom
michaelolo24:implement-new-hover-actions

michaelolo24 commented Jul 13, 2021 •

edited

Loading

Uh oh!

elasticmachine commented Jul 14, 2021

Uh oh!

angorayc Jul 14, 2021

Uh oh!

angorayc left a comment

Uh oh!

kibanamachine commented Jul 15, 2021

API count

Uh oh!

jbudz left a comment

Uh oh!

Uh oh!

michaelolo24 commented Jul 16, 2021

Uh oh!

spalger left a comment

Uh oh!

kibanamachine commented Jul 16, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Conversation

michaelolo24 commented Jul 13, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

elasticmachine commented Jul 14, 2021

Uh oh!

angorayc Jul 14, 2021

Choose a reason for hiding this comment

Uh oh!

angorayc left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Jul 15, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

History

Uh oh!

jbudz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

michaelolo24 commented Jul 16, 2021

Uh oh!

spalger left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Jul 16, 2021

💚 Backport successful

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

michaelolo24 commented Jul 13, 2021 •

edited

Loading