Datasource plugin example help

Grafana Plugin Development
1

I’m following the example project here.

My datasource.ts is as follows:

export class PhilDatasource{

private type: any;
private url: any;
private name: any;
private q: any;
private backendSrv: any;
private templateSrv: any;

/** @ngInject */
constructor(instanceSettings, $q, backendSrv, templateSrv) {
    this.type = instanceSettings.type;
    this.url = instanceSettings.url;
    this.name = instanceSettings.name;
    this.q = $q;
    this.backendSrv = backendSrv;
    this.templateSrv = templateSrv;
}
query(options): any {
    ....
}
testDatasource(): boolean {
    return true; // to be developed, just want testDatasource to be called for now
}
}

Module.ts is exporting this. So everything builds and deploys, all good, as it follows the example. However, when I click on Save and Test I get the following error within Grafana:

TestDB plugin failed 
Plugin module is missing Datasource constructor

Am I doing something wrong? I’ve checked other datasources code and my constructor looks okay to me, I’m new to typescript maybe I’m doing something wrong.

2

I took your code and built it with tsc and loaded it into Grafana without any problems. How are you building your code? Have you transpiled the code into JavaScript?

A very basic setup for building TypeScript (might need sudo for the npm install to install it as a global package):

npm install -g typescript
tsc *.ts
3

Yes I have, and it loads everything works until I click on Save and Test. It does say the error is coming from SystemJS. Should I be using something else?

4

Here are the build options that Grafana uses - tsconfig.json. Might be worth setting one up locally but it worked for me with just tsc.

{
    "compilerOptions": {
        "sourceMap": true,
        "declaration": true,
        "outDir": "public_gen",
        "noImplicitAny": false,
        "target": "es5",
        "rootDir": "public/",
        "module": "system",
        "noEmitOnError": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitReturns":false,
        "noImplicitThis":false,
        "noImplicitUseStrict":false,
        "noUnusedLocals":false,
        "moduleResolution": "classic"
    },
    "include": [
        "public/app/**/*.ts"
    ],
    "exclude": [
        "public/vendor/**/*",
        "public/**/*.d.ts"
    ]

}
5

Here is your example slightly adapted:

export class ExampleDatasource {

  private type: any;
  private url: any;
  private name: any;
  private q: any;
  private backendSrv: any;
  private templateSrv: any;

  /** @ngInject */
  constructor(instanceSettings, $q, backendSrv, templateSrv) {
    this.type = instanceSettings.type;
    this.url = instanceSettings.url;
    this.name = instanceSettings.name;
    this.q = $q;
    this.backendSrv = backendSrv;
    this.templateSrv = templateSrv;
  }

  query(options): any {

  }

  testDatasource(): any {
      var d = this.q.defer();
      d.resolve(true);
      return d.promise;
  }
}

With the following tsconfig.json:

{
    "compilerOptions": {
        "sourceMap": true,
        "declaration": true,
        "noImplicitAny": false,
        "target": "es5",
        "module": "system",
        "noEmitOnError": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitReturns":false,
        "noImplicitThis":false,
        "noImplicitUseStrict":false,
        "noUnusedLocals":false,
        "moduleResolution": "classic"
    }
}
6

Thanks Daniel, that fixed it. It was indeed my build task, it’s working now.

7

I tested the same code above and get the same error message. But i’m using es2015 and transpiling with Grunt.