[APM] Consistent Observability header and navigation redesign

[formgeist]

Summary

Based on https://github.com/elastic/observability-dev/issues/150 and some other discussions in the design team around how to manage the general layout and reduce vertical space, we would like to look at how we might condense the APM header to make better use of the space.

Related shared component currently in development #48113

Design solution

APM overview header

• Show app icon in the header. This will also link to the APM Overview page.
• Adding a new condensed Tabs navigation to the very top for switching between Services and Traces.
• The whole header will be styled with a full-white background to differentiate itself from the rest of the page content.

Service view

• Follows the same pattern as the previous pages, but adding the Service name to top navigation header.
• Still has the content navigation for Transactions, Errors and Metrics. inside the page content area.
• For Transaction and Error detail pages, we will show a link back to the list views as an inline breadcrumb along with the page title for the selected transaction or error.

[elasticmachine]

Pinging @elastic/apm-ui

[formgeist]

@elastic/observability-design I've updated the description with the latest design proposals for the headers (overview and service views). Let me know what you think, I'm trying to put this together for a header change in APM over the next release cycle.

[katrin-freihofner]

I think this is great stuff. I'm not 100% sure why the add data button is green and the gear icon is dark but as long as it is consistent with other part of observability I'm fine with that. I also think we should iterate on the filters topic in the near future but it works for know.

[formgeist]

@katrin-freihofner The "green" is just our secondary button color, so it's only to create some separation from the other blue links and buttons (refresh button i.e.). But that said, it's also not the most important option all of the time, so maybe it should be made more subtle. It's just about striking the right balance. But it should be the same style, copy and position for all Observability apps (as you also underlined).

Filters are certainly a whole topic on its own 😅

[katrin-freihofner]

The first step is to create a shared header bar component (App icon, navigation and actions). This will be addressed in #48113

[sorenlouv]

@formgeist This looks ready to get started. I know there are talks about a shared header component but mostly I think this is a matter of aligning on the same layout. Therefore I don't think we need to wait for such a component to be available.

[formgeist]

@sqren I agree - I'll update the designs to reflect the final consistent header designs that were made by @katrin-freihofner and I think we move this into implementation. When the shared component is available, we can always look at letting it replace our own implementation for consistency.

[sorenlouv]

Sounds good 👍

[formgeist]

I've updated the screens and tasks in the description. As mentioned, the Logs UI team are already setting out to build a shared component among Observability (#48113)

[sorenlouv]

@formgeist Is this still relevant or should it be closed?

[formgeist]

Things have deviated since creating this issue and we have some navigation consistency projects underway, so I'll close this and create a new issue once those navigation designs are decided upon.