@grafana/create-plugin 0.0.1

package/templates/backend/pkg/main.go

@@ -0,0 +1,24 @@
+package main
+
+import (
+	"os"
+
+	"github.com/grafana/grafana-plugin-sdk-go/backend/datasource"
+	"github.com/grafana/grafana-plugin-sdk-go/backend/log"
+	"github.com/{{ kebabCase orgName }}/{{ kebabCase pluginName }}/pkg/plugin"
+)
+
+func main() {
+	// Start listening to requests sent from Grafana. This call is blocking so
+	// it won't finish until Grafana shuts down the process or the plugin choose
+	// to exit by itself using os.Exit. Manage automatically manages life cycle
+	// of datasource instances. It accepts datasource instance factory as first
+	// argument. This factory will be automatically called on incoming request
+	// from Grafana to create different instances of SampleDatasource (per datasource
+	// ID). When datasource configuration changed Dispose method will be called and
+	// new datasource instance created using NewSampleDatasource factory.
+	if err := datasource.Manage("{{ kebabCase orgName }}-{{ kebabCase pluginName }}", plugin.NewDatasource, datasource.ManageOpts{}); err != nil {
+		log.DefaultLogger.Error(err.Error())
+		os.Exit(1)
+	}
+}

package/templates/backend/pkg/plugin/datasource.go

@@ -0,0 +1,111 @@
+package plugin
+
+import (
+	"context"
+	"encoding/json"
+	"math/rand"
+	"time"
+
+	"github.com/grafana/grafana-plugin-sdk-go/backend"
+	"github.com/grafana/grafana-plugin-sdk-go/backend/instancemgmt"
+	"github.com/grafana/grafana-plugin-sdk-go/backend/log"
+	"github.com/grafana/grafana-plugin-sdk-go/data"
+)
+
+// Make sure Datasource implements required interfaces. This is important to do
+// since otherwise we will only get a not implemented error response from plugin in
+// runtime. In this example datasource instance implements backend.QueryDataHandler,
+// backend.CheckHealthHandler interfaces. Plugin should not implement all these
+// interfaces- only those which are required for a particular task.
+var (
+	_ backend.QueryDataHandler      = (*Datasource)(nil)
+	_ backend.CheckHealthHandler    = (*Datasource)(nil)
+	_ instancemgmt.InstanceDisposer = (*Datasource)(nil)
+)
+
+// NewDatasource creates a new datasource instance.
+func NewDatasource(_ backend.DataSourceInstanceSettings) (instancemgmt.Instance, error) {
+	return &Datasource{}, nil
+}
+
+// Datasource is an example datasource which can respond to data queries, reports
+// its health and has streaming skills.
+type Datasource struct{}
+
+// Dispose here tells plugin SDK that plugin wants to clean up resources when a new instance
+// created. As soon as datasource settings change detected by SDK old datasource instance will
+// be disposed and a new one will be created using NewSampleDatasource factory function.
+func (d *Datasource) Dispose() {
+	// Clean up datasource instance resources.
+}
+
+// QueryData handles multiple queries and returns multiple responses.
+// req contains the queries []DataQuery (where each query contains RefID as a unique identifier).
+// The QueryDataResponse contains a map of RefID to the response for each query, and each response
+// contains Frames ([]*Frame).
+func (d *Datasource) QueryData(ctx context.Context, req *backend.QueryDataRequest) (*backend.QueryDataResponse, error) {
+	log.DefaultLogger.Info("QueryData called", "request", req)
+
+	// create response struct
+	response := backend.NewQueryDataResponse()
+
+	// loop over queries and execute them individually.
+	for _, q := range req.Queries {
+		res := d.query(ctx, req.PluginContext, q)
+
+		// save the response in a hashmap
+		// based on with RefID as identifier
+		response.Responses[q.RefID] = res
+	}
+
+	return response, nil
+}
+
+type queryModel struct{}
+
+func (d *Datasource) query(_ context.Context, pCtx backend.PluginContext, query backend.DataQuery) backend.DataResponse {
+	response := backend.DataResponse{}
+
+	// Unmarshal the JSON into our queryModel.
+	var qm queryModel
+
+	response.Error = json.Unmarshal(query.JSON, &qm)
+	if response.Error != nil {
+		return response
+	}
+
+	// create data frame response.
+	frame := data.NewFrame("response")
+
+	// add fields.
+	frame.Fields = append(frame.Fields,
+		data.NewField("time", nil, []time.Time{query.TimeRange.From, query.TimeRange.To}),
+		data.NewField("values", nil, []int64{10, 20}),
+	)
+
+	// add the frames to the response.
+	response.Frames = append(response.Frames, frame)
+
+	return response
+}
+
+// CheckHealth handles health checks sent from Grafana to the plugin.
+// The main use case for these health checks is the test button on the
+// datasource configuration page which allows users to verify that
+// a datasource is working as expected.
+func (d *Datasource) CheckHealth(_ context.Context, req *backend.CheckHealthRequest) (*backend.CheckHealthResult, error) {
+	log.DefaultLogger.Info("CheckHealth called", "request", req)
+
+	var status = backend.HealthStatusOk
+	var message = "Data source is working"
+
+	if rand.Int()%2 == 0 {
+		status = backend.HealthStatusError
+		message = "randomized error"
+	}
+
+	return &backend.CheckHealthResult{
+		Status:  status,
+		Message: message,
+	}, nil
+}

package/templates/backend/pkg/plugin/datasource_test.go

@@ -0,0 +1,28 @@
+package plugin
+
+import (
+	"context"
+	"testing"
+
+	"github.com/grafana/grafana-plugin-sdk-go/backend"
+)
+
+func TestQueryData(t *testing.T) {
+	ds := Datasource{}
+
+	resp, err := ds.QueryData(
+		context.Background(),
+		&backend.QueryDataRequest{
+			Queries: []backend.DataQuery{
+				{RefID: "A"},
+			},
+		},
+	)
+	if err != nil {
+		t.Error(err)
+	}
+
+	if len(resp.Responses) != 1 {
+		t.Fatal("QueryData must return a response")
+	}
+}

package/templates/common/.config/.eslintrc

@@ -0,0 +1,12 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * In order to extend the configuration follow the steps in .config/README.md
+ */
+ {
+  "extends": ["@grafana/eslint-config"],
+  "root": true,
+  "rules": {
+    "react/prop-types": "off"
+  }
+}

package/templates/common/.config/.prettierrc.js

@@ -0,0 +1,16 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * In order to extend the configuration follow the steps in .config/README.md
+ */
+
+module.exports = {
+  "endOfLine": "auto",
+  "printWidth": 120,
+  "trailingComma": "es5",
+  "semi": true,
+  "jsxSingleQuote": false,
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2
+};

package/templates/common/.config/Dockerfile

@@ -0,0 +1,15 @@
+ARG grafana_version=latest
+
+FROM grafana/grafana:${grafana_version}
+
+# Make it as simple as possible to access the grafana instance for development purposes
+# Do NOT enable these settings in a public facing / production grafana instance
+ENV GF_AUTH_ANONYMOUS_ORG_ROLE "Admin"
+ENV GF_AUTH_ANONYMOUS_ENABLED "true"
+ENV GF_AUTH_BASIC_ENABLED "false"
+# Set development mode so plugins can be loaded without the need to sign
+ENV GF_DEFAULT_APP_MODE "development"
+
+# Inject livereload script into grafana index.html
+USER root
+RUN sed -i 's/<\/body><\/html>/<script src=\"http:\/\/localhost:35729\/livereload.js\"><\/script><\/body><\/html>/g' /usr/share/grafana/public/views/index.html

package/templates/common/.config/README.md

@@ -0,0 +1,115 @@
+# Default build configuration by Grafana
+
+**This is an auto-generated directory and is not intended to be changed! ⚠️**
+
+The `.config/` directory holds basic configuration for the different tools
+that are used to develop, test and build the project. In order to make it updates easier we ask you to
+not edit files in this folder to extend configuration.
+
+## How to extend the basic configs?
+
+Bear in mind that you are doing it at your own risk, and that extending any of the basic configuration can lead
+to issues around working with the project.
+
+### Extending the ESLint config
+
+Edit the `.eslintrc` file in the project root in order to extend the ESLint configuration.
+
+**Example:**
+```json
+{
+  "extends": "./.config/.eslintrc",
+  "rules": {
+      "react/prop-types": "off"
+  }
+}
+```
+
+---
+
+### Extending the Prettier config
+
+Edit the `.prettierrc.js` file in the project root in order to extend the Prettier configuration.
+
+**Example:**
+```javascript
+module.exports = {
+  // Prettier configuration provided by Grafana scaffolding
+  ...require("./.config/.prettierrc.js"),
+
+  semi: false,
+};
+```
+
+---
+
+### Extending the Jest config
+
+There are two configuration in the project root that belong to Jest: `jest-setup.js` and `jest.config.js`.
+
+**`jest-setup.js`:** A file that is run before each test file in the suite is executed. We are using it to
+set up the Jest DOM for the testing library and to apply some polyfills. ([link to Jest docs](https://jestjs.io/docs/configuration#setupfilesafterenv-array))
+
+**`jest.config.js`:** The main Jest configuration file that is extending our basic Grafana-tailored setup. ([link to Jest docs](https://jestjs.io/docs/configuration))
+
+---
+
+### Extending the TypeScript config
+
+Edit the `tsconfig.json` file in the project root in order to extend the TypeScript configuration.
+
+**Example:**
+```json
+{
+  "extends": "./.config/tsconfig.json",
+  "compilerOptions": {
+    "preserveConstEnums": true
+  }
+}
+```
+
+---
+
+### Extending the Webpack config
+
+Follow these steps to extend the basic Webpack configuration that lives under `.config/`:
+
+#### 1. Create a new Webpack configuration file
+
+Create a new config file that is going to extend the basic one provided by Grafana.
+It can live in the project root, e.g. `webpack.config.ts`.
+
+#### 2. Merge the basic config provided by Grafana and your custom setup
+We are going to use [`webpack-merge`](https://github.com/survivejs/webpack-merge) for this.
+
+```typescript
+// webpack.config.ts
+import { merge } from 'webpack-merge';
+import grafanaConfig from './.config/webpack/webpack.config';
+
+const config = (env) =>
+    merge(grafanaConfig(env), {
+        // Add custom config here...
+        output: {
+            asyncChunks: true,
+        },
+    });
+
+export default config;
+```
+
+#### 3. Update the `package.json` to use the new Webpack config
+
+We need to update the `scripts` in the `package.json` to use the extended Webpack configuration.
+
+**Update for `build`:**
+```diff
+-"build": "TS_NODE_PROJECT=\"./.config/webpack/tsconfig.webpack.json\" webpack -c ./.config/webpack/webpack.config.ts --env production",
++"build": "TS_NODE_PROJECT=\"./.config/webpack/tsconfig.webpack.json\" webpack -c ./webpack.config.ts --env production",
+```
+
+**Update for `dev`:**
+```diff
+-"dev": "TS_NODE_PROJECT=\"./.config/webpack/tsconfig.webpack.json\" webpack -w -c ./.config/webpack/webpack.config.ts --env development",
++"dev": "TS_NODE_PROJECT=\"./.config/webpack/tsconfig.webpack.json\" webpack -w -c ./webpack.config.ts --env development",
+```

package/templates/common/.config/jest-setup.js

@@ -0,0 +1,24 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * In order to extend the configuration follow the steps in .config/README.md
+ */
+
+import '@testing-library/jest-dom';
+
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(global, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+HTMLCanvasElement.prototype.getContext = () => {};

package/templates/common/.config/jest.config.js

@@ -0,0 +1,31 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * In order to extend the configuration follow the steps in .config/README.md
+ */
+
+module.exports = {
+  testEnvironment: 'jest-environment-jsdom',
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
+    '<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
+    '<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
+  ],
+  transform: {
+    '^.+\\.(t|j)sx?$': [
+      '@swc/jest',
+      {
+        sourceMaps: true,
+        jsc: {
+          parser: {
+            syntax: 'typescript',
+            tsx: true,
+            decorators: false,
+            dynamicImport: true,
+          },
+        },
+      },
+    ],
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
+};

package/templates/common/.config/tsconfig.json

@@ -0,0 +1,17 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * In order to extend the configuration follow the steps in .config/README.md
+ */
+ {
+  "compilerOptions": {
+    "alwaysStrict": true,
+    "declaration": false,
+    "rootDir": "../src",
+    "baseUrl": "../src",
+    "typeRoots": ["../node_modules/@types"],
+    "resolveJsonModule": true
+  },
+  "include": ["../src", "./types"],
+  "extends": "@grafana/tsconfig"
+}

package/templates/common/.config/types/custom.d.ts

@@ -0,0 +1,37 @@
+// Image declarations
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+// Font declarations
+declare module '*.woff';
+declare module '*.woff2';
+declare module '*.eot';
+declare module '*.ttf';
+declare module '*.otf';

package/templates/common/.config/webpack/constants.ts

@@ -0,0 +1,3 @@
+export const SOURCE_DIR = 'src';
+export const DIST_DIR = 'dist';
+export const ENTRY_FILE = `${SOURCE_DIR}/module.ts`;

package/templates/common/.config/webpack/tsconfig.webpack.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "esModuleInterop": true
+  },
+  "transpileOnly": true,
+  "transpiler": "ts-node/transpilers/swc-experimental"
+}

package/templates/common/.config/webpack/utils.ts

@@ -0,0 +1,17 @@
+import fs from 'fs';
+import path from 'path';
+import { SOURCE_DIR } from './constants';
+
+export function getPackageJson() {
+  return require(path.resolve(process.cwd(), 'package.json'));
+}
+
+export function getPluginId() {
+  const { id } = require(path.resolve(process.cwd(), `${SOURCE_DIR}/plugin.json`));
+
+  return id;
+}
+
+export function hasReadme() {
+  return fs.existsSync(path.resolve(process.cwd(), SOURCE_DIR, 'README.md'));
+}

package/templates/common/.config/webpack/webpack.config.ts

@@ -0,0 +1,187 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * In order to extend the configuration follow the steps in .config/README.md
+ */
+
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import ESLintPlugin from 'eslint-webpack-plugin';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import LiveReloadPlugin from 'webpack-livereload-plugin';
+import path from 'path';
+import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
+import { Configuration } from 'webpack';
+
+import { getPackageJson, getPluginId, hasReadme } from './utils';
+import { SOURCE_DIR, DIST_DIR, ENTRY_FILE } from './constants';
+
+const config = (env): Configuration => ({
+  cache: {
+    type: 'filesystem',
+    buildDependencies: {
+      config: [__filename],
+    },
+  },
+
+  context: path.join(process.cwd(), SOURCE_DIR),
+
+  devtool: env.production ? 'source-map' : 'eval-source-map',
+
+  entry: {
+    module: path.resolve(process.cwd(), ENTRY_FILE),
+  },
+
+  externals: [
+    'lodash',
+    'jquery',
+    'moment',
+    'slate',
+    'emotion',
+    '@emotion/react',
+    '@emotion/css',
+    'prismjs',
+    'slate-plain-serializer',
+    '@grafana/slate-react',
+    'react',
+    'react-dom',
+    'react-redux',
+    'redux',
+    'rxjs',
+    'react-router-dom',
+    'd3',
+    'angular',
+    '@grafana/ui',
+    '@grafana/runtime',
+    '@grafana/data',
+
+    // Mark legacy SDK imports as external if their name starts with the "grafana/" prefix
+    ({ request }, callback) => {
+      const prefix = 'grafana/';
+      const hasPrefix = (request) => request.indexOf(prefix) === 0;
+      const stripPrefix = (request) => request.substr(prefix.length);
+
+      if (hasPrefix(request)) {
+        return callback(null, stripPrefix(request));
+      }
+
+      callback();
+    },
+  ],
+
+  mode: env.production ? 'production' : 'development',
+
+  module: {
+    rules: [
+      {
+        exclude: /(node_modules)/,
+        test: /\.[tj]sx?$/,
+        use: {
+          loader: 'swc-loader',
+          options: {
+            jsc: {
+              baseUrl: './src',
+              target: 'es2015',
+              loose: false,
+              parser: {
+                syntax: 'typescript',
+                tsx: true,
+                decorators: false,
+                dynamicImport: true,
+              },
+            },
+          },
+        },
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/,
+        use: [
+          {
+            loader: 'asset/resource',
+            options: {
+              outputPath: '/',
+              name: Boolean(env.production) ? '[path][hash].[ext]' : '[path][name].[ext]',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'asset/resource',
+        options: {
+          // Keep publicPath relative for host.com/grafana/ deployments
+          publicPath: `public/plugins/${getPluginId()}/fonts`,
+          outputPath: 'fonts',
+          name: Boolean(env.production) ? '[hash].[ext]' : '[name].[ext]',
+        },
+      },
+    ],
+  },
+
+  output: {
+    clean: true,
+    filename: '[name].js',
+    libraryTarget: 'amd',
+    path: path.resolve(process.cwd(), DIST_DIR),
+    publicPath: '/',
+  },
+
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [
+        // If src/README.md exists use it; otherwise the root README
+        // To `compiler.options.output`
+        { from: hasReadme() ? 'README.md' : '../README.md', to: '.', force: true },
+        { from: 'plugin.json', to: '.' },
+        { from: '../LICENSE', to: '.' },
+        { from: '../CHANGELOG.md', to: '.', force: true },
+        { from: '**/*.json', to: '.' }, // TODO<Add an error for checking the basic structure of the repo>
+        { from: '**/*.svg', to: '.', noErrorOnMissing: true }, // Optional
+        { from: '**/*.png', to: '.', noErrorOnMissing: true }, // Optional
+        { from: '**/*.html', to: '.', noErrorOnMissing: true }, // Optional
+        { from: 'img/**/*', to: '.', noErrorOnMissing: true }, // Optional
+        { from: 'libs/**/*', to: '.', noErrorOnMissing: true }, // Optional
+        { from: 'static/**/*', to: '.', noErrorOnMissing: true }, // Optional
+      ],
+    }),
+    // Replace certain template-variables in the README and plugin.json
+    new ReplaceInFileWebpackPlugin([
+      {
+        dir: DIST_DIR,
+        files: ['plugin.json', 'README.md'],
+        rules: [
+          {
+            search: /\%VERSION\%/g,
+            replace: getPackageJson().version,
+          },
+          {
+            search: /\%TODAY\%/g,
+            replace: new Date().toISOString().substring(0, 10),
+          },
+          {
+            search: /\%PLUGIN_ID\%/g,
+            replace: getPluginId(),
+          },
+        ],
+      },
+    ]),
+    new ForkTsCheckerWebpackPlugin({
+      async: Boolean(env.development),
+      issue: {
+        include: [{ file: '**/*.{ts,tsx}' }],
+      },
+      typescript: { configFile: path.join(process.cwd(), 'tsconfig.json') },
+    }),
+    new ESLintPlugin({
+      extensions: ['.ts', '.tsx'],
+      lintDirtyModulesOnly: Boolean(env.development), // don't lint on start, only lint changed files
+    }),
+    ...(env.development ? [new LiveReloadPlugin()] : []),
+  ],
+
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    unsafeCache: true,
+  },
+});
+
+export default config;

package/templates/common/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "./.config/.eslintrc"
+}

package/templates/common/.nvmrc

@@ -0,0 +1 @@
+14

package/templates/common/.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  // Prettier configuration provided by Grafana scaffolding
+  ...require("./.config/.prettierrc.js")
+};

package/templates/common/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 1.0.0 (Unreleased)
+
+Initial release.