[Uptime] Annotate waterfall chart with additional metrics #103642

shahzad31 · 2021-06-29T11:12:37Z

Summary

Related to elastic/synthetics#120

Since synthetics added relative performance metrics like LCP, FCP, CLS, Load event and DocumnetLoad

Annotated all of these metrics on top of waterfall chart

elasticmachine · 2021-06-29T11:38:32Z

Pinging @elastic/uptime (Team:uptime)

justinkambic

Code looking pretty good, with a few minor changes.

I did have issues smoke testing this against more recent commits of Synthetics/Heartbeat.

.../public/components/monitor/synthetics/step_detail/waterfall/waterfall_chart_wrapper.test.tsx

...lugins/uptime/public/components/monitor/synthetics/step_detail/use_step_waterfall_metrics.ts

...ugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_markers.tsx

...lugins/uptime/public/components/monitor/synthetics/step_detail/use_step_waterfall_metrics.ts

vigneshshanmugam · 2021-06-29T17:23:00Z

...lugins/uptime/public/components/monitor/synthetics/step_detail/use_step_waterfall_metrics.ts

+
+  if (data) {
+    const metricDocs = (data.hits.hits as unknown) as Array<{ fields: any }>;
+    let navigationStart = 0;


FYI, This is prone to errors and wold result in absurd values when navigationStart is not present in the doc.

I would change this logic to this.

Find the navigationStart from the metricDocs and if not present don't calculate the flyout metrics.

If present, calculate the offset metrics as already done.

Improved it to make sure check for existence explicitly.

justinkambic

This is looking good to me, tested against latest synthetics it seems to be working great.

LGTM based on the functionality. Unsure if there are any unanswered questions about plotting these steps.

I did have one nit question regarding the code, maybe it's no problem though.

justinkambic · 2021-09-29T17:12:47Z

x-pack/plugins/uptime/public/pages/synthetics/step_detail_page.tsx

+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getDynamicSettings());


we are using data plugin search api, so we need to fetch heartbeat indices settings to construct that query params to pass it to the data.search

vigneshshanmugam

LGTM 🎉 I do have one question

If the step contains multiple requests before the navigation request, would we still show the waterfall markers?

vigneshshanmugam · 2021-09-29T19:24:38Z

...lugins/uptime/public/components/monitor/synthetics/step_detail/use_step_waterfall_metrics.ts

+          } = fields;
+          if (metricType?.[0] !== 'navigationStart') {
+            metrics.push({
+              id: metricType?.[0],


You can skip doing the undefined check here?

vigneshshanmugam · 2021-09-29T19:27:29Z

...ugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_markers.tsx

+export const DOCUMENT_CONTENT_LOADED_LABEL = i18n.translate(
+  'xpack.uptime.synthetics.waterfall.domContentLabel',
+  {
+    defaultMessage: 'DOMContentLoaded',


nit: DOMContentLoaded event to be in sync with Load event

vigneshshanmugam · 2021-09-29T19:30:56Z

...ck/plugins/uptime/public/components/monitor/synthetics/waterfall/context/waterfall_chart.tsx

@@ -10,6 +10,17 @@ import { WaterfallData, WaterfallDataEntry, WaterfallMetadata } from '../types';
 import { OnSidebarClick, OnElementClick, OnProjectionClick } from '../components/use_flyout';
 import { SidebarItems } from '../../step_detail/waterfall/types';

+export type MarkerItems = Array<{
+  id:
+    | 'domContentLoaded'


Note: we also get cls, but it's not a relative offset or trace. Its an actual value and not presentable in the waterfall.

dominiqueclarke

I'm seeing potential problems with really large waterfall charts. When CNN is the first step, no annotations are displayed. Interestingly, I actually saw the annotations flash then disappear at one point during testing.

Why is the DOMContentLoaded 0 for subsequent steps?
Here is my github profile as the first step

Here it is as a second step

Also other second/third steps:

Example inline journey

step("goto cnn", async () => page.goto('https://www.cnn.com'));
step("goto github", async () => page.goto('https://github.com/dominiqueclarke'));
step("goto facebook", async () => page.goto('https://www.facebook.com'));

dominiqueclarke · 2021-09-29T19:24:48Z

...lugins/uptime/public/components/monitor/synthetics/step_detail/use_step_waterfall_metrics.ts

+  const heartbeatIndices = settings?.heartbeatIndices || '';
+
+  const { data, loading } = useEsSearch(
+    hasNavigationRequest


Since this whole hook depends on hasNavigation request, can be exit early if this is false and return an empty metrics array and loading false?

dominiqueclarke · 2021-09-29T19:26:43Z

...ptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_chart_wrapper.tsx

@@ -26,9 +27,10 @@ export const renderLegendItem: RenderItem<LegendItem> = (item) => {
 interface Props {
  total: number;
  data: NetworkItems;
+  markerItems: MarkerItems;


Can we make this optional all the way down the component tree? That way you won't need to pass it to existing tests all the way through the component tree? You already have an early return here to account for it being option https://github.com/elastic/kibana/pull/103642/files#diff-06ea7122b3e4859a49d4baeb64472ed36489474493b8f6024f40a40d2e34fa49R47

dominiqueclarke · 2021-09-29T19:30:07Z

...ugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_markers.tsx

+  }
+);
+
+export function WaterfallCharMarkers() {


Suggested change

export function WaterfallCharMarkers() {

export function WaterfallChartMarkers() {

dominiqueclarke · 2021-09-29T19:45:56Z

...lugins/uptime/public/components/monitor/synthetics/step_detail/use_step_waterfall_metrics.ts

+      metricDocs.forEach(({ fields }) => {
+        if (fields['browser.relative_trace.type']?.[0] === 'mark') {
+          const {
+            'browser.relative_trace.name': metricType,


Can reuse the constants above for both these values.

…otations

kibanamachine · 2021-10-04T11:34:01Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`uptime`	656	658	+2

Async chunks

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

id	before	after	diff
`uptime`	565.0KB	568.0KB	+3.0KB

History

💔 Build #156741 failed 3021ffe
💚 Build #156166 succeeded 0b91c4e
💔 Build #156145 failed a1b00db
💔 Build #141334 failed 1fedde6
💛 Build #139478 was flaky ed8b98b

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

cc @shahzad31

dominiqueclarke

Issue with large waterfall charts is fixed, and the issues with subsequent steps dom content loaded has been discussed and clarified. LGTM

…3642) Co-authored-by: Kibana Machine <[email protected]>

kibanamachine · 2021-10-05T07:19:30Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

kibanamachine · 2021-10-06T07:24:59Z

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

kibanamachine · 2021-10-07T07:34:59Z

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

…113898) Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Shahzad <[email protected]>

awahab07 · 2021-11-16T12:20:48Z

Post FF Testing

A webpage alibaba.com is visited as the first step in a browser monitor. The step goes successful and visiting the performance break waterfall chart, the following annotations are available

First Contentful Paint (FCP): 3270ms
Largest Contentful Paint (LCP): 4450ms
DOM Content Loaded: 4320ms
Layout Shift: 7600ms

Comparison of FCP and LCP metrics with Lighthouse and calibreapp for the same page:

Agent	FCP (ms)	LCP (ms)
Kibana Synthetics	3270	4450
Chrome Lighthouse	600	1900
calibreapp	1150	2100

Issues:
LCP is not reported, see #118569
Possible UX improvements, see #118607

shahzad31 added 2 commits June 29, 2021 13:08

annotate waterfall chart

2468721

fix types

ef718ec

shahzad31 self-assigned this Jun 29, 2021

shahzad31 added release_note:enhancement v7.14.0 v8.0.0 Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability labels Jun 29, 2021

shahzad31 requested a review from justinkambic June 29, 2021 11:38

shahzad31 marked this pull request as ready for review June 29, 2021 11:38

shahzad31 requested a review from a team as a code owner June 29, 2021 11:38

shahzad31 requested a review from dominiqueclarke June 29, 2021 11:38

justinkambic requested changes Jun 29, 2021

View reviewed changes

Merge branch 'master' into waterfall-annotations

3127bb3

shahzad31 commented Jun 29, 2021

View reviewed changes

...ugins/uptime/public/components/monitor/synthetics/waterfall/components/waterfall_markers.tsx Outdated Show resolved Hide resolved

shahzad31 commented Jun 29, 2021

View reviewed changes

...lugins/uptime/public/components/monitor/synthetics/step_detail/use_step_waterfall_metrics.ts Outdated Show resolved Hide resolved

paulb-elastic mentioned this pull request Jun 29, 2021

[Uptime] Display summary performance metrics on waterfall chart #85401

Open

3 tasks

add translations

3f7e7e2

vigneshshanmugam reviewed Jun 29, 2021

View reviewed changes

shahzad31 added 2 commits June 29, 2021 19:51

check if nav start has value

f9d9cac

improve logic

72a644d

spalger added v7.15.0 and removed v7.14.0 labels Jun 30, 2021

shahzad31 added 7 commits July 1, 2021 18:23

Merge branch 'master' into waterfall-annotations

8768d00

add test

5d89ca0

Merge branch 'master' into waterfall-annotations

1d8290d

Merge branch 'master' into waterfall-annotations

5248cd3

Merge branch 'master' into waterfall-annotations

6bf295d

display metrics only when navigation true

abc2c4f

fix type

ba51295

shahzad31 requested a review from justinkambic September 28, 2021 16:06

update test

0b91c4e

justinkambic approved these changes Sep 29, 2021

View reviewed changes

vigneshshanmugam approved these changes Sep 29, 2021

View reviewed changes

dominiqueclarke requested changes Sep 29, 2021

View reviewed changes

shahzad31 added 5 commits September 30, 2021 13:47

Merge branch 'master' of github.com:elastic/kibana into waterfall-ann…

a8f8d5b

…otations

PR feedback

3021ffe

Merge branch 'master' of github.com:elastic/kibana into waterfall-ann…

334f015

…otations

Merge branch 'master' of github.com:elastic/kibana into waterfall-ann…

9a272ea

…otations

update test

019185c

shahzad31 requested a review from dominiqueclarke October 4, 2021 18:32

dominiqueclarke approved these changes Oct 4, 2021

View reviewed changes

shahzad31 merged commit 00bb597 into elastic:master Oct 5, 2021

shahzad31 deleted the waterfall-annotations branch October 5, 2021 07:13

shahzad31 added the auto-backport Deprecated - use backport:version if exact versions are needed label Oct 5, 2021

kibanamachine added a commit to kibanamachine/kibana that referenced this pull request Oct 5, 2021

[Uptime] Annotate waterfall chart with additional metrics (elastic#10…

b8ffa14

…3642) Co-authored-by: Kibana Machine <[email protected]>

kibanamachine mentioned this pull request Oct 5, 2021

[7.x] [Uptime] Annotate waterfall chart with additional metrics (#103642) #113898

Merged

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Oct 6, 2021

kibanamachine added a commit that referenced this pull request Oct 7, 2021

[Uptime] Annotate waterfall chart with additional metrics (#103642) (#…

54d903a

…113898) Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Shahzad <[email protected]>

kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Oct 7, 2021

shahzad31 removed their assignment Nov 8, 2021

awahab07 self-assigned this Nov 11, 2021

This was referenced Nov 15, 2021

[Uptime] Layout Shift is represented as a single point in time on page Performance Breakdown #118569

Closed

[Uptime] Waterfall chart UX improvements #118607

Open

awahab07 removed their assignment Nov 16, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Uptime] Annotate waterfall chart with additional metrics #103642

[Uptime] Annotate waterfall chart with additional metrics #103642

shahzad31 commented Jun 29, 2021

elasticmachine commented Jun 29, 2021

justinkambic left a comment

vigneshshanmugam Jun 29, 2021

shahzad31 Jun 29, 2021

justinkambic left a comment

justinkambic Sep 29, 2021

shahzad31 Sep 29, 2021

vigneshshanmugam left a comment •

edited

Loading

vigneshshanmugam Sep 29, 2021

vigneshshanmugam Sep 29, 2021

vigneshshanmugam Sep 29, 2021

dominiqueclarke left a comment •

edited

Loading

dominiqueclarke Sep 29, 2021

dominiqueclarke Sep 29, 2021

dominiqueclarke Sep 29, 2021

dominiqueclarke Sep 29, 2021

kibanamachine commented Oct 4, 2021

dominiqueclarke left a comment

kibanamachine commented Oct 5, 2021

kibanamachine commented Oct 6, 2021

kibanamachine commented Oct 7, 2021

awahab07 commented Nov 16, 2021

	export function WaterfallCharMarkers() {
	export function WaterfallChartMarkers() {

[Uptime] Annotate waterfall chart with additional metrics #103642

[Uptime] Annotate waterfall chart with additional metrics #103642

Conversation

shahzad31 commented Jun 29, 2021

Summary

elasticmachine commented Jun 29, 2021

justinkambic left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

justinkambic left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vigneshshanmugam left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dominiqueclarke left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kibanamachine commented Oct 4, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

dominiqueclarke left a comment

Choose a reason for hiding this comment

kibanamachine commented Oct 5, 2021

💚 Backport successful

kibanamachine commented Oct 6, 2021

kibanamachine commented Oct 7, 2021

awahab07 commented Nov 16, 2021

vigneshshanmugam left a comment •

edited

Loading

dominiqueclarke left a comment •

edited

Loading