initial webpack build, #632

.jshintrc

@@ -42,6 +42,7 @@
     "sinon": true,
     "module": true,
     "beforeEach": true,
-    "inject": true
+    "inject": true,
+    "__dirname": true
   }
 }

package.json

@@ -4,10 +4,12 @@
   "version": "3.6.0",
   "description": "Zabbix plugin for Grafana",
   "scripts": {
+    "build": "webpack --config webpack/webpack.prod.conf.js",
+    "dev": "webpack --config webpack/webpack.dev.conf.js",
+    "build-grunt": "grunt",
+    "watch": "grunt watch",
     "test": "jest",
     "jest": "jest --notify --watch",
-    "build": "grunt",
-    "watch": "grunt watch",
     "codecov": "jest --coverage && codecov",
     "ci-test": "jest --coverage && codecov",
     "benchmark": "grunt bench"
@@ -23,12 +25,19 @@
   },
   "devDependencies": {
     "babel": "^6.23.0",
+    "babel-core": "^6.26.3",
     "babel-jest": "^23.6.0",
+    "babel-loader": "^7.1.2",
     "babel-plugin-transform-es2015-for-of": "^6.6.0",
     "babel-plugin-transform-es2015-modules-systemjs": "^6.5.0",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.5.0",
     "benchmark": "^2.1.4",
+    "clean-webpack-plugin": "^0.1.19",
     "codecov": "^3.1.0",
+    "copy-webpack-plugin": "^4.5.4",
+    "css-loader": "^1.0.0",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "grunt": "^1.0.3",
     "grunt-babel": "^7.0.0",
     "grunt-benchmark": "^1.0.0",
@@ -42,15 +51,21 @@
     "grunt-jscs": "^3.0.1",
     "grunt-sass": "^3.0.2",
     "grunt-systemjs-builder": "^1.0.0",
+    "html-loader": "^0.5.5",
     "jest": "^23.5.0",
     "jsdom": "~11.3.0",
     "jshint-stylish": "^2.1.0",
     "load-grunt-tasks": "~3.2.0",
     "lodash": "~4.17.5",
     "moment": "~2.21.0",
+    "ng-annotate-webpack-plugin": "^0.3.0",
     "node-sass": "^4.9.4",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
     "systemjs": "^0.20.19",
-    "tether-drop": "^1.4.2"
+    "tether-drop": "^1.4.2",
+    "webpack": "^4.22.0",
+    "webpack-cli": "^3.1.2"
   },
   "homepage": "http://grafana-zabbix.org"
 }

src/datasource-zabbix/datasource.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import * as dateMath from 'app/core/utils/datemath';
+import * as dateMath from 'grafana/app/core/utils/datemath';
 import * as utils from './utils';
 import * as migrations from './migrations';
 import * as metricFunctions from './metricFunctions';

src/datasource-zabbix/module.js

@@ -1,16 +1,10 @@
-import { loadPluginCss } from 'app/plugins/sdk';
 import { ZabbixDatasource } from './datasource';
 import { ZabbixQueryController } from './query.controller';
 import { ZabbixDSConfigController } from './config.controller';
 import './zabbixAlerting.service.js';
 import './add-metric-function.directive';
 import './metric-function-editor.directive';
 
-loadPluginCss({
-  dark: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.dark.css',
-  light: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.light.css'
-});
-
 class ZabbixQueryOptionsController {}
 ZabbixQueryOptionsController.templateUrl = 'datasource-zabbix/partials/query.options.html';
 

src/datasource-zabbix/query.controller.js

@@ -1,4 +1,4 @@
-import { QueryCtrl } from 'app/plugins/sdk';
+import { QueryCtrl } from 'grafana/app/plugins/sdk';
 import _ from 'lodash';
 import * as c from './constants';
 import * as utils from './utils';

src/datasource-zabbix/responseHandler.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import TableModel from 'app/core/table_model';
+import TableModel from 'grafana/app/core/table_model';
 import * as c from './constants';
 
 /**

src/module.js

@@ -1,5 +1,8 @@
+import './sass/grafana-zabbix.dark.scss';
+import './sass/grafana-zabbix.light.scss';
+
 import {ZabbixAppConfigCtrl} from './components/config';
-import {loadPluginCss} from 'app/plugins/sdk';
+import {loadPluginCss} from 'grafana/app/plugins/sdk';
 
 loadPluginCss({
   dark: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.dark.css',

src/panel-triggers/ack-tooltip.directive.js

@@ -1,16 +1,17 @@
-import angular from 'angular';
 import $ from 'jquery';
-
-System.config({
-  paths: {
-    tether: System.getConfig().baseURL + "plugins/alexanderzobnin-zabbix-app/vendor/npm/tether.min.js"
-  }
-});
-
-let Drop;
-System.amdRequire(["plugins/alexanderzobnin-zabbix-app/vendor/npm/drop.min.js"], (drop) => {
-  Drop = drop;
-});
+import angular from 'angular';
+import Drop from 'tether-drop';
+
+// System.config({
+//   paths: {
+//     tether: System.getConfig().baseURL + "plugins/alexanderzobnin-zabbix-app/vendor/npm/tether.min.js"
+//   }
+// });
+
+// let Drop;
+// System.amdRequire(["plugins/alexanderzobnin-zabbix-app/vendor/npm/drop.min.js"], (drop) => {
+//   Drop = drop;
+// });
 
 /** @ngInject */
 angular

src/panel-triggers/module.js

@@ -12,7 +12,7 @@
  */
 
 import {TriggerPanelCtrl} from './triggers_panel_ctrl';
-import {loadPluginCss} from 'app/plugins/sdk';
+import {loadPluginCss} from 'grafana/app/plugins/sdk';
 import './datasource-selector.directive';
 import './ack-tooltip.directive';
 

src/panel-triggers/triggers_panel_ctrl.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import $ from 'jquery';
 import moment from 'moment';
 import * as utils from '../datasource-zabbix/utils';
-import {PanelCtrl} from 'app/plugins/sdk';
+import {PanelCtrl} from 'grafana/app/plugins/sdk';
 import {triggerPanelOptionsTab} from './options_tab';
 import {triggerPanelTriggersTab} from './triggers_tab';
 import {migratePanelSchema, CURRENT_SCHEMA_VERSION} from './migrations';

webpack/webpack.base.conf.js

@@ -0,0 +1,94 @@
+const path = require('path');
+const webpack = require('webpack');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const ExtractTextPluginLight = new ExtractTextPlugin('./css/grafana-zabbix.light.css');
+const ExtractTextPluginDark = new ExtractTextPlugin('./css/grafana-zabbix.dark.css');
+
+function resolve(dir) {
+  return path.join(__dirname, '..', dir);
+}
+
+module.exports = {
+  target: 'node',
+  context: resolve('src'),
+  entry: {
+    './module': './module.js',
+    'components/config': './components/config.js',
+    'datasource-zabbix/module': './datasource-zabbix/module.js',
+    'panel-triggers/module': './panel-triggers/module.js',
+  },
+  output: {
+    filename: "[name].js",
+    path: resolve('dist'),
+    libraryTarget: "amd"
+  },
+  externals: [
+    // remove the line below if you don't want to use builtin versions
+    'jquery', 'lodash', 'moment', 'angular',
+    'react', 'react-dom',
+    function (context, request, callback) {
+      var prefix = 'grafana/';
+      if (request.indexOf(prefix) === 0) {
+        return callback(null, request.substr(prefix.length));
+      }
+      callback();
+    }
+  ],
+  plugins: [
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new CopyWebpackPlugin([
+      { from: 'plugin.json' },
+      { from: '**/*.html' },
+      { from: 'dashboards/*' },
+      { from: '../README.md' },
+      { from: '**/img/*' },
+    ]),
+    new CleanWebpackPlugin(['dist'], {
+      root: resolve('.')
+    }),
+    ExtractTextPluginLight,
+    ExtractTextPluginDark,
+  ],
+  resolve: {
+    extensions: [".js", ".html", ".scss"]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /(external)/,
+        use: {
+          loader: 'babel-loader',
+          query: {
+            presets: [
+              require.resolve('babel-preset-env')
+            ]
+          }
+        }
+      },
+      {
+        test: /\.html$/,
+        use: {
+          loader: 'html-loader'
+        }
+      },
+      {
+        test: /\.light\.scss$/,
+        use: ExtractTextPluginLight.extract({
+          fallback: 'style-loader',
+          use: ['css-loader', 'sass-loader']
+        })
+      },
+      {
+        test: /\.dark\.scss$/,
+        use: ExtractTextPluginDark.extract({
+          fallback: 'style-loader',
+          use: ['css-loader', 'sass-loader']
+        })
+      },
+    ]
+  }
+};

webpack/webpack.dev.conf.js

@@ -0,0 +1,8 @@
+const baseWebpackConfig = require('./webpack.base.conf');
+
+var conf = baseWebpackConfig;
+conf.watch = true;
+conf.mode = 'development';
+conf.devtool = 'source-map';
+
+module.exports = baseWebpackConfig;

webpack/webpack.prod.conf.js

@@ -0,0 +1,8 @@
+const baseWebpackConfig = require('./webpack.base.conf');
+const NgAnnotatePlugin = require('ng-annotate-webpack-plugin');
+
+var conf = baseWebpackConfig;
+conf.mode = 'production';
+conf.plugins.push(new NgAnnotatePlugin());
+
+module.exports = baseWebpackConfig;