[APM] Transactions list page overhaul

[sorenlouv]

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 "Transactions" title to the Transactions list page
• Add transaction type selector next to the title on the Transactions list page

View Transactions list design

Add latency distribution chart (with a logarithmic scale)

Adding a latency distribution chart to the list page enables the user to select a latency bucket from the distribution in order to narrow down the returned list of transactions that have e.g. a higher latency performance.

The existing latency distribution chart from the Transaction group detail page will work, but it would be great to see the x-axis change from linear to a logarithmic scale to improve the visibility of relevant latency buckets with enough granular distribution.

Selecting a bucket will filter the list of returned transaction groups in the list below. There's an option to reset the selection.

Add the Transactions table from the Service overview page

We should replace the existing Transactions table with the Transactions table from the Service overview which shows the sparklines and eventually the time comparison as well.

Add condensed charts for Latency, Error rate, and Traffic

The general metrics are repeated from the Service overview, so it makes sense to condense the information a bit and show these as reference metrics rather than exploratory/analysis charts. We have discussed options to expand them into a larger view, but yet to be decided.

The latency metric selector (average vs. percentile) should be synced from the Service overview and vice versa. The metric should also sync to the Time spent by span type chart and Transaction group list table underneath.

Enlarge the "Time spent by span type" chart and display event annotations

The time spent by span type chart will be the larger chart on the Transactions list and group detail pages because they add more depth to the analysis compared to the service overview page. The change to show duration instead of % will also enable us to use this as the primary chart for even annotations (service overview uses the large latency chart).

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