[Observability] Update breadcrumbs for observability project based navigation#196785
Merged
Kerry350 merged 6 commits intoelastic:mainfrom Oct 29, 2024
Merged
Conversation
Kerry350
added
the
ci:project-deploy-observability
Contributor
🤖 GitHub commentsExpand to view the GitHub comments
Just comment with:
|
Contributor
Author
|
/oblt-deploy |
Kerry350
force-pushed
the
fix-solution-based-stateful-breadcrumbs
branch
4 times, most recently
from
685e7f9 to
b5e5dc3
Compare
Kerry350
added
the
release_note:skip
Kerry350
force-pushed
the
fix-solution-based-stateful-breadcrumbs
branch
from
5dba15e to
f6f97cf
Compare
Kerry350
force-pushed
the
fix-solution-based-stateful-breadcrumbs
branch
from
f6f97cf to
23490e7
Compare
Kerry350
added
v8.16.0
backport:version
botelastic
Bot
added
Team:obs-ux-infra_services - DEPRECATED
Contributor
|
Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services) |
Contributor
|
Pinging @elastic/obs-ux-management-team (Team:obs-ux-management) |
jennypavlova
approved these changes
Oct 24, 2024
Member
jennypavlova
left a comment
jennypavlova
left a comment
There was a problem hiding this comment.
Well done 💯 I added some comments/questions but overall it looks good on APM/Infra
shahzad31
approved these changes
Oct 25, 2024
Contributor
shahzad31
left a comment
shahzad31
left a comment
There was a problem hiding this comment.
LGTM , things looks good both in stateful and serveless 🎆
Thank you for taking the time to clean up many places across many plugins, useBreadcrumbs look more complex now but i think it's worth the cost !!
Contributor
💛 Build succeeded, but was flaky
Failed CI StepsTest FailuresMetrics [docs]Module Count
Public APIs missing comments
Async chunks
Page load bundle
Unknown metric groupsAPI count
ESLint disabled line counts
Total ESLint disabled count
History
cc @Kerry350 |
awahab07
approved these changes
Oct 29, 2024
Contributor
|
Starting backport for target branches: 8.16, 8.x https://github.com/elastic/kibana/actions/runs/11583176654 |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Oct 29, 2024
…vigation (elastic#196785) ~⚠️ I'm still putting out some fires with tests, but this is ready to start being reviewed.~ ## Summary A continuation of elastic#196169 for Observability (please read that PR description first). Related: elastic#192050 ## Overview of changes There are essentially three types of breadcrumbs - serverless (which is project style), stateful project style (set through spaces settings), and classic style (the old breadcrumbs we've seen for years). Whilst serverless and stateful project style both use the project based style the navigation trees are slightly different, so the breadcrumbs results are not identical [when they derive the "nav crumbs"](https://github.com/elastic/kibana/blob/9577aa980dd1565fba05e34292fb5c0bba692889/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx#L55). Here "project style" will refer to serverless and stateful project style. In these changes I've, for the most part, tried to refactor things so Observability solutions route their breadcrumbs through the observability-shared `useBreadcrumbs` hook, this way the logic around project style, adding an Observability crumb in classic etc is consolidated in one place. [For several solutions `absolute` breadcrumbs are being used](https://github.com/elastic/kibana/blob/9577aa980dd1565fba05e34292fb5c0bba692889/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx#L46), and this means we'll roughly have the same breadcrumbs across the 3 experiences (bar Observability being prepended). Teams may want to refine this going forward to pass curated breadcrumbs that take into account the navigation derived "nav crumbs" (again, bearing in mind the trees from serverless and project based chrome do differ), and not use absolute mode. APM is an example of this at the moment. Right now this is an 8.16 bug though, so this aims to make things acceptable, but not necessarily perfect. ### APM - Project style chrome crumbs have been modelled off the serverless ones. The navigation trees here are the same so this should be fine. ### Infra - The `infra` `useBreadcrumbs` hook has been removed, it was only being used by logs. Logs now goes via the Observability shared hook using `classicOnly`. - Metrics (`useMetricsBreadcrumbs` hook) has been slightly amended to route more of it's logic through the shared hook. ### Logs explorer - Wasn't setting any nested breadcrumbs at the moment so the logic has been simplified to just set some classic crumbs, and defer the rest to the nav crumbs via the shared hook. ### Synthetics - Removed custom logic around prepending Observability, adding link handlers etc in favour of the shared hook. ### Alerts / rules / SLOs etc - Simple breadcrumb needs so these are mostly setting `classicOnly` and deferring to the nav crumbs in project style. Several solutions have had their usage of the shared hook updated to pass in the `serverless` plugin. This was missing before, so calls to `serverless.setBreadcrumbs` weren't explicitly happening. ## Testing - Add the following to your `kibana.dev.yml`: ```yml xpack.cloud.id: "ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM=" xpack.cloud.base_url: "https://cloud.elastic.co" ``` - For testing stateful project style chrome you'll need to go to Stack Management > Spaces and change the solution view:  - Set the above to Classic to test classic breadcrumbs. - As a reviewer please check your solution against the 3 modes. ## Comparison Before these changes we'd see something like the following in APM:  Now we'll see something like this in project style:  (cherry picked from commit 641d915)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Oct 29, 2024
…vigation (elastic#196785) ~⚠️ I'm still putting out some fires with tests, but this is ready to start being reviewed.~ ## Summary A continuation of elastic#196169 for Observability (please read that PR description first). Related: elastic#192050 ## Overview of changes There are essentially three types of breadcrumbs - serverless (which is project style), stateful project style (set through spaces settings), and classic style (the old breadcrumbs we've seen for years). Whilst serverless and stateful project style both use the project based style the navigation trees are slightly different, so the breadcrumbs results are not identical [when they derive the "nav crumbs"](https://github.com/elastic/kibana/blob/9577aa980dd1565fba05e34292fb5c0bba692889/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx#L55). Here "project style" will refer to serverless and stateful project style. In these changes I've, for the most part, tried to refactor things so Observability solutions route their breadcrumbs through the observability-shared `useBreadcrumbs` hook, this way the logic around project style, adding an Observability crumb in classic etc is consolidated in one place. [For several solutions `absolute` breadcrumbs are being used](https://github.com/elastic/kibana/blob/9577aa980dd1565fba05e34292fb5c0bba692889/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx#L46), and this means we'll roughly have the same breadcrumbs across the 3 experiences (bar Observability being prepended). Teams may want to refine this going forward to pass curated breadcrumbs that take into account the navigation derived "nav crumbs" (again, bearing in mind the trees from serverless and project based chrome do differ), and not use absolute mode. APM is an example of this at the moment. Right now this is an 8.16 bug though, so this aims to make things acceptable, but not necessarily perfect. ### APM - Project style chrome crumbs have been modelled off the serverless ones. The navigation trees here are the same so this should be fine. ### Infra - The `infra` `useBreadcrumbs` hook has been removed, it was only being used by logs. Logs now goes via the Observability shared hook using `classicOnly`. - Metrics (`useMetricsBreadcrumbs` hook) has been slightly amended to route more of it's logic through the shared hook. ### Logs explorer - Wasn't setting any nested breadcrumbs at the moment so the logic has been simplified to just set some classic crumbs, and defer the rest to the nav crumbs via the shared hook. ### Synthetics - Removed custom logic around prepending Observability, adding link handlers etc in favour of the shared hook. ### Alerts / rules / SLOs etc - Simple breadcrumb needs so these are mostly setting `classicOnly` and deferring to the nav crumbs in project style. Several solutions have had their usage of the shared hook updated to pass in the `serverless` plugin. This was missing before, so calls to `serverless.setBreadcrumbs` weren't explicitly happening. ## Testing - Add the following to your `kibana.dev.yml`: ```yml xpack.cloud.id: "ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM=" xpack.cloud.base_url: "https://cloud.elastic.co" ``` - For testing stateful project style chrome you'll need to go to Stack Management > Spaces and change the solution view:  - Set the above to Classic to test classic breadcrumbs. - As a reviewer please check your solution against the 3 modes. ## Comparison Before these changes we'd see something like the following in APM:  Now we'll see something like this in project style:  (cherry picked from commit 641d915)
Contributor
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Oct 29, 2024
…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":"kerry.gallagher@elastic.co"},"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\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\r\n\r\nNow we'll see something like this in project style:\r\n\r\n","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\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\r\n\r\nNow we'll see something like this in project style:\r\n\r\n","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\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\r\n\r\nNow we'll see something like this in project style:\r\n\r\n","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 <kerry.gallagher@elastic.co>
kibanamachine
added a commit
that referenced
this pull request
Oct 30, 2024
…ased navigation (#196785) (#198216) # Backport This will backport the following commits from `main` to `8.16`: - [[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":"kerry.gallagher@elastic.co"},"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\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\r\n\r\nNow we'll see something like this in project style:\r\n\r\n","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\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\r\n\r\nNow we'll see something like this in project style:\r\n\r\n","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\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\r\n\r\nNow we'll see something like this in project style:\r\n\r\n","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 <kerry.gallagher@elastic.co>
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
7 participants
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
A continuation of #196169 for Observability (please read that PR description first).
Related: #192050
Overview of changes
There are essentially three types of breadcrumbs - serverless (which is project style), stateful project style (set through spaces settings), and classic style (the old breadcrumbs we've seen for years). Whilst serverless and stateful project style both use the project based style the navigation trees are slightly different, so the breadcrumbs results are not identical when they derive the "nav crumbs".
Here "project style" will refer to serverless and stateful project style.
In these changes I've, for the most part, tried to refactor things so Observability solutions route their breadcrumbs through the observability-shared
useBreadcrumbshook, this way the logic around project style, adding an Observability crumb in classic etc is consolidated in one place.For several solutions
absolutebreadcrumbs are being used, and this means we'll roughly have the same breadcrumbs across the 3 experiences (bar Observability being prepended). Teams may want to refine this going forward to pass curated breadcrumbs that take into account the navigation derived "nav crumbs" (again, bearing in mind the trees from serverless and project based chrome do differ), and not use absolute mode. APM is an example of this at the moment. Right now this is an 8.16 bug though, so this aims to make things acceptable, but not necessarily perfect.APM
Infra
The
infrauseBreadcrumbshook has been removed, it was only being used by logs. Logs now goes via the Observability shared hook usingclassicOnly.Metrics (
useMetricsBreadcrumbshook) has been slightly amended to route more of it's logic through the shared hook.Logs explorer
Synthetics
Alerts / rules / SLOs etc
classicOnlyand deferring to the nav crumbs in project style.Several solutions have had their usage of the shared hook updated to pass in the
serverlessplugin. This was missing before, so calls toserverless.setBreadcrumbsweren't explicitly happening.Testing
kibana.dev.yml:Set the above to Classic to test classic breadcrumbs.
As a reviewer please check your solution against the 3 modes.
Comparison
Before these changes we'd see something like the following in APM:
Now we'll see something like this in project style: