[AI4DSOC] Alert summary table truncates long values and display the field/value pair in tooltip

[PhilippeOberti]

Summary

This PR fixes a small rendering issue in the AI4DSOC alert summary alerts table (those changes will also be automatically applied to the alerts table in the Cases and Attack discovery pages also for AI4DSOC). The basic cell renderer (which renders all values outside of a couple of selected custom renderers we have) was not truncating values, which sometimes lead to weird renders, as seen in the video below.

Screen.Recording.2025-04-28.at.12.56.37.PM.mov

This PR reuses the same logic used today in the Alerts page alerts table: it truncates the values and show the field and value pairs in a tooltip.

Screen.Recording.2025-04-28.at.12.55.35.PM.mov

How to test

This needs to be ran in Serverless:

• yarn es serverless --projectType security
• yarn serverless-security --no-base-path

You also need to enable the AI for SOC tier, by adding the following to your serverless.security.dev.yaml file:

xpack.securitySolutionServerless.productTypes:
  [
    { product_line: 'ai_soc', product_tier: 'search_ai_lake' },
  ]

Use one of these Serverless users:

• platform_engineer
• endpoint_operations_analyst
• endpoint_policy_manager
• admin
• system_indices_superuser

Then:

• generate data: yarn test:generate:serverless-dev
• create 4 catch all rules, each with a name of a AI for SOC integration (google_secops, microsoft_sentinel,, sentinel_one and crowdstrike) => to do that you'll need to temporary comment the serverless.security.dev.yaml config changes as the rules page is not accessible in AI for SOC.
• change this line to installedPackages: availablePackages to force having some packages installed

Checklist

• Unit or functional tests were updated or added to match the most common scenarios

Relates to https://github.com/elastic/security-team/issues/11973

[elasticmachine]

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

[elasticmachine]

💔 Build Failed

• Buildkite Build
• Commit: d81d96b

Failed CI Steps

• Osquery Cypress Tests #5

Test Failures

• [job] [logs] Osquery Cypress Tests #5 / EcsMapping "before each" hook for "should hide and show ecs mappings on Advanced accordion click"
• [job] [logs] Osquery Cypress Tests #5 / EcsMapping "before each" hook for "should properly show static values in form and results"

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	9.1MB	9.1MB	+313.0B

History

[christineweng]

nit: there is a tooltipContent prop in TruncateableText, you can probably reuse that here

[PhilippeOberti]

I just tried and something is actually funky if you use the tooltipContent from the TruncateableText component.
Here's how it looks:

And here's with the current code

I wonder if that's why it was used like this in our current alerts table (which is where I stole the code from).

I'm going to keep the code I have for now. I don't want to make a change to the TruncateableText component as it's being used in a few places and some of them do use the tooltipContent prop....