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

[8.x] [Observability] Update breadcrumbs for observability project based navigation (#196785) #198217

Merged
merged 1 commit into from
Oct 29, 2024

Conversation

kibanamachine
Copy link
Contributor

Backport

This will backport the following commits from main to 8.x:

Questions ?

Please refer to the Backport tool documentation

…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:

![Screenshot 2024-10-21 at 12 44
21](https://github.com/user-attachments/assets/e3d9fe64-f79f-4e31-a5b6-45a06ca4915d)

- 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:

![Screenshot 2024-10-11 at 10 56
54](https://github.com/user-attachments/assets/4938b31e-9d4a-429e-abf0-add04d69b62a)

Now we'll see something like this in project style:

![Screenshot 2024-10-21 at 12 48
54](https://github.com/user-attachments/assets/0645a3ae-909e-4a70-a077-d9f83bd1d639)

(cherry picked from commit 641d915)
@kibanamachine kibanamachine requested a review from a team as a code owner October 29, 2024 22:09
@kibanamachine kibanamachine requested review from a team as code owners October 29, 2024 22:09
@kibanamachine kibanamachine enabled auto-merge (squash) October 29, 2024 22:09
@botelastic botelastic bot added ci:project-deploy-observability Create an Observability project Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team Team:obs-ux-management Observability Management User Experience Team labels Oct 29, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

@elasticmachine
Copy link
Contributor

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

Copy link
Contributor

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

  • /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
  • run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

@kibanamachine kibanamachine merged commit cf9a320 into elastic:8.x Oct 29, 2024
37 checks passed
@elasticmachine
Copy link
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
infra 1528 1527 -1

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id before after diff
observabilityShared 500 501 +1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
apm 3.5MB 3.5MB +156.0B
exploratoryView 182.7KB 182.8KB +15.0B
infra 1.7MB 1.7MB -695.0B
observability 470.9KB 471.0KB +118.0B
observabilityLogsExplorer 147.3KB 147.1KB -203.0B
slo 855.4KB 855.5KB +140.0B
synthetics 1.1MB 1.1MB -730.0B
total -1.2KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
observabilityLogsExplorer 15.0KB 14.9KB -95.0B
observabilityShared 75.1KB 75.3KB +246.0B
total +151.0B
Unknown metric groups

API count

id before after diff
observabilityShared 505 507 +2

ESLint disabled line counts

id before after diff
observabilityLogsExplorer 2 1 -1

Total ESLint disabled count

id before after diff
observabilityLogsExplorer 2 1 -1

cc @Kerry350

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport ci:project-deploy-observability Create an Observability project Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team Team:obs-ux-management Observability Management User Experience Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants