[APM] Transactions breakdown graph: Add breakdown KPI component #36445
Comments
|
Pinging @elastic/apm-ui |
5 tasks
|
Feedback notes from ad-hoc Slack conversation
I will update the description and screens to reflect these changes. |
dgieselaar
added a commit
to dgieselaar/kibana
that referenced
this issue
Jun 27, 2019
dgieselaar
added a commit
that referenced
this issue
Jun 28, 2019
* [APM] Transactions breakdown graph: Add breakdown KPI component Closes #36445. * Remove percentage, line wrapping, correct query * Add transaction breakdown chart to transaction details page * Move files into new plugin dir * Add empty state; update labels * Use new mapping * Move urlParams to useTransactionBreakdown hook * Fix types * Only show empty state in TransactionBreakdown if previously data was rendered * Restrict no of KPIs to 20 * Use ternary in render of TransactionBreakdownHeader for consistency
dgieselaar
added a commit
to dgieselaar/kibana
that referenced
this issue
Jul 1, 2019
…tic#38658) * [APM] Transactions breakdown graph: Add breakdown KPI component Closes elastic#36445. * Remove percentage, line wrapping, correct query * Add transaction breakdown chart to transaction details page * Move files into new plugin dir * Add empty state; update labels * Use new mapping * Move urlParams to useTransactionBreakdown hook * Fix types * Only show empty state in TransactionBreakdown if previously data was rendered * Restrict no of KPIs to 20 * Use ternary in render of TransactionBreakdownHeader for consistency
dgieselaar
added a commit
that referenced
this issue
Jul 1, 2019
* [APM] Transactions breakdown graph: Add breakdown KPI component Closes #36445. * Remove percentage, line wrapping, correct query * Add transaction breakdown chart to transaction details page * Move files into new plugin dir * Add empty state; update labels * Use new mapping * Move urlParams to useTransactionBreakdown hook * Fix types * Only show empty state in TransactionBreakdown if previously data was rendered * Restrict no of KPIs to 20 * Use ternary in render of TransactionBreakdownHeader for consistency
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Changes
June 20, 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.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 KPI component is meant to replace the graph legend while also providing the user with a large display of the breakdown that visually deviates from the rest of the page. The component will list the breakdown items alphabetically and group any
span.subtypeby their parentspan.typename.List of items
Listing the items in cells of 8 will result in the best display. If the screen size doesn't allow for that, the items break to a new row within the panel. I imagine if we're using the
EuiFlexGridor similar it should display it accordingly.KPI item
The title of the KPI item will display the legend for the chart and its type label. The primary value will be the percentage.
ℹ️Note: We might be able to extend the existing
EuiStatcomponent from EUI, with the exception that the title is a legend, not only a text label.Empty state
The empty state will feature a similar message like our distribution graph, where if we can't find any transactions we hint the user to change the time range or change filters applied. We will remove the chart if it's uncollapsed and remove the option to toggle the chart as well.
Screens
The text was updated successfully, but these errors were encountered: