Merge pull request #82 from openmsupply/Grafana-8-rewrite

#81 Grafana 8 rewrite

.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['@grafana/eslint-config', 'plugin:react-hooks/recommended'],
+  rules: {
+    'react/prop-types': 'off',
+    'react-hooks/exhaustive-deps': 'error',
+  },
+};

.gitignore

@@ -1,52 +1,40 @@
-##########################
-# Application specfic
-##########################
-# config/config.js
-
-##########################
-# General
-##########################
-
-#####
-# OS X temporary files
-#
-# c.f. http://www.westwind.com/reference/os-x/invisibles.html
-.DS_Store
-
-# c.f. http://www.westwind.com/reference/os-x/invisibles.html
-.Trashes
-
-# c.f. http://www.westwind.com/reference/os-x/invisibles.html
-*.swp
-
-#####
-# Node stuff
-#
 # Logs
 logs
 *.log
 npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.DS_Store
+
+.vscode/
+
+node_modules/
 
 # Runtime data
 pids
 *.pid
 *.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
 
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+dist/
+artifacts/
+work/
+ci/
+e2e-results/
 
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-*/dist
-*/gpx_*
+# Editor
+.idea
 
-# Dependency directory
-# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
-node_modules
+.github
 
-**/dist
+# Docker config, rename config.env.example to config.env and change config accrding
+# to your machine
+config.env

.nvmrc

@@ -0,0 +1 @@
+v16.14.2

.prettierrc.js

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

.webpack/constants.js

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

.webpack/utils.js

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

.webpack/webpack.dev.conf.js

@@ -0,0 +1,210 @@
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const LiveReloadPlugin = require('webpack-livereload-plugin');
+const { getPackageJson, getPluginId, hasReadme } = require('./utils');
+const { SOURCE_DIR, DIST_DIR, ENTRY_FILE } = require('./constants');
+
+module.exports = {
+  mode: 'development',
+
+  // Compile for browsers
+  target: 'web',
+
+  // The "root dir" for the source code
+  context: path.join(process.cwd(), SOURCE_DIR),
+
+  // Source map type
+  devtool: 'eval-source-map',
+
+  entry: {
+    module: path.resolve(process.cwd(), ENTRY_FILE),
+  },
+
+  output: {
+    filename: '[name].js',
+    path: path.resolve(process.cwd(), DIST_DIR),
+    libraryTarget: 'amd',
+    publicPath: '/',
+  },
+
+  // Don't show hints (e.g. asset size is over 250kb)
+  performance: { hints: false },
+
+  // External packages
+  // (these are going to be provided by the Grafana runtime)
+  externals: [
+    'lodash',
+    'jquery',
+    'moment',
+    'slate',
+    'emotion',
+    '@emotion/react',
+    '@emotion/css',
+    'prismjs',
+    'slate-plain-serializer',
+    '@grafana/slate-react',
+    'react',
+    'react-dom',
+    'react-redux',
+    'redux',
+    'rxjs',
+    // Grafana 8 wraps plugin with react-router-dom it must be specified as external.
+    // If you do not use Grafan's react-router-dom then the plugin's navigation would not work
+    // out of the box. Learnt this the hard way. :D
+    'react-router-dom',
+    'd3',
+    'angular',
+    '@grafana/ui',
+    '@grafana/runtime',
+    '@grafana/data',
+
+    // Mark packages as external in case their name starts with the "grafana/" prefix
+    // @ts-ignore
+    ({ 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));
+      }
+
+      // @ts-ignore
+      callback();
+    },
+  ],
+
+  // Order modules and chunks by occurance
+  optimization: { chunkIds: 'total-size', moduleIds: 'size' },
+
+  plugins: [
+    // Copy static files
+    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(),
+          },
+        ],
+      },
+    ]),
+
+    // Move type checking and ESLint linting to separate processes
+    new ForkTsCheckerWebpackPlugin({
+      typescript: {
+        configFile: path.resolve(process.cwd(), 'tsconfig.json'),
+      },
+    }),
+
+    // Add live reload functionality. Requires <script /> in index.html
+    new LiveReloadPlugin(),
+  ],
+
+  resolve: {
+    // Prefer resolving the .ts files first, then fall back to the rest
+    extensions: ['.ts', '.tsx', '.js'],
+    // Try resolving modules from the source directory first
+    modules: [path.resolve(process.cwd(), SOURCE_DIR), 'node_modules'],
+  },
+
+  module: {
+    rules: [
+      // Typescript
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: [['@babel/preset-env', { modules: false }]],
+              plugins: ['angularjs-annotate'],
+              sourceMaps: true,
+            },
+          },
+          {
+            loader: 'ts-loader',
+            options: {
+              onlyCompileBundledFiles: true,
+              transpileOnly: true,
+            },
+          },
+        ],
+        exclude: /(node_modules)/,
+      },
+
+      // Javascript
+      {
+        test: /\.jsx?$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: [['@babel/preset-env', { modules: false }]],
+              plugins: ['angularjs-annotate'],
+              sourceMaps: true,
+            },
+          },
+        ],
+        exclude: /(node_modules)/,
+      },
+
+      // Images
+      {
+        test: /\.(png|jpe?g|gif|svg)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              outputPath: '/',
+              name: '[path][name].[ext]',
+            },
+          },
+        ],
+      },
+
+      // Fonts
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'file-loader',
+        options: {
+          // Keep publicPath relative for host.com/grafana/ deployments
+          publicPath: `public/plugins/${getPluginId()}/fonts`,
+          outputPath: 'fonts',
+          name: '[name].[ext]',
+        },
+      },
+    ],
+  },
+};