Alerty summary table flyout setup

[PhilippeOberti]

Summary

This PR is a follow up of this previous one which was adding the foundation for the alerts table on the AI for SOC alert summary page.
It focuses on adding the necessary boilerplate code for the alert summary flyout implementation:

• add the row action cell component that displays the open flyout icon as well as the logic to open the flyout
• add the boilerplate files for the new ai_for_soc panel
• make necessary changes to a few components within the document_details folder that will be used in both flyouts
• implement the header for the flyout
• make sure the flyout history works with this new panel

Screen.Recording.2025-04-07.at.6.03.39.PM.mov

The alerts page alert details flyout remains unchanged, except for the severity value at the very top, which is now displayed as an EuiBadge instead of an EuiHealth. This guarantees consistency with the design of the new AI for SOC flyout:

Notes

Follow PRs will tackle custom column titles, cell renderers, row actions... for the table (wip here).

Mocks for reference: https://www.figma.com/design/DYs7j4GQdAhg7aWTLI4R69/AI4DSOC?node-id=3284-69401&p=f&m=dev

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
• change this line to r.name === p.name to make sure there will be matches between integrations and rules

Checklist

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios

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

[elasticmachine]

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

[michaelolo24]

Thanks for getting this new design done so quickly! 👍🏾

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 2f41e08
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
securitySolution	7205	7212	+7

Async chunks

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

id	before	after	diff
securitySolution	8.9MB	9.0MB	+4.4KB

Page load bundle

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

id	before	after	diff
securitySolution	88.5KB	88.5KB	-3.0B

Unknown metric groups

References to deprecated APIs

id	before	after	diff
securitySolution	357	359	+2

History

• 💚 Build #291820 succeeded 00ef35b
• 💔 Build #291751 failed 841d89b
• 💚 Build #291691 succeeded e78e02a
• 💔 Build #291661 failed f39833b
• 💛 Build #291009 was flaky 5982fe1