[Cloud Security] Graph visualization and API by kfirpeled · Pull Request #195307 · elastic/kibana

kfirpeled · 2024-10-07T18:37:42Z

Summary

This PR adds:

Graph visualization component using xyflow, and layouts the graph using dagre.
API that supports the graph visualization
API tests
Serverless API tests

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

Identify if related.hosts, related.ip and related.user are mapped before the query. (can be fixed by ES|QL: Allow operations on non-existing fields elasticsearch#112912)
Update nodes rendering to match recent figma changes
Return 404 when feature is not enabled
Add keyboard accessibility
Resolve axe failures (run axe in browser: FF, Chrome)

How to test

You can view the graph using storybook's playground.

To test this PR you can run

yarn storybook cloud_security_posture_packages

To test the API you can use the mocked data

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": {
    "actorIds": ["admin@example.com"],
    "eventIds": [""],
    "start": "now-1y/y",
    "end": "now/d"
  }
}

Checklist

Delete any items that are not applicable to this PR.

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

…ctable

…d target

jbudz

src/dev/storybook/aliases.ts

…ocs'

…fix'

kibanamachine · 2024-10-09T19:15:36Z

Flaky Test Runner Stats

🎉 All tests passed! - kibana-flaky-test-suite-runner#7116

[✅] x-pack/test/cloud_security_posture_api/config.ts: 25/25 tests passed.

see run history

kfirpeled · 2024-10-12T02:03:57Z

Also, I would like to know what security/snyk and license/snyk checks are showing before merging

They seem to pass now

kibanamachine · 2024-10-12T03:37:25Z

Starting backport for target branches: 8.x

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

kibanamachine · 2024-10-12T03:42:17Z

💔 All backports failed

Status	Branch	Result
❌	8.x	Backport failed because of merge conflicts You might need to backport the following PRs to 8.x: - [Cloud Security] Skipping flaky test (#195993) - [Search Assistant] Use scopes to modify behavior contextually (#195785) - chore(quality-gates): update manual judgement on staging QGs (#195944) - [FTR] support custom native roles in serverless tests (#194677) - [Search] Update search integrations (#195628)

Manual backport

To create the backport manually run:

node scripts/backport --pr 195307

Questions ?

Please refer to the Backport tool documentation

kfirpeled · 2024-10-12T08:17:19Z

💚 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

## Summary This PR adds: - Graph visualization component using `xyflow`, and layouts the graph using `dagre`. - API that supports the graph visualization - API tests - Serverless API tests **List of open issues (will be tracked in a different ticket):** - Identify if `related.hosts`, `related.ip` and `related.user` are mapped before the query. (can be fixed by elastic/elasticsearch#112912) - Update nodes rendering to match recent figma changes - Return 404 when feature is not enabled - Add keyboard accessibility - Resolve 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)) ### How to test You can view the graph using storybook's [playground](https://supreme-adventure-8qjmlp1.pages.github.io/graph-storybook/?path=/story/components-graph-components-dagree-layout-graph--graph-stacked-edge-cases). To test this PR you can run ``` yarn storybook cloud_security_posture_packages ``` To test 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": { "actorIds": ["admin@example.com"], "eventIds": [""], "start": "now-1y/y", "end": "now/d" } } ``` ### Checklist Delete any items that are not applicable to this PR. - [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 - [ ] 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)) - [x] 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)) - [x] 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>

kibanamachine · 2024-10-12T15:55:22Z

Starting backport for target branches: 8.x

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

## Summary This PR adds: - Graph visualization component using `xyflow`, and layouts the graph using `dagre`. - API that supports the graph visualization - API tests - Serverless API tests **List of open issues (will be tracked in a different ticket):** - Identify if `related.hosts`, `related.ip` and `related.user` are mapped before the query. (can be fixed by elastic/elasticsearch#112912) - Update nodes rendering to match recent figma changes - Return 404 when feature is not enabled - Add keyboard accessibility - Resolve 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)) ### How to test You can view the graph using storybook's [playground](https://supreme-adventure-8qjmlp1.pages.github.io/graph-storybook/?path=/story/components-graph-components-dagree-layout-graph--graph-stacked-edge-cases). To test this PR you can run ``` yarn storybook cloud_security_posture_packages ``` To test 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": { "actorIds": ["admin@example.com"], "eventIds": [""], "start": "now-1y/y", "end": "now/d" } } ``` ### Checklist Delete any items that are not applicable to this PR. - [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 - [ ] 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)) - [x] 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)) - [x] 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 be0eadf)

kibanamachine · 2024-10-12T16:00:19Z

💚 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

# Backport This will backport the following commits from `main` to `8.x`: - [[Cloud Security] Graph visualization and API (#195307)](#195307)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Kfir Peled <61654899+kfirpeled@users.noreply.github.com>

elasticmachine · 2024-10-18T17:15:13Z

Pinging @elastic/kibana-cloud-security-posture (Team:Cloud Security)

## 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 7 commits September 16, 2024 23:12

First phase of graph visualization, completed first iteration of nodes.

69eb169

refactoring and type fixes

89966e9

Completed custom edge path

7a84669

Added memo to all nodes and disabled option to make the handles conne…

e954e4d

…ctable

Implemented graph layout, centers groups and labels between source an…

c01d9c6

…d target

Introduced new graph API together with dagre layout

554492a

Type fixes

2a7217b

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

kfirpeled and others added 5 commits October 8, 2024 20:48

Merge branch 'main' into cspm/cdr-graph-api

8cb27f1

Refactor - removed previous attempts

daca2bb

Refactoring - removed duplicated code from tests

83cd3e9

Added API tests

4a5cc87

Merge branch 'main' into cspm/cdr-graph-api

3adc29e

kfirpeled marked this pull request as ready for review October 9, 2024 09:29

kfirpeled requested review from a team as code owners October 9, 2024 09:29

jbudz approved these changes Oct 9, 2024

View reviewed changes

kfirpeled and others added 8 commits October 9, 2024 19:13

Merge branch 'main' into cspm/cdr-graph-api

a2b565d

Layout fix

e985811

Added tests

aaf55e7

Refactoring tests

b120633

package.json formatting fix

3ed13d4

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

d75506b

…ocs'

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

186c9fd

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

ddc54d3

…fix'

kfirpeled and others added 3 commits October 9, 2024 23:01

Type check fixes

711600e

Added serverless tests for graph api

b3fc0ca

Merge branch 'main' into cspm/cdr-graph-api

6411874

Merge branch 'main' into cspm/cdr-graph-api

b01dc36

kfirpeled enabled auto-merge (squash) October 12, 2024 02:03

kfirpeled merged commit be0eadf into elastic:main Oct 12, 2024

kibanamachine added the v9.0.0 label Oct 12, 2024

kfirpeled mentioned this pull request Oct 12, 2024

[8.x] [Cloud Security] Graph visualization and API (#195307) #196012

Closed

kibanamachine mentioned this pull request Oct 12, 2024

[8.x] [Cloud Security] Graph visualization and API (#195307) #196015

Merged

kibanamachine added the v8.16.0 label Oct 12, 2024

kfirpeled mentioned this pull request Oct 14, 2024

[Cloud Security] Refactoring cloud-security-posture packages' folder structure #196008

Merged

bhavyarm added the Team:Cloud Security Cloud Security team related label Oct 18, 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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Cloud Security] Graph visualization and API#195307

[Cloud Security] Graph visualization and API#195307
kfirpeled merged 34 commits intoelastic:mainfrom
kfirpeled:cspm/cdr-graph-api

kfirpeled commented Oct 7, 2024 •

edited by kibanamachine

Loading

Uh oh!

jbudz left a comment

Uh oh!

kibanamachine commented Oct 9, 2024

Uh oh!

kfirpeled commented Oct 12, 2024

Uh oh!

kibanamachine commented Oct 12, 2024

Uh oh!

kibanamachine commented Oct 12, 2024

Uh oh!

kfirpeled commented Oct 12, 2024

Uh oh!

kibanamachine commented Oct 12, 2024

Uh oh!

kibanamachine commented Oct 12, 2024

Uh oh!

elasticmachine commented Oct 18, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

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

Uh oh!

Summary

How to test

Checklist

Uh oh!

jbudz left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Oct 9, 2024

Flaky Test Runner Stats

🎉 All tests passed! - kibana-flaky-test-suite-runner#7116

Uh oh!

kfirpeled commented Oct 12, 2024

Uh oh!

kibanamachine commented Oct 12, 2024

Uh oh!

kibanamachine commented Oct 12, 2024

💔 All backports failed

Manual backport

Questions ?

Uh oh!

kfirpeled commented Oct 12, 2024

💚 All backports created successfully

Questions ?

Uh oh!

kibanamachine commented Oct 12, 2024

Uh oh!

kibanamachine commented Oct 12, 2024

💚 All backports created successfully

Questions ?

Uh oh!

elasticmachine commented Oct 18, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

kfirpeled commented Oct 7, 2024 •

edited by kibanamachine

Loading