[APM] Latency correlations: Show service name and environment as metadata in the flyout

[formgeist]

Summary

Moved over from meta issue: #102499

We should reiterate the selected service and environment that is the basis for the correlation data being shown.

Currently, the selected service is shown in the latency distribution chart title, but it's a little too subtle. Also any search queries made on the originating views will be transferred into the correlations view and display like this;

We should consider how to show the fixed query params like service name and environment while allowing space for the custom query filters.

Solution

Temporary metadata header and filters in the flyout header

[elasticmachine]

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

[elasticmachine]

Pinging @elastic/ml-ui (:ml)

[qn895]

@formgeist I added the table for the service name and transaction name here to match with what APM currently has for the Transaction details tab #99905 (comment). However, considering that the new correlation tab might take a bit longer to load all the correlations, having the link that go back to the main page might not be ideal. What do you think if we not hyperlink them here?

[formgeist]

@qn895 Yeah, we can just remove the service name and transaction link (if that appeared). I was working on another proposal where we put that info in the flyout header instead because it will apply to both latency and error rate correlations.

The header should be able to hold both the service name, environment, and transaction name along with the filter callout for whatever query the user has applied in the search bar in the main view.

[qn895]

Closing via #99905 and #103759