build using @grafana/toolkit

.circleci/config.yml

@@ -1,31 +1,115 @@
 version: 2
 jobs:
-  build:
+  build_plugin:
     docker:
-      # specify the version you desire here
-      - image: circleci/node:8
-
-    working_directory: ~/repo
-
+    - image: circleci/node:10
+    working_directory: ~/plugin
     steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-{{ checksum "yarn.lock" }}
-      - run:
-          name: yarn install
-          command: 'yarn install --pure-lockfile --no-progress'
-      - save_cache:
-          key: dependency-cache-{{ checksum "yarn.lock" }}
-          paths:
-            - node_modules
-      - run:
-          name: test
-          command: 'yarn test'
-      - run:
-          name: build
-          command: 'yarn build'
-      - run:
-          name: zip dist
-          command: 'cd dist && zip -r9 ../grafana-plotly-panel-dev.zip *'
-      - store_artifacts:
-          path: grafana-plotly-panel-dev.zip
+    - checkout
+    - restore_cache:
+        keys:
+        - yarn-packages-{{ checksum "yarn.lock" }}
+    - run:
+        name: Install yarn
+        command: |
+          yarn install --pure-lockfile
+    - run:
+        name: Run Toolkit Build
+        command: npx grafana-toolkit plugin:ci-build
+    - save_cache:
+        paths:
+        - node_modules
+        key: yarn-packages-{{ checksum "yarn.lock" }}
+    - persist_to_workspace:
+        root: .
+        paths:
+        - ci
+  package:
+    docker:
+    - image: circleci/node:10
+    working_directory: ~/plugin
+    steps:
+    - checkout
+    - attach_workspace:
+        at: .
+    - restore_cache:
+        keys:
+        - yarn-packages-{{ checksum "yarn.lock" }}
+    - run:
+        name: Package Distribution
+        command: npx grafana-toolkit plugin:ci-package
+    - persist_to_workspace:
+        root: .
+        paths:
+        - ci/jobs/package
+        - ci/packages
+        - ci/dist
+        - ci/grafana-test-env
+  test_6_5_1:
+    docker:
+    - image: circleci/node:10-browsers
+    working_directory: ~/plugin
+    steps:
+    - checkout
+    - attach_workspace:
+        at: .
+    - restore_cache:
+        keys:
+        - yarn-packages-{{ checksum "yarn.lock" }}
+    - run:
+        name: Setup Grafana (local install)
+        command: |
+          wget https://dl.grafana.com/oss/release/grafana_6.5.1_amd64.deb
+          sudo apt-get install -y adduser libfontconfig1
+          sudo dpkg -i grafana_6.5.1_amd64.deb
+          sudo apt-get install locate
+          sudo updatedb
+          sudo locate grafana
+          sudo cat /etc/grafana/grafana.ini
+          sudo echo ------------------------
+          sudo cp ci/grafana-test-env/custom.ini /usr/share/grafana/conf/custom.ini
+          sudo cp ci/grafana-test-env/custom.ini /etc/grafana/grafana.ini
+          sudo service grafana-server start
+          sudo grafana-cli --version
+    - run:
+        name: Run e2e tests
+        command: |
+          npx grafana-toolkit plugin:ci-test
+    - persist_to_workspace:
+        root: .
+        paths:
+        - ci/jobs/test_6_5_1
+    - store_test_results:
+        path: ci/jobs/test_6_5_1
+    - store_artifacts:
+        path: ci/jobs/test_6_5_1
+  report:
+    docker:
+    - image: circleci/node:10
+    working_directory: ~/plugin
+    steps:
+    - checkout
+    - attach_workspace:
+        at: .
+    - restore_cache:
+        keys:
+        - yarn-packages-{{ checksum "yarn.lock" }}
+    - run:
+        name: Toolkit Report
+        command: npx grafana-toolkit plugin:ci-report
+    - store_artifacts:
+        path: ci
+workflows:
+  version: 2
+  plugin_workflow:
+    jobs:
+    - build_plugin
+    - package:
+        requires:
+        - build_plugin
+    - test_6_5_1:
+        requires:
+        - package
+    - report:
+        requires:
+        - test_6_5_1

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require("./node_modules/@grafana/toolkit/src/config/prettier.plugin.config.json"),
+};

README.md

@@ -37,6 +37,11 @@ env GITHUB_TOKEN=your_token yarn release-it patch
 
 #### Changelog
 
+
+##### v0.0.7
+- build with toolkit
+
+
 ##### v0.0.6
 
 - Fix axis range configuration bug [#49](https://github.com/NatelEnergy/grafana-plotly-panel/issues/49)

mocks/sdk.ts

@@ -0,0 +1,11 @@
+
+export class MetricsPanelCtrl {
+  ctrl = {
+    panel: {
+      version: 1,
+    },
+    updateTimeRange: () => {}
+  }
+};
+
+export default {}

package.json

@@ -3,14 +3,9 @@
   "version": "0.0.7-dev",
   "description": "Plot.ly Panel Plugin for Grafana",
   "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}\"",
-    "zip": "yarn build && rm -f ../grafana-plotly-panel.zip && zip -r ../grafana-plotly-panel.zip dist"
+    "build": "grafana-toolkit plugin:build",
+    "test": "grafana-toolkit plugin:test",
+    "dev": "grafana-toolkit plugin:dev"
   },
   "author": "ryantxu",
   "license": "MIT",
@@ -25,16 +20,10 @@
     "type": "git",
     "url": "https://github.com/NatelEnergy/grafana-plotly-panel.git"
   },
-  "lint-staged": {
-    "src/**/*.{ts,tsx,json,css,js,jsx}": [
-      "prettier-eslint"
-    ]
-  },
-  "prettier": {
-    "trailingComma": "es5",
-    "singleQuote": true,
-    "bracketSpacing": false,
-    "printWidth": 100
+  "jest": {
+    "moduleNameMapper": {
+      "grafana/app/plugins/sdk": "<rootDir>/node_modules/grafana-sdk-mocks/app/plugins/sdk.ts"
+    }
   },
   "dependencies": {
     "jquery": "^3.2.1",
@@ -44,32 +33,8 @@
     "scriptjs": "^2.5.9"
   },
   "devDependencies": {
-    "@types/jest": "^24.0.0",
-    "@types/lodash": "^4.14.74",
-    "@types/plotly.js": "^1.38.0",
-    "@types/scriptjs": "^0.0.2",
-    "babel-core": "^6.26.3",
-    "babel-jest": "^23.0.1",
-    "babel-loader": "^7.1.4",
-    "babel-preset-env": "^1.7.0",
-    "clean-webpack-plugin": "^1.0.1",
-    "copy-webpack-plugin": "^4.5.1",
-    "css-loader": "^2.1.0",
-    "grafana-sdk-mocks": "github:grafana/grafana-sdk-mocks",
-    "jest": "^24.1.0",
-    "ng-annotate-webpack-plugin": "^0.3.0",
-    "prettier": "^1.15.3",
-    "prettier-eslint": "^8.8.0",
-    "prettier-eslint-cli": "^4.7.0",
-    "pretty-quick": "^1.10.0",
-    "release-it": "^10",
-    "replace-in-file-webpack-plugin": "^1.0.6",
-    "style-loader": "^0.23.1",
-    "ts-jest": "^23",
-    "ts-loader": "^5.3.3",
-    "typescript": "^3",
-    "uglifyjs-webpack-plugin": "^2.1.1",
-    "webpack": "^4.9.1",
-    "webpack-cli": "^3.1"
+    "@grafana/toolkit": "next",
+    "@types/grafana": "github:CorpGlory/types-grafana.git",
+    "grafana-sdk-mocks": "github:grafana/grafana-sdk-mocks"
   }
 }

specs/series.jest.ts → src/SeriesWrapper.test.ts

@@ -1,18 +1,20 @@
-///<reference path="../node_modules/@types/jest/index.d.ts" />
-
 import {
   SeriesWrapper,
   SeriesWrapperSeries,
   //  SeriesWrapperTable,
-} from '../src/SeriesWrapper';
+} from './SeriesWrapper';
 
 describe('Check Series Helper', () => {
   // $scope, $injector, $window, private $rootScope, public uiSegmentSrv
 
   // Skip those for now because they rely on real template expansion
   describe('check Series Helper', () => {
     const series = {
-      datapoints: [[1.23, 100], [2.24, 101], [3.45, 102]],
+      datapoints: [
+        [1.23, 100],
+        [2.24, 101],
+        [3.45, 102],
+      ],
     };
     const helperValue: SeriesWrapper = new SeriesWrapperSeries('AAA', series, 'value');
     const helperTime: SeriesWrapper = new SeriesWrapperSeries('AAA', series, 'time');

src/anno.ts

@@ -1,4 +1,4 @@
-import {Shape, Data} from 'plotly.js';
+import { Shape, Data } from 'plotly.js';
 
 export class AnnoInfo {
   trace: Data;
@@ -66,7 +66,7 @@ export class AnnoInfo {
     });
 
     // Overwrite it with new points
-    this.trace = {...this.trace, x, y, text};
+    this.trace = { ...this.trace, x, y, text };
     this.trace.marker!.color = color;
     return x.length > 0;
   }

src/editor.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 
-import {PlotlyPanelCtrl} from './module';
+import { PlotlyPanelCtrl } from './module';
 
 class AxisInfo {
   label: string;