Build: try @grafana/toolkit

package.json

@@ -2,64 +2,37 @@
   "name": "ryantxu-ajax-panel",
   "version": "0.0.7-dev",
   "description": "AJAX Panel Plugin for Grafana",
-  "main": "src/module.ts",
   "scripts": {
-    "build": "webpack --config webpack.config.prod.js",
-    "dev": "webpack --mode development",
-    "watch": "webpack --mode development --watch",
-    "test": "jest --config jest.config.js",
-    "precommit": "pretty-quick --staged",
-    "lint": "tslint -c tslint.json --project tsconfig.json",
-    "format": "prettier-eslint --write \"src/**/*.{ts,tsx,json,css,js,jsx}\""
+    "build": "grafana-toolkit plugin:build",
+    "test": "grafana-toolkit plugin:test",
+    "dev": "grafana-toolkit plugin:dev",
+    "test:coverage": "yarn test --coverage",
+    "test:badges": "yarn test:coverage && jest-coverage-badges"
   },
-  "keywords": ["ajax", "grafana", "plugin", "panel", "webcamera"],
+  "keywords": [
+    "ajax",
+    "grafana",
+    "plugin",
+    "panel",
+    "webcamera"
+  ],
   "author": "ryantxu",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/ryantxu/ajax-panel.git"
   },
-  "lint-staged": {
-    "src/**/*.{ts,tsx,json,css,js,jsx}": [
-      "prettier-eslint"
-    ]
-  },
-  "prettier": {
-    "trailingComma": "es5",
-    "singleQuote": true,
-    "bracketSpacing": false,
-    "printWidth": 100
-  },
-  "dependencies": {
-    "jquery": "^3.2.1",
-    "lodash": "^4.17.10",
-    "moment": "^2.22.1"
-  },
   "devDependencies": {
-    "@types/jest": "^23.3.1",
-    "@types/lodash": "^4.14.74",
-    "babel-core": "^6.26.3",
-    "babel-jest": "^23.0.1",
-    "babel-loader": "^7.1.4",
-    "babel-preset-env": "^1.7.0",
-    "clean-webpack-plugin": "^0.1.19",
-    "copy-webpack-plugin": "^4.5.1",
-    "css-loader": "^1.0.0",
+    "@types/jest": "^24.0.13",
+    "@types/jquery": "^3.3.30",
+    "@types/lodash": "4.14.132",
     "grafana-sdk-mocks": "github:ryantxu/grafana-sdk-mocks",
-    "jest": "^23.0.1",
-    "ng-annotate-webpack-plugin": "^0.3.0",
-    "release-it": "^10",
-    "prettier": "^1.15.3",
-    "prettier-eslint": "^8.8.0",
-    "prettier-eslint-cli": "^4.7.0",
-    "pretty-quick": "^1.10.0",
-    "replace-in-file-webpack-plugin": "^1.0.6",
-    "style-loader": "^0.22",
-    "ts-jest": "^23",
-    "ts-loader": "^4.3.0",
-    "typescript": "^3",
-    "uglifyjs-webpack-plugin": "^2.0.1",
-    "webpack": "^4.9.1",
-    "webpack-cli": "^3.1"
+    "jest": "^24.8.0",
+    "jquery": "^3.4.1",
+    "lodash": "4.17.11",
+    "moment": "2.24.0",
+    "ts-jest": "^24.0.2",
+    "tslib": "^1.10.0",
+    "typescript": "^3.5.2"
   }
 }

src/examples.ts

@@ -98,7 +98,9 @@ export const examples = [
     text: 'grafana settings api w/ template',
     config: {
       mode: RenderMode.template,
-      template: '<h2>Instance: {{ response.DEFAULT.instance_name }}</h2>\n\n<div ng-repeat="(key, value) in response">\n\n        <h5>{{key}}</h5>\n\n        <pre>{{ value | json }}</pre>\n\n      </div>',
+      template: '<h2>Instance: {{ response.DEFAULT.instance_name }}</h2>\n\n'
+      + '<div ng-repeat="(key, value) in response">\n\n        <h5>{{key}}</h5>\n\n'
+      + '<pre>{{ value | json }}</pre>\n\n      </div>',
       url: '/api/admin/settings',
       params_js: '{}',
     },

src/module.ts

@@ -1,5 +1,3 @@
-///<reference path="../node_modules/grafana-sdk-mocks/app/headers/common.d.ts" />
-
 import {MetricsPanelCtrl} from 'app/plugins/sdk';
 import $ from 'jquery';
 import _ from 'lodash';
@@ -16,7 +14,7 @@ class AjaxCtrl extends MetricsPanelCtrl {
   params_fn?: Function;
   header_fn?: Function;
 
-  isIframe: boolean = false;
+  isIframe = false;
   objectURL: any = null; // Used for images
   scopedVars: any = null; // updated each request
 
@@ -36,16 +34,16 @@ class AjaxCtrl extends MetricsPanelCtrl {
 
   /** @ngInject */
   constructor(
-    $scope,
-    $injector,
-    public $rootScope,
-    public $q,
-    public $timeout,
-    public $sce,
-    public templateSrv,
-    public datasourceSrv,
-    public backendSrv,
-    public $compile
+    $scope: any,
+    $injector: any,
+    public $rootScope: any,
+    public $q: any,
+    public $timeout: any,
+    public $sce: any,
+    public templateSrv: any,
+    public datasourceSrv: any,
+    public backendSrv: any,
+    public $compile: any
   ) {
     super($scope, $injector);
 
@@ -71,16 +69,16 @@ class AjaxCtrl extends MetricsPanelCtrl {
     this.events.on('render', this.notifyWhenRenderingCompleted.bind(this));
   }
 
-  onDataSnapshotLoad(snapshotData) {
+  onDataSnapshotLoad(snapshotData: any) {
     this.onDataReceived(snapshotData);
   }
 
-  onDataError(err) {
+  onDataError(err: any) {
     console.log('onDataError', err);
   }
 
   // Having this function pust ths query sidebar on
-  onDataReceived(dataList) {
+  onDataReceived(dataList: any) {
     this.process(dataList);
     this.loading = false;
   }
@@ -96,7 +94,7 @@ class AjaxCtrl extends MetricsPanelCtrl {
       this.timer = this.$timeout(() => {
         this.timer = undefined;
 
-        if (this.requestCount != requestID) {
+        if (this.requestCount !== requestID) {
           return;
         }
 
@@ -194,7 +192,7 @@ class AjaxCtrl extends MetricsPanelCtrl {
   /**
    * @override
    */
-  updateTimeRange(datasource?) {
+  updateTimeRange(datasource?: any) {
     const before = this.timeInfo;
     const v = super.updateTimeRange(datasource);
     if (this.panel.showTime && before) {
@@ -207,7 +205,7 @@ class AjaxCtrl extends MetricsPanelCtrl {
    * Rather than issue a datasource query, we will call our ajax request
    * @override
    */
-  issueQueries(datasource) {
+  issueQueries(datasource: any) {
     if (this.isUsingMetricQuery()) {
       return super.issueQueries(datasource);
     }
@@ -257,7 +255,7 @@ class AjaxCtrl extends MetricsPanelCtrl {
       const url = this.templateSrv.replace(this.panel.url, scopedVars);
       const params = this.getCurrentParams();
 
-      let options: any = {
+      const options: any = {
         method: this.panel.method,
         responseType: this.panel.responseType,
         url: url,
@@ -326,7 +324,7 @@ class AjaxCtrl extends MetricsPanelCtrl {
   }
 
   // Overrides the default handling (error for null result)
-  handleQueryResult(result) {
+  handleQueryResult(result: any) {
     // console.log('handleQueryResult', result, Date.now(), this.loading);
     this.loading = false;
     if (result) {
@@ -402,7 +400,7 @@ class AjaxCtrl extends MetricsPanelCtrl {
   updateTemplate() {
     let txt = '';
     this.isIframe = this.panel.method === 'iframe';
-    if (this.panel.mode == RenderMode.template) {
+    if (this.panel.mode === RenderMode.template) {
       if (!this.panel.template) {
         this.panel.template = '<pre>{{ response }}</pre>';
       }
@@ -487,13 +485,13 @@ class AjaxCtrl extends MetricsPanelCtrl {
         } else if ('recieve' === this.panel.showTimeValue) {
           when = Date.now();
         } else if (this.panel.showTimeValue.startsWith('header-')) {
-          let h = this.panel.showTimeValue.substring('header-'.length);
-          let v = rsp.headers[h];
+          const h = this.panel.showTimeValue.substring('header-'.length);
+          const v = rsp.headers[h];
           if (v) {
             console.log('TODO, parse header', v, h);
           } else {
-            let vals: any = {};
-            for (let key in rsp.headers()) {
+            const vals: any = {};
+            for (const key in rsp.headers()) {
               vals[key] = rsp.headers[key];
             }
             console.log('Header:', h, 'not found in:', vals, rsp);
@@ -516,7 +514,7 @@ class AjaxCtrl extends MetricsPanelCtrl {
     }
     this.$scope.response = rsp.hasOwnProperty('data') ? rsp.data : rsp;
 
-    let contentType: string = '';
+    let contentType = '';
     if (rsp.hasOwnProperty('headers')) {
       contentType = rsp.headers('Content-Type');
     }
@@ -535,7 +533,7 @@ class AjaxCtrl extends MetricsPanelCtrl {
         this.img.css('display', 'block');
 
         // If we get an image, change the display to image type
-        if (this.panel.mode != RenderMode.image) {
+        if (this.panel.mode !== RenderMode.image) {
           this.panel.mode = RenderMode.image;
           this.updateTemplate();
         }
@@ -551,7 +549,7 @@ class AjaxCtrl extends MetricsPanelCtrl {
     }
 
     // JSON Node needs to force refresh
-    if (this.panel.mode == RenderMode.json) {
+    if (this.panel.mode === RenderMode.json) {
       this.updateTemplate();
     }
   }
@@ -565,7 +563,7 @@ class AjaxCtrl extends MetricsPanelCtrl {
     });
   }
 
-  link(scope, elem, attrs, ctrl) {
+  link(scope: any, elem: any, attrs: any, ctrl: any) {
     this.img = $(elem.find('img')[0]);
     this.ngtemplate = $(elem.find('.ngtemplate')[0]);
     this.overlay = $(elem.find('.ajaxmodal')[0]);

src/types.ts

@@ -1,8 +1,8 @@
 export class DSInfo {
   name: string;
   baseURL: string;
-  isProxy: boolean = false;
-  withCredentials: boolean = false;
+  isProxy = false;
+  withCredentials = false;
   basicAuth?: string;
 
   constructor(ds) {

tsconfig.json

@@ -1,25 +1,8 @@
 {
-  "compileOnSave": false,
+  "extends": "./node_modules/@grafana/toolkit/src/config/tsconfig.plugin.json",
+  "include": ["src", "types"],
   "compilerOptions": {
-    "target": "es5",
-    "module": "es6",
     "rootDir": "./src",
-    "jsx": "react",
-    "lib": ["dom", "es2015", "es2016"],
-    "declaration": false,
-    "allowSyntheticDefaultImports": true,
-    "inlineSourceMap": false,
-    "sourceMap": true,
-    "noEmitOnError": false,
-    "emitDecoratorMetadata": false,
-    "experimentalDecorators": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": false,
-    "noImplicitUseStrict": true,
-    "noImplicitAny": false,
-    "noUnusedLocals": true,
-    "strictNullChecks": false
-  },
-  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
-  "exclude": ["node_modules"]
-}
+    "typeRoots": ["./node_modules/@types"]
+  }
+}