Merge branch 'webpack'

.babelrc

@@ -1,5 +1,5 @@
 {
   "presets": [
-    "es2015"
+    "env"
   ]
 }

.circleci/config.yml

@@ -30,6 +30,25 @@ jobs:
           - ./node_modules
       - run: npm run build
 
+  lint:
+    working_directory: ~/alexanderzobnin/grafana-zabbix
+    docker:
+      - image: circleci/node:8
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - dependency-cache-{{ checksum "yarn.lock" }}
+      - run:
+          name: yarn install
+          command: 'yarn install --pure-lockfile --no-progress'
+          no_output_timeout: 15m
+      - save_cache:
+          key: dependency-cache-{{ checksum "yarn.lock" }}
+          paths:
+          - ./node_modules
+      - run: npm run lint
+
   test:
     working_directory: ~/alexanderzobnin/grafana-zabbix
     environment:
@@ -68,6 +87,8 @@ workflows:
     jobs:
       - build:
           filters: *filter-only-master
+      - lint:
+          filters: *filter-only-master
       - test:
           filters: *filter-only-master
 
@@ -75,5 +96,7 @@ workflows:
     jobs:
       - build:
           filters: *filter-not-release-or-master
+      - lint:
+          filters: *filter-not-release-or-master
       - test:
           filters: *filter-not-release-or-master

.gitignore

@@ -18,17 +18,15 @@ docs/site/
 dist/test/
 dist/test-setup/
 
-vendor/npm
+vendor
+src/vendor
 src/vendor/npm
 node_modules
-npm-debug.log
 coverage/
-.aws-config.json
-awsconfig
-/emails/dist
-/public_gen
 /tmp
-vendor/phantomjs/phantomjs
+
+# Tools logs
+npm-debug.log
 yarn-error.log
 
 # Built plugin

.jshintrc

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

Gruntfile.js

@@ -1,190 +1,24 @@
 module.exports = function(grunt) {
 
-  const sass = require('node-sass');
   require('load-grunt-tasks')(grunt);
 
   grunt.loadNpmTasks('grunt-execute');
-  grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-benchmark');
 
   grunt.initConfig({
-
-    clean: {
-      dist: {
-        src: ["dist"]
-      },
-      test: {
-        src: ["dist/test"]
-      },
-      vendor: {
-        src: ["vendor"]
-      },
-      tmp: {
-        src: ["tmp"]
-      }
-    },
-
-    copy: {
-      node_modules: {
-        cwd: './node_modules',
-        expand: true,
-        flatten: true,
-        filter: 'isFile',
-        src: [
-          'tether-drop/dist/js/drop.min.js',
-          'tether/dist/js/tether.min.js',
-        ],
-        dest: 'vendor/npm'
-      },
-      vendor_to_dist: {
-        cwd: 'vendor',
-        expand: true,
-        src: [
-          '**/*'
-        ],
-        dest: 'dist/vendor'
-      },
-      src_to_dist: {
-        cwd: 'src',
-        expand: true,
-        src: [
-          '**/*',
-          '!datasource-zabbix/*.js',
-          '!panel-triggers/*.js',
-          '!components/*.js',
-          '!vendor/*.js',
-          '!module.js',
-          '!**/*.scss'
-        ],
-        dest: 'dist/'
-      },
-      pluginDef: {
-        expand: true,
-        src: ['plugin.json'],
-        dest: 'dist/',
-      }
-    },
-
-    watch: {
-      rebuild_all: {
-        files: ['src/**/*', 'plugin.json'],
-        tasks: ['watchTask'],
-        options: {spawn: false}
-      },
-    },
-
-    babel: {
-      options: {
-        presets: ["es2015"]
-      },
-      dist: {
-        options: {
-          sourceMap: true,
-          plugins: ['transform-es2015-modules-systemjs', "transform-es2015-for-of"]
-        },
-        files: [{
-          cwd: 'src',
-          expand: true,
-          src: [
-            'datasource-zabbix/**/*.js',
-            'panel-triggers/*.js',
-            'components/*.js',
-            'vendor/*.js',
-            'module.js',
-          ],
-          dest: 'dist/'
-        }]
-      },
-      distTestNoSystemJs: {
-        files: [{
-          cwd: 'src',
-          expand: true,
-          src: ['**/*.js'],
-          dest: 'dist/test'
-        }]
-      },
-      distTestsSpecsNoSystemJs: {
-        files: [{
-          expand: true,
-          cwd: 'specs',
-          src: ['**/*.js'],
-          dest: 'dist/test/specs'
-        }]
-      }
-    },
-
-    sass: {
-      options: {
-        implementation: sass,
-        sourceMap: true
-      },
-      dist: {
-        files: {
-          'dist/css/grafana-zabbix.light.css': 'src/sass/grafana-zabbix.light.scss',
-          'dist/css/grafana-zabbix.dark.css': 'src/sass/grafana-zabbix.dark.scss'
-        }
-      }
-    },
-
-    jshint: {
-      source: {
-        files: {
-          src: ['src/**/*.js'],
-        }
-      },
-      options: {
-        jshintrc: true,
-        reporter: require('jshint-stylish'),
-        ignores: [
-          'node_modules/*',
-          'dist/*',
-          'src/datasource-zabbix/benchmarks/*'
-        ]
-      }
-    },
-
-    jscs: {
-      src: ['src/**/*.js'],
-      options: {
-        config: ".jscs.json",
-      },
-    },
-
     benchmark: {
       options: {
         displayResults: true
       },
       timeseriesBench: {
-        src: ['dist/test/datasource-zabbix/benchmarks/*.js'],
+        src: ['tmp/**/*_bench.js'],
         dest: 'tmp/benchmark.csv'
       }
     }
 
   });
 
-  grunt.registerTask('default', [
-    'clean',
-    'sass',
-    'copy',
-    'jshint',
-    'jscs',
-    'babel:dist'
-  ]);
-
-  grunt.registerTask('watchTask', [
-    'clean:dist',
-    'sass',
-    'copy',
-    'babel:dist',
-    'jshint',
-    'jscs'
-  ]);
-
   grunt.registerTask('bench', [
-    'clean:test',
-    'clean:tmp',
-    'babel:distTestNoSystemJs',
-    'babel:distTestsSpecsNoSystemJs',
     'benchmark'
   ]);
 };

package.json

@@ -4,13 +4,15 @@
   "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",
+    "watch": "webpack --config webpack/webpack.dev.conf.js",
     "test": "jest",
     "jest": "jest --notify --watch",
-    "build": "grunt",
-    "watch": "grunt watch",
     "codecov": "jest --coverage && codecov",
     "ci-test": "jest --coverage && codecov",
-    "benchmark": "grunt bench"
+    "lint": "jshint --reporter=node_modules/jshint-stylish src/ & jscs src/",
+    "benchmark": "webpack --config webpack/webpack.bench.conf.js && grunt bench"
   },
   "repository": {
     "type": "git",
@@ -22,35 +24,36 @@
     "url": "https://github.com/alexanderzobnin/grafana-zabbix/issues"
   },
   "devDependencies": {
-    "babel": "^6.23.0",
+    "babel-core": "^6.26.3",
     "babel-jest": "^23.6.0",
-    "babel-plugin-transform-es2015-for-of": "^6.6.0",
+    "babel-loader": "^7.1.2",
-    "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",
     "grunt-cli": "^1.3.1",
-    "grunt-contrib-clean": "^2.0.0",
-    "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-jshint": "^2.0.0",
-    "grunt-contrib-uglify": "^4.0.0",
-    "grunt-contrib-watch": "^1.1.0",
     "grunt-execute": "^0.2.2",
-    "grunt-jscs": "^3.0.1",
+    "html-loader": "^0.5.5",
-    "grunt-sass": "^3.0.2",
-    "grunt-systemjs-builder": "^1.0.0",
     "jest": "^23.5.0",
+    "jscs": "^3.0.7",
     "jsdom": "~11.3.0",
+    "jshint": "^2.9.6",
     "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",
-    "systemjs": "^0.20.19",
+    "sass-loader": "^7.1.0",
-    "tether-drop": "^1.4.2"
+    "style-loader": "^0.23.1",
+    "tether-drop": "^1.4.2",
+    "webpack": "^4.22.0",
+    "webpack-cli": "^3.1.2"
   },
   "homepage": "http://grafana-zabbix.org"
 }

src/README.md

@@ -1,22 +0,0 @@
-# Zabbix plugin for Grafana
-
-[![GitHub version](https://badge.fury.io/gh/alexanderzobnin%2Fgrafana-zabbix.svg)](https://github.com/alexanderzobnin/grafana-zabbix/releases)
-[![Change Log](https://img.shields.io/badge/change-log-blue.svg?style=flat)](https://github.com/alexanderzobnin/grafana-zabbix/blob/master/CHANGELOG.md)
-[![Docs](https://img.shields.io/badge/docs-latest-red.svg?style=flat)](http://docs.grafana-zabbix.org)
-
-Visualize your Zabbix metrics with the leading open source software for time series analytics.
-
-### Live Demo
-
-See all features overview and dashboards examples at Grafana-Zabbix [Live demo](http://play.grafana-zabbix.org) site.
-
-### Features
-
-- Select multiple metrics [by using Regex](http://docs.grafana-zabbix.org/guides/gettingstarted/#multiple-items-on-one-graph)
-- Create interactive and reusable dashboards with [template variables](http://docs.grafana-zabbix.org/guides/templating/)
-- Show events on graphs with [Annotations](http://docs.grafana.org/reference/annotations/)
-- Display active problems with Triggers panel
-- Transform and shape your data with [metric processing functions](http://docs.grafana-zabbix.org/reference/functions/) (Avg, Median, Min, Max, Multiply, Summarize, Time shift, Alias)
-- Find problems faster with [Alerting](http://docs.grafana-zabbix.org/reference/alerting/) feature
-- Mix metrics from multiple data sources in the same dashboard or even graph
-- Discover and share [dashboards](https://grafana.com/dashboards) in the official library

src/datasource-zabbix/benchmarks/timeseries_bench.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import ts from '../timeseries';
 
+/* jshint maxlen: false */
 let datapoints = [[10.7104, 1498409636085], [10.578, 1498409651011], [10.5985, 1498409666628], [10.6877, 1498409681525], [10.5495, 1498409696586], [10.5981, 1498409711009], [10.5076, 1498409726949], [11.4807, 1498409741853], [11.6165, 1498409756165], [11.8575, 1498409771018], [11.9936, 1498409786056], [10.7566, 1498409801942], [10.7484, 1498409816010], [10.6038, 1498409831018], [10.2932, 1498409846010], [10.4912, 1498409861946], [10.4151, 1498409876871], [10.2401, 1498409891710], [10.4921, 1498409906143], [10.4413, 1498409921477], [10.6318, 1498409936147], [10.5277, 1498409951915], [10.6333, 1498409966052], [10.6417, 1498409981944], [10.4505, 1498409996867], [10.5812, 1498410011770], [10.4934, 1498410026573], [10.5731, 1498410041317], [10.5, 1498410056213], [10.6505, 1498410071013], [9.4035, 1498410086387]];
 
 let series_set = [

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,4 +1,3 @@
-import { loadPluginCss } from 'app/plugins/sdk';
 import { ZabbixDatasource } from './datasource';
 import { ZabbixQueryController } from './query.controller';
 import { ZabbixDSConfigController } from './config.controller';
@@ -6,11 +5,6 @@ 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,21 +1,12 @@
-import angular from 'angular';
 import $ from 'jquery';
+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
   .module('grafana.directives')
-  .directive('ackTooltip', function($sanitize, $compile) {
+  .directive('ackTooltip',
+  /** @ngInject */
+  function($sanitize, $compile) {
     let buttonTemplate = '<a bs-tooltip="\'Acknowledges ({{trigger.acknowledges.length}})\'"' +
                           '<i ng-class="' +
                             "{'fa fa-comments': trigger.acknowledges.length, " +

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';

src/test-setup/jest-setup.js

@@ -1,9 +1,8 @@
 // JSHint options
 /* globals global: false */
 
-import {JSDOM} from 'jsdom';
+import { JSDOM } from 'jsdom';
-import System from 'systemjs';
+import { PanelCtrl } from './panelStub';
-import {PanelCtrl} from './panelStub';
 
 // Mock Grafana modules that are not available outside of the core project
 // Required for loading module.js
@@ -20,7 +19,7 @@ jest.mock('angular', () => {
 }, {virtual: true});
 
 let mockPanelCtrl = PanelCtrl;
-jest.mock('app/plugins/sdk', () => {
+jest.mock('grafana/app/plugins/sdk', () => {
   return {
     QueryCtrl: null,
     loadPluginCss: () => {},
@@ -28,7 +27,7 @@ jest.mock('app/plugins/sdk', () => {
   };
 }, {virtual: true});
 
-jest.mock('app/core/utils/datemath', () => {
+jest.mock('grafana/app/core/utils/datemath', () => {
   const datemath = require('./modules/datemath');
   return {
     parse: datemath.parse,
@@ -37,7 +36,7 @@ jest.mock('app/core/utils/datemath', () => {
   };
 }, {virtual: true});
 
-jest.mock('app/core/table_model', () => {
+jest.mock('grafana/app/core/table_model', () => {
   return class TableModel {
     constructor() {
       this.columns = [];
@@ -63,4 +62,3 @@ let dom = new JSDOM('<html><head><script></script></head><body></body></html>');
 global.window = dom.window;
 global.document = global.window.document;
 global.Node = window.Node;
-global.System = System;

webpack/webpack.base.conf.js

@@ -0,0 +1,92 @@
+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: ['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.bench.conf.js

@@ -0,0 +1,37 @@
+const path = require('path');
+const baseWebpackConfig = require('./webpack.base.conf');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+
+function resolve(dir) {
+  return path.join(__dirname, '..', dir);
+}
+
+var conf = baseWebpackConfig;
+conf.mode = 'development';
+conf.entry = {
+  'datasource-zabbix/benchmarks/timeseries_bench': './datasource-zabbix/benchmarks/timeseries_bench.js',
+};
+conf.output = {
+  filename: "[name].js",
+  path: resolve('tmp/dist'),
+  libraryTarget: "commonjs2"
+};
+conf.plugins = [
+  new CleanWebpackPlugin(['tmp'], {
+    root: resolve('.')
+  }),
+];
+conf.module.rules = [
+  {
+    test: /\.js$/,
+    exclude: /(external)/,
+    use: {
+      loader: 'babel-loader',
+      query: {
+        presets: ['babel-preset-env']
+      }
+    }
+  },
+];
+
+module.exports = baseWebpackConfig;

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;