[Cloud Security] CloudSecurityDataTable component

[opauloh]

Summary

This PR introduces the Cloud Security DataTable component, meant to replace and consolidate the tables used in the Cloud Security plugin

The CloudSecurityDataTable component is a wrapper over the <UnifiedDataTable/> component. We made that decision based on the number of features it provides for the users plus support from the most common features such as Flyout, Sort, Filtering, and Pagination to the most advanced features like Virtualization and DataView integration.

• Virtualization: Thanks to Virtualization, users can fetch more data on the table than the limit of 500, and also use larger items per page if desired.
• DataView integration: This option allows users to rename Columns as needed by setting custom labels in the DataView.
• Column control: Users can move columns and resize it as needed, and that settings is saved on the local storage.
• Row Height control: Users can modify in the Advanced Settings -> discover:rowHeight the height of the row.

Below is a Matrix comparing the features between the current Findings table, the Vulnerabilities Data Grid and the new CloudSecurityDataTable.

Feature	CloudSecurity DataTable (new >= 8.11)	Findings Table (current <= 8.10)	Vulnerabilities Data Grid (current <= 8.10)
Tooltip on Cell Hover	❌	✅	❌
Column Sorting	✅	✅	✅
Multi Column Sorting	✅	❌	✅
Column filtering	✅	✅	✅
Pagination	✅	✅	✅
Rows per page	✅	✅	✅
Virtualization (Support to load more data)	✅	❌	❌
Custom component on Column Header	❌ (only custom text)	✅	❌
Additional controls on the left	✅	❌	✅
Text truncation	✅	✅	✅
Override Style	✅ (#166994)	✅	✅
Load more button	✅	❌	❌
Resize column	✅	❌	✅
Reorder column	✅	❌	✅
FullScreen button	✅	❌	✅
User-defined row height	✅	❌	❌
external pagination control (enables Flyout pagination)	❌	✅	✅
user-defined column renaming	✅ (using DataViews)	❌	❌

Regressions

There are some regressions such as losing the ability to paginate on the Flyout and the table pagination is no longer controlled by URL params, that's because pagination is controlled by an internal state in the <UnifiedDataTable/> component, and we plan to re-enable those features again in the future by contributing to the <UnifiedDataTable/> component.

Screenshots

Videos

Basic Features + Virtualization

Video.1.mov

Video.2.mov

DataView integration

Screen.Recording.2023-09-28.at.10.29.26.PM.mov

Row Height Control

Screen.Recording.2023-09-28.at.10.34.18.PM.mov

[elasticmachine]

Pinging @elastic/kibana-cloud-security-posture (Team:Cloud Security)

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: e1dc390

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
cloudSecurityPosture	238	358	+120

Async chunks

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

id	before	after	diff
cloudSecurityPosture	281.5KB	383.7KB	+102.2KB

Page load bundle

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

id	before	after	diff
cloudSecurityPosture	15.7KB	14.8KB	-925.0B

History

• 💛 Build #164271 was flaky 8820da8
• 💔 Build #164269 failed c6ab64d
• 💔 Build #164199 failed 6cb56c9
• 💔 Build #163798 failed 5737847

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

[kibanamachine]

💚 All backports created successfully

Status	Branch	Result
✅	8.11

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation