[dashboard as code] embeddable transforms registry by nreese · Pull Request #227141 · elastic/kibana

nreese · 2025-07-08T21:23:10Z

Problem

Dashboard CRUD request and response shapes are overly complex because

panel state contains extracted references
by-value panel state often mirrors embeddable saved object state, which usually contains stringified JSON. For example, a by-value maps panel state contains layerListJSON instead of exposing just layerList.

To simplify dashboard CRUD request and response shapes, embeddables need a mechanism to

inject references in dashboard CRUD read APIs
transform by-value embeddable state to a more consumable shape in dashboard CRUD read APIs
extract references in dashbaord CRUD write APIs

The embeddable transforms registry is the solution to these problems and allows embeddables to transform embeddable state that is part of dashboard CRUD APIs.

Changes to Embeddable plugin

Adds transforms registry to embeddable server and public plugins, allowing embeddable implementations to register transforms.

Changes to Dashboard plugin

Updates dashboard CRUD write APIs to use transformIn function to extract references.

The below image shows the create request body. The dashboard contains a single by-reference book embeddable. Notice how the savedObjectId has not been extracted to a reference.

The below image shows the saved object for the dashboard above. Notice how the persisted state has saved object reference extracted. Panel embeddableConfig no longer contains savedObjectId key and references contains savedObjectRef.

Updates dashboard CRUD read APIs to use transformOut function to inject references and transform stored embeddable state to a more consumable shape. Dashboards loaded from stored URL state also use transformOut for the same purpose.

Changes to embeddable_examples

Implements book saved object

Implements book content management CRUD API

Updates book embeddable to use book CRUD API

nreese · 2025-07-09T19:39:29Z

@elasticmachine merge upstream

nreese · 2025-07-10T16:29:57Z

/ci

…no-cache --fix'

nreese · 2025-07-10T17:01:29Z

/ci

nreese · 2025-07-10T18:33:29Z

/ci

elasticmachine · 2025-07-10T20:35:18Z

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

nreese · 2025-07-11T17:07:59Z

@elasticmachine merge upstream

nickpeihl

lgtm! Code review and tested book embeddable example.

I did add a few questions, but nothing blocking. I can't wait to start adding transforms in our other embeddables!

nickpeihl · 2025-07-11T17:16:57Z

examples/embeddable_examples/public/plugin.ts

  developerExamples: DeveloperExamplesSetup;
  embeddable: EmbeddableSetup;
-  uiActions: UiActionsStart;
+  uiActions: UiActionsSetup;


It doesn't look like we even use the UIActionsSetup dependency. I wonder if we can get rid of it?

...m/plugins/shared/dashboard/server/content_management/v1/transforms/in/transform_panels_in.ts

...plugins/shared/dashboard/server/content_management/v1/transforms/out/transform_panels_out.ts

examples/embeddable_examples/common/book/transforms/transform_in.ts

nreese · 2025-07-14T13:02:46Z

@elasticmachine merge upstream

ThomThomson

Took a cursory review of this as well, ran locally and messed around with the book example, also looked through the code. Left a couple tiny nits and a few other comments, but nothing blocking at all. Nice work! Will be great to get this merged!

examples/embeddable_examples/common/book/transforms/transform_out.ts

ThomThomson · 2025-07-14T18:44:44Z

examples/embeddable_examples/common/book/types.ts

+export type BookEmbeddableState = SerializedTitles & (BookState | BookByReferenceState);
+
+// Shape of stored state <=9.1
+export type BookEmbeddableState910 = SerializedTitles &


Where is this type used? Can we have all BWC related code and types isolated in a BWC file or folder?

BookEmbeddableState910 is used to type transformOut storedState parameter as storedState: BookEmbeddableState | BookEmbeddableState910.

Can we have all BWC related code and types isolated in a BWC file or folder?

I am not sure that is possible since transformOut receives current state and legacy state. Handling of both types occurs in the same method.

examples/embeddable_examples/public/react_embeddables/saved_book/default_book_state.ts

...ples/embeddable_examples/public/react_embeddables/saved_book/saved_book_react_embeddable.tsx

examples/embeddable_examples/server/book/content_management/book_storage.ts

...rm/plugins/shared/dashboard/public/dashboard_api/load_dashboard_api/transform_panels.test.ts

src/platform/plugins/shared/embeddable/server/transforms_registry.ts

elasticmachine · 2025-07-16T16:48:23Z

💚 Build Succeeded

Buildkite Build
Commit: 86bff4f

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`dashboard`	682	684	+2
`embeddable`	105	106	+1
total			+3

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
`embeddable`	124	135	+11

Async chunks

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

id	before	after	diff
`dashboard`	619.6KB	620.2KB	+634.0B

Page load bundle

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

id	before	after	diff
`embeddable`	16.8KB	17.1KB	+308.0B

Unknown metric groups

API count

id	before	after	diff
`embeddable`	148	159	+11

ESLint disabled line counts

id	before	after	diff
`dashboard`	18	19	+1

Total ESLint disabled count

id	before	after	diff
`dashboard`	18	19	+1

History

💛 Build #318774 was flaky 455429a
💚 Build #318356 succeeded d26f4ac
💚 Build #317912 succeeded 9106892
💔 Build #317858 failed cdd8567
💔 Build #317837 failed a1d820f

Closes elastic#222472 Closes elastic#222466 ### Problem Dashboard CRUD request and response shapes are overly complex because 1) panel state contains extracted references 2) by-value panel state often mirrors embeddable saved object state, which usually contains stringified JSON. For example, a by-value maps panel state contains `layerListJSON` instead of exposing just `layerList`. To simplify dashboard CRUD request and response shapes, embeddables need a mechanism to 1) inject references in dashboard CRUD read APIs 2) transform by-value embeddable state to a more consumable shape in dashboard CRUD read APIs 2) extract references in dashbaord CRUD write APIs The embeddable transforms registry is the solution to these problems and allows embeddables to transform embeddable state that is part of dashboard CRUD APIs. ### Changes to Embeddable plugin Adds transforms registry to embeddable server and start plugin, allowing embeddable implementations to register transforms. ### Changes to Dashboard plugin Updates dashboard CRUD write APIs to use `transformIn` function to extract references. The below image shows the create request body. The dashboard contains a single by-reference book embeddable. Notice how the savedObjectId has not been extracted to a reference. <img height="300" alt="Screenshot 2025-07-10 at 11 28 47 AM" src="https://github.com/user-attachments/assets/f950006e-50bf-44ea-8b9c-77a2123a6713" /> The below image shows the saved object for the dashboard above. Notice how the persisted state has saved object reference extracted. Panel `embeddableConfig` no longer contains `savedObjectId` key and references contains `savedObjectRef`. <img height="400" alt="Screenshot 2025-07-10 at 11 30 41 AM" src="https://github.com/user-attachments/assets/eb7e9921-b02b-4029-b43d-e6c77f7d65b3" /> Updates dashboard CRUD read APIs to use `transformOut` function to inject references and transform stored embeddable state to a more consumable shape. Dashboards loaded from stored URL state also use `transformOut` for the same purpose. ### Changes to embeddable_examples Implements book saved object <img height="300" alt="Screenshot 2025-07-10 at 11 09 33 AM" src="https://github.com/user-attachments/assets/b1785512-4dd3-40bf-b848-6d88b85e3eb2" /> Implements book content management CRUD API <img height="195" alt="Screenshot 2025-07-10 at 11 08 51 AM" src="https://github.com/user-attachments/assets/378aab47-b2bd-4541-85df-b108a44c8da7" /> Updates book embeddable to use book CRUD API --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

nreese added 4 commits July 7, 2025 14:16

[dashboards as code] embeddable transform registry

67e7452

transformPanelProperties

5b26155

transformPanelsIn

5d74e0f

saved object and server-side content management

7a6a3aa

elasticmachine and others added 14 commits July 9, 2025 15:39

Merge branch 'main' into embeddable_transforms

592fada

fix tslint

1d6d8a0

client cm

ded197a

fix cm on client

c485d2a

fix create

5f4cb53

implement transforms

e8e7749

transform in

92300cc

register server transforms

6bdf84e

fix transformIn

8f7618e

register transforms client-side

31f1c29

transform override panels

9abc658

clean up

bda58a3

more cleanup

ba2df22

harden transformIn

a1d820f

kibanamachine and others added 3 commits July 10, 2025 16:42

[CI] Auto-commit changed files from 'node scripts/yarn_deduplicate'

7d1cd68

[CI] Auto-commit changed files from 'node scripts/eslint_all_files --…

2b51d40

…no-cache --fix'

harden transformOut

cdd8567

nreese changed the title ~~Embeddable transforms~~ [dashboard as code] embeddable transforms registry Jul 10, 2025

This was referenced Jul 10, 2025

clean up registry types #224501

Closed

[Dashboard as code] Embeddable API Integration #221975

Closed

fix jest tests

9106892

nreese marked this pull request as ready for review July 10, 2025 20:34

nreese requested a review from a team as a code owner July 10, 2025 20:34

nreese added Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting v9.2.0 labels Jul 10, 2025

nreese added the Project:Dashboards API label Jul 10, 2025

Merge branch 'main' into embeddable_transforms

d26f4ac

botelastic bot added the Feature:Embedding Embedding content via iFrame label Jul 11, 2025

nickpeihl self-requested a review July 11, 2025 17:12

nickpeihl approved these changes Jul 11, 2025

View reviewed changes

Merge branch 'main' into embeddable_transforms

455429a

ThomThomson approved these changes Jul 14, 2025

View reviewed changes

nreese added 2 commits July 16, 2025 08:20

merge with main

d054015

log warning on transform throw

c20199f

nreese force-pushed the embeddable_transforms branch from ad5b8f0 to c20199f Compare July 16, 2025 14:39

[CI] Auto-commit changed files from 'node scripts/yarn_deduplicate'

86bff4f

nreese merged commit bfab28a into elastic:main Jul 16, 2025
12 checks passed

nreese mentioned this pull request Jul 19, 2025

Backfill tabs for Discover Session saved object #228115

Merged

10 tasks

nickofthyme mentioned this pull request Jul 27, 2025

[Lens] Add embeddable transforms #229545

Closed

5 tasks

Conversation

nreese commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Changes to Embeddable plugin

Changes to Dashboard plugin

Changes to embeddable_examples

Uh oh!

nreese commented Jul 9, 2025

Uh oh!

nreese commented Jul 10, 2025

Uh oh!

nreese commented Jul 10, 2025

Uh oh!

nreese commented Jul 10, 2025

Uh oh!

elasticmachine commented Jul 10, 2025

Uh oh!

nreese commented Jul 11, 2025

Uh oh!

nickpeihl left a comment

Choose a reason for hiding this comment

Uh oh!

nickpeihl Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nreese commented Jul 14, 2025

Uh oh!

ThomThomson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ThomThomson Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

nreese Jul 16, 2025

Choose a reason for hiding this comment

Uh oh!

nreese Jul 16, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Jul 16, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

ESLint disabled line counts

Total ESLint disabled count

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

nreese commented Jul 8, 2025 •

edited

Loading