Build plugin with grafana toolkit (#1539)

* Use grafana toolkit template for building plugin

* Fix linter and type errors

* Update styles building

* Fix sass deprecation warning

* Remove empty js files produced by webpack building sass

* Fix signing script

* Replace classnames with cx

* Fix data source config page

* Use custom webpack config instead of overriding original one

* Use gpx_ prefix for plugin executable

* Remove unused configs

* Roll back react hooks dependencies usage

* Move plugin-specific ts config to root config file

* Temporary do not use rst2html for function description tooltip

* Remove unused code

* remove unused dependencies

* update react table dependency

* Migrate tests to typescript

* remove unused dependencies

* Remove old webpack configs

* Add sign target to makefile

* Add magefile

* Update CI test job

* Update go packages

* Update build instructions

* Downgrade go version to 1.18

* Fix go version in ci

* Fix metric picker

* Add comment to webpack config

* remove angular mocks

* update bra config

* Rename datasource-zabbix to datasource (fix mage build)

* Add instructions for building backend with mage

* Fix webpack targets

* Fix ci backend tests

* Add initial e2e tests

* Fix e2e ci tests

* Update docker compose for cypress tests

* build grafana docker image

* Fix docker stop task

* CI: add Grafana compatibility check

.config/webpack/constants.ts

@@ -0,0 +1,2 @@
+export const SOURCE_DIR = 'src';
+export const DIST_DIR = 'dist';

.config/webpack/utils.ts

@@ -0,0 +1,45 @@
+import fs from 'fs';
+import path from 'path';
+import util from 'util';
+import glob from 'glob';
+import { SOURCE_DIR } from './constants';
+
+const globAsync = util.promisify(glob);
+
+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'));
+}
+
+export async function getEntries(): Promise<Record<string, string>> {
+  const parent = '..';
+  const pluginsJson = await globAsync('**/src/**/plugin.json');
+
+  const plugins = await Promise.all(
+    pluginsJson.map((pluginJson) => {
+      const folder = path.dirname(pluginJson);
+      return globAsync(`${folder}/module.{ts,tsx,js}`);
+    })
+  );
+
+  const entries = plugins.reduce((result, modules) => {
+    return modules.reduce((result, module) => {
+      const pluginPath = path.resolve(path.dirname(module), parent);
+      const pluginName = path.basename(pluginPath);
+      const entryName = plugins.length > 1 ? `${pluginName}/module` : 'module';
+
+      result[entryName] = path.join(parent, module);
+      return result;
+    }, result);
+  }, {});
+  return entries;
+}

.config/webpack/webpack.config.ts

@@ -0,0 +1,200 @@
+/*
+ * ⚠️⚠️⚠️ 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, getEntries } from './utils';
+import { SOURCE_DIR, DIST_DIR } from './constants';
+
+const config = async (env): Promise<Configuration> => ({
+  cache: {
+    type: 'filesystem',
+    buildDependencies: {
+      config: [__filename],
+    },
+  },
+
+  context: path.join(process.cwd(), SOURCE_DIR),
+
+  devtool: env.production ? 'source-map' : 'eval-source-map',
+
+  // Entries from getEntries() work incorrect, so declare it manually in root webpack config
+  // entry: await getEntries(),
+
+  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',
+    '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(undefined, 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: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        exclude: /(node_modules)/,
+        test: /\.s[ac]ss$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/,
+        type: 'asset/resource',
+        generator: {
+          // Keep publicPath relative for host.com/grafana/ deployments
+          publicPath: `public/plugins/${getPluginId()}/img/`,
+          outputPath: 'img/',
+          filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
+        },
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/,
+        type: 'asset/resource',
+        generator: {
+          // Keep publicPath relative for host.com/grafana/ deployments
+          publicPath: `public/plugins/${getPluginId()}/fonts`,
+          outputPath: 'fonts/',
+          filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
+        },
+      },
+    ],
+  },
+
+  output: {
+    clean: {
+      keep: /gpx_.*/,
+    },
+    filename: '[name].js',
+    library: {
+      type: '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'],
+    // handle resolving "rootDir" paths
+    modules: [path.resolve(process.cwd(), 'src'), 'node_modules'],
+    unsafeCache: true,
+  },
+});
+
+export default config;