Previews: support creating thumbnails and full-height screenshots

.circleci/config.yml

@@ -13,7 +13,7 @@ aliases:
 defaults: &defaults
  working_directory: ~/grafana-image-renderer
  docker:
- - image: circleci/node:14.16.1-stretch
+ - image: cimg/node:14.18.3
 
 commands:
  install-grabpl:

.gitignore

@@ -35,3 +35,5 @@ dist/**/*
 
 # Ignore output from coverage report
 coverage
+
+scripts/sharp-downloader

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)
+
 ## 3.3.0 (2021-11-18)
 
 - Chore: Bump pkg from 5.3.3 to 5.4.1 [#305](https://github.com/grafana/grafana-image-renderer/pull/305), [AgnesToulet](https://github.com/AgnesToulet)

Makefile

@@ -3,6 +3,7 @@
 ARCH = darwin-x64-unknown
 SKIP_CHROMIUM =
 OUT =
+SKIP_SHARP_DOWNLOAD =
 DOCKER_TAG = dev
 
 all: clean build
@@ -23,7 +24,7 @@ clean_package:
  ./scripts/clean_target.sh ${ARCH} ${OUT}
 
 package:
- ./scripts/package_target.sh ${ARCH} ${SKIP_CHROMIUM} ${OUT}
+ ./scripts/package_target.sh ${ARCH} ${SKIP_CHROMIUM} ${OUT} ${SKIP_SHARP_DOWNLOAD}
 
 archive:
  ./scripts/archive_target.sh ${ARCH} ${OUT}

default.json

@@ -30,6 +30,7 @@
  "maxWidth": 3080,
  "maxHeight": 3000,
  "maxDeviceScaleFactor": 4,
+ "headed": false,
 
  "mode": "default",
  "clustering": {

dev.json

@@ -30,6 +30,7 @@
  "maxWidth": 1980,
  "maxHeight": 8000,
  "maxDeviceScaleFactor": 10,
+ "headed": false,
 
  "mode": "default",
  "clustering": {

package.json

@@ -32,6 +32,7 @@
  "prom-client": "^11.5.3",
  "puppeteer": "^10.0.0",
  "puppeteer-cluster": "^0.22.0",
+ "sharp": "0.29.3",
  "unique-filename": "^1.1.0",
  "winston": "^3.2.1"
  },
@@ -49,7 +50,7 @@
  "eslint-plugin-react-hooks": "^4.2.0",
  "husky": "^4.3.8",
  "lint-staged": "^11.2.0",
- "pkg": "^5.4.1",
+ "pkg": "5.5.2",
  "prettier": "2.2.1",
  "tsc-watch": "^4.2.3",
  "typescript": "^4.3.2"
@@ -72,7 +73,7 @@
  },
  "bin": "build/app.js",
  "engines": {
- "node": ">=14 <15"
+ "node": ">=14 <=16"
  },
  "volta": {
  "node": "14.16.1"

scripts/download_sharp.js

@@ -0,0 +1,42 @@
+const child_process = require('child_process');
+const fs = require('fs')
+
+const archArg = process.argv[2];
+
+// https://sharp.pixelplumbing.com/install#cross-platform
+const [
+ platform, // linux, darwin, win32
+ arch // x64, ia32, arm, arm64
+] = archArg.split('-');
+
+const packageJson = JSON.parse(fs.readFileSync('./package.json'))
+
+const packageName = 'sharp';
+const packageVersion = Object.entries(packageJson.dependencies).find(([depName]) => depName === packageName)[1]
+
+console.log(`Found ${packageName} with version ${packageVersion}`)
+
+const targetNodeModules = './node_modules'
+const currentSharp = `${targetNodeModules}/sharp`
+const sharpDownloader = './scripts/sharp-downloader'
+
+if(!fs.existsSync(sharpDownloader)) {
+ fs.mkdirSync(sharpDownloader)
+}
+
+fs.writeFileSync(`${sharpDownloader}/package.json`, JSON.stringify({
+ "name": "sharp-downloader",
+ "dependencies": {
+ [packageName]: packageVersion
+ }
+ }
+))
+
+const downloadedSharp = `${sharpDownloader}/node_modules/sharp`
+
+try {
+ child_process.execSync(`cd ${sharpDownloader} && npm install --platform=${platform} --arch=${arch}`, {stdio: 'inherit'})
+ child_process.execSync(`rm -rf ${currentSharp} && cp -RP ${downloadedSharp} ${targetNodeModules}`);
+} finally {
+ fs.rmSync(sharpDownloader, {recursive: true, force: true})
+}

scripts/package_target.sh

@@ -3,12 +3,19 @@
 ARCH="${1:-}"
 SKIP_CHROMIUM=${2:-false}
 OUT="${3:-}"
+SKIP_SHARP_DOWNLOAD=${4:-false}
 
 if [ -z "$ARCH" ]; then
  echo "ARCH (arg 1) has to be set"
  exit 1
 fi
 
+if [ ${SKIP_SHARP_DOWNLOAD} = false ]; then
+ node scripts/download_sharp.js ${ARCH} ${OUT}
+else
+ echo "Skipping sharp download"
+fi
+
 mkdir -p dist
 node scripts/pkg.js ${ARCH} ${OUT}
 if [ $? != 0 ]; then

scripts/pkg.js

@@ -1,4 +1,5 @@
 const childProcess = require('child_process');
+const fs = require('fs')
 
 const archArg = process.argv[2];
 let [
@@ -22,6 +23,16 @@ const archTransform = {
 
 platform = platformTransform[platform] || platform;
 arch = archTransform[arch] || arch;
+
+if(platform === 'macos' && (arch.includes('arm'))) {
+ arch = 'arm64'
+}
+
 const outputPath = "dist/" + (process.argv[3] || `plugin-${archArg}`);
+const outputNodeModules = `${outputPath}/node_modules`
+
+childProcess.execSync(`"./node_modules/.bin/pkg" -t node14-${platform}-${arch} . --out-path ${outputPath} --no-native-build`, {stdio: 'inherit'});
 
-childProcess.execSync(`"./node_modules/.bin/pkg" -t node14-${platform}-${arch} . --out-path ${outputPath}`, {stdio: 'inherit'});
+childProcess.execSync(`rm -rf ${outputNodeModules}`)
+fs.mkdirSync(`${outputNodeModules}/sharp`, {recursive: true})
+childProcess.execSync(`cp -RP ./node_modules/sharp/build ${outputNodeModules}/sharp && cp -RP ./node_modules/sharp/vendor ${outputNodeModules}/sharp`)

src/app.ts

@@ -8,6 +8,8 @@ import * as minimist from 'minimist';
 import { defaultPluginConfig, defaultServiceConfig, readJSONFileSync, PluginConfig, ServiceConfig } from './config';
 import { serve } from './node-plugin';
 
+const chromeFolderPrefix = 'chrome-';
+
 async function main() {
  const argv = minimist(process.argv.slice(2));
  const env = Object.assign({}, process.env);
@@ -19,12 +21,19 @@ async function main() {
  populatePluginConfigFromEnv(config, env);
  if (!config.rendering.chromeBin && (process as any).pkg) {
  //@ts-ignore
- const parts = puppeteer.executablePath().split(path.sep);
- while (!parts[0].startsWith('chrome-')) {
- parts.shift();
+ const executablePath = puppeteer.executablePath() as string;
+
+ if (executablePath.includes(chromeFolderPrefix)) {
+ const parts = executablePath.split(path.sep);
+ while (!parts[0].startsWith(chromeFolderPrefix)) {
+ parts.shift();
+ }
+
+ config.rendering.chromeBin = [path.dirname(process.execPath), ...parts].join(path.sep);
+ } else {
+ // local chrome installation in dev mode
+ config.rendering.chromeBin = env['PUPPETEER_EXECUTABLE_PATH'];
  }
-
- config.rendering.chromeBin = [path.dirname(process.execPath), ...parts].join(path.sep);
  }
 
  await serve({