Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Serverless/Observability] Get started breadcrumbs need polish #170030

Open
Dosant opened this issue Oct 27, 2023 · 1 comment
Open

[Serverless/Observability] Get started breadcrumbs need polish #170030

Dosant opened this issue Oct 27, 2023 · 1 comment
Labels
Project:Serverless Work as part of the Serverless project for its initial release Team:APM All issues that need APM UI Team support

Comments

@Dosant
Copy link
Contributor

Dosant commented Oct 27, 2023

similar to #170029

Missing deeper context breadcrumbs

In serverless breadcrumbs work a bit different from how they work on-prem: they are automatically built from the serverless navigation tree. Additional work needs to be done for serverless to set the deeper context breadcrumbs. Currently get started apps don't set deeper context breadcrumbs
example:

Screenshot 2023-10-27 at 15 24 10

There are multiple ways to add deeper context breadcrumbs, the first one is manual and involves using a new serverless.setBreadcrumbs. The apps only need to set the end of breadcrumbs path which isn't already part of the side nav navigation tree.

Another way is simpler and it makes the navigation automatically merge the serverless navigational breadcrumbs from the navigation tree with the full breadcrumbs set using old core.chrome.setBreadcrumbs api. To opt-in into this apps need to add deepLinkId to the root breadcrumbs set in core.chrome.setBreadcrumbs. The serverless navigation will use this deepLinkId to merge the breadcrumbs set in core.chrome.setBreadcrumbs with the navigation tree breadcrumbs that are coming from the navigation tree.
Here are some examples where we fixed it for some apps:

In some cases it could make sense to fix this on the navigation tree level:

Completely missing breadcrumbs for some pages

Another issue with breadcrumbs is that if a page is accessible from the app, but is not the part of the navigation tree, then the active path can be lost an nothing is highlighted in the side nav and breadcrumbs are empty.

Example:

Screenshot 2023-10-27 at 15 27 28

There are different ways to fix this depending on the use-case:

  1. It is possible to override isActive check for some of the existing nodes in the navigation tree, to force the navigation path to be considered active

Example:

return pathNameSerialized.startsWith(prepend('/app/apm/traces'));

  1. It is possible to add new routes to the navigation tree, but hide them from the sidebar using sideNavStatus: 'hidden' this will fix the active path and the breadcrumbs

  1. It is possible to add more levels to the navigation tree, but hide the children in the sidenav by adding: renderAs: 'item', on the parent
@Dosant Dosant added Team:APM All issues that need APM UI Team support Project:Serverless Work as part of the Serverless project for its initial release labels Oct 27, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/apm-ui (Team:APM)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Project:Serverless Work as part of the Serverless project for its initial release Team:APM All issues that need APM UI Team support
Projects
None yet
Development

No branches or pull requests

2 participants