…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)

…9053) (#199889)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Cloud Security] Added popover support for graph component
(#199053)](#199053)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Kfir
Peled","email":"61654899+kfirpeled@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-12T23:54:09Z","message":"[Cloud
Security] Added popover support for graph component (#199053)\n\n##
Summary\r\n\r\nAdded popover support to the graph component. \r\nIn
order to scale the rendering component of nodes, we prefer not to
add\r\npopover per node but to manage a single popover for each
use-case. In\r\nthe popover stories you can see an example of two
different popovers\r\nbeing triggered by different buttons on the
node.\r\n\r\n<details>\r\n<summary>Popover support 📹
</summary>\r\n\r\n\r\nhttps://github.com/user-attachments/assets/cb5bc2ce-037a-4f9b-b71a-f95a9362dde0\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>Dark
mode support 📹
</summary>\r\n\r\n\r\nhttps://github.com/user-attachments/assets/a55f2a88-ed07-40e2-9404-30a2042bf4fc\r\n\r\n</details>\r\n\r\n###
How to test\r\n\r\nTo test this PR you can run\r\n\r\n```\r\nyarn
storybook cloud_security_posture_packages\r\n```\r\n\r\nAnd to test the
alerts flyout (for regression test):\r\n\r\nToggle feature flag in
kibana.dev.yml\r\n\r\n```yaml\r\nxpack.securitySolution.enableExperimental:
['graphVisualizationInFlyoutEnabled']\r\n```\r\n\r\nLoad mocked
data\r\n\r\n```bash\r\nnode scripts/es_archiver load
x-pack/test/cloud_security_posture_functional/es_archives/logs_gcp_audit
\\ \r\n --es-url http://elastic:changeme@localhost:9200 \\\r\n
--kibana-url http://elastic:changeme@localhost:5601\r\n\r\nnode
scripts/es_archiver load
x-pack/test/cloud_security_posture_functional/es_archives/security_alerts
\\\r\n --es-url http://elastic:changeme@localhost:9200 \\\r\n
--kibana-url http://elastic:changeme@localhost:5601\r\n```\r\n\r\n1. Go
to the alerts page\r\n2. Change the query time range to show alerts from
the 13th of October\r\n2024 (**IMPORTANT**)\r\n3. Open the alerts
flyout\r\n5. Scroll to see the graph visualization : D\r\n\r\n\r\n###
Related PRs\r\n\r\n- https://github.com/elastic/kibana/pull/196034\r\n-
https://github.com/elastic/kibana/pull/195307\r\n\r\n###
Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] This
renders correctly on smaller devices using a responsive\r\nlayout. (You
can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[ ] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"f3de5930493fb34a174e14f6dabdc1faf0722cad","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor"],"title":"[Cloud
Security] Added popover support for graph
component","number":199053,"url":"https://github.com/elastic/kibana/pull/199053","mergeCommit":{"message":"[Cloud
Security] Added popover support for graph component (#199053)\n\n##
Summary\r\n\r\nAdded popover support to the graph component. \r\nIn
order to scale the rendering component of nodes, we prefer not to
add\r\npopover per node but to manage a single popover for each
use-case. In\r\nthe popover stories you can see an example of two
different popovers\r\nbeing triggered by different buttons on the
node.\r\n\r\n<details>\r\n<summary>Popover support 📹
</summary>\r\n\r\n\r\nhttps://github.com/user-attachments/assets/cb5bc2ce-037a-4f9b-b71a-f95a9362dde0\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>Dark
mode support 📹
</summary>\r\n\r\n\r\nhttps://github.com/user-attachments/assets/a55f2a88-ed07-40e2-9404-30a2042bf4fc\r\n\r\n</details>\r\n\r\n###
How to test\r\n\r\nTo test this PR you can run\r\n\r\n```\r\nyarn
storybook cloud_security_posture_packages\r\n```\r\n\r\nAnd to test the
alerts flyout (for regression test):\r\n\r\nToggle feature flag in
kibana.dev.yml\r\n\r\n```yaml\r\nxpack.securitySolution.enableExperimental:
['graphVisualizationInFlyoutEnabled']\r\n```\r\n\r\nLoad mocked
data\r\n\r\n```bash\r\nnode scripts/es_archiver load
x-pack/test/cloud_security_posture_functional/es_archives/logs_gcp_audit
\\ \r\n --es-url http://elastic:changeme@localhost:9200 \\\r\n
--kibana-url http://elastic:changeme@localhost:5601\r\n\r\nnode
scripts/es_archiver load
x-pack/test/cloud_security_posture_functional/es_archives/security_alerts
\\\r\n --es-url http://elastic:changeme@localhost:9200 \\\r\n
--kibana-url http://elastic:changeme@localhost:5601\r\n```\r\n\r\n1. Go
to the alerts page\r\n2. Change the query time range to show alerts from
the 13th of October\r\n2024 (**IMPORTANT**)\r\n3. Open the alerts
flyout\r\n5. Scroll to see the graph visualization : D\r\n\r\n\r\n###
Related PRs\r\n\r\n- https://github.com/elastic/kibana/pull/196034\r\n-
https://github.com/elastic/kibana/pull/195307\r\n\r\n###
Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] This
renders correctly on smaller devices using a responsive\r\nlayout. (You
can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[ ] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"f3de5930493fb34a174e14f6dabdc1faf0722cad"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199053","number":199053,"mergeCommit":{"message":"[Cloud
Security] Added popover support for graph component (#199053)\n\n##
Summary\r\n\r\nAdded popover support to the graph component. \r\nIn
order to scale the rendering component of nodes, we prefer not to
add\r\npopover per node but to manage a single popover for each
use-case. In\r\nthe popover stories you can see an example of two
different popovers\r\nbeing triggered by different buttons on the
node.\r\n\r\n<details>\r\n<summary>Popover support 📹
</summary>\r\n\r\n\r\nhttps://github.com/user-attachments/assets/cb5bc2ce-037a-4f9b-b71a-f95a9362dde0\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>Dark
mode support 📹
</summary>\r\n\r\n\r\nhttps://github.com/user-attachments/assets/a55f2a88-ed07-40e2-9404-30a2042bf4fc\r\n\r\n</details>\r\n\r\n###
How to test\r\n\r\nTo test this PR you can run\r\n\r\n```\r\nyarn
storybook cloud_security_posture_packages\r\n```\r\n\r\nAnd to test the
alerts flyout (for regression test):\r\n\r\nToggle feature flag in
kibana.dev.yml\r\n\r\n```yaml\r\nxpack.securitySolution.enableExperimental:
['graphVisualizationInFlyoutEnabled']\r\n```\r\n\r\nLoad mocked
data\r\n\r\n```bash\r\nnode scripts/es_archiver load
x-pack/test/cloud_security_posture_functional/es_archives/logs_gcp_audit
\\ \r\n --es-url http://elastic:changeme@localhost:9200 \\\r\n
--kibana-url http://elastic:changeme@localhost:5601\r\n\r\nnode
scripts/es_archiver load
x-pack/test/cloud_security_posture_functional/es_archives/security_alerts
\\\r\n --es-url http://elastic:changeme@localhost:9200 \\\r\n
--kibana-url http://elastic:changeme@localhost:5601\r\n```\r\n\r\n1. Go
to the alerts page\r\n2. Change the query time range to show alerts from
the 13th of October\r\n2024 (**IMPORTANT**)\r\n3. Open the alerts
flyout\r\n5. Scroll to see the graph visualization : D\r\n\r\n\r\n###
Related PRs\r\n\r\n- https://github.com/elastic/kibana/pull/196034\r\n-
https://github.com/elastic/kibana/pull/195307\r\n\r\n###
Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] This
renders correctly on smaller devices using a responsive\r\nlayout. (You
can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[ ] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"f3de5930493fb34a174e14f6dabdc1faf0722cad"}}]}]
BACKPORT-->

Co-authored-by: Kfir Peled <61654899+kfirpeled@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)

…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)