…#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)
Backport
This will backport the following commits from
mainto8.x:Questions ?
Please refer to the Backport tool documentation