Dashboards: Add dashboard embed route #69596

Clarity-89 · 2023-06-06T06:51:47Z

What is this feature?
Add separate route and component for embedding a dashboard externally. The component loads a dashboard JSON from a specified endpoint and initializes a dashboard page. After dashboard is edited, its JSON is sent to a separate POST endpoint on save.

This is required for the VS Code plugin feature and is behind the dashboardEmbed feature toggle.

Design doc.

Steps for testing.

# Conflicts: # docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md # packages/grafana-data/src/types/featureToggles.gen.ts # pkg/services/featuremgmt/registry.go # pkg/services/featuremgmt/toggles_gen.csv # pkg/services/featuremgmt/toggles_gen.go

# Conflicts: # packages/grafana-data/src/types/featureToggles.gen.ts # pkg/services/featuremgmt/registry.go # pkg/services/featuremgmt/toggles_gen.csv # pkg/services/featuremgmt/toggles_gen.go

# Conflicts: # pkg/services/featuremgmt/toggles_gen.csv

polibb · 2023-06-21T14:46:12Z

I can't get it running as expected: did all the steps and cannot open the dashboard in the web view in the VSCode extension. Maybe I'm doing something different? I attached some screenshots in the Slack thread with the steps.

# Conflicts: # docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md

public/app/features/dashboard/components/EmbeddedDashboard/SaveDashboardForm.tsx

kaydelaney

Tested and works fine. I get a "Invalid dashboard UID in annotation request" notification when I edit the dashboard in vs code, but maybe that's a known issue

Clarity-89 · 2023-07-06T11:26:27Z

Tested and works fine. I get a "Invalid dashboard UID in annotation request" notification when I edit the dashboard in vs code, but maybe that's a known issue

Yeah, that happens if you don't have the dashboard with the same UID as in JSON in your Grafana. Could be also fixed by manually removing the UID in the json file.

# Conflicts: # docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md # packages/grafana-data/src/types/featureToggles.gen.ts # pkg/services/featuremgmt/registry.go # pkg/services/featuremgmt/toggles_gen.csv # pkg/services/featuremgmt/toggles_gen.go

polibb

Love the separation of concerns!

…eDashboardForm.tsx Co-authored-by: Polina Boneva <13227501+polibb@users.noreply.github.com>

* Dashboard embed: Set up route * Dashboard embed: Cleanup * Dashboard embed: Separate routes * Dashboard embed: Render dashboard page * Dashboard embed: Add toolbar * Dashboard embed: Send JSON on save * Dashboard embed: Add JSON param * Dashboard embed: Make the dashboard editable * Fix sending dashboard to remote server * Add notifications * Add "dashboardEmbed" feature toggle * Use the toggle * Update toggles * Add toggle on backend * Add get JSON endpoint * Add drawer * Close drawer on success * Update toggles * Cleanup * Update toggle * Allow embedding for the d-embed url * Allow embedding via custom X-Allow-Embedding header * Use callbackUrl * Cleanup * Update public/app/features/dashboard/containers/EmbeddedDashboardPage.tsx Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com> * Use theme for spacing * Update toggles * Update public/app/features/dashboard/components/EmbeddedDashboard/SaveDashboardForm.tsx Co-authored-by: Polina Boneva <13227501+polibb@users.noreply.github.com> * Add select data source modal --------- Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com> Co-authored-by: Polina Boneva <13227501+polibb@users.noreply.github.com>

torkelo · 2023-08-14T17:01:05Z

public/app/features/dashboard/containers/EmbeddedDashboardPage.tsx

+    const callbackUrl = queryParams.callbackUrl;
+
+    if (!callbackUrl) {
+      throw new Error('No callback URL provided');
+    }
+    getBackendSrv()
+      .get(`${callbackUrl}/load-dashboard`)


@Clarity-89
I think this could be a pretty big security issue loading a resource from a URL provided via query params

we're still working out all possible security issues, so I'll add this to the list.

torkelo · 2023-08-14T17:03:16Z

public/app/features/dashboard/containers/EmbeddedDashboardPage.tsx

+  };
+
+  return (
+    <PageToolbar title={dashboard.title} buttonOverflowAlignment="right" className={styles.toolbar}>


This is using the deprecated old PageToolbar component from the old nav, not sure we want to keep using it

torkelo

I am a little bit dismayed by the duplication this requires for an experimental feature

Clarity-89 · 2023-08-15T05:24:46Z

I am a little bit dismayed by the duplication this requires for an experimental feature

I've tried to reuse the existing functionality as much as possible, but because we needed to add custom logic pretty deep in the component tree, it was not always possible.

torkelo · 2023-08-15T07:53:08Z

@Clarity-89 yea, I get that. Not easy to do this differently. We ended up with a similar solution for PublicDashboardPage, but with the addition of panel editing, and more I am worried about maintaining so many different dashboard pages. Feels like there could be a better solution if we had the right hooks / extension points but not sure

Clarity-89 · 2023-08-15T08:01:22Z

@Clarity-89 yea, I get that. Not easy to do this differently. We ended up with a similar solution for PublicDashboardPage, but with the addition of panel editing, and more I am worried about maintaining so many different dashboard pages. Feels like there could be a better solution if we had the right hooks / extension points but not sure

Yeah, also the dashboard page is still a class based component, so it's not possible to extend with hooks.

I get the concern and agree it's not a good idea to add similar pages for dashboards, especially when there's a major rework in place. I'm exploring some other options now.

Clarity-89 added 16 commits May 23, 2023 09:20

Dashboard embed: Set up route

9f4d179

Dashboard embed: Cleanup

0eaf42b

Dashboard embed: Separate routes

ff83ae3

Dashboard embed: Render dashboard page

d558823

Dashboard embed: Add toolbar

6ea3cde

Dashboard embed: Send JSON on save

83d4c9f

Dashboard embed: Add JSON param

c6c7e66

Dashboard embed: Make the dashboard editable

56f7d71

Merge branch 'main' into dashboard-embed

f31d7c1

Fix sending dashboard to remote server

5f3f5b5

Add notifications

18d369c

Add "dashboardEmbed" feature toggle

2a2b642

Use the toggle

5b5815f

Update toggles

409b312

Add toggle on backend

d335d70

Clarity-89 self-assigned this Jun 6, 2023

Clarity-89 requested a review from malcolmholmes June 6, 2023 06:52

grafanabot added area/backend area/frontend type/docs Flags the technical writing team for documentation support; auto adds to org-wide docs project labels Jun 6, 2023

Clarity-89 added 9 commits June 7, 2023 13:57

Add get JSON endpoint

0a27e09

Add drawer

de314fe

Close drawer on success

65ca524

Merge branch 'main' into dashboard-embed

9f23571

# Conflicts: # packages/grafana-data/src/types/featureToggles.gen.ts # pkg/services/featuremgmt/registry.go # pkg/services/featuremgmt/toggles_gen.csv # pkg/services/featuremgmt/toggles_gen.go

Update toggles

47b2d37

Cleanup

088e235

Merge branch 'main' into dashboard-embed

6babe1a

# Conflicts: # pkg/services/featuremgmt/toggles_gen.csv

Update toggle

565e7ac

Allow embedding for the d-embed url

11cd5a7

polibb self-requested a review June 20, 2023 10:53

natellium added the team/grafana-dashboards Dashboards squad label Jun 23, 2023

Merge branch 'main' into dashboard-embed

3de467a

# Conflicts: # docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md

juanicabanas requested a review from kaydelaney July 5, 2023 13:15

polibb reviewed Jul 6, 2023

View reviewed changes

public/app/features/dashboard/components/EmbeddedDashboard/SaveDashboardForm.tsx Outdated Show resolved Hide resolved

kaydelaney approved these changes Jul 6, 2023

View reviewed changes

Clarity-89 added 2 commits July 6, 2023 14:31

Update toggles

531f7ee

polibb approved these changes Jul 6, 2023

View reviewed changes

Clarity-89 and others added 2 commits July 6, 2023 16:50

Update public/app/features/dashboard/components/EmbeddedDashboard/Sav…

94d2bf2

…eDashboardForm.tsx Co-authored-by: Polina Boneva <13227501+polibb@users.noreply.github.com>

Add select data source modal

a49050d

Clarity-89 merged commit 420b19e into main Jul 6, 2023

Clarity-89 deleted the dashboard-embed branch July 6, 2023 14:43

Clarity-89 modified the milestones: 10.2.x, 10.1.x Jul 13, 2023

ricky-undeadcoders modified the milestones: 10.1.x, 10.1.0 Aug 1, 2023

torkelo reviewed Aug 14, 2023

View reviewed changes

torkelo mentioned this pull request Aug 14, 2023

Dashboard embed: Enable edit view #72448

Closed

Clarity-89 mentioned this pull request Aug 15, 2023

Dashboard: Refactor embedded dashboard #73280

Closed

4 tasks

chenrui333 mentioned this pull request Aug 24, 2023

grafana 10.1.0 Homebrew/homebrew-core#140321

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dashboards: Add dashboard embed route #69596

Dashboards: Add dashboard embed route #69596

Clarity-89 commented Jun 6, 2023 •

edited

Loading

polibb commented Jun 21, 2023

kaydelaney left a comment

Clarity-89 commented Jul 6, 2023

polibb left a comment

torkelo Aug 14, 2023

Clarity-89 Aug 15, 2023

torkelo Aug 14, 2023

torkelo left a comment

Clarity-89 commented Aug 15, 2023

torkelo commented Aug 15, 2023

Clarity-89 commented Aug 15, 2023

Dashboards: Add dashboard embed route #69596

Dashboards: Add dashboard embed route #69596

Conversation

Clarity-89 commented Jun 6, 2023 • edited Loading

polibb commented Jun 21, 2023

kaydelaney left a comment

Choose a reason for hiding this comment

Clarity-89 commented Jul 6, 2023

polibb left a comment

Choose a reason for hiding this comment

torkelo Aug 14, 2023

Choose a reason for hiding this comment

Clarity-89 Aug 15, 2023

Choose a reason for hiding this comment

torkelo Aug 14, 2023

Choose a reason for hiding this comment

torkelo left a comment

Choose a reason for hiding this comment

Clarity-89 commented Aug 15, 2023

torkelo commented Aug 15, 2023

Clarity-89 commented Aug 15, 2023

Clarity-89 commented Jun 6, 2023 •

edited

Loading