[AIRFLOW-2783][Airflow 2783] Implement eslint for JS code check

Closes #3641 from verdan/AIRFLOW-2783-eslint

.rat-excludes

@@ -3,6 +3,8 @@
 .coverage
 .coveragerc
 .codecov.yml
+.eslintrc
+.eslintignore
 .rat-excludes
 requirements.txt
 .*log

CONTRIBUTING.md

@@ -299,3 +299,19 @@ npm run dev
 Should you add or upgrade a npm package, which involves changing `package.json`, you'll need to re-run `npm install` 
 and push the newly generated `package-lock.json` file so we get the reproducible build.
 
+#### Javascript Style Guide
+
+We try to enforce a more consistent style and try to follow the JS community guidelines. 
+Once you add or modify any javascript code in the project, please make sure it follows the guidelines 
+defined in [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript).
+Apache Airflow uses [ESLint](https://eslint.org/) as a tool for identifying and reporting on patterns in JavaScript,
+which can be used by running any of the following commands.
+
+```bash
+# Check JS code in .js and .html files, and report any errors/warnings
+npm run lint
+
+# Check JS code in .js and .html files, report any errors/warnings and fix them if possible 
+npm run lint:fix
+```
+ 

airflow/www_rbac/.eslintignore

@@ -0,0 +1,8 @@
+**/*{.,-}min.js
+**/*.sh
+**/*.py
+gantt-chart-d3v2.js
+jqClock.min.js
+coverage/**
+static/dist/*
+static/docs/*

airflow/www_rbac/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "extends": "airbnb-base",
+  "parser": "babel-eslint",
+  "plugins": [ "html" ]
+}

airflow/www_rbac/package.json

@@ -4,7 +4,9 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "NODE_ENV=dev webpack --watch --colors --progress --debug --output-pathinfo --devtool eval-cheap-source-map --mode development",
     "prod": "NODE_ENV=production node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js -p --colors --progress",
-    "build": "NODE_ENV=production webpack --colors --progress"
+    "build": "NODE_ENV=production webpack --colors --progress",
+    "lint": "eslint --ignore-path=.eslintignore --ext .js,.html .",
+    "lint:fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.html ."
   },
   "author": "Apache",
   "license": "Apache-2.0",
@@ -26,6 +28,7 @@
   "devDependencies": {
     "babel": "^6.23.0",
     "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.6",
     "babel-istanbul": "^0.12.2",
     "babel-loader": "^7.1.4",
     "babel-plugin-css-modules-transform": "^1.6.1",
@@ -33,6 +36,13 @@
     "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^4.5.2",
     "css-loader": "^0.28.11",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb-base": "^13.0.0",
+    "eslint-plugin-html": "^4.0.5",
+    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-node": "^7.0.1",
+    "eslint-plugin-promise": "^3.8.0",
+    "eslint-plugin-standard": "^3.1.0",
     "file-loader": "^1.1.11",
     "imports-loader": "^0.8.0",
     "mini-css-extract-plugin": "^0.4.1",

airflow/www_rbac/webpack.config.js

@@ -22,7 +22,7 @@ const path = require('path');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 // Input Directory (airflow/www_rbac)
 // noinspection JSUnresolvedVariable
@@ -34,13 +34,13 @@ const BUILD_DIR = path.resolve(__dirname, './static/dist');
 
 const config = {
   entry: {
-    connectionForm: STATIC_DIR + '/js/connection_form.js',
-    clock: STATIC_DIR + '/js/clock.js',
-    ganttChartD3v2: STATIC_DIR + '/js/gantt-chart-d3v2.js',
+    connectionForm: `${STATIC_DIR}/js/connection_form.js`,
+    clock: `${STATIC_DIR}/js/clock.js`,
+    ganttChartD3v2: `${STATIC_DIR}/js/gantt-chart-d3v2.js`,
     styleBundle: [
-      STATIC_DIR + '/css/main.css',
-      STATIC_DIR + '/css/bootstrap-theme.css'
-      ]
+      `${STATIC_DIR}/css/main.css`,
+      `${STATIC_DIR}/css/bootstrap-theme.css`,
+    ],
   },
   output: {
     path: BUILD_DIR,
@@ -71,8 +71,8 @@ const config = {
         include: STATIC_DIR,
         use: [
           MiniCssExtractPlugin.loader,
-          "css-loader"
-        ]
+          'css-loader',
+        ],
       },
       /* for css linking images */
       {
@@ -96,12 +96,12 @@ const config = {
         test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         loader: 'file-loader',
       },
-    ]
+    ],
   },
   plugins: [
     new ManifestPlugin(),
     new CleanWebpackPlugin(['static/dist']),
-    new MiniCssExtractPlugin({filename: '[name].[chunkhash].css'}),
+    new MiniCssExtractPlugin({ filename: '[name].[chunkhash].css' }),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify(process.env.NODE_ENV),
@@ -111,17 +111,19 @@ const config = {
     // this seems like an efficient solution for now. Will update that once
     // we'll have the dependencies imported within the custom JS
     new CopyWebpackPlugin([
-      {from: 'node_modules/nvd3/build/\*.min.\*',flatten:true},
+      { from: 'node_modules/nvd3/build/*.min.*', flatten: true },
       // Update this when upgrade d3 package, as the path in new D3 is different
-      {from: 'node_modules/d3/d3.min.\*', flatten:true},
-      {from: 'node_modules/dagre-d3/dist/\*.min.\*', flatten:true},
-      {from: 'node_modules/d3-tip/dist/index.js', to:'d3-tip.js', flatten:true},
-      {from: 'node_modules/bootstrap-3-typeahead/\*min.\*', flatten:true},
-      {from: 'node_modules/bootstrap-toggle/**/*bootstrap-toggle.min.\*',
-        flatten:true},
-      {from: 'node_modules/datatables.net/**/*\*.min.\*',flatten:true},
-      {from: 'node_modules/datatables.net-bs/**/*\*.min.\*',flatten:true},
-    ], {copyUnmodified: true})
+      { from: 'node_modules/d3/d3.min.*', flatten: true },
+      { from: 'node_modules/dagre-d3/dist/*.min.*', flatten: true },
+      { from: 'node_modules/d3-tip/dist/index.js', to: 'd3-tip.js', flatten: true },
+      { from: 'node_modules/bootstrap-3-typeahead/*min.*', flatten: true },
+      {
+        from: 'node_modules/bootstrap-toggle/**/*bootstrap-toggle.min.*',
+        flatten: true,
+      },
+      { from: 'node_modules/datatables.net/**/**.min.*', flatten: true },
+      { from: 'node_modules/datatables.net-bs/**/**.min.*', flatten: true },
+    ], { copyUnmodified: true }),
   ],
 };