[Obs Onboarding] Add page rendering performance monitoring

[mykolaharmash]

Closes https://github.com/elastic/observability-dev/issues/4238 🔒
Closes https://github.com/elastic/observability-dev/issues/3513 🔒

This change add logic for triggering the page rendering performance metrics for:

• Onboarding home screen
• Host auto-detect flow
• Host OTel flow
• Host K8S flow
• K8S OTel flow
• Firehose flow

How to test

1. Run Kibana locally
2. Open browser dev tools
3. Navigate to one of the above mentioned onboarding screens
4. Observe kibana:plugin_render_time EBT event emitted in the Network tab of the dev tools

Events emitted from local Kibana end up in the Staging Telemetry cluster, there is a dedicated rendering performance dashboard, onboarding events can be filtered using observabilityOnboarding application ID. (note that it takes some time for events to be indexed and they appear in the cluster with a significant delay)

[yngrdyn]

What about start using Inline documentation for TTFMP

meta: {
      description: '[ttfmp_page] Explaining when this metric will be available'
}

?

[mykolaharmash]

What about start using Inline documentation for TTFMP

meta: {
      description: '[ttfmp_page] Explaining when this metric will be available'
}

?

Good point, I didn't know about that. Though there is now an issue with Meta interface which looks like this:

export interface Meta {
  rangeFrom: string;
  rangeTo: string;
  description?: DescriptionWithPrefix;
}

It requires rangeFrom and rangeTo which is not relevant for onboarding. @kpatticha do you know why range is required? I could set those to empty strings of course but ideally we'd adjust the interface.

[kpatticha]

It requires rangeFrom and rangeTo which is not relevant for onboarding. @kpatticha do you know why range is required? I could set those to empty strings of course but ideally we'd adjust the interface.

@mykolaharmash they should be optional as the timeranges are not relevant for many pages . The current implementation is false. Feel free to update the type to make them optional

export interface Meta {
  rangeFrom?: string;
  rangeTo?: string;
  description?: DescriptionWithPrefix;
}

and make sure

https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-ebt-tools/src/performance_metrics/context/measure_interaction/index.ts#L39

checks for the ranges for example: if (eventData?.meta && eventData.meta.rangeFrom && eventData.meta.rangeTo) {

I could fix that if you want.

[mykolaharmash]

@yngrdyn please take another look, I've updated the code to include description in the request.

[yngrdyn]

LGTM

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 1756c0c

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
observabilityOnboarding	260.9KB	262.2KB	+1.3KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
observabilityOnboarding	11.2KB	11.3KB	+63.0B

History

• 💛 Build #284423 was flaky fdffaa0
• 💚 Build #284085 succeeded 1b0ec17
• 💚 Build #283982 succeeded 6a338d3
• 💚 Build #282318 succeeded f251a15

[jloleysens]

Based on the diff I guess we don't need to add a new test in measure_interaction.test.ts right?

[mykolaharmash]

I think it should be fine as the structure of the resulting object sent to the telemetry API did not change

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 213769 locally

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 213769 locally

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 213769 locally

[gbamparop]

@mykolaharmash shall we remove the 8.18.1 and 9.0.1 labels from this one?

[awahab07]

For #213911 (comment), we need to backport these changes to 8.x and 9.x.

I am working on the backports and have created #213417 (comment) and #213417 (comment) up the line for the purpose.

[awahab07]

💚 All backports created successfully

Status	Branch	Result
✅	8.18

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

[kibanamachine]

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]

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]

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.

[awahab07]

💚 All backports created successfully

Status	Branch	Result
✅	9.0

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

[awahab07]

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

[kibanamachine]

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.