thing are starting to work

Author: torkelo

package.json

@@ -23,6 +23,27 @@
     "unique-filename": "^1.1.0"
   },
   "devDependencies": {
-    "tsc-watch": "^1.0.21"
+    "tsc-watch": "^1.0.21",
+    "lint-staged": "^6.0.0",
+    "prettier": "1.9.2"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "git add"
+    ],
+    "*.scss": [
+      "prettier --write",
+      "git add"
+    ],
+    "*pkg/**/*.go": [
+      "gofmt -w -s",
+      "git add"
+    ]
+  },
+  "prettier": {
+    "trailingComma": "es5",
+    "singleQuote": true,
+    "printWidth": 120
   }
 }

proto/renderer.proto

@@ -5,10 +5,16 @@ package models;
 
 message RenderRequest {
   string url = 1;
+  int32 width = 2;
+  int32 height = 3;
+  int32 timeout = 4;
+  string timezone = 5;
+  string encoding = 6;
+  string filePath = 7;
 }
 
 message RenderResponse {
-  string filePath = 1;
+  string error = 1;
 }
 
 service Renderer {

renderer.proto

@@ -1,16 +1,21 @@
-import { startGrpcPlugin } from './grpc-plugin';
+import { GrpcPlugin } from './grpc-plugin';
 import { HttpServer } from './http-server';
-import { Logger } from './logger';
+import { Logger, ConsoleLogger, PluginLogger } from './logger';
 import { Browser } from './browser';
 import * as minimist from 'minimist';
 
 
 async function main() {
-  let argv = minimist(process.argv.slice(2));
-  let command = argv._[0];
+  const argv = minimist(process.argv.slice(2));
+  const command = argv._[0];
 
   if (command === undefined) {
-    startGrpcPlugin();
+    const logger = new PluginLogger();
+    const browser = new Browser(logger);
+    await browser.start();
+
+    const plugin = new GrpcPlugin(logger, browser);
+    plugin.start();
   }
 
   if (command === 'server') {
@@ -19,11 +24,11 @@ async function main() {
       return;
     }
 
-    let logger = new Logger();
-    let browser = new Browser(logger);
+    const logger = new ConsoleLogger();
+    const browser = new Browser(logger);
     await browser.start();
 
-    let server = new HttpServer({port: argv.port}, logger, browser);
+    const server = new HttpServer({port: argv.port}, logger, browser);
     server.start();
 
   } else {

src/app.ts

@@ -19,13 +19,43 @@ export class Browser {
     });
   }
 
-  async render() {
+  validateOptions(options) {
+    options.width = parseInt(options.width) || 1000;
+    options.height = parseInt(options.height) || 500;
+
+    if (options.width > 3000 || options.width < 10) {
+      options.width = 2500;
+    }
+
+    if (options.height > 3000 || options.height < 10) {
+      options.height = 1500;
+    }
+  }
+
+  async render(options) {
     const page = await this.instance.newPage();
-    await page.goto('http://google.com');
 
-    const imagePath = uniqueFilename(os.tmpdir()) + '.png';
-    await page.screenshot({path: imagePath});
+    this.validateOptions(options);
+
+    await page.setViewport({
+      width: options.width,
+      height: options.height,
+    });
 
-    return { imagePath: imagePath };
+    if (!options.url) {
+      options.url = "http://localhost:3000/d-solo/000000088/testdata-graph-panel-last-1h?orgId=1&panelId=4&from=1526537735449&to=1526541335449&width=1000&height=500&tz=UTC%2B02:00";
+    }
+
+    await page.goto(options.url);
+
+    if (!options.filePath) {
+      options.filePath = uniqueFilename(os.tmpdir()) + '.png';
+    }
+
+    await page.screenshot({path: options.filePath});
+    page.close();
+
+    return { filePath: options.filePath };
   }
 }
+

src/browser.ts

@@ -1,4 +1,6 @@
 import * as grpc from 'grpc';
+import { Logger } from './logger';
+import { Browser } from './browser';
 
 const SERVER_ADDRESS = '127.0.0.1:50051';
 const RENDERER_PROTO_PATH = __dirname + '/../proto/renderer.proto';
@@ -7,30 +9,52 @@ const GRPC_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;
 
-/**
- * Implements the Health Check RPC method.
- */
-function check(call, callback) {
-  callback(null, {status: 'SERVING'});
-}
 
-function render(call, callback) {
-  console.log('render', call.request);
-  callback(null, {filePath: call.request.url + 'resp'});
-}
+export class GrpcPlugin {
 
-/**
- * Starts an RPC server that receives requests for the Greeter service at the
- * sample server port
- */
-export function startGrpcPlugin() {
-  var server = new grpc.Server();
-  server.addService(GRPC_HEALTH_PROTO.Health.service, {check: check});
-  server.addService(RENDERER_PROTO.Renderer.service, {render: render});
-  server.bind(SERVER_ADDRESS, grpc.ServerCredentials.createInsecure());
-  server.start();
-  console.log(`1|1|tcp|${SERVER_ADDRESS}|grpc`);
-  console.error('Renderer plugin started');
-}
+  constructor(private log: Logger, private browser: Browser) {
+  }
+
+  start() {
+    var server = new grpc.Server();
+
+    server.addService(GRPC_HEALTH_PROTO.Health.service, {
+      check: this.check.bind(this),
+    });
+    server.addService(RENDERER_PROTO.Renderer.service, {
+      render: this.render.bind(this),
+    });
+
+    server.bind(SERVER_ADDRESS, grpc.ServerCredentials.createInsecure());
+    server.start();
 
+    console.log(`1|1|tcp|${SERVER_ADDRESS}|grpc`);
+    this.log.info('Renderer plugin started');
+  }
+
+  check(call, callback) {
+    callback(null, {status: 'SERVING'});
+  }
+
+  async render(call, callback) {
+    let req = call.request;
+
+    this.log.info('render req', req);
+
+    let options = {
+      url: req.url,
+      width: req.width,
+      height: req.height,
+      filePath: req.filePath,
+    };
+
+    try {
+      let result = await this.browser.render(options);
+      callback(null, {error: ''});
+    } catch (err) {
+      this.log.info("Error", err);
+      callback(null, {error: err.toString()});
+    }
+  }
+}
 

src/grpc-plugin.ts

@@ -20,17 +20,28 @@ export class HttpServer {
     });
 
     this.app.get('/render', asyncMiddleware(this.render));
+    this.app.use((err, req, res, next) => {
+      return res.status(err.output.statusCode).json(err.output.payload);
+    });
 
     this.app.listen(this.options.port);
     this.log.info(`HTTP Server started, listening on ${this.options.port}`);
   }
 
   render = async (req: express.Request, res: express.Response) => {
-    let result = await this.browser.render();
+    if (!req.query.url) {
+      throw boom.badRequest('Missing url parameter');
+    }
+
+    let options = {
+      url: req.query.url,
+      width: req.query.width,
+      height: req.query.height,
+    };
 
-    res.sendFile(result.imagePath);
+    let result = await this.browser.render(options);
 
-    this.log.info(req.query);
+    res.sendFile(result.filePath);
   }
 }
 

src/http-server.ts

@@ -1,7 +1,21 @@
-export class Logger {
 
-  info(msg) {
-    console.log(msg);
+export interface Logger {
+  info(...optionalParams: any[]);
+}
+
+
+export class ConsoleLogger {
+
+  info(...optionalParams: any[]) {
+    console.log(...optionalParams);
+  }
+
+}
+
+export class PluginLogger {
+
+  info(...optionalParams: any[]) {
+    console.error(...optionalParams);
   }
 
 }