[8.16] [Security Solution] Fixed Table height row rendering - Event Rendered View (#212130) (#212596)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[Security Solution] Fixed Table height row rendering - Event Rendered
View (#212130)](https://github.com/elastic/kibana/pull/212130)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Jatin
Kathuria","email":"jatin.kathuria@elastic.co"},"sourceCommit":{"committedDate":"2025-02-26T22:36:50Z","message":"[Security
Solution] Fixed Table height row rendering - Event Rendered View
(#212130)\n\n## Summary\n\nToday Alert table has a height of 600px if
the number of items it\ndisplays exceeds 20. If not, it has a height of
`auto` which means it\nadjust the table height according to the number
of rows displayed.\n\nThis height `auto` surfaces an issue with
EuiDataGrid where it is not\nable to calculate the height of the
displayed rows. This results in\narbitrary height everytime the number
of rows < 20.\n\n\n## Solution\n\nWe are working with EUI Team to
permanently fix the issue. But as a\nworkaround, we are setting up a
fixed height of EuiDataGrid to `600px`\nirrespective of the number of
rows that are visible on the screen. This\nwould sometime lead of extra
flush space visible as can be seen in below\ndemo.\n\nBut it ensures
that user is never in an unusable state. Below is the\nsummary of
changes applied\n\n- Fixed height of `600px` in case of Event Rendered
View\n\nBelow `Before` and `After` Sections show the demo\n\n###
Before\n\n\nhttps://github.com/user-attachments/assets/6efd70b1-a33f-4c98-bd8f-82f57e9cd0cd\n\n###
After\n\n\n\nhttps://github.com/user-attachments/assets/8da31611-12ff-4609-bafb-4b0f53398407\n\n\n\n\n\n\n\n\n\n\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials\n- [ ] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n- [ ] If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.\n- [ ] [Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed\n- [ ] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n###
Identify risks\n\nDoes this PR introduce any risks? For example,
consider risks like hard\nto test bugs, performance regression,
potential of data loss.\n\nDescribe the risk, its severity, and
mitigation for each identified\nrisk. Invite stakeholders and evaluate
how to proceed before merging.\n\n- [ ] [See some
risk\nexamples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)\n-
[ ] ...\n\n---------\n\nCo-authored-by: Philippe Oberti
<philippe.oberti@elastic.co>","sha":"88ab8b672f71033c0f5683464de52dd8fe89863c","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting:Investigations","v8.16.0","backport:version","v8.17.0","v8.18.0","v9.1.0","v8.19.0"],"title":"[Security
Solution] Fixed Table height row rendering - Event Rendered
View","number":212130,"url":"https://github.com/elastic/kibana/pull/212130","mergeCommit":{"message":"[Security
Solution] Fixed Table height row rendering - Event Rendered View
(#212130)\n\n## Summary\n\nToday Alert table has a height of 600px if
the number of items it\ndisplays exceeds 20. If not, it has a height of
`auto` which means it\nadjust the table height according to the number
of rows displayed.\n\nThis height `auto` surfaces an issue with
EuiDataGrid where it is not\nable to calculate the height of the
displayed rows. This results in\narbitrary height everytime the number
of rows < 20.\n\n\n## Solution\n\nWe are working with EUI Team to
permanently fix the issue. But as a\nworkaround, we are setting up a
fixed height of EuiDataGrid to `600px`\nirrespective of the number of
rows that are visible on the screen. This\nwould sometime lead of extra
flush space visible as can be seen in below\ndemo.\n\nBut it ensures
that user is never in an unusable state. Below is the\nsummary of
changes applied\n\n- Fixed height of `600px` in case of Event Rendered
View\n\nBelow `Before` and `After` Sections show the demo\n\n###
Before\n\n\nhttps://github.com/user-attachments/assets/6efd70b1-a33f-4c98-bd8f-82f57e9cd0cd\n\n###
After\n\n\n\nhttps://github.com/user-attachments/assets/8da31611-12ff-4609-bafb-4b0f53398407\n\n\n\n\n\n\n\n\n\n\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials\n- [ ] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n- [ ] If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.\n- [ ] [Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed\n- [ ] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n###
Identify risks\n\nDoes this PR introduce any risks? For example,
consider risks like hard\nto test bugs, performance regression,
potential of data loss.\n\nDescribe the risk, its severity, and
mitigation for each identified\nrisk. Invite stakeholders and evaluate
how to proceed before merging.\n\n- [ ] [See some
risk\nexamples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)\n-
[ ] ...\n\n---------\n\nCo-authored-by: Philippe Oberti
<philippe.oberti@elastic.co>","sha":"88ab8b672f71033c0f5683464de52dd8fe89863c"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.16","8.17","8.18"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.17","label":"v8.17.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/212130","number":212130,"mergeCommit":{"message":"[Security
Solution] Fixed Table height row rendering - Event Rendered View
(#212130)\n\n## Summary\n\nToday Alert table has a height of 600px if
the number of items it\ndisplays exceeds 20. If not, it has a height of
`auto` which means it\nadjust the table height according to the number
of rows displayed.\n\nThis height `auto` surfaces an issue with
EuiDataGrid where it is not\nable to calculate the height of the
displayed rows. This results in\narbitrary height everytime the number
of rows < 20.\n\n\n## Solution\n\nWe are working with EUI Team to
permanently fix the issue. But as a\nworkaround, we are setting up a
fixed height of EuiDataGrid to `600px`\nirrespective of the number of
rows that are visible on the screen. This\nwould sometime lead of extra
flush space visible as can be seen in below\ndemo.\n\nBut it ensures
that user is never in an unusable state. Below is the\nsummary of
changes applied\n\n- Fixed height of `600px` in case of Event Rendered
View\n\nBelow `Before` and `After` Sections show the demo\n\n###
Before\n\n\nhttps://github.com/user-attachments/assets/6efd70b1-a33f-4c98-bd8f-82f57e9cd0cd\n\n###
After\n\n\n\nhttps://github.com/user-attachments/assets/8da31611-12ff-4609-bafb-4b0f53398407\n\n\n\n\n\n\n\n\n\n\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[
]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials\n- [ ] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n- [ ] If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.\n- [ ] [Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed\n- [ ] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n###
Identify risks\n\nDoes this PR introduce any risks? For example,
consider risks like hard\nto test bugs, performance regression,
potential of data loss.\n\nDescribe the risk, its severity, and
mitigation for each identified\nrisk. Invite stakeholders and evaluate
how to proceed before merging.\n\n- [ ] [See some
risk\nexamples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)\n-
[ ] ...\n\n---------\n\nCo-authored-by: Philippe Oberti
<philippe.oberti@elastic.co>","sha":"88ab8b672f71033c0f5683464de52dd8fe89863c"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/212594","number":212594,"state":"OPEN"}]}]
BACKPORT-->

Co-authored-by: Jatin Kathuria <jatin.kathuria@elastic.co>

x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx

@@ -281,6 +281,25 @@ export const AlertsTableComponent: FC<DetectionEngineAlertTableProps> = ({
     };
   }, [isEventRenderedView]);
 
+  /**
+   * if records are too less, we don't want table to be of fixed height.
+   * it should shrink to the content height.
+   * Height setting enables/disables virtualization depending on fixed/undefined height values respectively.
+   * */
+  const alertTableHeight = useMemo(
+    () =>
+      isEventRenderedView
+        ? `${DEFAULT_DATA_GRID_HEIGHT}px`
+        : /*
+         * We keep fixed height in Event rendered because of the row height issue
+         * as mentioned here
+         */
+        count > 20
+        ? `${DEFAULT_DATA_GRID_HEIGHT}px`
+        : undefined,
+    [count, isEventRenderedView]
+  );
+
   const alertStateProps: AlertsTableStateProps = useMemo(
     () => ({
       alertsTableConfigurationRegistry: triggersActionsUi.alertsTableConfigurationRegistry,
@@ -299,10 +318,7 @@ export const AlertsTableComponent: FC<DetectionEngineAlertTableProps> = ({
       onLoaded: onLoad,
       runtimeMappings: sourcererDataView?.runtimeFieldMap as RunTimeMappings,
       toolbarVisibility,
-      // if records are too less, we don't want table to be of fixed height.
-      // it should shrink to the content height.
-      // Height setting enables/disables virtualization depending on fixed/undefined height values respectively.
-      height: count >= 20 ? `${DEFAULT_DATA_GRID_HEIGHT}px` : undefined,
+      height: alertTableHeight,
       initialPageSize: 50,
     }),
     [
@@ -319,7 +335,7 @@ export const AlertsTableComponent: FC<DetectionEngineAlertTableProps> = ({
       onLoad,
       sourcererDataView?.runtimeFieldMap,
       toolbarVisibility,
-      count,
+      alertTableHeight,
     ]
   );