[8.x] [ML] Serverless Security: Adds ES|QL visualizer menu item in nav (#192314) (#193340)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ML] Serverless Security: Adds ES|QL visualizer menu item in nav
(#192314)](https://github.com/elastic/kibana/pull/192314)

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

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

<!--BACKPORT [{"author":{"name":"Melissa
Alvarez","email":"melissa.alvarez@elastic.co"},"sourceCommit":{"committedDate":"2024-09-18T17:04:17Z","message":"[ML]
Serverless Security: Adds ES|QL visualizer menu item in nav
(#192314)\n\n## Summary\r\n\r\nRelated issue:
https://github.com/elastic/kibana/issues/192307\r\n\r\nThis PR add sthe
ES|QL visualizer menu item to the Security solution's\r\nnav in
serverless.\r\n\r\n<img width=\"546\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/239c25c8-63af-4009-8e37-78a99d7b6719\">\r\n\r\n<img
width=\"1189\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/e0ac66d4-4066-4c15-8cac-ff5a5e0ae716\">\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\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- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] Any UI touched in this PR is
usable by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[ ] If a plugin configuration key changed, check if it needs to
be\r\nallowlisted in the cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\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)\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"f40bf527ff84d6d3d393a068c7c5f9a44586680d","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement",":ml","v9.0.0","backport:prev-minor","ci:build-serverless-image","v8.16.0"],"title":"[ML]
Serverless Security: Adds ES|QL visualizer menu item in
nav","number":192314,"url":"https://github.com/elastic/kibana/pull/192314","mergeCommit":{"message":"[ML]
Serverless Security: Adds ES|QL visualizer menu item in nav
(#192314)\n\n## Summary\r\n\r\nRelated issue:
https://github.com/elastic/kibana/issues/192307\r\n\r\nThis PR add sthe
ES|QL visualizer menu item to the Security solution's\r\nnav in
serverless.\r\n\r\n<img width=\"546\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/239c25c8-63af-4009-8e37-78a99d7b6719\">\r\n\r\n<img
width=\"1189\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/e0ac66d4-4066-4c15-8cac-ff5a5e0ae716\">\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\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- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] Any UI touched in this PR is
usable by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[ ] If a plugin configuration key changed, check if it needs to
be\r\nallowlisted in the cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\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)\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"f40bf527ff84d6d3d393a068c7c5f9a44586680d"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/192314","number":192314,"mergeCommit":{"message":"[ML]
Serverless Security: Adds ES|QL visualizer menu item in nav
(#192314)\n\n## Summary\r\n\r\nRelated issue:
https://github.com/elastic/kibana/issues/192307\r\n\r\nThis PR add sthe
ES|QL visualizer menu item to the Security solution's\r\nnav in
serverless.\r\n\r\n<img width=\"546\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/239c25c8-63af-4009-8e37-78a99d7b6719\">\r\n\r\n<img
width=\"1189\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/e0ac66d4-4066-4c15-8cac-ff5a5e0ae716\">\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\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- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] Any UI touched in this PR is
usable by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[ ] If a plugin configuration key changed, check if it needs to
be\r\nallowlisted in the cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\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)\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"f40bf527ff84d6d3d393a068c7c5f9a44586680d"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Melissa Alvarez <melissa.alvarez@elastic.co>

x-pack/packages/security-solution/navigation/src/constants.ts

@@ -54,6 +54,7 @@ export enum ExternalPageName {
   mlNodes = 'ml:nodes',
   mlFileUpload = 'ml:fileUpload',
   mlIndexDataVisualizer = 'ml:indexDataVisualizer',
+  mlESQLdataVisualizer = 'ml:esqlDataVisualizer',
   mlDataDrift = 'ml:dataDrift',
   mlExplainLogRateSpikes = 'ml:logRateAnalysis',
   mlLogPatternAnalysis = 'ml:logPatternAnalysis',

x-pack/plugins/security_solution/public/app/solution_navigation/links/sections/ml_links.ts

@@ -86,6 +86,7 @@ export const mlNavCategories: SolutionLinkCategory[] = [
     linkIds: [
       ExternalPageName.mlFileUpload,
       ExternalPageName.mlIndexDataVisualizer,
+      ExternalPageName.mlESQLdataVisualizer,
       ExternalPageName.mlDataDrift,
     ],
   },
@@ -186,6 +187,12 @@ export const mlNavLinks: SolutionNavLink[] = [
     landingIcon: IconDataViewLazy,
     description: i18n.INDEX_DATA_VISUALIZER_DESC,
   },
+  {
+    id: ExternalPageName.mlESQLdataVisualizer,
+    title: i18n.ESQL_DATA_VISUALIZER_TITLE,
+    landingIcon: 'sqlApp',
+    description: i18n.ESQL_DATA_VISUALIZER_DESC,
+  },
   {
     id: ExternalPageName.mlDataDrift,
     title: i18n.DATA_DRIFT_TITLE,

x-pack/plugins/security_solution/public/app/solution_navigation/links/sections/ml_translations.ts

@@ -207,6 +207,18 @@ export const INDEX_DATA_VISUALIZER_DESC = i18n.translate(
     defaultMessage: 'Data view data visualizer page',
   }
 );
+export const ESQL_DATA_VISUALIZER_TITLE = i18n.translate(
+  'xpack.securitySolution.navLinks.ml.esqlDataVisualizer.title',
+  {
+    defaultMessage: 'ES|QL data visualizer',
+  }
+);
+export const ESQL_DATA_VISUALIZER_DESC = i18n.translate(
+  'xpack.securitySolution.navLinks.ml.esqlDataVisualizer.desc',
+  {
+    defaultMessage: 'ES|QL data visualizer page',
+  }
+);
 export const DATA_DRIFT_TITLE = i18n.translate(
   'xpack.securitySolution.navLinks.ml.dataDrift.title',
   {