Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[8.x] [Observability] Update breadcrumbs for observability project ba…
…sed navigation (#196785) (#198217) # Backport This will backport the following commits from `main` to `8.x`: - [[Observability] Update breadcrumbs for observability project based navigation (#196785)](#196785) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Kerry Gallagher","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-29T22:04:01Z","message":"[Observability] Update breadcrumbs for observability project based navigation (#196785)\n\n~⚠️ I'm still putting out some fires with tests, but this is ready to\r\nstart being reviewed.~\r\n\r\n## Summary\r\n\r\nA continuation of #196169 for\r\nObservability (please read that PR description first).\r\n\r\nRelated: https://github.com/elastic/kibana/issues/192050\r\n\r\n## Overview of changes\r\n\r\nThere are essentially three types of breadcrumbs - serverless (which is\r\nproject style), stateful project style (set through spaces settings),\r\nand classic style (the old breadcrumbs we've seen for years). Whilst\r\nserverless and stateful project style both use the project based style\r\nthe navigation trees are slightly different, so the breadcrumbs results\r\nare not identical [when they derive the \"nav\r\ncrumbs\"](https://github.com/elastic/kibana/blob/9577aa980dd1565fba05e34292fb5c0bba692889/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx#L55).\r\n\r\nHere \"project style\" will refer to serverless and stateful project\r\nstyle.\r\n\r\nIn these changes I've, for the most part, tried to refactor things so\r\nObservability solutions route their breadcrumbs through the\r\nobservability-shared `useBreadcrumbs` hook, this way the logic around\r\nproject style, adding an Observability crumb in classic etc is\r\nconsolidated in one place.\r\n\r\n[For several solutions `absolute` breadcrumbs are being\r\nused](https://github.com/elastic/kibana/blob/9577aa980dd1565fba05e34292fb5c0bba692889/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx#L46),\r\nand this means we'll roughly have the same breadcrumbs across the 3\r\nexperiences (bar Observability being prepended). Teams may want to\r\nrefine this going forward to pass curated breadcrumbs that take into\r\naccount the navigation derived \"nav crumbs\" (again, bearing in mind the\r\ntrees from serverless and project based chrome do differ), and not use\r\nabsolute mode. APM is an example of this at the moment. Right now this\r\nis an 8.16 bug though, so this aims to make things acceptable, but not\r\nnecessarily perfect.\r\n\r\n### APM\r\n\r\n- Project style chrome crumbs have been modelled off the serverless\r\nones. The navigation trees here are the same so this should be fine.\r\n\r\n### Infra\r\n\r\n- The `infra` `useBreadcrumbs` hook has been removed, it was only being\r\nused by logs. Logs now goes via the Observability shared hook using\r\n`classicOnly`.\r\n\r\n- Metrics (`useMetricsBreadcrumbs` hook) has been slightly amended to\r\nroute more of it's logic through the shared hook.\r\n\r\n### Logs explorer\r\n\r\n- Wasn't setting any nested breadcrumbs at the moment so the logic has\r\nbeen simplified to just set some classic crumbs, and defer the rest to\r\nthe nav crumbs via the shared hook.\r\n\r\n### Synthetics \r\n\r\n- Removed custom logic around prepending Observability, adding link\r\nhandlers etc in favour of the shared hook.\r\n\r\n\r\n### Alerts / rules / SLOs etc\r\n\r\n- Simple breadcrumb needs so these are mostly setting `classicOnly` and\r\ndeferring to the nav crumbs in project style.\r\n\r\nSeveral solutions have had their usage of the shared hook updated to\r\npass in the `serverless` plugin. This was missing before, so calls to\r\n`serverless.setBreadcrumbs` weren't explicitly happening.\r\n\r\n## Testing \r\n\r\n- Add the following to your `kibana.dev.yml`:\r\n\r\n```yml\r\nxpack.cloud.id: \"ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM=\"\r\nxpack.cloud.base_url: \"https://cloud.elastic.co\"\r\n```\r\n\r\n- For testing stateful project style chrome you'll need to go to Stack\r\nManagement > Spaces and change the solution view:\r\n\r\n![Screenshot 2024-10-21 at 12 44\r\n21](https://github.com/user-attachments/assets/e3d9fe64-f79f-4e31-a5b6-45a06ca4915d)\r\n\r\n- Set the above to Classic to test classic breadcrumbs.\r\n\r\n- As a reviewer please check your solution against the 3 modes.\r\n\r\n## Comparison\r\n\r\nBefore these changes we'd see something like the following in APM:\r\n\r\n![Screenshot 2024-10-11 at 10 56\r\n54](https://github.com/user-attachments/assets/4938b31e-9d4a-429e-abf0-add04d69b62a)\r\n\r\nNow we'll see something like this in project style:\r\n\r\n![Screenshot 2024-10-21 at 12 48\r\n54](https://github.com/user-attachments/assets/0645a3ae-909e-4a70-a077-d9f83bd1d639)","sha":"641d9159451447484f3940f0b1c17438472fea5c","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","ci:project-deploy-observability","Team:obs-ux-infra_services","Team:obs-ux-management","apm:review","v8.16.0","backport:version","v8.17.0"],"title":"[Observability] Update breadcrumbs for observability project based navigation","number":196785,"url":"https://github.com/elastic/kibana/pull/196785","mergeCommit":{"message":"[Observability] Update breadcrumbs for observability project based navigation (#196785)\n\n~⚠️ I'm still putting out some fires with tests, but this is ready to\r\nstart being reviewed.~\r\n\r\n## Summary\r\n\r\nA continuation of #196169 for\r\nObservability (please read that PR description first).\r\n\r\nRelated: https://github.com/elastic/kibana/issues/192050\r\n\r\n## Overview of changes\r\n\r\nThere are essentially three types of breadcrumbs - serverless (which is\r\nproject style), stateful project style (set through spaces settings),\r\nand classic style (the old breadcrumbs we've seen for years). Whilst\r\nserverless and stateful project style both use the project based style\r\nthe navigation trees are slightly different, so the breadcrumbs results\r\nare not identical [when they derive the \"nav\r\ncrumbs\"](https://github.com/elastic/kibana/blob/9577aa980dd1565fba05e34292fb5c0bba692889/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx#L55).\r\n\r\nHere \"project style\" will refer to serverless and stateful project\r\nstyle.\r\n\r\nIn these changes I've, for the most part, tried to refactor things so\r\nObservability solutions route their breadcrumbs through the\r\nobservability-shared `useBreadcrumbs` hook, this way the logic around\r\nproject style, adding an Observability crumb in classic etc is\r\nconsolidated in one place.\r\n\r\n[For several solutions `absolute` breadcrumbs are being\r\nused](https://github.com/elastic/kibana/blob/9577aa980dd1565fba05e34292fb5c0bba692889/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx#L46),\r\nand this means we'll roughly have the same breadcrumbs across the 3\r\nexperiences (bar Observability being prepended). Teams may want to\r\nrefine this going forward to pass curated breadcrumbs that take into\r\naccount the navigation derived \"nav crumbs\" (again, bearing in mind the\r\ntrees from serverless and project based chrome do differ), and not use\r\nabsolute mode. APM is an example of this at the moment. Right now this\r\nis an 8.16 bug though, so this aims to make things acceptable, but not\r\nnecessarily perfect.\r\n\r\n### APM\r\n\r\n- Project style chrome crumbs have been modelled off the serverless\r\nones. The navigation trees here are the same so this should be fine.\r\n\r\n### Infra\r\n\r\n- The `infra` `useBreadcrumbs` hook has been removed, it was only being\r\nused by logs. Logs now goes via the Observability shared hook using\r\n`classicOnly`.\r\n\r\n- Metrics (`useMetricsBreadcrumbs` hook) has been slightly amended to\r\nroute more of it's logic through the shared hook.\r\n\r\n### Logs explorer\r\n\r\n- Wasn't setting any nested breadcrumbs at the moment so the logic has\r\nbeen simplified to just set some classic crumbs, and defer the rest to\r\nthe nav crumbs via the shared hook.\r\n\r\n### Synthetics \r\n\r\n- Removed custom logic around prepending Observability, adding link\r\nhandlers etc in favour of the shared hook.\r\n\r\n\r\n### Alerts / rules / SLOs etc\r\n\r\n- Simple breadcrumb needs so these are mostly setting `classicOnly` and\r\ndeferring to the nav crumbs in project style.\r\n\r\nSeveral solutions have had their usage of the shared hook updated to\r\npass in the `serverless` plugin. This was missing before, so calls to\r\n`serverless.setBreadcrumbs` weren't explicitly happening.\r\n\r\n## Testing \r\n\r\n- Add the following to your `kibana.dev.yml`:\r\n\r\n```yml\r\nxpack.cloud.id: \"ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM=\"\r\nxpack.cloud.base_url: \"https://cloud.elastic.co\"\r\n```\r\n\r\n- For testing stateful project style chrome you'll need to go to Stack\r\nManagement > Spaces and change the solution view:\r\n\r\n![Screenshot 2024-10-21 at 12 44\r\n21](https://github.com/user-attachments/assets/e3d9fe64-f79f-4e31-a5b6-45a06ca4915d)\r\n\r\n- Set the above to Classic to test classic breadcrumbs.\r\n\r\n- As a reviewer please check your solution against the 3 modes.\r\n\r\n## Comparison\r\n\r\nBefore these changes we'd see something like the following in APM:\r\n\r\n![Screenshot 2024-10-11 at 10 56\r\n54](https://github.com/user-attachments/assets/4938b31e-9d4a-429e-abf0-add04d69b62a)\r\n\r\nNow we'll see something like this in project style:\r\n\r\n![Screenshot 2024-10-21 at 12 48\r\n54](https://github.com/user-attachments/assets/0645a3ae-909e-4a70-a077-d9f83bd1d639)","sha":"641d9159451447484f3940f0b1c17438472fea5c"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196785","number":196785,"mergeCommit":{"message":"[Observability] Update breadcrumbs for observability project based navigation (#196785)\n\n~⚠️ I'm still putting out some fires with tests, but this is ready to\r\nstart being reviewed.~\r\n\r\n## Summary\r\n\r\nA continuation of #196169 for\r\nObservability (please read that PR description first).\r\n\r\nRelated: https://github.com/elastic/kibana/issues/192050\r\n\r\n## Overview of changes\r\n\r\nThere are essentially three types of breadcrumbs - serverless (which is\r\nproject style), stateful project style (set through spaces settings),\r\nand classic style (the old breadcrumbs we've seen for years). Whilst\r\nserverless and stateful project style both use the project based style\r\nthe navigation trees are slightly different, so the breadcrumbs results\r\nare not identical [when they derive the \"nav\r\ncrumbs\"](https://github.com/elastic/kibana/blob/9577aa980dd1565fba05e34292fb5c0bba692889/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx#L55).\r\n\r\nHere \"project style\" will refer to serverless and stateful project\r\nstyle.\r\n\r\nIn these changes I've, for the most part, tried to refactor things so\r\nObservability solutions route their breadcrumbs through the\r\nobservability-shared `useBreadcrumbs` hook, this way the logic around\r\nproject style, adding an Observability crumb in classic etc is\r\nconsolidated in one place.\r\n\r\n[For several solutions `absolute` breadcrumbs are being\r\nused](https://github.com/elastic/kibana/blob/9577aa980dd1565fba05e34292fb5c0bba692889/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx#L46),\r\nand this means we'll roughly have the same breadcrumbs across the 3\r\nexperiences (bar Observability being prepended). Teams may want to\r\nrefine this going forward to pass curated breadcrumbs that take into\r\naccount the navigation derived \"nav crumbs\" (again, bearing in mind the\r\ntrees from serverless and project based chrome do differ), and not use\r\nabsolute mode. APM is an example of this at the moment. Right now this\r\nis an 8.16 bug though, so this aims to make things acceptable, but not\r\nnecessarily perfect.\r\n\r\n### APM\r\n\r\n- Project style chrome crumbs have been modelled off the serverless\r\nones. The navigation trees here are the same so this should be fine.\r\n\r\n### Infra\r\n\r\n- The `infra` `useBreadcrumbs` hook has been removed, it was only being\r\nused by logs. Logs now goes via the Observability shared hook using\r\n`classicOnly`.\r\n\r\n- Metrics (`useMetricsBreadcrumbs` hook) has been slightly amended to\r\nroute more of it's logic through the shared hook.\r\n\r\n### Logs explorer\r\n\r\n- Wasn't setting any nested breadcrumbs at the moment so the logic has\r\nbeen simplified to just set some classic crumbs, and defer the rest to\r\nthe nav crumbs via the shared hook.\r\n\r\n### Synthetics \r\n\r\n- Removed custom logic around prepending Observability, adding link\r\nhandlers etc in favour of the shared hook.\r\n\r\n\r\n### Alerts / rules / SLOs etc\r\n\r\n- Simple breadcrumb needs so these are mostly setting `classicOnly` and\r\ndeferring to the nav crumbs in project style.\r\n\r\nSeveral solutions have had their usage of the shared hook updated to\r\npass in the `serverless` plugin. This was missing before, so calls to\r\n`serverless.setBreadcrumbs` weren't explicitly happening.\r\n\r\n## Testing \r\n\r\n- Add the following to your `kibana.dev.yml`:\r\n\r\n```yml\r\nxpack.cloud.id: \"ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM=\"\r\nxpack.cloud.base_url: \"https://cloud.elastic.co\"\r\n```\r\n\r\n- For testing stateful project style chrome you'll need to go to Stack\r\nManagement > Spaces and change the solution view:\r\n\r\n![Screenshot 2024-10-21 at 12 44\r\n21](https://github.com/user-attachments/assets/e3d9fe64-f79f-4e31-a5b6-45a06ca4915d)\r\n\r\n- Set the above to Classic to test classic breadcrumbs.\r\n\r\n- As a reviewer please check your solution against the 3 modes.\r\n\r\n## Comparison\r\n\r\nBefore these changes we'd see something like the following in APM:\r\n\r\n![Screenshot 2024-10-11 at 10 56\r\n54](https://github.com/user-attachments/assets/4938b31e-9d4a-429e-abf0-add04d69b62a)\r\n\r\nNow we'll see something like this in project style:\r\n\r\n![Screenshot 2024-10-21 at 12 48\r\n54](https://github.com/user-attachments/assets/0645a3ae-909e-4a70-a077-d9f83bd1d639)","sha":"641d9159451447484f3940f0b1c17438472fea5c"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Kerry Gallagher <[email protected]>
- Loading branch information