[Cloud Security] Added graph visualization in alert's flyout by kfirpeled · Pull Request #196034 · elastic/kibana

kfirpeled · 2024-10-13T20:12:16Z

Summary

Enables a new experimental feature. To visualize an alert/event by a graph.

When the alert/event does not contain the relevant data the graph preview will not be visible (confirmed by @tinnytintin10)

To enable the feature through kibana's config:

xpack.securitySolution.enableExperimental: ['graphVisualizationInFlyoutEnabled']

Event's graph visualization: 🎥

Screen.Recording.2024-10-16.at.10.40.15.mov

Alert's graph visualization: 🎥

Screen.Recording.2024-10-13.at.22.40.48.mov

Alert in rule preview: 🎥

Screen.Recording.2024-10-16.at.10.45.10.mov

List of TODO's

Add FTR test to host's flyout
Add FTR test to alerts preview
Enhance graph_preview_container UT to cover all edge cases
Enhance visualization_section UT to cover all edge cases

List of open issues (will be tracked in a different ticket):

Graph preview search on the past 60 days, which can lead to an empty graph
API should return 404 when the feature is not enabled
~~Empty state message~~ Not showing the graph preview instead.

How to test:

First, enable the feature, add to config/kibana.dev.yml:

xpack.securitySolution.enableExperimental: ['graphVisualizationInFlyoutEnabled']

Second, load mocked data

node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/logs_gcp_audit \ 
  --es-url http://elastic:changeme@localhost:9200 \
  --kibana-url http://elastic:changeme@localhost:5601

node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/security_alerts \
  --es-url http://elastic:changeme@localhost:9200 \
  --kibana-url http://elastic:changeme@localhost:5601

Go to the alerts page
Change the query time range to show alerts from the 13th of October 2024
Open the alerts flyout
Scroll to see the graph visualization : D

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Flaky Test Runner was used on any tests changed
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

- Changed structure of nodes so measurement of node's height will include its label

kfirpeled · 2024-10-13T22:27:53Z

x-pack/plugins/security_solution/common/experimental_features.ts

+  /**
+   * Enables graph visualization in alerts flyout
+   */
+  graphVisualizationInFlyoutEnabled: false,


I'm open for better naming suggestions

@kfirpeled thank you for bringing it up. There is an advanced setting that enables the Visualize section, and it is referred to as visualizationInFlyoutEnabled. To avoid confusion on the flags, what do you think about making it more specific to alert graph, like alertGraphInFlyoutEnabled?

I attached new videos to the PR's description, you can see now alert's preview and hosts having graph preview

...ecurity_solution/public/flyout/document_details/right/components/graph_preview_container.tsx

…opped to work.

PhilippeOberti

left some commented code to remove when you have the chance. Also I had a question regarding the automatic resizing of the text within the graph: is UIUX aware of this? When resizing the flyout the text goes sometimes very small (unreadable) and sometimes pretty big that it looks odd next to the rest of the flyout's content...

Screen.Recording.2024-10-21.at.10.36.52.AM.mov

Approving to not block merging this as the functionality is behind a feature flag. Thanks for making all the changes!

...ecurity_solution/public/flyout/document_details/right/components/graph_preview_container.tsx

christineweng · 2024-10-21T19:48:34Z

x-pack/packages/kbn-cloud-security-posture/graph/README.md

appreciate you adding the docs and examples!

.../plugins/security_solution/public/flyout/document_details/right/components/graph_preview.tsx

kfirpeled · 2024-10-25T12:40:20Z

When resizing the flyout the text goes sometimes very small (unreadable) and sometimes pretty big that it looks odd next to the rest of the flyout's content...

Thanks for catching this one @PhilippeOberti , I changed the default behaviour and the zoom is now set from 2 to 1.3
It behaves much better now IMO.

elasticmachine · 2024-10-25T13:52:11Z

💚 Build Succeeded

Buildkite Build
Commit: db07ec1
Storybooks Preview
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-196034-db07ec17fdda

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	6035	6117	+82

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/cloud-security-posture-graph`	0	17	+17

Async chunks

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

id	before	after	diff
`securitySolution`	20.2MB	20.5MB	⚠️ +291.3KB

Page load bundle

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

id	before	after	diff
`securitySolution`	87.5KB	87.6KB	+118.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/cloud-security-posture-graph`	0	18	+18

async chunk count

id	before	after	diff
`securitySolution`	99	100	+1

ESLint disabled in files

id	before	after	diff
`@kbn/cloud-security-posture-graph`	0	1	+1

ESLint disabled line counts

id	before	after	diff
`@kbn/cloud-security-posture-graph`	0	2	+2
`@kbn/test-suites-xpack`	731	732	+1
total			+3

Total ESLint disabled count

id	before	after	diff
`@kbn/cloud-security-posture-graph`	0	3	+3
`@kbn/test-suites-xpack`	756	757	+1
total			+4

History

💛 Build #244314 was flaky 049b4c0
💚 Build #243915 succeeded e4e07c6
💚 Build #243864 succeeded 9b3dc3c
💚 Build #243398 succeeded 04c2c8b
💔 Build #243306 failed 7eb5c49

kibanamachine · 2024-10-25T14:30:35Z

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/11520168145

@tinnytintin10

…#196034) ## Summary Enables a new experimental feature. To visualize an alert/event by a graph. When the alert/event does not contain the relevant data the graph preview will not be visible (confirmed by @tinnytintin10) To enable the feature through kibana's config: ```yaml xpack.securitySolution.enableExperimental: ['graphVisualizationInFlyoutEnabled'] ``` <details> <summary>Event's graph visualization: 🎥 </summary> https://github.com/user-attachments/assets/4cee2032-173e-4b44-b371-a8e187763764 </details> <details> <summary>Alert's graph visualization: 🎥 </summary> https://github.com/user-attachments/assets/4fb942d0-6704-4c79-862c-956821ce59b6 </details> <details> <summary>Alert in rule preview: 🎥 </summary> https://github.com/user-attachments/assets/4f8d086e-1ee4-414f-8efa-4715c1d5e1f6 </details> **List of TODO's** - Add FTR test to host's flyout - Add FTR test to alerts preview - Enhance graph_preview_container UT to cover all edge cases - Enhance visualization_section UT to cover all edge cases **List of open issues (will be tracked in a different ticket):** - Graph preview search on the past 60 days, which can lead to an empty graph - API should return 404 when the feature is not enabled - ~Empty state message~ Not showing the graph preview instead. **How to test:** First, enable the feature, add to `config/kibana.dev.yml`: ```yaml xpack.securitySolution.enableExperimental: ['graphVisualizationInFlyoutEnabled'] ``` Second, load mocked data ```bash node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/logs_gcp_audit \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/security_alerts \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 ``` 1. Go to the alerts page 2. Change the query time range to show alerts from the 13th of October 2024 3. Open the alerts flyout 4. Scroll to see the graph visualization : D ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit b4a80d8)

kibanamachine · 2024-10-25T14:35:29Z

💚 All backports created successfully

Status	Branch	Result
✅	8.x

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

Questions ?

Please refer to the Backport tool documentation

@tinnytintin10

…ut (#196034) (#197837) # Backport This will backport the following commits from `main` to `8.x`: - [[Cloud Security] Added graph visualization in alert's flyout (#196034)](#196034)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Kfir Peled <61654899+kfirpeled@users.noreply.github.com>

## Summary Enhances the graph API to support filtering by bool query. Graph API is an internal API that hasn't been released yet to ESS, and is not available yet on serverless (behind a feature-flag in kibana.config) due to the above I don't consider it a breaking change. Previous API request body: ```js query: schema.object({ actorIds: schema.arrayOf(schema.string()), eventIds: schema.arrayOf(schema.string()), // TODO: use zod for range validation instead of config schema start: schema.oneOf([schema.number(), schema.string()]), end: schema.oneOf([schema.number(), schema.string()]), ``` New API request body: ```js nodesLimit: schema.maybe(schema.number()), // Maximum number of nodes in the graph (currently the graph doesn't handle very well graph with over 100 nodes) showUnknownTarget: schema.maybe(schema.boolean()), // Whether or not to return events that miss target.entity.id query: schema.object({ eventIds: schema.arrayOf(schema.string()), // Event ids that triggered the alert, would be marked in red // TODO: use zod for range validation instead of config schema start: schema.oneOf([schema.number(), schema.string()]), end: schema.oneOf([schema.number(), schema.string()]), esQuery: schema.maybe( // elasticsearch's dsl bool query schema.object({ bool: schema.object({ filter: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))), must: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))), should: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))), must_not: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))), }), }) ``` New field to the graph API response (pseudo): ```js messages?: ApiMessageCode[] enum ApiMessageCode { ReachedNodesLimit = 'REACHED_NODES_LIMIT', } ``` ### How to test Toggle feature flag in kibana.dev.yml ```yaml xpack.securitySolution.enableExperimental: ['graphVisualizationInFlyoutEnabled'] ``` To test through the UI you can use the mocked data ```bash node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/logs_gcp_audit \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/security_alerts \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 ``` 1. Go to the alerts page 2. Change the query time range to show alerts from the 13th of October 2024 (**IMPORTANT**) 3. Open the alerts flyout 5. Scroll to see the graph visualization : D To test **only** the API you can use the mocked data ```bash node scripts/es_archiver load x-pack/test/cloud_security_posture_api/es_archives/logs_gcp_audit \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 ``` And through dev tools: ``` POST kbn:/internal/cloud_security_posture/graph?apiVersion=1 { "query": { "eventIds": [], "start": "now-1y/y", "end": "now/d", "esQuery": { "bool": { "filter": [ { "match_phrase": { "actor.entity.id": "admin@example.com" } } ] } } } } ``` ### Related PRs - #196034 - #195307 ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

## Summary Enhances the graph API to support filtering by bool query. Graph API is an internal API that hasn't been released yet to ESS, and is not available yet on serverless (behind a feature-flag in kibana.config) due to the above I don't consider it a breaking change. Previous API request body: ```js query: schema.object({ actorIds: schema.arrayOf(schema.string()), eventIds: schema.arrayOf(schema.string()), // TODO: use zod for range validation instead of config schema start: schema.oneOf([schema.number(), schema.string()]), end: schema.oneOf([schema.number(), schema.string()]), ``` New API request body: ```js nodesLimit: schema.maybe(schema.number()), // Maximum number of nodes in the graph (currently the graph doesn't handle very well graph with over 100 nodes) showUnknownTarget: schema.maybe(schema.boolean()), // Whether or not to return events that miss target.entity.id query: schema.object({ eventIds: schema.arrayOf(schema.string()), // Event ids that triggered the alert, would be marked in red // TODO: use zod for range validation instead of config schema start: schema.oneOf([schema.number(), schema.string()]), end: schema.oneOf([schema.number(), schema.string()]), esQuery: schema.maybe( // elasticsearch's dsl bool query schema.object({ bool: schema.object({ filter: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))), must: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))), should: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))), must_not: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))), }), }) ``` New field to the graph API response (pseudo): ```js messages?: ApiMessageCode[] enum ApiMessageCode { ReachedNodesLimit = 'REACHED_NODES_LIMIT', } ``` ### How to test Toggle feature flag in kibana.dev.yml ```yaml xpack.securitySolution.enableExperimental: ['graphVisualizationInFlyoutEnabled'] ``` To test through the UI you can use the mocked data ```bash node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/logs_gcp_audit \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/security_alerts \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 ``` 1. Go to the alerts page 2. Change the query time range to show alerts from the 13th of October 2024 (**IMPORTANT**) 3. Open the alerts flyout 5. Scroll to see the graph visualization : D To test **only** the API you can use the mocked data ```bash node scripts/es_archiver load x-pack/test/cloud_security_posture_api/es_archives/logs_gcp_audit \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 ``` And through dev tools: ``` POST kbn:/internal/cloud_security_posture/graph?apiVersion=1 { "query": { "eventIds": [], "start": "now-1y/y", "end": "now/d", "esQuery": { "bool": { "filter": [ { "match_phrase": { "actor.entity.id": "admin@example.com" } } ] } } } } ``` ### Related PRs - elastic#196034 - elastic#195307 ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit 160e626)

## Summary Added popover support to the graph component. In order to scale the rendering component of nodes, we prefer not to add popover per node but to manage a single popover for each use-case. In the popover stories you can see an example of two different popovers being triggered by different buttons on the node. <details> <summary>Popover support 📹 </summary> https://github.com/user-attachments/assets/cb5bc2ce-037a-4f9b-b71a-f95a9362dde0 </details> <details> <summary>Dark mode support 📹 </summary> https://github.com/user-attachments/assets/a55f2a88-ed07-40e2-9404-30a2042bf4fc </details> ### How to test To test this PR you can run ``` yarn storybook cloud_security_posture_packages ``` And to test the alerts flyout (for regression test): Toggle feature flag in kibana.dev.yml ```yaml xpack.securitySolution.enableExperimental: ['graphVisualizationInFlyoutEnabled'] ``` Load mocked data ```bash node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/logs_gcp_audit \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/security_alerts \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 ``` 1. Go to the alerts page 2. Change the query time range to show alerts from the 13th of October 2024 (**IMPORTANT**) 3. Open the alerts flyout 5. Scroll to see the graph visualization : D ### Related PRs - #196034 - #195307 ### Checklist - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

…99053) ## Summary Added popover support to the graph component. In order to scale the rendering component of nodes, we prefer not to add popover per node but to manage a single popover for each use-case. In the popover stories you can see an example of two different popovers being triggered by different buttons on the node. <details> <summary>Popover support 📹 </summary> https://github.com/user-attachments/assets/cb5bc2ce-037a-4f9b-b71a-f95a9362dde0 </details> <details> <summary>Dark mode support 📹 </summary> https://github.com/user-attachments/assets/a55f2a88-ed07-40e2-9404-30a2042bf4fc </details> ### How to test To test this PR you can run ``` yarn storybook cloud_security_posture_packages ``` And to test the alerts flyout (for regression test): Toggle feature flag in kibana.dev.yml ```yaml xpack.securitySolution.enableExperimental: ['graphVisualizationInFlyoutEnabled'] ``` Load mocked data ```bash node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/logs_gcp_audit \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/security_alerts \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 ``` 1. Go to the alerts page 2. Change the query time range to show alerts from the 13th of October 2024 (**IMPORTANT**) 3. Open the alerts flyout 5. Scroll to see the graph visualization : D ### Related PRs - elastic#196034 - elastic#195307 ### Checklist - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) (cherry picked from commit f3de593)

…99053) ## Summary Added popover support to the graph component. In order to scale the rendering component of nodes, we prefer not to add popover per node but to manage a single popover for each use-case. In the popover stories you can see an example of two different popovers being triggered by different buttons on the node. <details> <summary>Popover support 📹 </summary> https://github.com/user-attachments/assets/cb5bc2ce-037a-4f9b-b71a-f95a9362dde0 </details> <details> <summary>Dark mode support 📹 </summary> https://github.com/user-attachments/assets/a55f2a88-ed07-40e2-9404-30a2042bf4fc </details> ### How to test To test this PR you can run ``` yarn storybook cloud_security_posture_packages ``` And to test the alerts flyout (for regression test): Toggle feature flag in kibana.dev.yml ```yaml xpack.securitySolution.enableExperimental: ['graphVisualizationInFlyoutEnabled'] ``` Load mocked data ```bash node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/logs_gcp_audit \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/security_alerts \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 ``` 1. Go to the alerts page 2. Change the query time range to show alerts from the 13th of October 2024 (**IMPORTANT**) 3. Open the alerts flyout 5. Scroll to see the graph visualization : D ### Related PRs - elastic#196034 - elastic#195307 ### Checklist - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

## Summary Enhances the graph API to support filtering by bool query. Graph API is an internal API that hasn't been released yet to ESS, and is not available yet on serverless (behind a feature-flag in kibana.config) due to the above I don't consider it a breaking change. Previous API request body: ```js query: schema.object({ actorIds: schema.arrayOf(schema.string()), eventIds: schema.arrayOf(schema.string()), // TODO: use zod for range validation instead of config schema start: schema.oneOf([schema.number(), schema.string()]), end: schema.oneOf([schema.number(), schema.string()]), ``` New API request body: ```js nodesLimit: schema.maybe(schema.number()), // Maximum number of nodes in the graph (currently the graph doesn't handle very well graph with over 100 nodes) showUnknownTarget: schema.maybe(schema.boolean()), // Whether or not to return events that miss target.entity.id query: schema.object({ eventIds: schema.arrayOf(schema.string()), // Event ids that triggered the alert, would be marked in red // TODO: use zod for range validation instead of config schema start: schema.oneOf([schema.number(), schema.string()]), end: schema.oneOf([schema.number(), schema.string()]), esQuery: schema.maybe( // elasticsearch's dsl bool query schema.object({ bool: schema.object({ filter: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))), must: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))), should: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))), must_not: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))), }), }) ``` New field to the graph API response (pseudo): ```js messages?: ApiMessageCode[] enum ApiMessageCode { ReachedNodesLimit = 'REACHED_NODES_LIMIT', } ``` ### How to test Toggle feature flag in kibana.dev.yml ```yaml xpack.securitySolution.enableExperimental: ['graphVisualizationInFlyoutEnabled'] ``` To test through the UI you can use the mocked data ```bash node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/logs_gcp_audit \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/security_alerts \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 ``` 1. Go to the alerts page 2. Change the query time range to show alerts from the 13th of October 2024 (**IMPORTANT**) 3. Open the alerts flyout 5. Scroll to see the graph visualization : D To test **only** the API you can use the mocked data ```bash node scripts/es_archiver load x-pack/test/cloud_security_posture_api/es_archives/logs_gcp_audit \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 ``` And through dev tools: ``` POST kbn:/internal/cloud_security_posture/graph?apiVersion=1 { "query": { "eventIds": [], "start": "now-1y/y", "end": "now/d", "esQuery": { "bool": { "filter": [ { "match_phrase": { "actor.entity.id": "admin@example.com" } } ] } } } } ``` ### Related PRs - elastic#196034 - elastic#195307 ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

…99053) ## Summary Added popover support to the graph component. In order to scale the rendering component of nodes, we prefer not to add popover per node but to manage a single popover for each use-case. In the popover stories you can see an example of two different popovers being triggered by different buttons on the node. <details> <summary>Popover support 📹 </summary> https://github.com/user-attachments/assets/cb5bc2ce-037a-4f9b-b71a-f95a9362dde0 </details> <details> <summary>Dark mode support 📹 </summary> https://github.com/user-attachments/assets/a55f2a88-ed07-40e2-9404-30a2042bf4fc </details> ### How to test To test this PR you can run ``` yarn storybook cloud_security_posture_packages ``` And to test the alerts flyout (for regression test): Toggle feature flag in kibana.dev.yml ```yaml xpack.securitySolution.enableExperimental: ['graphVisualizationInFlyoutEnabled'] ``` Load mocked data ```bash node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/logs_gcp_audit \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/security_alerts \ --es-url http://elastic:changeme@localhost:9200 \ --kibana-url http://elastic:changeme@localhost:5601 ``` 1. Go to the alerts page 2. Change the query time range to show alerts from the 13th of October 2024 (**IMPORTANT**) 3. Open the alerts flyout 5. Scroll to see the graph visualization : D ### Related PRs - elastic#196034 - elastic#195307 ### Checklist - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

kfirpeled added 5 commits October 13, 2024 21:09

Created Graph component

977874c

- Changed structure of nodes so measurement of node's height will include its label

Ensure target has an id

8456abf

Added graph preview to alerts flyout

2203f65

Hides react flow attribution

431e59f

Added cloud security storybook to kibana's storybook website

c97c18c

kfirpeled added backport:prev-minor release_note:skip Skip the PR/issue when compiling release notes labels Oct 13, 2024

kfirpeled added 6 commits October 13, 2024 22:01

Experimental feature disabled by default

f856800

fixed unknown target's label

edebaf6

code cleanup

ff920d6

Disable controls, dragging and zoom when in preview

832ddf4

Removed panel's

bc189ee

Enhanced experience

94c22d4

kfirpeled commented Oct 13, 2024

View reviewed changes

...ecurity_solution/public/flyout/document_details/right/components/graph_preview_container.tsx Outdated Show resolved Hide resolved

kfirpeled added the ci:build-serverless-image label Oct 14, 2024

kfirpeled and others added 7 commits October 15, 2024 11:19

Merge branch 'main' into cspm/cdr-alerts-flyout2

47dc47a

Refactor cloud-security-posture storybook folder structure

8876474

Refactored graph data types

6545761

Renamed stories

652652e

Added FTR test that check it is being rendered

8d0d79a

Refactoring

81bc3d2

Fixed API type, removing redundant properties. Fixed dragging that st…

e8f03b0

…opped to work.

kfirpeled marked this pull request as ready for review October 15, 2024 18:03

kfirpeled requested review from a team as code owners October 15, 2024 18:03

kibanamachine added 2 commits October 15, 2024 18:14

[CI] Auto-commit changed files from 'node scripts/generate codeowners'

11f1565

[CI] Auto-commit changed files from 'node scripts/notice'

e06bbdf

PhilippeOberti approved these changes Oct 21, 2024

View reviewed changes

...ecurity_solution/public/flyout/document_details/right/components/graph_preview_container.tsx Outdated Show resolved Hide resolved

christineweng reviewed Oct 21, 2024

View reviewed changes

kfirpeled added 2 commits October 22, 2024 15:02

Enhancing graph behavior in preview - max zoom is set to 1.3

0c0594d

Memorizing graph's data

9aa0863

kfirpeled and others added 2 commits October 25, 2024 13:41

Merge branch 'main' into cspm/cdr-alerts-flyout2

2a0b590

refactored shapes

db07ec1

kfirpeled enabled auto-merge (squash) October 25, 2024 12:50

kfirpeled removed the ci:build-serverless-image label Oct 25, 2024

kfirpeled merged commit b4a80d8 into elastic:main Oct 25, 2024

kibanamachine added the v9.0.0 label Oct 25, 2024

kibanamachine mentioned this pull request Oct 25, 2024

[8.x] [Cloud Security] Added graph visualization in alert's flyout (#196034) #197837

Merged

kibanamachine added the v8.17.0 label Oct 25, 2024

This was referenced Nov 5, 2024

[Cloud Security] Added filter support to graph API #199048

Merged

[Cloud Security] Added popover support for graph component #199053

Merged

kfirpeled mentioned this pull request Nov 11, 2024

[Cloud Security] Converts graph visualization from experimental feature to the advanced settings #199712

Closed

4 tasks

nastasha-solomon mentioned this pull request Sep 8, 2025

[Internal][Security][8.18, 8.19, and 9.x/Serverless]: Doc the securitySolution:enableGraphVisualization advanced setting elastic/docs-content#2850

Closed

Conversation

kfirpeled commented Oct 13, 2024 • edited by kibanamachine Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Uh oh!

kfirpeled Oct 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

christineweng Oct 15, 2024

Choose a reason for hiding this comment

Uh oh!

kfirpeled Oct 16, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

PhilippeOberti left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

christineweng Oct 21, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kfirpeled commented Oct 25, 2024

Uh oh!

elasticmachine commented Oct 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

async chunk count

ESLint disabled in files

ESLint disabled line counts

Total ESLint disabled count

History

Uh oh!

kibanamachine commented Oct 25, 2024

Uh oh!

kibanamachine commented Oct 25, 2024

💚 All backports created successfully

Questions ?

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

kfirpeled commented Oct 13, 2024 •

edited by kibanamachine

Loading

kfirpeled Oct 13, 2024 •

edited

Loading

elasticmachine commented Oct 25, 2024 •

edited

Loading