[APM] Performance comparison charts by user agent (browser) by smith · Pull Request #49582 · elastic/kibana

smith · 2019-10-28T23:38:21Z

Show a chart with average page load broken down by user agent name on the RUM overview.

I tested this by setting up a RUM agent on a sample app on my test cloud cluster.

On the internal APM dev cluster you'll need to set the time range to about 90 days then look at the "client" app and find the time range where there are requests. Unfortunately with this sample data the only series you see is "Other" because there aren't a lot of requests.

Also factor out the color selection into a common helper.

Fixes #43342

elasticmachine · 2019-10-29T00:50:01Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 1f07d81a25ab7436e71df35b3aa13e5bdde0f95b

elasticmachine · 2019-10-29T18:58:04Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 71be5cea91116d9248ebd9a066164561d3ec5647

elasticmachine · 2019-11-01T04:22:18Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 44d676a5661dfe007eca3fb654dc119a06e2d2c4

elasticmachine · 2019-11-01T23:12:44Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 2a1ae9e341f1a1e337af0b73bcf27bc44d4e39c2

elasticmachine · 2019-11-11T18:08:42Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: dfa8e2a572bb6e1cba07793ee0def022f29e518f

smith · 2019-11-11T21:06:36Z

@elasticmachine retest

smith · 2019-11-11T21:07:52Z

@elasticmachine test this please

elasticmachine · 2019-11-11T22:20:21Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: dfa8e2a572bb6e1cba07793ee0def022f29e518f

formgeist · 2019-11-12T08:18:52Z

In order to test multiple values or lines, we would need to fake a dataset that has some other values than Other. How would we best go about this?

smith · 2019-11-12T15:06:00Z

I created a Codesandbox app with RUM agent installed: https://codesandbox.io/s/admiring-mclaren-6o624 then pointed it at my cloud cluster, deployed it with netlify, then pointed my local kibana at that cluster, then loaded the page in a bunch of different browsers.

It would be nicer to have a more realistic data set, but I think we should spend the time on that once we work on adding sample data.

smith · 2019-11-13T16:58:49Z

@elasticmachine merge upstream

smith · 2019-11-13T19:42:51Z

@elasticmachine merge upstream

elasticmachine · 2019-11-13T21:00:08Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 6020cfdd6120081a285b7fc7f081e9143f2f9014

elasticmachine · 2019-11-14T05:59:58Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: d6d7539776fefc8135c7d44940636b2629a66e09

sorenlouv · 2019-11-14T21:54:41Z

This test is... not great. And it's totally on me (I introduced it!).
LMK if you have any ideas to improve it.

Actually, it would be useful if you added a user agent in the sample doc:

kibana/x-pack/legacy/plugins/apm/common/elasticsearch_fieldnames.test.ts

Line 36 in 51a6eeb

user: { id: '1337' },

Added user agent in c39defa8e1.

sorenlouv · 2019-11-14T22:02:55Z

Missing rebase, or should this go into ?

kibana/x-pack/legacy/plugins/apm/common/transaction_types.ts

Lines 7 to 9 in 51a6eeb

export const TRANSACTION_PAGE_LOAD = 'page-load';

export const TRANSACTION_ROUTE_CHANGE = 'route-change';

export const TRANSACTION_REQUEST = 'request';

Fixed in rebase.

sorenlouv · 2019-11-14T22:50:42Z

fyi @cauemarcondes: this will probably conflict with your changes in #49638

Fixed in rebase.

sorenlouv · 2019-11-14T23:02:32Z

These colors are defined several times already. Perhaps it would make sense to add them as a constant in https://github.com/elastic/kibana/tree/c40b32010462aa6731d5c8a9312444228b3a819e/x-pack/legacy/plugins/apm/common

Examples:
https://github.com/elastic/kibana/blob/c40b32010462aa6731d5c8a9312444228b3a819e/x-pack/legacy/plugins/apm/server/lib/transactions/breakdown/constants.ts#L10-L22

kibana/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/gc/fetchAndTransformGcMetrics.ts

Lines 28 to 36 in c40b320

const colors = [

theme.euiColorVis0,

theme.euiColorVis1,

theme.euiColorVis2,

theme.euiColorVis3,

theme.euiColorVis4,

theme.euiColorVis5,

theme.euiColorVis6

];

kibana/x-pack/legacy/plugins/apm/server/lib/metrics/transform_metrics_chart.ts

Lines 16 to 24 in c40b320

const colors = [

theme.euiColorVis0,

theme.euiColorVis1,

theme.euiColorVis2,

theme.euiColorVis3,

theme.euiColorVis4,

theme.euiColorVis5,

theme.euiColorVis6

];

Btw. I like the modulus approach (colors[index % colors.length]) you took that ensures we'll loop through them regardless how many lines there are. In contrast to

kibana/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/gc/fetchAndTransformGcMetrics.ts

Line 151 in c40b320

color: colors[i],

So maybe a shared helper together with the colors would make sense?

const getVizColorForIndex = index => vizColors[index % vizColors.length]

Added this in e865ebe1b5.

cauemarcondes · 2019-11-15T15:54:53Z

@smith if you rebase master, you'll have to replace getTimeFormatter to getDurationFormatter

Fixed in rebase.

elasticmachine · 2019-11-15T18:56:18Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: e865ebe1b5cae3b0cc20b231a2008cd20d2dde6a

elasticmachine · 2019-11-15T20:20:13Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 14f721b351c25e1d8fc431522e9bbc5481fcaeeb

elasticmachine · 2019-11-15T23:24:06Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: a137078aa76d4e352b1ca60b84550b7e58e2093b

sorenlouv

LGTM 👍

sorenlouv · 2019-11-16T23:20:41Z

Very nice! 👍

sorenlouv · 2019-11-16T23:25:13Z

A file with request type constants was recently added:

kibana/x-pack/legacy/plugins/apm/common/transaction_types.ts

Lines 6 to 9 in 4c33f2a

export const TRANSACTION_PAGE_LOAD = 'page-load';

export const TRANSACTION_ROUTE_CHANGE = 'route-change';

export const TRANSACTION_REQUEST = 'request';

sorenlouv · 2019-11-16T23:28:18Z

idx is no more in APM UI #50849 🍾

elasticmachine · 2019-11-19T06:55:42Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 0b3ca10d54da7470c4e5f62c92d2904a69130be5

Show a chart with average page load broken down by user agent name on the RUM overview. I tested this by setting up a RUM agent on a sample app on my test cloud cluster. On the internal APM dev cluster you'll need to set the time range to about 90 days then look at the "client" app and find the time range where there are requests. Unfortunately with this sample data the only series you see is "Other" because there aren't a lot of requests. Fixes elastic#43342

elasticmachine · 2019-11-20T08:01:59Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 508454a

…49582) Show a chart with average page load broken down by user agent name on the RUM overview. I tested this by setting up a RUM agent on a sample app on my test cloud cluster. On the internal APM dev cluster you'll need to set the time range to about 90 days then look at the "client" app and find the time range where there are requests. Unfortunately with this sample data the only series you see is "Other" because there aren't a lot of requests. Also factor out the color selection into a common helper. Fixes elastic#43342

cauemarcondes · 2020-01-17T09:15:14Z

Tests:
IE: ✅
Chrome: ✅
Firefox: ✅
Safari: ✅

…49582) Show a chart with average page load broken down by user agent name on the RUM overview. I tested this by setting up a RUM agent on a sample app on my test cloud cluster. On the internal APM dev cluster you'll need to set the time range to about 90 days then look at the "client" app and find the time range where there are requests. Unfortunately with this sample data the only series you see is "Other" because there aren't a lot of requests. Also factor out the color selection into a common helper. Fixes elastic#43342

smith force-pushed the nls/43342/browser-breakdown branch from 1f07d81 to 71be5ce Compare October 29, 2019 17:40

smith force-pushed the nls/43342/browser-breakdown branch from 71be5ce to 44d676a Compare November 1, 2019 02:57

smith force-pushed the nls/43342/browser-breakdown branch 2 times, most recently from 2f1410f to 2a1ae9e Compare November 1, 2019 21:47

smith marked this pull request as ready for review November 1, 2019 21:50

smith requested a review from a team November 1, 2019 21:50

smith force-pushed the nls/43342/browser-breakdown branch from 2a1ae9e to dfa8e2a Compare November 11, 2019 16:48

smith added v7.6.0 release_note:enhancement labels Nov 11, 2019

smith force-pushed the nls/43342/browser-breakdown branch from 6020cfd to d6d7539 Compare November 14, 2019 04:35

sorenlouv reviewed Nov 14, 2019

View reviewed changes

Comment thread x-pack/legacy/plugins/apm/public/hooks/useAvgDurationByBrowser.test.ts Outdated

sorenlouv reviewed Nov 14, 2019

View reviewed changes

cauemarcondes reviewed Nov 15, 2019

View reviewed changes

smith force-pushed the nls/43342/browser-breakdown branch from d6d7539 to e865ebe Compare November 15, 2019 17:39

smith force-pushed the nls/43342/browser-breakdown branch from 14f721b to a137078 Compare November 15, 2019 22:14

sorenlouv approved these changes Nov 16, 2019

View reviewed changes

smith force-pushed the nls/43342/browser-breakdown branch from a137078 to 0b3ca10 Compare November 19, 2019 05:29

smith added 11 commits November 20, 2019 00:35

remove unused things

a9c567a

Prettier fix

48f1d91

update snapshot

0e5e1e0

Fixes based on feedback

c5ade3c

Type fixes

3fb5e38

Replace idx with optional chaining

dd78f21

Use transaction variables

d5fb685

Fix jest type error

51af403

Make ProcessorEvent an enum

c951776

Use processor event enum everywhere

508454a

smith force-pushed the nls/43342/browser-breakdown branch from 0b3ca10 to 508454a Compare November 20, 2019 06:38

smith merged commit 35b0362 into elastic:master Nov 20, 2019

smith deleted the nls/43342/browser-breakdown branch November 20, 2019 16:30

smith mentioned this pull request Nov 20, 2019

[7.x] [APM] Performance comparison charts by user agent (browser) (#49582) #51189

Merged

ogupte added the apm-test-plan-7.6.0 label Jan 15, 2020

cauemarcondes self-assigned this Jan 17, 2020

cauemarcondes added the apm:test-plan-done Pull request that was successfully tested during the test plan label Jan 17, 2020

	export const TRANSACTION_PAGE_LOAD = 'page-load';
	export const TRANSACTION_ROUTE_CHANGE = 'route-change';
	export const TRANSACTION_REQUEST = 'request';

	const colors = [
	theme.euiColorVis0,
	theme.euiColorVis1,
	theme.euiColorVis2,
	theme.euiColorVis3,
	theme.euiColorVis4,
	theme.euiColorVis5,
	theme.euiColorVis6
	];

Conversation

smith commented Oct 28, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

elasticmachine commented Oct 29, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Oct 29, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Nov 1, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Nov 1, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Nov 11, 2019

💔 Build Failed

Uh oh!

smith commented Nov 11, 2019

Uh oh!

smith commented Nov 11, 2019

Uh oh!

elasticmachine commented Nov 11, 2019

💚 Build Succeeded

Uh oh!

formgeist commented Nov 12, 2019

Uh oh!

smith commented Nov 12, 2019

Uh oh!

smith commented Nov 13, 2019

Uh oh!

smith commented Nov 13, 2019

Uh oh!

elasticmachine commented Nov 13, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Nov 14, 2019

💚 Build Succeeded

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smith Nov 15, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sorenlouv Nov 14, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smith Nov 15, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smith Nov 15, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sorenlouv Nov 14, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Nov 15, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Nov 15, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Nov 15, 2019

smith commented Oct 28, 2019 •

edited

Loading

smith Nov 15, 2019 •

edited

Loading

sorenlouv Nov 14, 2019 •

edited

Loading

smith Nov 15, 2019 •

edited

Loading

smith Nov 15, 2019 •

edited

Loading

sorenlouv Nov 14, 2019 •

edited

Loading