[8.19] [Security solution][Alerts]Fix flyout highlighted table cell renderer (#234222) (#235105)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[Security solution][Alerts]Fix flyout highlighted table cell renderer
(#234222)](#234222)

<!--- Backport version: 10.0.2 -->

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

<!--BACKPORT [{"author":{"name":"Nicholas
Peretti","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-09-11T13:43:13Z","message":"[Security
solution][Alerts]Fix flyout highlighted table cell renderer
(#234222)\n\n## Summary\n\nFixes #231974\n\n### 🛑 The problem\n\nAs
shown in the ticket, when an alert is generated via EQL sequence
rule\nit might have multiple values for the \"source event\"
field.\n\nWhen that happen, the UI is suboptimal.\n\nAnother issue with
this type of rules is that they keep in the ancestors\nalso the ID of
the alerts in the previous sequence on top of the IDs of\nthe documents
that have generated the alerts in the first place.\n\nIdeally, we would
like to only keep the IDs of the original documents\n(events) and skip
the alerts (signals)\n\n### 💡 The solution\n\n- There was a bug in the
highlighted table where a bit of CSS was\napplied to a react fragment\n-
That style was not being applied as react fragments get stripped
from\nthe app tree\n- This has caused the UI to improve, by rendering
multiple values on top\nof each other rather then horizontally\n- As we
don't really know how many values there might be, a \"show
more\"\nsolution has been implemented\n- The values for the highlighted
field get filtered by cross referencing\neach value with its \"depth\"
from the `kibana.alert.ancestors.depth`\n - Only the ancestors with
depth `0` are kept and shown in the table\n \n ### 🎬 Video\n
\n\n\nhttps://github.com/user-attachments/assets/0bbe93b6-bf0e-4d51-887a-7a043a7ffbec","sha":"7b5852cc9a179ca06040f3b93f0f739a42c2a45f","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","backport
missing","Team: SecuritySolution","Team:Threat
Hunting:Investigations","backport:version","v9.1.0","v8.19.0","v9.2.0"],"title":"[Security
solution][Alerts] Fix flyout highlighted
table","number":234222,"url":"https://github.com/elastic/kibana/pull/234222","mergeCommit":{"message":"[Security
solution][Alerts]Fix flyout highlighted table cell renderer
(#234222)\n\n## Summary\n\nFixes #231974\n\n### 🛑 The problem\n\nAs
shown in the ticket, when an alert is generated via EQL sequence
rule\nit might have multiple values for the \"source event\"
field.\n\nWhen that happen, the UI is suboptimal.\n\nAnother issue with
this type of rules is that they keep in the ancestors\nalso the ID of
the alerts in the previous sequence on top of the IDs of\nthe documents
that have generated the alerts in the first place.\n\nIdeally, we would
like to only keep the IDs of the original documents\n(events) and skip
the alerts (signals)\n\n### 💡 The solution\n\n- There was a bug in the
highlighted table where a bit of CSS was\napplied to a react fragment\n-
That style was not being applied as react fragments get stripped
from\nthe app tree\n- This has caused the UI to improve, by rendering
multiple values on top\nof each other rather then horizontally\n- As we
don't really know how many values there might be, a \"show
more\"\nsolution has been implemented\n- The values for the highlighted
field get filtered by cross referencing\neach value with its \"depth\"
from the `kibana.alert.ancestors.depth`\n - Only the ancestors with
depth `0` are kept and shown in the table\n \n ### 🎬 Video\n
\n\n\nhttps://github.com/user-attachments/assets/0bbe93b6-bf0e-4d51-887a-7a043a7ffbec","sha":"7b5852cc9a179ca06040f3b93f0f739a42c2a45f"}},"sourceBranch":"main","suggestedTargetBranches":["9.1","8.19"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/234222","number":234222,"mergeCommit":{"message":"[Security
solution][Alerts]Fix flyout highlighted table cell renderer
(#234222)\n\n## Summary\n\nFixes #231974\n\n### 🛑 The problem\n\nAs
shown in the ticket, when an alert is generated via EQL sequence
rule\nit might have multiple values for the \"source event\"
field.\n\nWhen that happen, the UI is suboptimal.\n\nAnother issue with
this type of rules is that they keep in the ancestors\nalso the ID of
the alerts in the previous sequence on top of the IDs of\nthe documents
that have generated the alerts in the first place.\n\nIdeally, we would
like to only keep the IDs of the original documents\n(events) and skip
the alerts (signals)\n\n### 💡 The solution\n\n- There was a bug in the
highlighted table where a bit of CSS was\napplied to a react fragment\n-
That style was not being applied as react fragments get stripped
from\nthe app tree\n- This has caused the UI to improve, by rendering
multiple values on top\nof each other rather then horizontally\n- As we
don't really know how many values there might be, a \"show
more\"\nsolution has been implemented\n- The values for the highlighted
field get filtered by cross referencing\neach value with its \"depth\"
from the `kibana.alert.ancestors.depth`\n - Only the ancestors with
depth `0` are kept and shown in the table\n \n ### 🎬 Video\n
\n\n\nhttps://github.com/user-attachments/assets/0bbe93b6-bf0e-4d51-887a-7a043a7ffbec","sha":"7b5852cc9a179ca06040f3b93f0f739a42c2a45f"}}]}]
BACKPORT-->

Author: NicholasPeretti

x-pack/solutions/security/plugins/security_solution/public/common/components/event_details/translations.ts

@@ -46,3 +46,8 @@ export const EVENT_SUMMARY_VIEW_CONTEXT_TOOLTIP = i18n.translate(
     defaultMessage: 'Add this event as context',
   }
 );
+
+export const EVENT_SOURCE_FIELD_DESCRIPTOR = i18n.translate(
+  'xpack.securitySolution.detections.alerts.ancestorsId',
+  { defaultMessage: 'Source event' }
+);

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/highlighted_fields_cell.test.tsx

@@ -6,10 +6,11 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import {
   HIGHLIGHTED_FIELDS_AGENT_STATUS_CELL_TEST_ID,
   HIGHLIGHTED_FIELDS_BASIC_CELL_TEST_ID,
+  HIGHLIGHTED_FIELDS_CELL_TEST_ID,
   HIGHLIGHTED_FIELDS_LINKED_CELL_TEST_ID,
 } from './test_ids';
 import { HighlightedFieldsCell } from './highlighted_fields_cell';
@@ -176,4 +177,35 @@ describe('<HighlightedFieldsCell />', () => {
 
     expect(container).toBeEmptyDOMElement();
   });
+
+  it('should truncate content if too large', () => {
+    const values = new Array(5).fill(null).map((_, i) => i.toString());
+    const { container } = render(
+      <TestProviders>
+        <HighlightedFieldsCell values={values} field={'field'} scopeId={SCOPE_ID} />
+      </TestProviders>
+    );
+
+    function getDisplayedValues() {
+      return container.querySelectorAll(`[data-test-subj$=${HIGHLIGHTED_FIELDS_CELL_TEST_ID}]`);
+    }
+
+    function getToggleButton() {
+      return container.querySelector('[data-test-subj="toggle-show-more-button"]');
+    }
+
+    //  Only the first 2 values should be displayed by default
+    expect(getDisplayedValues().length).toBe(2);
+
+    //  The toggle button to see all the values should be visible
+    expect(getToggleButton()).toBeVisible();
+
+    //  Click the toggle button and check that the rest of the elements are visible
+    fireEvent.click(getToggleButton()!);
+    expect(getDisplayedValues().length).toBe(values.length);
+
+    //  Click the toggle button again and check that the rest of the elements has been hidden
+    fireEvent.click(getToggleButton()!);
+    expect(getDisplayedValues().length).toBe(2);
+  });
 });

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/highlighted_fields_cell.tsx

@@ -6,9 +6,10 @@
  */
 
 import type { FC } from 'react';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { css } from '@emotion/react';
-import { useEuiTheme } from '@elastic/eui';
+import { EuiButtonEmpty, useEuiTheme } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { getAgentTypeForAgentIdField } from '../../../../common/lib/endpoint/utils/get_agent_type_for_agent_id_field';
 import type { ResponseActionAgentType } from '../../../../../common/endpoint/service/response_actions/constants';
 import { AgentStatus } from '../../../../common/components/endpoint/agents/agent_status';
@@ -22,6 +23,8 @@ import {
 import { isFlyoutLink } from '../../../shared/utils/link_utils';
 import { PreviewLink } from '../../../shared/components/preview_link';
 
+const EMPTY_ARRAY: string[] = [];
+
 export interface HighlightedFieldsCellProps {
   /**
    * Highlighted field's name used to know what component to display
@@ -45,6 +48,16 @@ export interface HighlightedFieldsCellProps {
    * This is false by default (for the AI for SOC alert summary page) and will be true for the alerts page.
    */
   showPreview?: boolean;
+  /**
+   * The indexName to be passed to the flyout preview panel
+   * when clicking on "Source event" id
+   */
+  ancestorsIndexName?: string;
+  /**
+   * Caps the amount of values displayed in the cell.
+   * If the limit is reached a "show more" button is being rendered
+   */
+  displayValuesLimit?: number;
 }
 
 /**
@@ -56,14 +69,85 @@ export const HighlightedFieldsCell: FC<HighlightedFieldsCellProps> = ({
   originalField = '',
   scopeId = '',
   showPreview = false,
+  ancestorsIndexName,
+  displayValuesLimit = 2,
 }) => {
   const agentType: ResponseActionAgentType = useMemo(() => {
     return getAgentTypeForAgentIdField(originalField);
   }, [originalField]);
   const { euiTheme } = useEuiTheme();
+  const [isContentExpanded, setIsContentExpanded] = useState(false);
+  const toggleContentExpansion = useCallback(
+    () => setIsContentExpanded((currentIsOpen) => !currentIsOpen),
+    []
+  );
+
+  const visibleValues = useMemo(() => {
+    /**
+     * Check if a limit was set and if the limit
+     * is within the values size
+     */
+    if (
+      displayValuesLimit &&
+      displayValuesLimit > 0 &&
+      displayValuesLimit < (values?.length ?? 0)
+    ) {
+      return values?.slice(0, displayValuesLimit);
+    }
+
+    return values;
+  }, [values, displayValuesLimit]);
+
+  const overflownValues = useMemo(() => {
+    /**
+     * Check if a limit was set and if the limit
+     * is within the values size
+     */
+    if (
+      displayValuesLimit &&
+      displayValuesLimit > 0 &&
+      displayValuesLimit < (values?.length ?? 0)
+    ) {
+      return values?.slice(displayValuesLimit);
+    }
+
+    return EMPTY_ARRAY;
+  }, [values, displayValuesLimit]);
+
+  const isContentTooLarge = useMemo(
+    () => !!displayValuesLimit && displayValuesLimit < (values?.length ?? 0),
+    [displayValuesLimit, values]
+  );
+
+  const renderValue = useCallback(
+    (value: string, i: number) => (
+      <div key={`${i}-${value}`} data-test-subj={`${value}-${HIGHLIGHTED_FIELDS_CELL_TEST_ID}`}>
+        {showPreview && isFlyoutLink({ field, scopeId }) ? (
+          <PreviewLink
+            field={field}
+            value={value}
+            scopeId={scopeId}
+            data-test-subj={HIGHLIGHTED_FIELDS_LINKED_CELL_TEST_ID}
+            ancestorsIndexName={ancestorsIndexName}
+          />
+        ) : field === AGENT_STATUS_FIELD_NAME ? (
+          <AgentStatus
+            agentId={String(value ?? '')}
+            agentType={agentType}
+            data-test-subj={HIGHLIGHTED_FIELDS_AGENT_STATUS_CELL_TEST_ID}
+          />
+        ) : (
+          <span data-test-subj={HIGHLIGHTED_FIELDS_BASIC_CELL_TEST_ID}>{value}</span>
+        )}
+      </div>
+    ),
+    [agentType, ancestorsIndexName, field, scopeId, showPreview]
+  );
+
+  if (values === null) return null;
 
   return (
-    <React.Fragment
+    <div
       css={css`
         div {
           margin-bottom: ${euiTheme.size.xs};
@@ -74,32 +158,28 @@ export const HighlightedFieldsCell: FC<HighlightedFieldsCellProps> = ({
         }
       `}
     >
-      {values != null &&
-        values.map((value, i) => {
-          return (
-            <div
-              key={`${i}-${value}`}
-              data-test-subj={`${value}-${HIGHLIGHTED_FIELDS_CELL_TEST_ID}`}
-            >
-              {showPreview && isFlyoutLink({ field, scopeId }) ? (
-                <PreviewLink
-                  field={field}
-                  value={value}
-                  scopeId={scopeId}
-                  data-test-subj={HIGHLIGHTED_FIELDS_LINKED_CELL_TEST_ID}
-                />
-              ) : field === AGENT_STATUS_FIELD_NAME ? (
-                <AgentStatus
-                  agentId={String(value ?? '')}
-                  agentType={agentType}
-                  data-test-subj={HIGHLIGHTED_FIELDS_AGENT_STATUS_CELL_TEST_ID}
-                />
-              ) : (
-                <span data-test-subj={HIGHLIGHTED_FIELDS_BASIC_CELL_TEST_ID}>{value}</span>
-              )}
-            </div>
-          );
-        })}
-    </React.Fragment>
+      {visibleValues != null && visibleValues.map((value, i) => renderValue(value, i))}
+      {isContentExpanded && overflownValues?.map(renderValue)}
+      {isContentTooLarge && (
+        <EuiButtonEmpty
+          size="xs"
+          flush="both"
+          onClick={toggleContentExpansion}
+          data-test-subj="toggle-show-more-button"
+        >
+          {isContentExpanded ? (
+            <FormattedMessage
+              id="xpack.securitySolution.flyout.alertsHighlightedField.showMore"
+              defaultMessage="Show less"
+            />
+          ) : (
+            <FormattedMessage
+              id="xpack.securitySolution.flyout.alertsHighlightedField.showLess"
+              defaultMessage="Show more"
+            />
+          )}
+        </EuiButtonEmpty>
+      )}
+    </div>
   );
 };

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/hooks/use_highlighted_fields.test.tsx

@@ -265,4 +265,45 @@ describe('useHighlightedFields', () => {
       },
     });
   });
+
+  it('should only include ancestors with depth 0 in the "source event" field', () => {
+    const hookResult = renderHook(() =>
+      useHighlightedFields({
+        dataFormattedForFieldBrowser: dataFormattedForFieldBrowser
+          .filter((item) => item.field !== 'kibana.alert.ancestors.id')
+          .concat([
+            {
+              category: 'kibana',
+              field: 'kibana.alert.ancestors.depth',
+              values: ['0', '1', '0', '1'],
+              originalValue: ['0', '1', '0', '1'],
+              isObjectArray: false,
+            },
+            {
+              category: 'kibana',
+              field: 'kibana.alert.ancestors.id',
+              values: [
+                'AZkupz0BWCNsCtptscaJ',
+                'e7f11264eb2dbcdd2588ebd64f3cdbfc04d47d364db700b817ded6503f995b75',
+                'AZkupz0BWCNsCtptscaU',
+                '3c8211dd158a96ef6884fc50267fd778ae36704fa8b8a448399d4832e93cac3b',
+              ],
+              originalValue: [
+                'AZkupz0BWCNsCtptscaJ',
+                'e7f11264eb2dbcdd2588ebd64f3cdbfc04d47d364db700b817ded6503f995b75',
+                'AZkupz0BWCNsCtptscaU',
+                '3c8211dd158a96ef6884fc50267fd778ae36704fa8b8a448399d4832e93cac3b',
+              ],
+              isObjectArray: false,
+            },
+          ]),
+        investigationFields: ['kibana.alert.ancestors.id'],
+      })
+    );
+
+    expect(hookResult.result.current['kibana.alert.ancestors.id'].values).toEqual([
+      'AZkupz0BWCNsCtptscaJ',
+      'AZkupz0BWCNsCtptscaU',
+    ]);
+  });
 });

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/hooks/use_highlighted_fields.ts

@@ -14,6 +14,7 @@ import {
   getEventCategoriesFromData,
   getHighlightedFieldsToDisplay,
 } from '../../../../common/components/event_details/get_alert_summary_rows';
+import { EVENT_SOURCE_FIELD_NAME } from '../../../../timelines/components/timeline/body/renderers/constants';
 
 export interface UseHighlightedFieldsParams {
   /**
@@ -92,7 +93,7 @@ export const useHighlightedFields = ({
     }
 
     // if there aren't any values we can skip this highlighted field
-    const fieldValues = item.values;
+    let fieldValues = item.values;
     if (!fieldValues || isEmpty(fieldValues)) {
       return acc;
     }
@@ -112,6 +113,17 @@ export const useHighlightedFields = ({
       return acc;
     }
 
+    /**
+     * Source event use-case.
+     * In this case we only want to show ancestors of level "0".
+     * We can obtain those by using the `kibana.alert.ancestors.depth` field
+     */
+    if (item.field === EVENT_SOURCE_FIELD_NAME) {
+      const depts = dataFormattedForFieldBrowser.find(
+        (_item) => _item.field === `kibana.alert.ancestors.depth`
+      );
+      fieldValues = fieldValues.filter((_, idx) => (depts?.values?.[idx] ?? '0') === '0');
+    }
     return {
       ...acc,
       [field.id]: {

x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/preview_link.tsx

@@ -38,6 +38,11 @@ interface PreviewLinkProps {
    * React components to render, if none provided, the value will be rendered
    */
   children?: React.ReactNode;
+  /**
+   * The indexName to be passed to the flyout preview panel
+   * when clicking on "Source event" id
+   */
+  ancestorsIndexName?: string;
 }
 
 /**
@@ -50,6 +55,7 @@ export const PreviewLink: FC<PreviewLinkProps> = ({
   scopeId,
   ruleId,
   children,
+  ancestorsIndexName,
   'data-test-subj': dataTestSubj = FLYOUT_PREVIEW_LINK_TEST_ID,
 }) => {
   const { openPreviewPanel } = useExpandableFlyoutApi();
@@ -62,8 +68,9 @@ export const PreviewLink: FC<PreviewLinkProps> = ({
         field,
         scopeId,
         ruleId,
+        ancestorsIndexName,
       }),
-    [value, field, scopeId, ruleId]
+    [value, field, scopeId, ruleId, ancestorsIndexName]
   );
 
   const onClick = useCallback(() => {