Updates to this design document
20 June, 2019
19 June, 2019
Summary
Links: Related design issue | Meta issue
Adds a time series stacked area chart to the Transactions overview and group detail views. The graphs will show the breakdown of the transactions (sampled and non-sampled) by span.type or, if available, span.subtype. Ultimately this will give the user an overview of what the service and its subsequent transactions are spending their time.
Design
Marvel prototype
The example queries are specified in the Google design doc.
The graph component
The chart itself will be presented in a panel at the top of both views. It will be matched with a KPI (stats) component which displays the span.type and span.subtype percentages and counts according to the data selected (global and local filters applied).
The graph will not feature legends as these will be part of the KPI (stats) component.
Visualization
The graph color assignments will be based on the alphabetical order of the span.type. The span.subtype will inherit its color assignment from span.type, i.e. db is blue, db.elasticsearch and db.mysql are blue, but drawn as separate lines in the graph.
Beta label
We will add a EuiBetaBadge by the title of the chart, which will display a tooltip message.
This feature is still in development. If you have feedback, please reach out in our Discuss forum.
Graph tooltip
The tooltip will include a breakdown of each span.type and span.subtype items with a percentage per time series bucket. Items are sorted alphabetically.
The tooltip will also invoke the tooltips of the transaction duration and transactions per minute graphs in order to allow for comparison as they all three share the same x-axis.
Nice to have: Panel toggle
In order to condense the vertical space of the pages, we might benefit from adding a show/hide toggle for displaying the actual graph. Additionally adding the toggle to session storage means that the user's preference will be saved in the session.
Screens
Service transactions overview
Tooltips
Please note: The tooltips in the design mockups are lifted from the EUI library, but we still prefer the light themed tooltips found in APM UI today.
Example of existing APM UI tooltip styling
Service transaction group detail
Updates to this design document
20 June, 2019
19 June, 2019
countfrom the graph tooltip as per @roncohen's commentSummary
Links: Related design issue | Meta issue
Adds a time series stacked area chart to the Transactions overview and group detail views. The graphs will show the breakdown of the transactions (sampled and non-sampled) by
span.typeor, if available,span.subtype. Ultimately this will give the user an overview of what the service and its subsequent transactions are spending their time.Design
Marvel prototype
The example queries are specified in the Google design doc.
The graph component
The chart itself will be presented in a panel at the top of both views. It will be matched with a KPI (stats) component which displays the
span.typeandspan.subtypepercentages and counts according to the data selected (global and local filters applied).The graph will not feature legends as these will be part of the KPI (stats) component.
Visualization
The graph color assignments will be based on the alphabetical order of the
span.type. Thespan.subtypewill inherit its color assignment fromspan.type, i.e.dbisblue,db.elasticsearchanddb.mysqlareblue, but drawn as separate lines in the graph.Beta label
We will add a
EuiBetaBadgeby the title of the chart, which will display a tooltip message.This feature is still in development. If you have feedback, please reach out in our Discuss forum.Graph tooltip
The tooltip will include a breakdown of each
span.typeandspan.subtypeitems with a percentage per time series bucket. Items are sorted alphabetically.The tooltip will also invoke the tooltips of the transaction duration and transactions per minute graphs in order to allow for comparison as they all three share the same x-axis.
Nice to have: Panel toggle
In order to condense the vertical space of the pages, we might benefit from adding a show/hide toggle for displaying the actual graph. Additionally adding the toggle to session storage means that the user's preference will be saved in the session.
Screens
Service transactions overview
Tooltips
Please note: The tooltips in the design mockups are lifted from the EUI library, but we still prefer the light themed tooltips found in APM UI today.
Example of existing APM UI tooltip styling
Service transaction group detail