[Cloud Security] Added popover support for graph component #199053
Merged
+1,422
−155
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
kfirpeled
added
release_note:skip
opauloh
reviewed
Nov 9, 2024
x-pack/packages/kbn-cloud-security-posture/graph/src/components/styles.tsx
Outdated
Show resolved
Hide resolved
x-pack/packages/kbn-cloud-security-posture/graph/src/components/styles.tsx
Outdated
Show resolved
Hide resolved
x-pack/packages/kbn-cloud-security-posture/graph/src/components/styles.tsx
Outdated
Show resolved
Hide resolved
x-pack/packages/kbn-cloud-security-posture/graph/src/components/graph/graph.tsx
Outdated
Show resolved
Hide resolved
x-pack/packages/kbn-cloud-security-posture/graph/src/components/graph/graph.tsx
Outdated
Show resolved
Hide resolved
x-pack/packages/kbn-cloud-security-posture/graph/src/components/graph/graph.tsx
Outdated
Show resolved
Hide resolved
x-pack/packages/kbn-cloud-security-posture/graph/src/components/graph/graph.tsx
Outdated
Show resolved
Hide resolved
💚 Build Succeeded
Metrics [docs]Module Count
Public APIs missing comments
Async chunks
Public APIs missing exports
Unknown metric groupsAPI count
ESLint disabled line counts
Total ESLint disabled count
History
|
opauloh
approved these changes
Nov 12, 2024
|
Starting backport for target branches: 8.x https://github.com/elastic/kibana/actions/runs/11807787154 |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Nov 12, 2024
…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)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
2 tasks
kibanamachine
added a commit
that referenced
this pull request
Nov 13, 2024
…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":"[email protected]"},"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 <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
Popover support 📹
Screen.Recording.2024-11-05.at.20.38.47.mov
Dark mode support 📹
Screen.Recording.2024-11-05.at.20.40.02.mov
How to test
To test this PR you can run
And to test the alerts flyout (for regression test):
Toggle feature flag in kibana.dev.yml
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:5601Related PRs
Checklist