[APM] Trace detail view

[formgeist]

Summary

Related design issue elastic/apm#358

This issue is part of multiple updates and enhancements to the Transactions experience in the APM app. By way of the new Service overview, we're adding some new elements to the list and group detail views and moving the Trace viewer (waterfall, metadata, and logs) into a dedicated view that will enhance the trace analysis experience greatly.

Design solution

The current design of the Trace view is placed on the Transaction group detail page below the performance metrics. Since we're redesigning the group detail page to contain a full list of the traces within a selected distribution (#86783), the Trace view will need to have its own separate space to contain the waterfall visualization, the logs component, errors, and the transaction metadata. The vision is for the Trace view to become its own view that offers a focused experience for analyzing a particular trace.

The general design is based on removing a lot of the noise from the header area and focusing on presenting the trace itself and allow the user to navigate through other traces from within this view which share the same distribution bucket.

We will not yet replace our existing waterfall visualization with the one created by the Synthetics team, but that will come down the line.

Layout

The page consists of 4 panels, which are supposed to follow the viewport size.

Trace header panel

The trace header contains the transaction information and actions like navigation between traces and the actions for analyzing the trace in another context.

Trace details panel

This panel consists of highlighted metadata about the transaction and allows the user to invoke the existing metadata flyout. Additionally, we would list out the errors which have occurred in the trace with links to the error occurrence details for each.

This panel is collapsible by using the EuiResizableContainer component from EUI and using the external control options.

Waterfall and Logs component panels

Lastly, the main panels are the waterfall visualization and the logs component which take up the majority of the viewport. We want to allow the content within the waterfall container to scroll vertically.

The logs component will be collapsible by using the EuiResizableContainer like the trace details panel.

View example gif

[elasticmachine]

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

[botelastic]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.