[ML] APM Latency Correlations UX improvements/fixes #108860

walterra · 2021-08-17T10:43:30Z

Summary

Part of #108332.
Follow up to #107266.

Tweak label for log log chart data series for all transactions. f53d428
Show tip to drag to select a range in the Trace samples distribution chart panel. 086c5a0
Change the selected range label and clear selection option to EuiBadge with click action and tooltip on hover 'Clear selection'. 64937ff
Move the 'current sample' annotation to the bottom axis to not overlap with the 95p annotation marker. f50e96f
Move the help popover to the top of the panel. f24a5cc
Move the refresh/cancel option to the right of the progress bar. f425339
Always display the table for correlations. 212b77f
Show improved empty state using the EuiEmptyPrompt for the correlations table when no significant correlations are found. 212b77f
Fix Filter behaviour: when clicking on the filter item, jump to show top of page where the filter bar is evident, and reset the correlation tabs and show the Trace Samples tab ebc05ae
Fix updating the log log chart and correlation service when the user changes the kquery or time span. 5804216

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

formgeist · 2021-08-17T19:15:23Z

@walterra I noticed two more things just going through it again (in dark mode).

Default charts configuration is not used
APM uses a default configuration and theme provider (through EUI) for supporting dark theme and I believe configurations around the e.g. gridlines in the chart canvas. I could see in the distribution chart the appropriate theming isn't added for dark theme and the gridlines are not present (hard to tell on the light theme).

Filters added using special chars are not formatted correctly in the query bar
I added a filter for a url.path and it didn't return any results in the data because the formatting from clicking the filter value option in the table wasn't correct.

Fixed the formatting of the URL yielded results in the end

elasticmachine · 2021-08-17T19:44:35Z

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

elasticmachine · 2021-08-17T19:44:37Z

Pinging @elastic/ml-ui (:ml)

walterra · 2021-08-17T20:08:20Z

@formgeist Thanks for the hint with the theming in other charts, I was able to fix it in 14c6896

Fixed Light mode:

Fixed Dark mode:

qn895 · 2021-08-17T20:17:46Z

Tested latest changes and LGTM 🎉

walterra · 2021-08-17T21:37:19Z

@elasticmachine merge upstream

walterra · 2021-08-17T22:43:16Z

@elasticmachine merge upstream

qn895 · 2021-08-17T23:54:04Z

@elasticmachine merge upstream

sorenlouv

lgtm

kibanamachine · 2021-08-18T03:35:19Z

💚 Build Succeeded

Metrics [docs]

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.4MB	4.4MB	+2.4KB

History

💔 Build #146439 failed fd453a2
💔 Build #146421 failed 0536f29
💔 Build #146402 failed c652ac8
💔 Build #146379 failed 3556cfb
💛 Build #146272 was flaky d908b7e

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

cc @walterra

- Tweak label for log log chart data series for all transactions. - Show tip to drag to select a range in the Trace samples distribution chart panel. - Change the selected range label and clear selection option to `EuiBadge` with click action and tooltip on hover 'Clear selection'. - Move the 'current sample' annotation to the bottom axis to not overlap with the 95p annotation marker. - Move the help popover to the top of the panel. - Move the refresh/cancel option to the right of the progress bar. - Always display the table for correlations. - Show improved empty state using the `EuiEmptyPrompt` for the correlations table when no significant correlations are found. - Fix Filter behaviour: when clicking on the filter item, jump to show top of page where the filter bar is evident, and reset the correlation tabs and show the Trace Samples tab - Fix updating the log log chart and correlation service when the user changes the kquery or time span.

kibanamachine · 2021-08-18T03:38:11Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

- Tweak label for log log chart data series for all transactions. - Show tip to drag to select a range in the Trace samples distribution chart panel. - Change the selected range label and clear selection option to `EuiBadge` with click action and tooltip on hover 'Clear selection'. - Move the 'current sample' annotation to the bottom axis to not overlap with the 95p annotation marker. - Move the help popover to the top of the panel. - Move the refresh/cancel option to the right of the progress bar. - Always display the table for correlations. - Show improved empty state using the `EuiEmptyPrompt` for the correlations table when no significant correlations are found. - Fix Filter behaviour: when clicking on the filter item, jump to show top of page where the filter bar is evident, and reset the correlation tabs and show the Trace Samples tab - Fix updating the log log chart and correlation service when the user changes the kquery or time span. Co-authored-by: Walter Rafelsberger <[email protected]>

walterra · 2021-08-18T08:29:48Z

I added an item about the character encoding problem when filtering to the meta issue, it wasn't fixed as part of this PR, see #106381.

walterra added 30 commits August 4, 2021 17:44

[ML] Draft version of correlations being added to main pages.

615e47e

[ML] Add selection capability to latency histogram chart.

3327a6d

[ML] Adds button to toggle correlations visibility.

2660d27

[ML] Improve chart refresh, adds option to load overall histogram only.

2b36190

remove percentileThresholdValue from client side params.

69b38d2

[ML] More fine grained latency range selection.

a26728a

[ML] Fix jest tests.

bd5da21

[ML] Clear selection button.

f72cf18

[ML] Fix to clear selection.

d696376

[ML] Return trace samples based on chart selection.

2a3b719

Merge branch 'master' into ml-apm-correlations-page

e92f017

[ML] Move transaction content to tabs.

bb39370

[ML] Fix correlation chart loading state.

f80382e

[ML] Fix translation ids.

c80d301

[ML] Selection UI tweaks.

16d9067

[ML] Weight retainer tweak.

2057e48

[ML] Adds current sample as marker to correlations chart.

93387f5

[ML] Tweak y axis ticks.

cc2479e

[ML] Tweak EuiPanel layout. Fix translations ids.

9d60e99

[ML] Set default table rows to 10.

c487944

[ML] Fix i18n.

f330266

[Ml] Remove outdated code.

5d541e4

[ML] Disable drag select for correlation analysis.

74f6a5e

[ML] Tweak vertical alignment.

1dffda8

[ML] Refactor to fetch samples without buckets only.

d8c04aa

[ML] Fix i18n.

70a0b52

Merge branch 'master' into ml-apm-correlations-page

0a5fd53

Merge branch 'master' into ml-apm-correlations-page

a7ec3da

[ML] Fix async search service to use state provider.

a76dcd2

[ML] Tweak trace samples API response. Fix API integration tests.

0898e8b

[ML] Fix onFilter.

d5bf6b5

walterra marked this pull request as ready for review August 17, 2021 19:44

walterra requested a review from a team as a code owner August 17, 2021 19:44

[ML] Fix chart theming.

14c6896

smith approved these changes Aug 17, 2021

View reviewed changes

qn895 approved these changes Aug 17, 2021

View reviewed changes

Merge branch 'master' into ml-apm-correlations-page-ux

3556cfb

walterra enabled auto-merge (squash) August 17, 2021 20:54

walterra added the auto-backport Deprecated - use backport:version if exact versions are needed label Aug 17, 2021

Merge branch 'master' into ml-apm-correlations-page-ux

c652ac8

Merge branch 'master' into ml-apm-correlations-page-ux

0536f29

Merge branch 'master' into ml-apm-correlations-page-ux

fd453a2

sorenlouv approved these changes Aug 18, 2021

View reviewed changes

[ML] Force click in APM deep link tests

2b02ba4

walterra merged commit 2908ece into elastic:master Aug 18, 2021

kibanamachine mentioned this pull request Aug 18, 2021

[7.x] [ML] APM Latency Correlations UX improvements/fixes (#108860) #109036

Merged

walterra deleted the ml-apm-correlations-page-ux branch August 18, 2021 08:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] APM Latency Correlations UX improvements/fixes #108860

[ML] APM Latency Correlations UX improvements/fixes #108860

walterra commented Aug 17, 2021 •

edited

Loading

formgeist commented Aug 17, 2021 •

edited

Loading

elasticmachine commented Aug 17, 2021

elasticmachine commented Aug 17, 2021

walterra commented Aug 17, 2021

qn895 commented Aug 17, 2021 •

edited

Loading

walterra commented Aug 17, 2021

walterra commented Aug 17, 2021

qn895 commented Aug 17, 2021

sorenlouv left a comment

kibanamachine commented Aug 18, 2021

kibanamachine commented Aug 18, 2021

walterra commented Aug 18, 2021

[ML] APM Latency Correlations UX improvements/fixes #108860

[ML] APM Latency Correlations UX improvements/fixes #108860

Conversation

walterra commented Aug 17, 2021 • edited Loading

Summary

Checklist

For maintainers

formgeist commented Aug 17, 2021 • edited Loading

elasticmachine commented Aug 17, 2021

elasticmachine commented Aug 17, 2021

walterra commented Aug 17, 2021

qn895 commented Aug 17, 2021 • edited Loading

walterra commented Aug 17, 2021

walterra commented Aug 17, 2021

qn895 commented Aug 17, 2021

sorenlouv left a comment

Choose a reason for hiding this comment

kibanamachine commented Aug 18, 2021

💚 Build Succeeded

Metrics [docs]

Async chunks

History

kibanamachine commented Aug 18, 2021

💚 Backport successful

walterra commented Aug 18, 2021

walterra commented Aug 17, 2021 •

edited

Loading

formgeist commented Aug 17, 2021 •

edited

Loading

qn895 commented Aug 17, 2021 •

edited

Loading