Skip to content

[embeddable rebuild] integrate react control group embeddable into dashboard container - reloaded#192221

Merged
nreese merged 10 commits intoelastic:mainfrom
nreese:react_embeddable_controls
Sep 10, 2024
Merged

[embeddable rebuild] integrate react control group embeddable into dashboard container - reloaded#192221
nreese merged 10 commits intoelastic:mainfrom
nreese:react_embeddable_controls

Conversation

@nreese
Copy link
Copy Markdown
Contributor

@nreese nreese commented Sep 5, 2024

PR replaces legacy embeddable control group implementation with react control group implementation in DashboardContainer.

background

Work originally done in #190273. #190273 was reverted by #191993 because of dashboard performance degradation. It was determined that degradation was because new react embeddable controls fixed a regression where dashboard panels are loading before control filters are created. This regression was introduced by #187509.

The work around is that this PR keeps the currently broken behavior in main and loads panels before control filters are ready. The thinking is that the migration would replace like for like and not introduce any performance changes. Then, at a later time, the regression could be resolved.

reviewing

These are the same changes from #190273 minus some work to introduce a current regression in main. A full re-review is not needed.

@nreese nreese changed the title [embeddable rebuild] [embeddable rebuild] integrate react control group embeddable into dashboard container - reloaded Sep 5, 2024
@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented Sep 5, 2024

/ci

@thomasneirynck
Copy link
Copy Markdown
Contributor

thomasneirynck commented Sep 6, 2024

This PR does not seem to introduce a new regression (see last dot the right, for the benchmarking run)

image

@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented Sep 6, 2024

@elasticmachine merge upstream

@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented Sep 6, 2024

/ci

@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented Sep 6, 2024

/ci

@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented Sep 6, 2024

/ci

@nreese nreese marked this pull request as ready for review September 6, 2024 18:55
@nreese nreese requested a review from a team as a code owner September 6, 2024 18:55
@nreese nreese requested a review from a team September 6, 2024 18:55
@nreese nreese added Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// release_note:skip Skip the PR/issue when compiling release notes project:embeddableRebuild v8.16.0 labels Sep 6, 2024
@elasticmachine
Copy link
Copy Markdown
Contributor

Pinging @elastic/kibana-presentation (Team:Presentation)

Copy link
Copy Markdown
Contributor

@Heenawter Heenawter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quickly skimmed the code to verify that it is mostly the same as #190273 (which was already thoroughly reviewed) + left a couple questions about the changes. But nothing blocking 👍

@botelastic botelastic bot added ci:project-deploy-observability Create an Observability project Feature:Embedding Embedding content via iFrame Team:obs-ux-infra_services - DEPRECATED DEPRECATED - Use Team:obs-presentation. labels Sep 6, 2024
@elasticmachine
Copy link
Copy Markdown
Contributor

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

Copy link
Copy Markdown
Contributor

@cauemarcondes cauemarcondes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

APM changes LGTM

@Heenawter Heenawter mentioned this pull request Sep 9, 2024
7 tasks
@kibana-ci
Copy link
Copy Markdown

kibana-ci commented Sep 9, 2024

💚 Build Succeeded

  • Buildkite Build
  • Commit: 2e35870
  • Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-192221-2e3587096c40

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
controls 436 437 +1

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id before after diff
controls 385 381 -4
embeddable 462 463 +1
total -3

Async chunks

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

id before after diff
apm 3.5MB 3.5MB -73.0B
controls 560.7KB 561.7KB +985.0B
dashboard 461.2KB 460.8KB -396.0B
total +516.0B

Page load bundle

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

id before after diff
apm 40.0KB 39.9KB -138.0B
controls 58.3KB 57.8KB -534.0B
dashboard 43.3KB 42.4KB -973.0B
embeddable 71.4KB 71.5KB +156.0B
total -1.5KB
Unknown metric groups

API count

id before after diff
controls 394 390 -4
embeddable 572 573 +1
total -3

async chunk count

id before after diff
dashboard 13 14 +1

References to deprecated APIs

id before after diff
dashboard 47 40 -7

History

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

@nreese nreese merged commit 9dfad5b into elastic:main Sep 10, 2024
@kibanamachine kibanamachine added the backport:skip This PR does not require backporting label Sep 10, 2024
@thomasneirynck
Copy link
Copy Markdown
Contributor

thomasneirynck commented Sep 17, 2024

This PR introduces a major performance improvement for Dashboards which have both controls and saved searches, two embeddables which have been migrated to the new system (saved searches were moved here #180536).

This improvement is consistently reproducible. After discussion with @Heenawter and @nreese , we are not 100% about the exact mechanics of how this large improvement was introduced, but it seems a compounding effect of the embeddable-refactor. It seems related to efficiencies in avoiding crufty re-rendering of React-DOM, and avoiding unnecessary state-diffing on state-change.

image image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

apm:review backport:skip This PR does not require backporting ci:project-deploy-observability Create an Observability project Feature:Embedding Embedding content via iFrame project:embeddableRebuild release_note:skip Skip the PR/issue when compiling release notes Team:obs-ux-infra_services - DEPRECATED DEPRECATED - Use Team:obs-presentation. Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// v8.16.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants