Upgrade Node to LTS (12) (#57)

Upgrades Node from version 10 to LTS, version 12.
Makefile fixes.
Cleanup of package.json and moved some 
dependencies to dev dependencies.
Added tslint, prettier and precommit hook.
Fixed tslint issues.

Author: marefr

.circleci/config.yml

@@ -13,7 +13,7 @@ aliases:
 defaults: &defaults
   working_directory: ~/grafana-image-renderer
   docker:
-    - image: circleci/node:10.15.3-stretch
+    - image: circleci/node:12.13.1-stretch
 
 jobs:
   build:

.prettierignore

@@ -0,0 +1,10 @@
+.git
+.github
+artifacts
+build
+dist
+docker
+docs
+node_modules
+proto
+scripts

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 150
+}

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10-alpine AS base
+FROM node:12-alpine AS base
 
 ENV CHROME_BIN="/usr/bin/chromium-browser"
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD="true"
@@ -10,8 +10,7 @@ RUN \
   echo "http://dl-cdn.alpinelinux.org/alpine/edge/main" >> /etc/apk/repositories && \
   echo "http://dl-cdn.alpinelinux.org/alpine/edge/testing" >> /etc/apk/repositories && \
   apk --no-cache upgrade && \
-  apk add --no-cache udev ttf-opensans chromium ca-certificates dumb-init nghttp2 openldap curl && \
-  apk del nghttp2 openldap curl && \
+  apk add --no-cache udev ttf-opensans chromium ca-certificates dumb-init && \
   rm -rf /tmp/*
 
 FROM base as build

Makefile

@@ -1,3 +1,5 @@
+.PHONY: all clean deps build clean_package package archive build_package
+
 ARCH = darwin-x64-unknown
 SKIP_CHROMIUM =
 OUT =
@@ -9,12 +11,12 @@ clean:
 
 deps: node_modules
 
-node_modules: package.json yarn.lock
+node_modules: package.json yarn.lock ## Install node modules.
 	@echo "install frontend dependencies"
 	yarn install --pure-lockfile --no-progress
 
 build:
-	./node_modules/.bin/tsc
+	yarn build
 
 clean_package:
 	./scripts/clean_target.sh ${ARCH} ${OUT}

package.json

@@ -1,60 +1,62 @@
 {
   "name": "renderer",
   "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "author": "Grafana Labs",
+  "license": "Apache-2.0",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "http://github.com/grafana/grafana-image-renderer.git"
+  },
   "scripts": {
-    "build": "yarn run tsc",
-    "start": "node build/app.js",
-    "dev": "yarn run tsc-watch --onSuccess \"node build/app.js server --port=3050\""
+    "tslint": "tslint -c tslint.json --project tsconfig.json",
+    "typecheck": "tsc --noEmit",
+    "prettier:check": "prettier --list-different \"**/*.ts\"",
+    "prettier:write": "prettier --list-different \"**/*.ts\" --write",
+    "precommit": "npm run tslint & npm run typecheck",
+    "watch": "tsc-watch --onSuccess \"node build/app.js server --port=8080\"",
+    "build": "tsc",
+    "start": "node build/app.js --port=8080"
   },
-  "author": "",
-  "license": "ISC",
   "dependencies": {
-    "@types/express": "^4.11.1",
-    "@types/node": "^10.0.9",
+    "@grpc/proto-loader": "^0.5.3",
     "boom": "^7.2.0",
     "express": "^4.16.3",
     "google-protobuf": "3.5.0",
-    "grpc": "^1.11.3",
+    "grpc": "^1.24.2",
     "minimist": "^1.2.0",
     "morgan": "^1.9.0",
     "mz": "^2.7.0",
     "puppeteer": "^1.7.0",
-    "typescript": "^2.8.3",
     "unique-filename": "^1.1.0"
   },
   "devDependencies": {
-    "husky": "^0.14.3",
-    "lint-staged": "^6.0.0",
+    "@types/express": "^4.11.1",
+    "@types/node": "^10.0.9",
+    "husky": "^3.1.0",
+    "lint-staged": "^9.5.0",
     "pkg": "4.3.8",
-    "prettier": "1.9.2",
-    "tsc-watch": "^1.0.21"
+    "prettier": "^1.19.1",
+    "tsc-watch": "^1.0.21",
+    "tslint": "^5.20.1",
+    "typescript": "^2.8.3"
   },
-  "resolutions": {
-    "set-value": "2.0.1"
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged && npm run precommit"
+    }
   },
   "lint-staged": {
-    "*.{ts,tsx}": [
+    "*.ts": [
       "prettier --write",
       "git add"
-    ],
-    "*.scss": [
-      "prettier --write",
-      "git add"
-    ],
-    "*pkg/**/*.go": [
-      "gofmt -w -s",
-      "git add"
     ]
   },
-  "prettier": {
-    "trailingComma": "es5",
-    "singleQuote": true,
-    "printWidth": 120
-  },
   "pkg": {
     "assets": "proto/*"
   },
-  "bin": "build/app.js"
+  "bin": "build/app.js",
+  "engines": {
+    "node": ">=12 <13"
+  }
 }

proto/health.proto

@@ -17,4 +17,4 @@ message HealthCheckResponse {
 
 service Health {
   rpc Check(HealthCheckRequest) returns (HealthCheckResponse);
-}
+}

src/browser.ts

@@ -53,9 +53,9 @@ export class Browser {
   }
 
   validateOptions(options) {
-    options.width = parseInt(options.width) || 1000;
-    options.height = parseInt(options.height) || 500;
-    options.timeout = parseInt(options.timeout) || 30;
+    options.width = parseInt(options.width, 10) || 1000;
+    options.height = parseInt(options.height, 10) || 500;
+    options.timeout = parseInt(options.timeout, 10) || 30;
 
     if (options.width > 3000 || options.width < 10) {
       options.width = 2500;
@@ -77,7 +77,7 @@ export class Browser {
       // set env timezone
       env.TZ = options.timezone || process.env.TZ;
 
-      let launcherOptions: any = {
+      const launcherOptions: any = {
         env: env,
         ignoreHTTPSErrors: this.ignoreHTTPSErrors,
         args: ['--no-sandbox'],
@@ -108,9 +108,8 @@ export class Browser {
       // wait for all panels to render
       await page.waitForFunction(
         () => {
-          const panelCount =
-            document.querySelectorAll('.panel').length || document.querySelectorAll('.panel-container').length;
-          return (<any>window).panelsRendered >= panelCount;
+          const panelCount = document.querySelectorAll('.panel').length || document.querySelectorAll('.panel-container').length;
+          return (window as any).panelsRendered >= panelCount;
         },
         {
           timeout: options.timeout * 1000,

src/exit.ts

@@ -9,7 +9,7 @@ export function registerExitCleanUp(fn) {
 
 export class ExitManager {
   constructor(private log: Logger) {
-    process.stdin.resume();//so the program will not close instantly
+    process.stdin.resume(); //so the program will not close instantly
 
     //do something when app is closing
     process.on('exit', this.exitHandler.bind(this));
@@ -26,11 +26,11 @@ export class ExitManager {
   }
 
   exitHandler(options, err) {
-    for (let fn of cleanUpHandlers) {
+    for (const fn of cleanUpHandlers) {
       try {
         fn();
       } catch (err) {
-        this.log.info("Failed to call cleanup function " + err);
+        this.log.info('Failed to call cleanup function ' + err);
       }
     }
     if (err) {
@@ -39,5 +39,3 @@ export class ExitManager {
     process.exit();
   }
 }
-
-

src/grpc-plugin.ts

@@ -1,24 +1,43 @@
 import * as grpc from 'grpc';
+import * as protoLoader from '@grpc/proto-loader';
 import { Logger } from './logger';
 import { Browser } from './browser';
 
 const SERVER_ADDRESS = '127.0.0.1:50059';
 const RENDERER_PROTO_PATH = __dirname + '/../proto/renderer.proto';
-const GRPC_HEALTH_PROTO_PATH = __dirname + '/../proto/health.proto';
+const HEALTH_PROTO_PATH = __dirname + '/../proto/health.proto';
 
-export const RENDERER_PROTO = grpc.load(RENDERER_PROTO_PATH).models;
-export const GRPC_HEALTH_PROTO = grpc.load(GRPC_HEALTH_PROTO_PATH).grpc.health.v1;
+export const renderPackageDef = protoLoader.loadSync(RENDERER_PROTO_PATH, {
+  keepCase: true,
+  longs: String,
+  enums: String,
+  defaults: true,
+  oneofs: true,
+});
+
+export const healthPackageDef = protoLoader.loadSync(HEALTH_PROTO_PATH, {
+  keepCase: true,
+  longs: String,
+  enums: String,
+  defaults: true,
+  oneofs: true,
+});
+
+export const rendererProtoDescriptor = grpc.loadPackageDefinition(renderPackageDef);
+export const healthProtoDescriptor = grpc.loadPackageDefinition(healthPackageDef);
 
 export class GrpcPlugin {
   constructor(private log: Logger, private browser: Browser) {}
 
   start() {
-    var server = new grpc.Server();
+    const server = new grpc.Server();
 
-    server.addService(GRPC_HEALTH_PROTO.Health.service, {
+    const grpcHealthV1: any = healthProtoDescriptor['grpc']['health']['v1'];
+    server.addService(grpcHealthV1.Health.service, {
       check: this.check.bind(this),
     });
-    server.addService(RENDERER_PROTO.Renderer.service, {
+    const models: any = rendererProtoDescriptor.models;
+    server.addService(models.Renderer.service, {
       render: this.render.bind(this),
     });
 
@@ -28,13 +47,7 @@ export class GrpcPlugin {
     console.log(`1|1|tcp|${SERVER_ADDRESS}|grpc`);
 
     if (this.browser.chromeBin) {
-      this.log.info(
-        'Renderer plugin started',
-        'chromeBin',
-        this.browser.chromeBin,
-        'ignoreHTTPSErrors',
-        this.browser.ignoreHTTPSErrors
-      );
+      this.log.info('Renderer plugin started', 'chromeBin', this.browser.chromeBin, 'ignoreHTTPSErrors', this.browser.ignoreHTTPSErrors);
     } else {
       this.log.info('Renderer plugin started', 'ignoreHttpsErrors', this.browser.ignoreHTTPSErrors);
     }
@@ -45,9 +58,8 @@ export class GrpcPlugin {
   }
 
   async render(call, callback) {
-    let req = call.request;
-
-    let options = {
+    const req = call.request;
+    const options = {
       url: req.url,
       width: req.width,
       height: req.height,
@@ -61,7 +73,7 @@ export class GrpcPlugin {
 
     try {
       this.log.debug('Render request received', 'url', options.url);
-      let result = await this.browser.render(options);
+      const result = await this.browser.render(options);
       callback(null, { error: '' });
     } catch (err) {
       this.log.error('Render request failed', 'url', options.url, 'error', err);