[Security Solution] expanded flyout - right section - table tab implementation by PhilippeOberti · Pull Request #152303 · elastic/kibana

PhilippeOberti · 2023-02-27T23:30:14Z

Summary

This PR leverages the work done in a previous PR and adds the table and json tabs to the Security Solution expandable flyout right section panel:

table tab (reusing the EventFieldsBrowsercomponent) with filtering and cell actions (filter in, filter out, add to timeline and copy to clipboard)
update the right panel context component to share data

How to test

add xpack.securitySolution.enableExperimental: ['securityFlyoutEnabled'] to the kibana.json file
run yarn es snapshot --license trial, yarn test:generate and yarn start --no-base-path
go to the Alerts page, and click on the expand detail button on any row of the table
navigate to the Table tab

Run tests and storybook

node scripts/storybook security_solution to run Storybook
npm run test:jest --config ./x-pack/plugins/security_solution/public/flyout to run the unit tests
yarn cypress:open-as-ci but note that the integration/e2e tests have been written but are now skipped because the feature is protected behind a feature flag, disabled by default. To check them, add 'securityFlyoutEnabled' here

Screen.Recording.2023-03-08.at.10.24.35.AM.mov

https://github.com/elastic/security-team/issues/6067

Checklist

Delete any items that are not applicable to this PR.

Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)

elasticmachine · 2023-03-10T01:59:17Z

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

michaelolo24 · 2023-03-20T14:18:31Z

x-pack/plugins/security_solution/public/flyout/right/tabs/table_tab.test.tsx

+});
+
+describe('<TableTab />', () => {
+  it('should render table component', () => {


Is it worth testing that an actual field shows up in the table as well?

I felt that it wasn't needed here as I'm using the existing EventFieldsBrowser component which already has some unit tests.

michaelolo24 · 2023-03-20T14:20:19Z

x-pack/plugins/security_solution/public/flyout/right/tabs/table_tab.tsx

+      browserFields={browserFields}
+      data={dataFormattedForFieldBrowser}
+      eventId={eventId}
+      isDraggable={false}


We need to determine what we do with this, as we'll have to pass some value for this for the flyout in the timeline context, though we'll probably want to take some time and look at the new timeline designs to figure out how we may want to treat this as well

yeah that is something I need to be more aware of, at the moment I'm focusing only to the flyout from the alerts page, as I'm trying to get the complexity as low as possible...

michaelolo24 · 2023-03-20T14:21:01Z

x-pack/plugins/security_solution/public/flyout/right/tabs/table_tab.tsx


 /**
- * Table view displayed in the document details expandable flyout right section
+ * Table view displayed in the alert details expandable flyout right section


I think you were fine with document here as it would show for a regular event as well

i didn't want to make this change, thanks for catching this!

michaelolo24 · 2023-03-20T16:02:40Z

Works well! I think it's worth discussing with design about using hover actions instead of the actions row in the table. Horizontal space is going to be really important for us here.

michaelolo24

Looks good, just some nits, and some conversation about switching to hover actions

PhilippeOberti · 2023-03-20T16:50:39Z

Works well! I think it's worth discussing with design about using hover actions instead of the actions row in the table. Horizontal space is going to be really important for us here.

that is a really good point. I honestly didn't even think about it as I was reusing the existing EventFieldsBrowser component but I'll check that with @ferenrigue tommorrow!

kibana-ci · 2023-03-20T21:22:54Z

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`securitySolution`	15.8MB	15.8MB	+2.2KB

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`securitySolution`	433	436	+3

Total ESLint disabled count

id	before	after	diff
`securitySolution`	513	516	+3

History

💔 Build #114123 failed 2a8add408c4017aa96b9102d6621ab6d734ccdc1
💚 Build #113432 succeeded 05205d3
💚 Build #113215 succeeded 685eecd
💚 Build #113051 succeeded 25355bc503951f67a483742dee9ab8efd477272d
💔 Build #112898 failed 16ac1dc
💔 Build #112791 failed 9a861e4da7626dd9b4bef5d9deb4eed5e8d410b1

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

PhilippeOberti changed the title ~~[Security Solution] expanded flyout - right section - table tab implementation~~ [Security Solution] expanded flyout - right section - table and json tab implementation Mar 2, 2023

PhilippeOberti changed the title ~~[Security Solution] expanded flyout - right section - table and json tab implementation~~ [Security Solution] expanded flyout - right section - table and json tabs implementation Mar 2, 2023

PhilippeOberti force-pushed the expanded-flyout-6067 branch from cb82e51 to 00396a8 Compare March 2, 2023 17:25

PhilippeOberti marked this pull request as ready for review March 6, 2023 20:06

PhilippeOberti requested review from a team as code owners March 6, 2023 20:06

PhilippeOberti marked this pull request as draft March 7, 2023 20:58

PhilippeOberti force-pushed the expanded-flyout-6067 branch from dfd9e41 to 9a861e4 Compare March 8, 2023 16:21

PhilippeOberti changed the title ~~[Security Solution] expanded flyout - right section - table and json tabs implementation~~ [Security Solution] expanded flyout - right section - table tab implementation Mar 8, 2023

PhilippeOberti force-pushed the expanded-flyout-6067 branch 3 times, most recently from 25355bc to 685eecd Compare March 10, 2023 00:15

PhilippeOberti marked this pull request as ready for review March 10, 2023 01:58

PhilippeOberti requested review from a team as code owners March 10, 2023 01:58

PhilippeOberti added Team:Threat Hunting Security Solution Threat Hunting Team release_note:feature Makes this part of the condensed release notes Team:Threat Hunting:Investigations Security Solution Threat Hunting Investigations Team v8.8.0 labels Mar 10, 2023

PhilippeOberti requested a review from christineweng March 10, 2023 02:48

PhilippeOberti force-pushed the expanded-flyout-6067 branch from 685eecd to 05205d3 Compare March 10, 2023 20:03

michaelolo24 reviewed Mar 20, 2023

View reviewed changes

michaelolo24 approved these changes Mar 20, 2023

View reviewed changes

PhilippeOberti force-pushed the expanded-flyout-6067 branch 2 times, most recently from 2a8add4 to d682cf2 Compare March 20, 2023 18:28

PhilippeOberti added 2 commits March 20, 2023 15:33

[Security Solution] expandable flyout table tab

03c0e41

PR comments

83e6df4

PhilippeOberti force-pushed the expanded-flyout-6067 branch from d682cf2 to 83e6df4 Compare March 20, 2023 19:40

PhilippeOberti merged commit 8b9fb2b into main Mar 20, 2023

PhilippeOberti deleted the expanded-flyout-6067 branch March 20, 2023 21:36

kibanamachine added the backport:skip This PR does not require backporting label Mar 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution] expanded flyout - right section - table tab implementation#152303

[Security Solution] expanded flyout - right section - table tab implementation#152303
PhilippeOberti merged 2 commits intomainfrom
expanded-flyout-6067

PhilippeOberti commented Feb 27, 2023 •

edited

Loading

Uh oh!

elasticmachine commented Mar 10, 2023

Uh oh!

michaelolo24 Mar 20, 2023 •

edited

Loading

Uh oh!

PhilippeOberti Mar 20, 2023

Uh oh!

michaelolo24 Mar 20, 2023

Uh oh!

PhilippeOberti Mar 20, 2023

Uh oh!

michaelolo24 Mar 20, 2023

Uh oh!

PhilippeOberti Mar 20, 2023

Uh oh!

michaelolo24 commented Mar 20, 2023

Uh oh!

michaelolo24 left a comment

Uh oh!

PhilippeOberti commented Mar 20, 2023 •

edited

Loading

Uh oh!

kibana-ci commented Mar 20, 2023

ESLint disabled line counts

Total ESLint disabled count

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

PhilippeOberti commented Feb 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

How to test

Run tests and storybook

Checklist

Uh oh!

elasticmachine commented Mar 10, 2023

Uh oh!

michaelolo24 Mar 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

PhilippeOberti Mar 20, 2023

Choose a reason for hiding this comment

Uh oh!

michaelolo24 Mar 20, 2023

Choose a reason for hiding this comment

Uh oh!

PhilippeOberti Mar 20, 2023

Choose a reason for hiding this comment

Uh oh!

michaelolo24 Mar 20, 2023

Choose a reason for hiding this comment

Uh oh!

PhilippeOberti Mar 20, 2023

Choose a reason for hiding this comment

Uh oh!

michaelolo24 commented Mar 20, 2023

Uh oh!

michaelolo24 left a comment

Choose a reason for hiding this comment

Uh oh!

PhilippeOberti commented Mar 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kibana-ci commented Mar 20, 2023

💚 Build Succeeded

Metrics [docs]

Async chunks

ESLint disabled line counts

Total ESLint disabled count

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

PhilippeOberti commented Feb 27, 2023 •

edited

Loading

michaelolo24 Mar 20, 2023 •

edited

Loading

PhilippeOberti commented Mar 20, 2023 •

edited

Loading