Instances latency distribution chart tooltips and axis fixes by smith · Pull Request #95577 · elastic/kibana

smith · 2021-03-26T19:11:19Z

Re-enable the instances latency distribution chart on the service overview.

When multiple instances are hovered it lists them separately:

The x-axis domain is customized to go from 0 to the max of the throughput values, so items don't display right on the origin.

Clicking on an item filters by putting the selected items in the kuery bar.

Create a getServiceNodeName helper that returns "(Empty)" if the value is _service_node_name_missing_.

Fixes #88852
Fixes #92631
Fixes #92870

Fixes elastic#88852

elasticmachine · 2021-03-30T18:26:53Z

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

smith · 2021-03-30T20:40:56Z

retest

...k/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx

x-pack/plugins/apm/common/service_nodes.ts

x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx

sorenlouv · 2021-04-06T07:37:42Z

...lic/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.stories.tsx

+import { PrimaryStatsServiceInstanceItem } from '../../../app/service_overview/service_overview_instances_chart_and_table';
+import { CustomTooltip } from './custom_tooltip';
+
+function getLatencyFormatter(props: TooltipInfo) {


We should ask the elastic charts team to make TooltipInfo a generic so we can get better typing of datum:

Suggested change

function getLatencyFormatter(props: TooltipInfo) {

function getLatencyFormatter(props: TooltipInfo<PrimaryStatsServiceInstanceItem>) {

.../apm/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.tsx

formgeist · 2021-04-06T09:34:37Z

I'm pretty late to the party here, but the overall tooltip and interactions look good to me as a first pass. I'm designing a more full-fledged interaction design to give a more clear definition of what I imagine should happen within the chart with selection and more.

Would it be possible to add a small hint in the tooltip that the user can click and filter by the selected instance? E.g. "Click to filter by this instance" (someone has better copy?)?

Happy to open this as an enhancement if it doesn't fit in right now.

.../apm/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.tsx

...k/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx

sorenlouv · 2021-04-06T22:04:56Z

Would it be possible to add a small hint in the tooltip that the user can click and filter by the selected instance? E.g. "Click to filter by this instance"

+1.
Additionally, can we trim the service node name that we display?

formgeist · 2021-04-07T06:44:31Z

Would it be possible to add a small hint in the tooltip that the user can click and filter by the selected instance? E.g. "Click to filter by this instance"

+1.
Additionally, can we trim the service node name that we display?

Good point! In the Metrics section we truncate the service.node.name after 12 chars. Maybe we can reuse for a consistent truncation pattern?

formgeist · 2021-04-08T09:00:16Z

Would it be possible to add a small hint in the tooltip that the user can click and filter by the selected instance? E.g. "Click to filter by this instance" (someone has better copy?)?

@smith I imagine something like this in the tooltip

smith · 2021-04-12T20:56:11Z

Additionally, can we trim the service node name that we display?

@formgeist in every case where we truncate now, you can see the full text in a tooltip when hovering. In this case we can't show a tooltip and you can't hover that name, so truncating it might hide information that you can't see in its expanded form.

formgeist · 2021-04-13T09:34:53Z

Additionally, can we trim the service node name that we display?

@formgeist in every case where we truncate now, you can see the full text in a tooltip when hovering. In this case we can't show a tooltip and you can't hover that name, so truncating it might hide information that you can't see in its expanded form.

I'm fine with leaving it as-is for now

smith · 2021-04-13T18:52:15Z

@elasticmachine merge upstream

kibanamachine · 2021-04-13T20:53:16Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`apm`	1571	1573	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`apm`	4.2MB	4.2MB	+9.0KB

History

💔 Build #119005 failed 6d4c299
💚 Build #116938 succeeded df2fbdc
💔 Build #116884 failed 934428d
💚 Build #116355 succeeded 934428d
💚 Build #116297 succeeded 934428d

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

…#95577) Fixes elastic#88852

kibanamachine · 2021-04-13T21:06:28Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

…#97050) Fixes #88852 Co-authored-by: Nathan L Smith <nathan.smith@elastic.co>

…ax_primary_shard_size * 'master' of github.com:elastic/kibana: (99 commits) added missing optional chain for bracket notation (elastic#96939) [Discover][DocViewer] Fix toggle columns from doc viewer table tab (elastic#95748) [TSVB] Fix per-request caching of index patterns (elastic#97043) [Datatable] Fix filter cell flakiness (elastic#96934) Unskip heatmap suite and fixes flakiness (elastic#96941) [Fleet] Improve performance of data stream API (elastic#97058) [ML] Data Frame Analytics: remove beta badge (elastic#96977) [App Search] Migrate expanded rows for meta engines table in Engines Overview (elastic#96251) Instances latency distribution chart tooltips and axis fixes (elastic#95577) [Monitoring] Using primary average shard size (elastic#96177) [Workplace Search] Hide Kibana chrome on 3rd party connector redirects (elastic#97028) ## [Security Solution] Fixes `Exit full screen` and `Copy to cliboard` styling issues (elastic#96676) Index pattern field editor - Add warning on name or type change (elastic#95528) [App Search] Add small engine breadcrumb utility helper (elastic#96917) Copy esArchiver commands from ./reassign.ts to fix tests (elastic#97012) [Security Solution][Detections] Updates MITRE Tactics, Techniques, and Subtechniques for 7.13 (elastic#97011) Index patterns server - throw correct error on field caps 404 (elastic#95879) Use `EuiThemeProvider` in lists plugin tests and stories (elastic#96129) [npm] upgrade caniuse database (elastic#97002) chore(NA): moving @kbn/apm-utils into bazel (elastic#96227) ... # Conflicts: # x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/serialization/policy_serialization.test.ts # x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/schema.ts

…to-metrics-tab * 'master' of github.com:elastic/kibana: (61 commits) [Usage collection] Usage counters (elastic#96696) UI actions readme (elastic#96925) [TSVB] Enable brush for visualizations created with no index patterns (elastic#96727) [Data telemetry] Add Async Search to the tests (elastic#96693) added missing optional chain for bracket notation (elastic#96939) [Discover][DocViewer] Fix toggle columns from doc viewer table tab (elastic#95748) [TSVB] Fix per-request caching of index patterns (elastic#97043) [Datatable] Fix filter cell flakiness (elastic#96934) Unskip heatmap suite and fixes flakiness (elastic#96941) [Fleet] Improve performance of data stream API (elastic#97058) [ML] Data Frame Analytics: remove beta badge (elastic#96977) [App Search] Migrate expanded rows for meta engines table in Engines Overview (elastic#96251) Instances latency distribution chart tooltips and axis fixes (elastic#95577) [Monitoring] Using primary average shard size (elastic#96177) [Workplace Search] Hide Kibana chrome on 3rd party connector redirects (elastic#97028) ## [Security Solution] Fixes `Exit full screen` and `Copy to cliboard` styling issues (elastic#96676) Index pattern field editor - Add warning on name or type change (elastic#95528) [App Search] Add small engine breadcrumb utility helper (elastic#96917) Copy esArchiver commands from ./reassign.ts to fix tests (elastic#97012) [Security Solution][Detections] Updates MITRE Tactics, Techniques, and Subtechniques for 7.13 (elastic#97011) ...

smith added 6 commits March 26, 2021 14:10

Instances latency distribution chart tooltips

6c9da36

Fixes elastic#88852

add stuff

aa4e00a

Merge remote-tracking branch 'upstream/master' into nls/bubble-tips

3b5ea96

fixes

b505271

revert changes to table

80c5982

revert changes to table

8ff20db

smith changed the title ~~Instances latency distribution chart tooltips~~ Instances latency distribution chart tooltips and axis fixes Mar 30, 2021

smith added 2 commits March 30, 2021 11:08

Scale fixes

b93bb81

Merge remote-tracking branch 'upstream/master' into nls/bubble-tips

5f4a7d6

smith added auto-backport Deprecated - use backport:version if exact versions are needed release_note:enhancement v7.13.0 v8.0.0 labels Mar 30, 2021

smith added 3 commits March 30, 2021 12:42

Add more instances to example

6b30bd8

remove unnecessary arg types

a89a6c3

getServiceNodeName helper

6898325

smith marked this pull request as ready for review March 30, 2021 18:02

smith requested a review from a team March 30, 2021 18:02

Fix for undefined

934428d

botelastic bot added the Team:APM - DEPRECATED Use Team:obs-ux-infra_services. label Mar 30, 2021

sorenlouv reviewed Mar 30, 2021

View reviewed changes

...k/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx Outdated Show resolved Hide resolved

smith added 3 commits April 1, 2021 11:00

Merge remote-tracking branch 'upstream/master' into nls/bubble-tips

32bd146

clicking and domain

3d1cf42

Merge remote-tracking branch 'upstream/master' into nls/bubble-tips

df2fbdc