[APM] Transaction group detail page overhaul

[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

Page header content updates

• Add transaction group name title
• Add "All transactions" link back to the Transactions list page

View Transaction group detail design

Add trace distribution plot with interaction to select a trace or group of traces.

The chart will be interactive and allow users to click a dot on the plot to filter the list of traces down to a selected trace or group of traces (depending on the cardinality and grouping in the plot).

The latency distribution is still interactive allowing the user to further filter down the returned results and updates the distribution. This is updated to a logarithmic scale similar to the list page. Both charts have the option to reset the selection.

Add traces list table

Instead of displaying a trace sample from the selected bucket, we'll opt to show all traces available in the time range or based on the filters the user applies.

The columns are as shown;

• Trace ID (link to Trace view)
• Time (the time the trace was started)
• Duration (the full duration of the trace), this will the default sort descending

Other notes:

• The default amount of rows should be 50 traces
• Show a small summary of how many traces are available in the table.

[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.