Previews: support creating thumbnails and full-height screenshots #312

ryantxu · 2022-01-06T06:38:38Z

This PR updates the image renderer to support creating thumbnails from a requested page. Rather than adding a new parameter, this is reusing the scale/deviceScaleFactor parameter and using negative numbers.

For the request:
http://localhost:3000/render/d/zNigXIonz/heatmap?kiosk&orgId=1&width=320&height=240&scale=-5

It will render an image a 320*5 and then scale it back down to 320px:

ryantxu · 2022-01-06T06:47:30Z

src/browser/browser.ts

@@ -230,10 +248,27 @@ export class Browser {
      this.log.debug('Taking screenshot', 'filePath', options.filePath);
    }

+    if (options.fullPageImage) {
+      this.log.debug('TODO: take full screen image', 'url', options.url);


@ArturWierzbicki -- how involved was this process? If easy to port, can we try that?

src/browser/browser.ts

ryantxu · 2022-01-11T18:54:58Z

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 3.4.0 (--)
+- Support full height dashboards and scaled thumbnails [#312](https://github.com/grafana/grafana-image-renderer/pull/312)


@AgnesToulet what is the process for documenting the changes here?

The behavior changes are:

negative scale will create a scaled down thumbnail

height=-1 will create an image as tall as it needs to be based on the webpage size

The documentation for the image renderer is in the grafana repo: https://github.com/grafana/grafana/blob/main/docs/sources/image-rendering but we don't really have documentation on how to call the image renderer (more on how to configure and run it).

I guess we could add a section in the main file or a new file for that. @achatterjee-grafana Do you have any opinion on that?

Sounds good @AgnesToulet. Let me know if you need any help.

AgnesToulet

LGTM! Left a couple of questions and suggestions but all very subjective and nothing major.

Also, I wonder if it would be worth to support the full page option without the dashboard being in kiosk mode (right now, dashboards can be a bit cut at the end without the kiosk mode).

src/browser/browser.ts

src/types.ts

src/config.ts

Co-authored-by: Agnès Toulet <[email protected]>

…files

src/browser/browser.ts

ArturWierzbicki · 2022-01-19T12:39:50Z

@AgnesToulet fixed non-kiosk mode in efa7e73

ArturWierzbicki · 2022-01-20T16:57:28Z

There is still one issue reported by prebuild-install:

prebuild-install WARN This package does not support N-API version v14.18.3 
prebuild-install WARN install No prebuilt binaries found (target=v14.18.3 runtime=napi arch=x64 libc= platform=linux)

Which is weird, because Sharp requires NAPI version >= 5 which is supported by node 14/16: https://nodejs.org/api/n-api.html#n_api_node_api_version_matrix

ArturWierzbicki · 2022-01-21T12:50:34Z

The only way I found to make it work is to manually copy sharp binary/libvips lib & downgrade pkg to 4.4.9 - which is right before native support for .node files (https://github.com/vercel/pkg/releases/tag/4.5.0). Works on linux, will test on MacOS as well

I also had to pin pkg-fetch dependency of pkg to 2.6.9 due to this issue https://github.com/vercel/pkg-fetch/issues/137. Same fix was introduced in pkg 4.5.1 https://github.com/vercel/pkg/pull/1100/files

ArturWierzbicki · 2022-01-21T18:23:04Z

Packaging on M1 MacOS doesn't work, neither on this branch (because 2.6.x pkg-fetch doesn't have precompiled arm nodejs) nor on main

ArturWierzbicki · 2022-01-21T21:18:41Z

Tested on Windows x64 with CI-built binary https://app.circleci.com/pipelines/github/grafana/grafana-image-renderer/464/workflows/8d39e08f-a376-4d41-8c23-62b4f80c5562/jobs/1864/artifacts - works

AgnesToulet

LGTM! Thanks for the fix for sharp library. Left a few very minor suggestions and one comment to make the scripts work on Windows (the priority is to make it work on Linux but if, with some tweaks, we can make it work on both, it would be great!)

scripts/download_sharp.js

scripts/package_target.sh

scripts/pkg.js

…ana-image-renderer into scaled-thumb-result

Co-authored-by: Agnès Toulet <[email protected]>

allow scaled thumbnails

8434842

ryantxu requested a review from ArturWierzbicki January 6, 2022 06:38

ryantxu mentioned this pull request Jan 6, 2022

Crawler: use existing render service to generate dashboard thumbnails grafana/grafana#43515

Merged

ryantxu commented Jan 6, 2022

View reviewed changes

ArturWierzbicki added 2 commits January 9, 2022 20:07

added support for full page images

44939a8

add acceptBeforeUnload handler

402223b

ryantxu commented Jan 11, 2022

View reviewed changes

src/browser/browser.ts Outdated Show resolved Hide resolved

use png files

72f315d

ryantxu requested a review from AgnesToulet January 11, 2022 18:53

ryantxu commented Jan 11, 2022

View reviewed changes

produce requested thumbnail size

1bcb5c6

ryantxu changed the title ~~Previews: support creating scaled down images~~ Previews: support creating thumbnails and full-height screenshots Jan 11, 2022

AgnesToulet approved these changes Jan 18, 2022

View reviewed changes

src/browser/browser.ts Outdated Show resolved Hide resolved

src/types.ts Show resolved Hide resolved

src/types.ts Outdated Show resolved Hide resolved

src/config.ts Show resolved Hide resolved

ArturWierzbicki and others added 3 commits January 18, 2022 06:32

Update src/browser/browser.ts

35d9eef

Co-authored-by: Agnès Toulet <[email protected]>

review fix: move variable away from misleading comment

b845641

review fix: added default headed option to the default and dev env …

7cb0a4c

…files

AgnesToulet reviewed Jan 18, 2022

View reviewed changes

src/browser/browser.ts Outdated Show resolved Hide resolved

ArturWierzbicki added 3 commits January 18, 2022 20:19

review fix: removed ternary expression

1369770

review fix: remove withFullPageViewport

fc308a3

review fix: fixed full page screenshots for non-kiosk mode

efa7e73

ArturWierzbicki added 4 commits January 20, 2022 20:14

add script downloading platform-specific sharp binary

aa56dcb

update yarnlock

8fe5525

fix package_Target script

bc6f4af

update circleci node version

f01214f

ArturWierzbicki force-pushed the scaled-thumb-result branch from 71be323 to f01214f Compare January 20, 2022 16:38

ArturWierzbicki added 3 commits January 20, 2022 22:18

update package json

23ae8ad

fix package.json -> pkg.assets paths

9310287

downgrade pkg to fix sharp build issue

ab07b2d

working m1 (#318)

abd24d0

ArturWierzbicki mentioned this pull request Jan 25, 2022

Dashboard previews - MVP grafana/grafana#44449

Closed

21 tasks

AgnesToulet approved these changes Jan 26, 2022

View reviewed changes

scripts/download_sharp.js Outdated Show resolved Hide resolved

scripts/download_sharp.js Outdated Show resolved Hide resolved

scripts/package_target.sh Outdated Show resolved Hide resolved

scripts/pkg.js Outdated Show resolved Hide resolved

ArturWierzbicki and others added 5 commits January 26, 2022 15:12

replace mkdir -p with fs.mkdirSync {recursive: true}

7f176e0

Merge branch 'scaled-thumb-result' of https://github.com/grafana/graf…

57b8115

…ana-image-renderer into scaled-thumb-result

Update scripts/download_sharp.js

cd6f79e

Co-authored-by: Agnès Toulet <[email protected]>

Update scripts/download_sharp.js

e5bf620

Co-authored-by: Agnès Toulet <[email protected]>

Update scripts/package_target.sh

4bcf42a

Co-authored-by: Agnès Toulet <[email protected]>

ArturWierzbicki merged commit 614709c into master Jan 26, 2022

ArturWierzbicki deleted the scaled-thumb-result branch January 26, 2022 19:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Previews: support creating thumbnails and full-height screenshots #312

Previews: support creating thumbnails and full-height screenshots #312

ryantxu commented Jan 6, 2022

ryantxu Jan 6, 2022

ryantxu Jan 11, 2022

AgnesToulet Jan 18, 2022

achatterjee-grafana Jan 20, 2022

AgnesToulet left a comment

ArturWierzbicki commented Jan 19, 2022

ArturWierzbicki commented Jan 20, 2022

ArturWierzbicki commented Jan 21, 2022 •

edited

Loading

ArturWierzbicki commented Jan 21, 2022

ArturWierzbicki commented Jan 21, 2022

AgnesToulet left a comment

		@@ -1,3 +1,6 @@
		## 3.4.0 (--)
		- Support full height dashboards and scaled thumbnails [#312](https://github.com/grafana/grafana-image-renderer/pull/312)

Previews: support creating thumbnails and full-height screenshots #312

Previews: support creating thumbnails and full-height screenshots #312

Conversation

ryantxu commented Jan 6, 2022

ryantxu Jan 6, 2022

Choose a reason for hiding this comment

ryantxu Jan 11, 2022

Choose a reason for hiding this comment

AgnesToulet Jan 18, 2022

Choose a reason for hiding this comment

achatterjee-grafana Jan 20, 2022

Choose a reason for hiding this comment

AgnesToulet left a comment

Choose a reason for hiding this comment

ArturWierzbicki commented Jan 19, 2022

ArturWierzbicki commented Jan 20, 2022

ArturWierzbicki commented Jan 21, 2022 • edited Loading

ArturWierzbicki commented Jan 21, 2022

ArturWierzbicki commented Jan 21, 2022

AgnesToulet left a comment

Choose a reason for hiding this comment

ArturWierzbicki commented Jan 21, 2022 •

edited

Loading