You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by ah...@apache.org on 2017/04/20 04:52:41 UTC

[2/8] zeppelin git commit: [ZEPPELIN-1940] lint rule set is NOT applied at all.

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js b/zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js
index 930e435..f99fa3d 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js
@@ -12,233 +12,232 @@
  * limitations under the License.
  */
 
-import Visualization from '../visualization';
+import Visualization from '../visualization'
 
 /**
  * Visualize data in table format
  */
 export default class Nvd3ChartVisualization extends Visualization {
-  constructor(targetEl, config) {
-    super(targetEl, config);
-    this.targetEl.append('<svg></svg>');
-  };
+  constructor (targetEl, config) {
+    super(targetEl, config)
+    this.targetEl.append('<svg></svg>')
+  }
 
-  refresh() {
+  refresh () {
     if (this.chart) {
-      this.chart.update();
+      this.chart.update()
     }
-  };
+  }
 
-  render(data) {
-    var type = this.type();
-    var d3g = data.d3g;
+  render (data) {
+    let type = this.type()
+    let d3g = data.d3g
 
     if (!this.chart) {
-      this.chart = nv.models[type]();
+      this.chart = nv.models[type]()
     }
 
-    this.configureChart(this.chart);
+    this.configureChart(this.chart)
 
-    var animationDuration = 300;
-    var numberOfDataThreshold = 150;
-    var height = this.targetEl.height();
+    let animationDuration = 300
+    let numberOfDataThreshold = 150
+    let height = this.targetEl.height()
 
     // turn off animation when dataset is too large. (for performance issue)
     // still, since dataset is large, the chart content sequentially appears like animated
     try {
       if (d3g[0].values.length > numberOfDataThreshold) {
-        animationDuration = 0;
+        animationDuration = 0
       }
-    } catch (ignoreErr) {
-    }
+    } catch (err) { /** ignore */ }
 
     d3.select('#' + this.targetEl[0].id + ' svg')
       .attr('height', height)
       .datum(d3g)
       .transition()
       .duration(animationDuration)
-      .call(this.chart);
-    d3.select('#' + this.targetEl[0].id + ' svg').style.height = height + 'px';
-  };
+      .call(this.chart)
+    d3.select('#' + this.targetEl[0].id + ' svg').style.height = height + 'px'
+  }
 
-  type() {
+  type () {
     // override this and return chart type
-  };
+  }
 
-  configureChart(chart) {
+  configureChart (chart) {
     // override this to configure chart
-  };
+  }
 
-  groupedThousandsWith3DigitsFormatter(x) {
-    return d3.format(',')(d3.round(x, 3));
-  };
+  groupedThousandsWith3DigitsFormatter (x) {
+    return d3.format(',')(d3.round(x, 3))
+  }
 
-  customAbbrevFormatter(x) {
-    var s = d3.format('.3s')(x);
+  customAbbrevFormatter (x) {
+    let s = d3.format('.3s')(x)
     switch (s[s.length - 1]) {
-      case 'G': return s.slice(0, -1) + 'B';
+      case 'G': return s.slice(0, -1) + 'B'
     }
-    return s;
-  };
+    return s
+  }
 
-  defaultY() {
-    return 0;
-  };
+  defaultY () {
+    return 0
+  }
 
-  xAxisTickFormat(d, xLabels) {
+  xAxisTickFormat (d, xLabels) {
     if (xLabels[d] && (isNaN(parseFloat(xLabels[d])) || !isFinite(xLabels[d]))) { // to handle string type xlabel
-      return xLabels[d];
+      return xLabels[d]
     } else {
-      return d;
+      return d
     }
-  };
+  }
 
-  yAxisTickFormat(d) {
-    if (Math.abs(d) >= Math.pow(10,6)) {
-      return this.customAbbrevFormatter(d);
+  yAxisTickFormat (d) {
+    if (Math.abs(d) >= Math.pow(10, 6)) {
+      return this.customAbbrevFormatter(d)
     }
-    return this.groupedThousandsWith3DigitsFormatter(d);
-  };
+    return this.groupedThousandsWith3DigitsFormatter(d)
+  }
 
-  d3DataFromPivot(
+  d3DataFromPivot (
     schema, rows, keys, groups, values, allowTextXAxis, fillMissingValues, multiBarChart) {
-    var self = this;
+    let self = this
     // construct table data
-    var d3g = [];
+    let d3g = []
 
-    var concat = function(o, n) {
+    let concat = function (o, n) {
       if (!o) {
-        return n;
+        return n
       } else {
-        return o + '.' + n;
+        return o + '.' + n
       }
-    };
+    }
 
-    var getSchemaUnderKey = function(key, s) {
-      for (var c in key.children) {
-        s[c] = {};
-        getSchemaUnderKey(key.children[c], s[c]);
+    const getSchemaUnderKey = function (key, s) {
+      for (let c in key.children) {
+        s[c] = {}
+        getSchemaUnderKey(key.children[c], s[c])
       }
-    };
+    }
 
-    var traverse = function(sKey, s, rKey, r, func, rowName, rowValue, colName) {
-      //console.log("TRAVERSE sKey=%o, s=%o, rKey=%o, r=%o, rowName=%o, rowValue=%o, colName=%o", sKey, s, rKey, r, rowName, rowValue, colName);
+    const traverse = function (sKey, s, rKey, r, func, rowName, rowValue, colName) {
+      // console.log("TRAVERSE sKey=%o, s=%o, rKey=%o, r=%o, rowName=%o, rowValue=%o, colName=%o", sKey, s, rKey, r, rowName, rowValue, colName);
 
       if (s.type === 'key') {
-        rowName = concat(rowName, sKey);
-        rowValue = concat(rowValue, rKey);
+        rowName = concat(rowName, sKey)
+        rowValue = concat(rowValue, rKey)
       } else if (s.type === 'group') {
-        colName = concat(colName, rKey);
+        colName = concat(colName, rKey)
       } else if (s.type === 'value' && sKey === rKey || valueOnly) {
-        colName = concat(colName, rKey);
-        func(rowName, rowValue, colName, r);
+        colName = concat(colName, rKey)
+        func(rowName, rowValue, colName, r)
       }
 
-      for (var c in s.children) {
+      for (let c in s.children) {
         if (fillMissingValues && s.children[c].type === 'group' && r[c] === undefined) {
-          var cs = {};
-          getSchemaUnderKey(s.children[c], cs);
-          traverse(c, s.children[c], c, cs, func, rowName, rowValue, colName);
-          continue;
+          let cs = {}
+          getSchemaUnderKey(s.children[c], cs)
+          traverse(c, s.children[c], c, cs, func, rowName, rowValue, colName)
+          continue
         }
 
-        for (var j in r) {
+        for (let j in r) {
           if (s.children[c].type === 'key' || c === j) {
-            traverse(c, s.children[c], j, r[j], func, rowName, rowValue, colName);
+            traverse(c, s.children[c], j, r[j], func, rowName, rowValue, colName)
           }
         }
       }
-    };
+    }
 
-    var valueOnly = (keys.length === 0 && groups.length === 0 && values.length > 0);
-    var noKey = (keys.length === 0);
-    var isMultiBarChart = multiBarChart;
+    const valueOnly = (keys.length === 0 && groups.length === 0 && values.length > 0)
+    let noKey = (keys.length === 0)
+    let isMultiBarChart = multiBarChart
 
-    var sKey = Object.keys(schema)[0];
+    let sKey = Object.keys(schema)[0]
 
-    var rowNameIndex = {};
-    var rowIdx = 0;
-    var colNameIndex = {};
-    var colIdx = 0;
-    var rowIndexValue = {};
+    let rowNameIndex = {}
+    let rowIdx = 0
+    let colNameIndex = {}
+    let colIdx = 0
+    let rowIndexValue = {}
 
-    for (var k in rows) {
-      traverse(sKey, schema[sKey], k, rows[k], function(rowName, rowValue, colName, value) {
-        //console.log("RowName=%o, row=%o, col=%o, value=%o", rowName, rowValue, colName, value);
+    for (let k in rows) {
+      traverse(sKey, schema[sKey], k, rows[k], function (rowName, rowValue, colName, value) {
+        // console.log("RowName=%o, row=%o, col=%o, value=%o", rowName, rowValue, colName, value);
         if (rowNameIndex[rowValue] === undefined) {
-          rowIndexValue[rowIdx] = rowValue;
-          rowNameIndex[rowValue] = rowIdx++;
+          rowIndexValue[rowIdx] = rowValue
+          rowNameIndex[rowValue] = rowIdx++
         }
 
         if (colNameIndex[colName] === undefined) {
-          colNameIndex[colName] = colIdx++;
+          colNameIndex[colName] = colIdx++
         }
-        var i = colNameIndex[colName];
+        let i = colNameIndex[colName]
         if (noKey && isMultiBarChart) {
-          i = 0;
+          i = 0
         }
 
         if (!d3g[i]) {
           d3g[i] = {
             values: [],
             key: (noKey && isMultiBarChart) ? 'values' : colName
-          };
+          }
         }
 
-        var xVar = isNaN(rowValue) ? ((allowTextXAxis) ? rowValue : rowNameIndex[rowValue]) : parseFloat(rowValue);
-        var yVar = self.defaultY();
-        if (xVar === undefined) { xVar = colName; }
+        let xVar = isNaN(rowValue) ? ((allowTextXAxis) ? rowValue : rowNameIndex[rowValue]) : parseFloat(rowValue)
+        let yVar = self.defaultY()
+        if (xVar === undefined) { xVar = colName }
         if (value !== undefined) {
-          yVar = isNaN(value.value) ? self.defaultY() : parseFloat(value.value) / parseFloat(value.count);
+          yVar = isNaN(value.value) ? self.defaultY() : parseFloat(value.value) / parseFloat(value.count)
         }
         d3g[i].values.push({
           x: xVar,
           y: yVar
-        });
-      });
+        })
+      })
     }
 
     // clear aggregation name, if possible
-    var namesWithoutAggr = {};
-    var colName;
-    var withoutAggr;
+    let namesWithoutAggr = {}
+    let colName
+    let withoutAggr
     // TODO - This part could use som refactoring - Weird if/else with similar actions and variable names
     for (colName in colNameIndex) {
-      withoutAggr = colName.substring(0, colName.lastIndexOf('('));
+      withoutAggr = colName.substring(0, colName.lastIndexOf('('))
       if (!namesWithoutAggr[withoutAggr]) {
-        namesWithoutAggr[withoutAggr] = 1;
+        namesWithoutAggr[withoutAggr] = 1
       } else {
-        namesWithoutAggr[withoutAggr]++;
+        namesWithoutAggr[withoutAggr]++
       }
     }
 
     if (valueOnly) {
-      for (var valueIndex = 0; valueIndex < d3g[0].values.length; valueIndex++) {
-        colName = d3g[0].values[valueIndex].x;
+      for (let valueIndex = 0; valueIndex < d3g[0].values.length; valueIndex++) {
+        colName = d3g[0].values[valueIndex].x
         if (!colName) {
-          continue;
+          continue
         }
 
-        withoutAggr = colName.substring(0, colName.lastIndexOf('('));
+        withoutAggr = colName.substring(0, colName.lastIndexOf('('))
         if (namesWithoutAggr[withoutAggr] <= 1) {
-          d3g[0].values[valueIndex].x = withoutAggr;
+          d3g[0].values[valueIndex].x = withoutAggr
         }
       }
     } else {
-      for (var d3gIndex = 0; d3gIndex < d3g.length; d3gIndex++) {
-        colName = d3g[d3gIndex].key;
-        withoutAggr = colName.substring(0, colName.lastIndexOf('('));
+      for (let d3gIndex = 0; d3gIndex < d3g.length; d3gIndex++) {
+        colName = d3g[d3gIndex].key
+        withoutAggr = colName.substring(0, colName.lastIndexOf('('))
         if (namesWithoutAggr[withoutAggr] <= 1) {
-          d3g[d3gIndex].key = withoutAggr;
+          d3g[d3gIndex].key = withoutAggr
         }
       }
 
       // use group name instead of group.value as a column name, if there're only one group and one value selected.
       if (groups.length === 1 && values.length === 1) {
-        for (d3gIndex = 0; d3gIndex < d3g.length; d3gIndex++) {
-          colName = d3g[d3gIndex].key;
-          colName = colName.split('.').slice(0, -1).join('.');
-          d3g[d3gIndex].key = colName;
+        for (let d3gIndex = 0; d3gIndex < d3g.length; d3gIndex++) {
+          colName = d3g[d3gIndex].key
+          colName = colName.split('.').slice(0, -1).join('.')
+          d3g[d3gIndex].key = colName
         }
       }
     }
@@ -246,17 +245,17 @@ export default class Nvd3ChartVisualization extends Visualization {
     return {
       xLabels: rowIndexValue,
       d3g: d3g
-    };
-  };
+    }
+  }
 
   /**
    * method will be invoked when visualization need to be destroyed.
    * Don't need to destroy this.targetEl.
    */
-  destroy() {
+  destroy () {
     if (this.chart) {
-      d3.selectAll('#' + this.targetEl[0].id + ' svg > *').remove();
-      this.chart = undefined;
+      d3.selectAll('#' + this.targetEl[0].id + ' svg > *').remove()
+      this.chart = undefined
     }
-  };
+  }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/app/visualization/builtins/visualization-piechart.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-piechart.js b/zeppelin-web/src/app/visualization/builtins/visualization-piechart.js
index f74ecd0..4f80654 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-piechart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-piechart.js
@@ -12,29 +12,29 @@
  * limitations under the License.
  */
 
-import Nvd3ChartVisualization from './visualization-nvd3chart';
-import PivotTransformation from '../../tabledata/pivot';
+import Nvd3ChartVisualization from './visualization-nvd3chart'
+import PivotTransformation from '../../tabledata/pivot'
 
 /**
  * Visualize data in pie chart
  */
 export default class PiechartVisualization extends Nvd3ChartVisualization {
-  constructor(targetEl, config) {
-    super(targetEl, config);
-    this.pivot = new PivotTransformation(config);
-  };
+  constructor (targetEl, config) {
+    super(targetEl, config)
+    this.pivot = new PivotTransformation(config)
+  }
 
-  type() {
-    return 'pieChart';
-  };
+  type () {
+    return 'pieChart'
+  }
 
-  getTransformation() {
-    return this.pivot;
-  };
+  getTransformation () {
+    return this.pivot
+  }
 
-  render(pivot) {
+  render (pivot) {
     // [ZEPPELIN-2253] New chart function will be created each time inside super.render()
-    this.chart = null;
+    this.chart = null
     const d3Data = this.d3DataFromPivot(
       pivot.schema,
       pivot.rows,
@@ -43,41 +43,41 @@ export default class PiechartVisualization extends Nvd3ChartVisualization {
       pivot.values,
       true,
       false,
-      false);
-    const d = d3Data.d3g;
+      false)
+    const d = d3Data.d3g
 
-    let generateLabel;
+    let generateLabel
     // data is grouped
     if (pivot.groups && pivot.groups.length > 0) {
-      generateLabel = (suffix, prefix) => `${prefix}.${suffix}`;
+      generateLabel = (suffix, prefix) => `${prefix}.${suffix}`
     } else { // data isn't grouped
-      generateLabel = suffix => suffix;
+      generateLabel = suffix => suffix
     }
 
     let d3g = d.map(group => {
       return group.values.map(row => ({
         label: generateLabel(row.x, group.key),
         value: row.y
-      }));
-    });
+      }))
+    })
     // the map function returns d3g as a nested array
     // [].concat flattens it, http://stackoverflow.com/a/10865042/5154397
-    d3g = [].concat.apply([], d3g);
-    super.render({d3g: d3g});
-  };
+    d3g = [].concat.apply([], d3g) // eslint-disable-line prefer-spread
+    super.render({d3g: d3g})
+  }
 
   /**
    * Set new config
    */
-  setConfig(config) {
-    super.setConfig(config);
-    this.pivot.setConfig(config);
-  };
+  setConfig (config) {
+    super.setConfig(config)
+    this.pivot.setConfig(config)
+  }
 
-  configureChart(chart) {
-    chart.x(function(d) { return d.label;})
-	 .y(function(d) { return d.value;})
-	 .showLabels(false)
-	 .showTooltipPercent(true);
-  };
+  configureChart (chart) {
+    chart.x(function (d) { return d.label })
+      .y(function (d) { return d.value })
+      .showLabels(false)
+      .showTooltipPercent(true)
+  }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js b/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js
index 6161b3c..2c8ba3e 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js
@@ -12,15 +12,15 @@
  * limitations under the License.
  */
 
-import Nvd3ChartVisualization from './visualization-nvd3chart';
-import ColumnselectorTransformation from '../../tabledata/columnselector';
+import Nvd3ChartVisualization from './visualization-nvd3chart'
+import ColumnselectorTransformation from '../../tabledata/columnselector'
 
 /**
  * Visualize data in scatter char
  */
 export default class ScatterchartVisualization extends Nvd3ChartVisualization {
-  constructor(targetEl, config) {
-    super(targetEl, config);
+  constructor (targetEl, config) {
+    super(targetEl, config)
 
     this.columnselectorProps = [
       {
@@ -41,198 +41,196 @@ export default class ScatterchartVisualization extends Nvd3ChartVisualization {
                   or the number of distinct values are bigger than 5% of total number of values.</li>
                   <li>Size field button turns to grey when the option you chose is not valid.</li>`
       }
-    ];
-    this.columnselector = new ColumnselectorTransformation(config, this.columnselectorProps);
-  };
-
-  type() {
-    return 'scatterChart';
-  };
-
-  getTransformation() {
-    return this.columnselector;
-  };
-
-  render(tableData) {
-    this.tableData = tableData;
-    this.selectDefault();
-    var d3Data = this.setScatterChart(tableData, true);
-    this.xLabels = d3Data.xLabels;
-    this.yLabels = d3Data.yLabels;
-
-    super.render(d3Data);
-  };
-
-  configureChart(chart) {
-    var self = this;
-
-    chart.xAxis.tickFormat(function(d) { // TODO remove round after bump to nvd3 > 1.8.5
-      return self.xAxisTickFormat(Math.round(d * 1e3)/1e3, self.xLabels);
-      });
-
-    chart.yAxis.tickFormat(function(d) { // TODO remove round after bump to nvd3 > 1.8.5
-      return self.yAxisTickFormat(Math.round(d * 1e3)/1e3, self.yLabels);
-      });
-
-    chart.showDistX(true).showDistY(true);
-    //handle the problem of tooltip not showing when muliple points have same value.
-  };
-
-  yAxisTickFormat(d, yLabels){
-     if (yLabels[d] && (isNaN(parseFloat(yLabels[d])) || !isFinite(yLabels[d]))) { // to handle string type xlabel
-      return yLabels[d];
-     } else {
-      return super.yAxisTickFormat(d);
-     }
-   }
-
-  selectDefault() {
+    ]
+    this.columnselector = new ColumnselectorTransformation(config, this.columnselectorProps)
+  }
+
+  type () {
+    return 'scatterChart'
+  }
+
+  getTransformation () {
+    return this.columnselector
+  }
+
+  render (tableData) {
+    this.tableData = tableData
+    this.selectDefault()
+    let d3Data = this.setScatterChart(tableData, true)
+    this.xLabels = d3Data.xLabels
+    this.yLabels = d3Data.yLabels
+
+    super.render(d3Data)
+  }
+
+  configureChart (chart) {
+    let self = this
+
+    chart.xAxis.tickFormat(function (d) { // TODO remove round after bump to nvd3 > 1.8.5
+      return self.xAxisTickFormat(Math.round(d * 1e3) / 1e3, self.xLabels)
+    })
+
+    chart.yAxis.tickFormat(function (d) { // TODO remove round after bump to nvd3 > 1.8.5
+      return self.yAxisTickFormat(Math.round(d * 1e3) / 1e3, self.yLabels)
+    })
+
+    chart.showDistX(true).showDistY(true)
+    // handle the problem of tooltip not showing when muliple points have same value.
+  }
+
+  yAxisTickFormat (d, yLabels) {
+    if (yLabels[d] && (isNaN(parseFloat(yLabels[d])) || !isFinite(yLabels[d]))) { // to handle string type xlabel
+      return yLabels[d]
+    } else {
+      return super.yAxisTickFormat(d)
+    }
+  }
+
+  selectDefault () {
     if (!this.config.xAxis && !this.config.yAxis) {
       if (this.tableData.columns.length > 1) {
-        this.config.xAxis = this.tableData.columns[0];
-        this.config.yAxis = this.tableData.columns[1];
+        this.config.xAxis = this.tableData.columns[0]
+        this.config.yAxis = this.tableData.columns[1]
       } else if (this.tableData.columns.length === 1) {
-        this.config.xAxis = this.tableData.columns[0];
+        this.config.xAxis = this.tableData.columns[0]
       }
     }
-  };
-
-  setScatterChart(data, refresh) {
-    var xAxis = this.config.xAxis;
-    var yAxis = this.config.yAxis;
-    var group = this.config.group;
-    var size = this.config.size;
-
-    var xValues = [];
-    var yValues = [];
-    var rows = {};
-    var d3g = [];
-
-    var rowNameIndex = {};
-    var colNameIndex = {};
-    var grpNameIndex = {};
-    var rowIndexValue = {};
-    var colIndexValue = {};
-    var grpIndexValue = {};
-    var rowIdx = 0;
-    var colIdx = 0;
-    var grpIdx = 0;
-    var grpName = '';
-
-    var xValue;
-    var yValue;
-    var row;
+  }
+
+  setScatterChart (data, refresh) {
+    let xAxis = this.config.xAxis
+    let yAxis = this.config.yAxis
+    let group = this.config.group
+    let size = this.config.size
+
+    let xValues = []
+    let yValues = []
+    let rows = {}
+    let d3g = []
+
+    let rowNameIndex = {}
+    let colNameIndex = {}
+    let grpNameIndex = {}
+    let rowIndexValue = {}
+    let colIndexValue = {}
+    let grpIndexValue = {}
+    let rowIdx = 0
+    let colIdx = 0
+    let grpIdx = 0
+    let grpName = ''
+
+    let xValue
+    let yValue
+    let row
 
     if (!xAxis && !yAxis) {
       return {
         d3g: []
-      };
+      }
     }
 
-
-
-
-    for (var i = 0; i < data.rows.length; i++) {
-      row = data.rows[i];
+    for (let i = 0; i < data.rows.length; i++) {
+      row = data.rows[i]
       if (xAxis) {
-        xValue = row[xAxis.index];
-        xValues[i] = xValue;
+        xValue = row[xAxis.index]
+        xValues[i] = xValue
       }
       if (yAxis) {
-        yValue = row[yAxis.index];
-        yValues[i] = yValue;
+        yValue = row[yAxis.index]
+        yValues[i] = yValue
       }
     }
 
-    var isAllDiscrete = ((xAxis && yAxis && this.isDiscrete(xValues) && this.isDiscrete(yValues)) ||
+    let isAllDiscrete = ((xAxis && yAxis && this.isDiscrete(xValues) && this.isDiscrete(yValues)) ||
     (!xAxis && this.isDiscrete(yValues)) ||
-    (!yAxis && this.isDiscrete(xValues)));
+    (!yAxis && this.isDiscrete(xValues)))
 
     if (isAllDiscrete) {
-      rows = this.setDiscreteScatterData(data);
+      rows = this.setDiscreteScatterData(data)
     } else {
-      rows = data.rows;
+      rows = data.rows
     }
 
     if (!group && isAllDiscrete) {
-      grpName = 'count';
+      grpName = 'count'
     } else if (!group && !size) {
       if (xAxis && yAxis) {
-        grpName = '(' + xAxis.name + ', ' + yAxis.name + ')';
+        grpName = '(' + xAxis.name + ', ' + yAxis.name + ')'
       } else if (xAxis && !yAxis) {
-        grpName = xAxis.name;
+        grpName = xAxis.name
       } else if (!xAxis && yAxis) {
-        grpName = yAxis.name;
+        grpName = yAxis.name
       }
     } else if (!group && size) {
-      grpName = size.name;
+      grpName = size.name
     }
 
-    var epsilon = 1e-4; // TODO remove after bump to nvd3 > 1.8.5
+    let epsilon = 1e-4 // TODO remove after bump to nvd3 > 1.8.5
 
-    for (i = 0; i < rows.length; i++) {
-      row = rows[i];
+    for (let i = 0; i < rows.length; i++) {
+      row = rows[i]
       if (xAxis) {
-        xValue = row[xAxis.index];
+        xValue = row[xAxis.index]
       }
       if (yAxis) {
-        yValue = row[yAxis.index];
+        yValue = row[yAxis.index]
       }
       if (group) {
-        grpName = row[group.index];
+        grpName = row[group.index]
       }
-      var sz = (isAllDiscrete) ? row[row.length - 1] : ((size) ? row[size.index] : 1);
+      let sz = (isAllDiscrete) ? row[row.length - 1] : ((size) ? row[size.index] : 1)
 
       if (grpNameIndex[grpName] === undefined) {
-        grpIndexValue[grpIdx] = grpName;
-        grpNameIndex[grpName] = grpIdx++;
+        grpIndexValue[grpIdx] = grpName
+        grpNameIndex[grpName] = grpIdx++
       }
 
       if (xAxis && rowNameIndex[xValue] === undefined) {
-        rowIndexValue[rowIdx] = xValue;
-        rowNameIndex[xValue] = rowIdx++;
+        rowIndexValue[rowIdx] = xValue
+        rowNameIndex[xValue] = rowIdx++
       }
 
       if (yAxis && colNameIndex[yValue] === undefined) {
-        colIndexValue[colIdx] = yValue;
-        colNameIndex[yValue] = colIdx++;
+        colIndexValue[colIdx] = yValue
+        colNameIndex[yValue] = colIdx++
       }
 
       if (!d3g[grpNameIndex[grpName]]) {
         d3g[grpNameIndex[grpName]] = {
           key: grpName,
           values: []
-        };
+        }
       }
 
-
       // TODO remove epsilon jitter after bump to nvd3 > 1.8.5
-      var xval, yval = 0;
-      if ( xAxis ){
-        xval = (isNaN(xValue) ? rowNameIndex[xValue] : parseFloat(xValue)) + Math.random() * epsilon;
+      let xval = 0
+      let yval = 0
+      if (xAxis) {
+        xval = (isNaN(xValue) ? rowNameIndex[xValue] : parseFloat(xValue)) + Math.random() * epsilon
       }
-      if ( yAxis ){
-        yval = (isNaN(yValue) ? colNameIndex[yValue] : parseFloat(yValue)) + Math.random() * epsilon;
+      if (yAxis) {
+        yval = (isNaN(yValue) ? colNameIndex[yValue] : parseFloat(yValue)) + Math.random() * epsilon
       }
 
       d3g[grpNameIndex[grpName]].values.push({
         x: xval,
         y: yval,
         size: isNaN(parseFloat(sz)) ? 1 : parseFloat(sz)
-      });
+      })
     }
 
     // TODO remove sort and dedup after bump to nvd3 > 1.8.5
-    var d3gvalues = d3g[grpNameIndex[grpName]].values;
-    d3gvalues.sort(function(a,b){
-                  return ((a['x'] - b['x']) || (a['y'] - b['y']))});
-
-    for (var i = 0; i < d3gvalues.length - 1; ){
-      if ( (Math.abs(d3gvalues[i]['x'] - d3gvalues[i+1]['x']) < epsilon) &&
-           (Math.abs(d3gvalues[i]['y'] - d3gvalues[i+1]['y']) < epsilon) ){
-           d3gvalues.splice(i+1,1);
-      } else{
-        i++;
+    let d3gvalues = d3g[grpNameIndex[grpName]].values
+    d3gvalues.sort(function (a, b) {
+      return ((a['x'] - b['x']) || (a['y'] - b['y']))
+    })
+
+    for (let i = 0; i < d3gvalues.length - 1;) {
+      if ((Math.abs(d3gvalues[i]['x'] - d3gvalues[i + 1]['x']) < epsilon) &&
+           (Math.abs(d3gvalues[i]['y'] - d3gvalues[i + 1]['y']) < epsilon)) {
+        d3gvalues.splice(i + 1, 1)
+      } else {
+        i++
       }
     }
 
@@ -240,33 +238,33 @@ export default class ScatterchartVisualization extends Nvd3ChartVisualization {
       xLabels: rowIndexValue,
       yLabels: colIndexValue,
       d3g: d3g
-    };
-  };
+    }
+  }
 
-  setDiscreteScatterData(data) {
-    var xAxis = this.config.xAxis;
-    var yAxis = this.config.yAxis;
-    var group = this.config.group;
+  setDiscreteScatterData (data) {
+    let xAxis = this.config.xAxis
+    let yAxis = this.config.yAxis
+    let group = this.config.group
 
-    var xValue;
-    var yValue;
-    var grp;
+    let xValue
+    let yValue
+    let grp
 
-    var rows = {};
+    let rows = {}
 
-    for (var i = 0; i < data.rows.length; i++) {
-      var row = data.rows[i];
+    for (let i = 0; i < data.rows.length; i++) {
+      let row = data.rows[i]
       if (xAxis) {
-        xValue = row[xAxis.index];
+        xValue = row[xAxis.index]
       }
       if (yAxis) {
-        yValue = row[yAxis.index];
+        yValue = row[yAxis.index]
       }
       if (group) {
-        grp = row[group.index];
+        grp = row[group.index]
       }
 
-      var key = xValue + ',' + yValue +  ',' + grp;
+      let key = xValue + ',' + yValue + ',' + grp
 
       if (!rows[key]) {
         rows[key] = {
@@ -274,89 +272,89 @@ export default class ScatterchartVisualization extends Nvd3ChartVisualization {
           y: yValue,
           group: grp,
           size: 1
-        };
+        }
       } else {
-        rows[key].size++;
+        rows[key].size++
       }
     }
 
     // change object into array
-    var newRows = [];
-    for (var r in rows) {
-      var newRow = [];
-      if (xAxis) { newRow[xAxis.index] = rows[r].x; }
-      if (yAxis) { newRow[yAxis.index] = rows[r].y; }
-      if (group) { newRow[group.index] = rows[r].group; }
-      newRow[data.rows[0].length] = rows[r].size;
-      newRows.push(newRow);
+    let newRows = []
+    for (let r in rows) {
+      let newRow = []
+      if (xAxis) { newRow[xAxis.index] = rows[r].x }
+      if (yAxis) { newRow[yAxis.index] = rows[r].y }
+      if (group) { newRow[group.index] = rows[r].group }
+      newRow[data.rows[0].length] = rows[r].size
+      newRows.push(newRow)
     }
-    return newRows;
-  };
-
-  isDiscrete(field) {
-    var getUnique = function(f) {
-      var uniqObj = {};
-      var uniqArr = [];
-      var j = 0;
-      for (var i = 0; i < f.length; i++) {
-        var item = f[i];
+    return newRows
+  }
+
+  isDiscrete (field) {
+    let getUnique = function (f) {
+      let uniqObj = {}
+      let uniqArr = []
+      let j = 0
+      for (let i = 0; i < f.length; i++) {
+        let item = f[i]
         if (uniqObj[item] !== 1) {
-          uniqObj[item] = 1;
-          uniqArr[j++] = item;
+          uniqObj[item] = 1
+          uniqArr[j++] = item
         }
       }
-      return uniqArr;
-    };
+      return uniqArr
+    }
 
-    for (var i = 0; i < field.length; i++) {
+    for (let i = 0; i < field.length; i++) {
       if (isNaN(parseFloat(field[i])) &&
         (typeof field[i] === 'string' || field[i] instanceof String)) {
-        return true;
+        return true
       }
     }
 
-    var threshold = 0.05;
-    var unique = getUnique(field);
+    let threshold = 0.05
+    let unique = getUnique(field)
     if (unique.length / field.length < threshold) {
-      return true;
+      return true
     } else {
-      return false;
+      return false
     }
-  };
+  }
 
-  isValidSizeOption(options) {
-    var xValues = [];
-    var yValues = [];
-    var rows = this.tableData.rows;
+  isValidSizeOption (options) {
+    let xValues = []
+    let yValues = []
+    let rows = this.tableData.rows
 
-    for (var i = 0; i < rows.length; i++) {
-      var row = rows[i];
-      var size = row[options.size.index];
+    for (let i = 0; i < rows.length; i++) {
+      let row = rows[i]
+      let size = row[options.size.index]
 
-      //check if the field is numeric
+      // check if the field is numeric
       if (isNaN(parseFloat(size)) || !isFinite(size)) {
-        return false;
+        return false
       }
 
       if (options.xAxis) {
-        var x = row[options.xAxis.index];
-        xValues[i] = x;
+        let x = row[options.xAxis.index]
+        xValues[i] = x
       }
       if (options.yAxis) {
-        var y = row[options.yAxis.index];
-        yValues[i] = y;
+        let y = row[options.yAxis.index]
+        yValues[i] = y
       }
     }
 
-    //check if all existing fields are discrete
-    var isAllDiscrete = ((options.xAxis && options.yAxis && this.isDiscrete(xValues) && this.isDiscrete(yValues)) ||
+    // check if all existing fields are discrete
+    let isAllDiscrete = ((options.xAxis && options.yAxis && this.isDiscrete(xValues) && this.isDiscrete(yValues)) ||
     (!options.xAxis && this.isDiscrete(yValues)) ||
-    (!options.yAxis && this.isDiscrete(xValues)));
+    (!options.yAxis && this.isDiscrete(xValues)))
 
     if (isAllDiscrete) {
-      return false;
+      return false
     }
 
-    return true;
-  };
+    return true
+  }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/app/visualization/builtins/visualization-table.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-table.js b/zeppelin-web/src/app/visualization/builtins/visualization-table.js
index 0c58407..3192ee6 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-table.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-table.js
@@ -12,51 +12,52 @@
  * limitations under the License.
  */
 
-import Visualization from '../visualization';
-import PassthroughTransformation from '../../tabledata/passthrough';
-import HandsonHelper from '../../handsontable/handsonHelper';
+import Visualization from '../visualization'
+import PassthroughTransformation from '../../tabledata/passthrough'
+import HandsonHelper from '../../handsontable/handsonHelper'
 
 /**
  * Visualize data in table format
  */
 export default class TableVisualization extends Visualization {
-  constructor(targetEl, config) {
-    super(targetEl, config);
-    console.log('Init table viz');
-    targetEl.addClass('table');
-    this.passthrough = new PassthroughTransformation(config);
-  };
-
-  refresh() {
-    this.hot.render();
-  };
-
-  render(tableData) {
-    var height = this.targetEl.height();
-    var container = this.targetEl.css('height', height).get(0);
-    var resultRows = tableData.rows;
-    var columnNames = _.pluck(tableData.columns, 'name');
-    var columns = Array.apply(null, Array(tableData.columns.length)).map(function() {
-      return {type: 'text'};
-    });
+  constructor (targetEl, config) {
+    super(targetEl, config)
+    console.log('Init table viz')
+    targetEl.addClass('table')
+    this.passthrough = new PassthroughTransformation(config)
+  }
+
+  refresh () {
+    this.hot.render()
+  }
+
+  render (tableData) {
+    let height = this.targetEl.height()
+    let container = this.targetEl.css('height', height).get(0)
+    let resultRows = tableData.rows
+    let columnNames = _.pluck(tableData.columns, 'name')
+    // eslint-disable-next-line prefer-spread
+    let columns = Array.apply(null, Array(tableData.columns.length)).map(function () {
+      return {type: 'text'}
+    })
 
     if (this.hot) {
-      this.hot.destroy();
+      this.hot.destroy()
     }
 
-    var handsonHelper = new HandsonHelper();
+    let handsonHelper = new HandsonHelper()
     this.hot = new Handsontable(container, handsonHelper.getHandsonTableConfig(
-      columns, columnNames, resultRows));
-    this.hot.validateCells(null);
-  };
+      columns, columnNames, resultRows))
+    this.hot.validateCells(null)
+  }
 
-  destroy() {
+  destroy () {
     if (this.hot) {
-      this.hot.destroy();
+      this.hot.destroy()
     }
-  };
+  }
 
-  getTransformation() {
-    return this.passthrough;
-  };
+  getTransformation () {
+    return this.passthrough
+  }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/app/visualization/visualization.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/visualization.js b/zeppelin-web/src/app/visualization/visualization.js
index ec7ce96..ec89882 100644
--- a/zeppelin-web/src/app/visualization/visualization.js
+++ b/zeppelin-web/src/app/visualization/visualization.js
@@ -16,42 +16,42 @@
  * Base class for visualization
  */
 export default class Visualization {
-  constructor(targetEl, config) {
-    this.targetEl = targetEl;
-    this.config = config;
-    this._dirty = false;
-    this._active = false;
-    this._emitter;
-  };
+  constructor (targetEl, config) {
+    this.targetEl = targetEl
+    this.config = config
+    this._dirty = false
+    this._active = false
+    this._emitter = () => {}
+  }
 
   /**
    * get transformation
    */
-  getTransformation() {
+  getTransformation () {
     // override this
-  };
+  }
 
   /**
    * Method will be invoked when data or configuration changed
    */
-  render(tableData) {
+  render (tableData) {
     // override this
-  };
+  }
 
   /**
    * Refresh visualization.
    */
-  refresh() {
+  refresh () {
     // override this
-  };
+  }
 
   /**
    * method will be invoked when visualization need to be destroyed.
    * Don't need to destroy this.targetEl.
    */
-  destroy() {
+  destroy () {
     // override this
-  };
+  }
 
   /**
    * return {
@@ -59,113 +59,113 @@ export default class Visualization {
    *   scope : an object to bind to template scope
    * }
    */
-  getSetting() {
+  getSetting () {
     // override this
-  };
+  }
 
   /**
    * Activate. invoked when visualization is selected
    */
-  activate() {
+  activate () {
     if (!this._active || this._dirty) {
-      this.refresh();
-      this._dirty = false;
+      this.refresh()
+      this._dirty = false
     }
-    this._active = true;
-  };
+    this._active = true
+  }
 
   /**
    * Activate. invoked when visualization is de selected
    */
-  deactivate() {
-    this._active = false;
-  };
+  deactivate () {
+    this._active = false
+  }
 
   /**
    * Is active
    */
-  isActive() {
-    return this._active;
-  };
+  isActive () {
+    return this._active
+  }
 
   /**
    * When window or paragraph is resized
    */
-  resize() {
+  resize () {
     if (this.isActive()) {
-      this.refresh();
+      this.refresh()
     } else {
-      this._dirty = true;
+      this._dirty = true
     }
-  };
+  }
 
   /**
    * Set new config
    */
-  setConfig(config) {
-    this.config = config;
+  setConfig (config) {
+    this.config = config
     if (this.isActive()) {
-      this.refresh();
+      this.refresh()
     } else {
-      this._dirty = true;
+      this._dirty = true
     }
-  };
+  }
 
   /**
    * Emit config. config will sent to server and saved.
    */
-  emitConfig(config) {
-    this._emitter(config);
-  };
+  emitConfig (config) {
+    this._emitter(config)
+  }
 
   /**
    * render setting
    */
-  renderSetting(targetEl) {
-    var setting = this.getSetting();
+  renderSetting (targetEl) {
+    let setting = this.getSetting()
     if (!setting) {
-      return;
+      return
     }
 
     // already readered
     if (this._scope) {
-      var self = this;
-      this._scope.$apply(function() {
-        for (var k in setting.scope) {
-          self._scope[k] = setting.scope[k];
+      let self = this
+      this._scope.$apply(function () {
+        for (let k in setting.scope) {
+          self._scope[k] = setting.scope[k]
         }
 
-        for (var k in self._prevSettingScope) {
+        for (let k in self._prevSettingScope) {
           if (!setting.scope[k]) {
-            self._scope[k] = setting.scope[k];
+            self._scope[k] = setting.scope[k]
           }
         }
-      });
-      return;
+      })
+      return
     } else {
-      this._prevSettingScope = setting.scope;
+      this._prevSettingScope = setting.scope
     }
 
-    var scope = this._createNewScope();
-    for (var k in setting.scope) {
-      scope[k] = setting.scope[k];
+    let scope = this._createNewScope()
+    for (let k in setting.scope) {
+      scope[k] = setting.scope[k]
     }
-    var template = setting.template;
+    let template = setting.template
 
     if (template.split('\n').length === 1 &&
         template.endsWith('.html')) { // template is url
       this._templateRequest(template).then(t =>
       _renderSetting(this, targetEl, t, scope)
-      );
+      )
     } else {
-      _renderSetting(this, targetEl, template, scope);
+      _renderSetting(this, targetEl, template, scope)
     }
-  };
+  }
 }
 
-function _renderSetting(instance, targetEl, template, scope) {
-  instance._targetEl = targetEl;
-  targetEl.html(template);
-  instance._compile(targetEl.contents())(scope);
-  instance._scope = scope;
-};
+function _renderSetting (instance, targetEl, template, scope) {
+  instance._targetEl = targetEl
+  targetEl.html(template)
+  instance._compile(targetEl.contents())(scope)
+  instance._scope = scope
+}

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/arrayOrderingSrv/arrayOrdering.service.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/arrayOrderingSrv/arrayOrdering.service.js b/zeppelin-web/src/components/arrayOrderingSrv/arrayOrdering.service.js
index 70d9f6a..6e2fe33 100644
--- a/zeppelin-web/src/components/arrayOrderingSrv/arrayOrdering.service.js
+++ b/zeppelin-web/src/components/arrayOrderingSrv/arrayOrdering.service.js
@@ -12,26 +12,25 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').service('arrayOrderingSrv', arrayOrderingSrv);
+angular.module('zeppelinWebApp').service('arrayOrderingSrv', arrayOrderingSrv)
 
-function arrayOrderingSrv(TRASH_FOLDER_ID) {
-  'ngInject';
+function arrayOrderingSrv (TRASH_FOLDER_ID) {
+  'ngInject'
 
-  var arrayOrderingSrv = this;
+  let arrayOrderingSrv = this
 
-  this.noteListOrdering = function(note) {
+  this.noteListOrdering = function (note) {
     if (note.id === TRASH_FOLDER_ID) {
-      return '\uFFFF';
+      return '\uFFFF'
     }
-    return arrayOrderingSrv.getNoteName(note);
-  };
+    return arrayOrderingSrv.getNoteName(note)
+  }
 
-  this.getNoteName = function(note) {
+  this.getNoteName = function (note) {
     if (note.name === undefined || note.name.trim() === '') {
-      return 'Note ' + note.id;
+      return 'Note ' + note.id
     } else {
-      return note.name;
+      return note.name
     }
-  };
+  }
 }
-

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/baseUrl/baseUrl.service.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/baseUrl/baseUrl.service.js b/zeppelin-web/src/components/baseUrl/baseUrl.service.js
index 4ad1eab..fb2ecfb 100644
--- a/zeppelin-web/src/components/baseUrl/baseUrl.service.js
+++ b/zeppelin-web/src/components/baseUrl/baseUrl.service.js
@@ -12,38 +12,37 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').service('baseUrlSrv', baseUrlSrv);
+angular.module('zeppelinWebApp').service('baseUrlSrv', baseUrlSrv)
 
-function baseUrlSrv() {
-  this.getPort = function() {
-    var port = Number(location.port);
+function baseUrlSrv () {
+  this.getPort = function () {
+    let port = Number(location.port)
     if (!port) {
-      port = 80;
+      port = 80
       if (location.protocol === 'https:') {
-        port = 443;
+        port = 443
       }
     }
-    //Exception for when running locally via grunt
+    // Exception for when running locally via grunt
     if (port === process.env.WEB_PORT) {
-      port = process.env.SERVER_PORT;
+      port = process.env.SERVER_PORT
     }
-    return port;
-  };
+    return port
+  }
 
-  this.getWebsocketUrl = function() {
-    var wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  this.getWebsocketUrl = function () {
+    let wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
     return wsProtocol + '//' + location.hostname + ':' + this.getPort() +
-      skipTrailingSlash(location.pathname) + '/ws';
-  };
+      skipTrailingSlash(location.pathname) + '/ws'
+  }
 
-  this.getRestApiBase = function() {
+  this.getRestApiBase = function () {
     return location.protocol + '//' + location.hostname + ':' +
       this.getPort() + skipTrailingSlash(location.pathname) +
-      '/api';
-  };
+      '/api'
+  }
 
-  var skipTrailingSlash = function(path) {
-    return path.replace(/\/$/, '');
-  };
+  const skipTrailingSlash = function (path) {
+    return path.replace(/\/$/, '')
+  }
 }
-

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/browser-detect/browserDetect.service.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/browser-detect/browserDetect.service.js b/zeppelin-web/src/components/browser-detect/browserDetect.service.js
index 2fda717..2223d5f 100644
--- a/zeppelin-web/src/components/browser-detect/browserDetect.service.js
+++ b/zeppelin-web/src/components/browser-detect/browserDetect.service.js
@@ -12,29 +12,28 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').service('browserDetectService', browserDetectService);
+angular.module('zeppelinWebApp').service('browserDetectService', browserDetectService)
 
-function browserDetectService() {
-  this.detectIE = function() {
-    var ua = window.navigator.userAgent;
-    var msie = ua.indexOf('MSIE ');
+function browserDetectService () {
+  this.detectIE = function () {
+    let ua = window.navigator.userAgent
+    let msie = ua.indexOf('MSIE ')
     if (msie > 0) {
       // IE 10 or older => return version number
-      return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
+      return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10)
     }
-    var trident = ua.indexOf('Trident/');
+    let trident = ua.indexOf('Trident/')
     if (trident > 0) {
       // IE 11 => return version number
-      var rv = ua.indexOf('rv:');
-      return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
+      let rv = ua.indexOf('rv:')
+      return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10)
     }
-    var edge = ua.indexOf('Edge/');
+    let edge = ua.indexOf('Edge/')
     if (edge > 0) {
       // IE 12 (aka Edge) => return version number
-      return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
+      return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10)
     }
     // other browser
-    return false;
-  };
+    return false
+  }
 }
-

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/clipboard/clipboard.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/clipboard/clipboard.controller.js b/zeppelin-web/src/components/clipboard/clipboard.controller.js
index 685f04e..c4a9e42 100644
--- a/zeppelin-web/src/components/clipboard/clipboard.controller.js
+++ b/zeppelin-web/src/components/clipboard/clipboard.controller.js
@@ -11,24 +11,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-angular.module('zeppelinWebApp').controller('clipboardCtrl', clipboardCtrl);
+angular.module('zeppelinWebApp').controller('clipboardCtrl', clipboardCtrl)
 
-function clipboardCtrl($scope) {
-  'ngInject';
+function clipboardCtrl ($scope) {
+  'ngInject'
 
-  $scope.complete = function(e) {
-    $scope.copied = true;
-    $scope.tooltip = 'Copied!';
-    setTimeout(function() {
-      $scope.tooltip = 'Copy to clipboard';
-    }, 400);
-  };
-  $scope.$watch('input', function() {
-    $scope.copied = false;
-    $scope.tooltip = 'Copy to clipboard';
-  });
-  $scope.clipError = function(e) {
-    console.log('Error: ' + e.name + ' - ' + e.message);
-    $scope.tooltip = 'Not supported browser';
-  };
+  $scope.complete = function (e) {
+    $scope.copied = true
+    $scope.tooltip = 'Copied!'
+    setTimeout(function () {
+      $scope.tooltip = 'Copy to clipboard'
+    }, 400)
+  }
+  $scope.$watch('input', function () {
+    $scope.copied = false
+    $scope.tooltip = 'Copy to clipboard'
+  })
+  $scope.clipError = function (e) {
+    console.log('Error: ' + e.name + ' - ' + e.message)
+    $scope.tooltip = 'Not supported browser'
+  }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/dropdowninput/dropdowninput.directive.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/dropdowninput/dropdowninput.directive.js b/zeppelin-web/src/components/dropdowninput/dropdowninput.directive.js
index a690aed..cdc74f3 100644
--- a/zeppelin-web/src/components/dropdowninput/dropdowninput.directive.js
+++ b/zeppelin-web/src/components/dropdowninput/dropdowninput.directive.js
@@ -12,16 +12,15 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').directive('dropdownInput', dropdownInput);
+angular.module('zeppelinWebApp').directive('dropdownInput', dropdownInput)
 
-function dropdownInput() {
+function dropdownInput () {
   return {
     restrict: 'A',
-    link: function(scope, element) {
-      element.bind('click', function(event) {
-        event.stopPropagation();
-      });
+    link: function (scope, element) {
+      element.bind('click', function (event) {
+        event.stopPropagation()
+      })
     }
-  };
+  }
 }
-

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/editor/codeEditor.directive.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/editor/codeEditor.directive.js b/zeppelin-web/src/components/editor/codeEditor.directive.js
index 09ef21f..b8e1b6a 100644
--- a/zeppelin-web/src/components/editor/codeEditor.directive.js
+++ b/zeppelin-web/src/components/editor/codeEditor.directive.js
@@ -12,9 +12,9 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').directive('codeEditor', codeEditor);
+angular.module('zeppelinWebApp').directive('codeEditor', codeEditor)
 
-function codeEditor($templateRequest, $compile) {
+function codeEditor ($templateRequest, $compile) {
   return {
     restrict: 'AE',
     scope: {
@@ -25,15 +25,14 @@ function codeEditor($templateRequest, $compile) {
       onLoad: '=onLoad',
       revisionView: '=revisionView'
     },
-    link: function(scope, element, attrs, controller) {
-      $templateRequest('components/editor/ace.editor.directive.html').then(function(editorHtml) {
-        var editor = angular.element(editorHtml);
-        editor.attr('id', scope.paragraphId + '_editor');
-        element.append(editor);
-        $compile(editor)(scope);
-        console.log('codeEditor directive revision view is ' + scope.revisionView);
-      });
+    link: function (scope, element, attrs, controller) {
+      $templateRequest('components/editor/ace.editor.directive.html').then(function (editorHtml) {
+        let editor = angular.element(editorHtml)
+        editor.attr('id', scope.paragraphId + '_editor')
+        element.append(editor)
+        $compile(editor)(scope)
+        console.log('codeEditor directive revision view is ' + scope.revisionView)
+      })
     }
-  };
+  }
 }
-

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/elasticInputCtrl/elasticInput.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/elasticInputCtrl/elasticInput.controller.js b/zeppelin-web/src/components/elasticInputCtrl/elasticInput.controller.js
index f56c172..507b2f6 100644
--- a/zeppelin-web/src/components/elasticInputCtrl/elasticInput.controller.js
+++ b/zeppelin-web/src/components/elasticInputCtrl/elasticInput.controller.js
@@ -12,11 +12,10 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').controller('ElasticInputCtrl', ElasticInputCtrl);
+angular.module('zeppelinWebApp').controller('ElasticInputCtrl', ElasticInputCtrl)
 
-function ElasticInputCtrl() {
-  var vm = this;
-  vm.showEditor = false;
-  vm.value = '';
+function ElasticInputCtrl () {
+  let vm = this
+  vm.showEditor = false
+  vm.value = ''
 }
-

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js b/zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js
index 1f73f64..9e28098 100644
--- a/zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js
+++ b/zeppelin-web/src/components/expandCollapse/expandCollapse.directive.js
@@ -12,27 +12,26 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').directive('expandCollapse', expandCollapse);
+angular.module('zeppelinWebApp').directive('expandCollapse', expandCollapse)
 
-function expandCollapse() {
+function expandCollapse () {
   return {
     restrict: 'EA',
-    link: function(scope, element, attrs) {
-      angular.element(element).click(function(event) {
+    link: function (scope, element, attrs) {
+      angular.element(element).click(function (event) {
         if (angular.element(element).find('.expandable:visible').length > 1) {
-          angular.element(element).find('.expandable:visible').slideUp('slow');
-          angular.element(element).find('i.icon-folder-alt').toggleClass('icon-folder icon-folder-alt');
+          angular.element(element).find('.expandable:visible').slideUp('slow')
+          angular.element(element).find('i.icon-folder-alt').toggleClass('icon-folder icon-folder-alt')
         } else {
-          angular.element(element).find('.expandable').first().slideToggle('200',function() {
+          angular.element(element).find('.expandable').first().slideToggle('200', function () {
             // do not toggle trash folder
             if (angular.element(element).find('.fa-trash-o').length === 0) {
-              angular.element(element).find('i').first().toggleClass('icon-folder icon-folder-alt');
+              angular.element(element).find('i').first().toggleClass('icon-folder icon-folder-alt')
             }
-          });
+          })
         }
-        event.stopPropagation();
-      });
+        event.stopPropagation()
+      })
     }
-  };
+  }
 }
-

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/helium/helium-conf.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/helium/helium-conf.js b/zeppelin-web/src/components/helium/helium-conf.js
index a93f6f0..10ca18a 100644
--- a/zeppelin-web/src/components/helium/helium-conf.js
+++ b/zeppelin-web/src/components/helium/helium-conf.js
@@ -16,81 +16,84 @@ export const HeliumConfFieldType = {
   NUMBER: 'number',
   JSON: 'json',
   STRING: 'string',
-};
+}
 
 /**
  * @param persisted <Object> including `type`, `description`, `defaultValue` for each conf key
  * @param spec <Object> including `value` for each conf key
  */
-export function mergePersistedConfWithSpec(persisted, spec) {
-  const confs = [];
+export function mergePersistedConfWithSpec (persisted, spec) {
+  const confs = []
 
-  for(let name in spec) {
-    const specField = spec[name];
-    const persistedValue = persisted[name];
+  for (let name in spec) {
+    const specField = spec[name]
+    const persistedValue = persisted[name]
 
-    const value = (persistedValue) ? persistedValue : specField.defaultValue;
+    const value = (persistedValue) ? persistedValue : specField.defaultValue
     const merged = {
-      name: name, type: specField.type, description: specField.description,
-      value: value, defaultValue: specField.defaultValue,
-    };
+      name: name,
+      type: specField.type,
+      description: specField.description,
+      value: value,
+      defaultValue: specField.defaultValue,
+    }
 
-    confs.push(merged);
+    confs.push(merged)
   }
 
-  return confs;
+  return confs
 }
 
-export function createAllPackageConfigs(defaultPackages, persistedConfs) {
-  let packageConfs = {};
+export function createAllPackageConfigs (defaultPackages, persistedConfs) {
+  let packageConfs = {}
 
   for (let name in defaultPackages) {
-    const pkgSearchResult = defaultPackages[name];
+    const pkgSearchResult = defaultPackages[name]
 
-    const spec = pkgSearchResult.pkg.config;
-    if (!spec) { continue; }
+    const spec = pkgSearchResult.pkg.config
+    if (!spec) { continue }
 
-    const artifact = pkgSearchResult.pkg.artifact;
-    if (!artifact) { continue; }
+    const artifact = pkgSearchResult.pkg.artifact
+    if (!artifact) { continue }
 
-    let persistedConf = {};
+    let persistedConf = {}
     if (persistedConfs[artifact]) {
-      persistedConf = persistedConfs[artifact];
+      persistedConf = persistedConfs[artifact]
     }
 
-    const confs = mergePersistedConfWithSpec(persistedConf, spec);
-    packageConfs[name] = confs;
+    const confs = mergePersistedConfWithSpec(persistedConf, spec)
+    packageConfs[name] = confs
   }
 
-  return packageConfs;
+  return packageConfs
 }
 
-export function parseConfigValue(type, stringified) {
-  let value = stringified;
+export function parseConfigValue (type, stringified) {
+  let value = stringified
 
   try {
     if (HeliumConfFieldType.NUMBER === type) {
-      value = parseFloat(stringified);
+      value = parseFloat(stringified)
     } else if (HeliumConfFieldType.JSON === type) {
-      value = JSON.parse(stringified);
+      value = JSON.parse(stringified)
     }
-  } catch(error) {
+  } catch (error) {
     // return just the stringified one
-    console.error(`Failed to parse conf type ${type}, value ${value}`);
+    console.error(`Failed to parse conf type ${type}, value ${value}`)
   }
 
-  return value;
+  return value
 }
 
 /**
  * persist key-value only
  * since other info (e.g type, desc) can be provided by default config
  */
-export function createPersistableConfig(currentConfs) {
+export function createPersistableConfig (currentConfs) {
   const filtered = currentConfs.reduce((acc, c) => {
-    acc[c.name] = parseConfigValue(c.type, c.value);
-    return acc;
-  }, {});
+    acc[c.name] = parseConfigValue(c.type, c.value)
+    return acc
+  }, {})
 
-  return filtered;
+  return filtered
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/helium/helium-package.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/helium/helium-package.js b/zeppelin-web/src/components/helium/helium-package.js
index 8192a6a..88d191a 100644
--- a/zeppelin-web/src/components/helium/helium-package.js
+++ b/zeppelin-web/src/components/helium/helium-package.js
@@ -12,20 +12,20 @@
  * limitations under the License.
  */
 
-export function createDefaultPackage(pkgSearchResult, sce) {
+export function createDefaultPackage (pkgSearchResult, sce) {
   for (let pkgIdx in pkgSearchResult) {
-    const pkg = pkgSearchResult[pkgIdx];
-    pkg.pkg.icon = sce.trustAsHtml(pkg.pkg.icon);
+    const pkg = pkgSearchResult[pkgIdx]
+    pkg.pkg.icon = sce.trustAsHtml(pkg.pkg.icon)
     if (pkg.enabled) {
-      pkgSearchResult.splice(pkgIdx, 1);
-      return pkg;
+      pkgSearchResult.splice(pkgIdx, 1)
+      return pkg
     }
   }
 
   // show first available version if package is not enabled
-  const result = pkgSearchResult[0];
-  pkgSearchResult.splice(0, 1);
-  return result;
+  const result = pkgSearchResult[0]
+  pkgSearchResult.splice(0, 1)
+  return result
 }
 
 /**
@@ -35,13 +35,13 @@ export function createDefaultPackage(pkgSearchResult, sce) {
  * @param sce angular `$sce` object
  * @returns {Object} including {name, pkgInfo}
  */
-export function createDefaultPackages(pkgSearchResults, sce) {
-  const defaultPackages = {};
+export function createDefaultPackages (pkgSearchResults, sce) {
+  const defaultPackages = {}
   // show enabled version if any version of package is enabled
   for (let name in pkgSearchResults) {
-    const pkgSearchResult = pkgSearchResults[name];
+    const pkgSearchResult = pkgSearchResults[name]
     defaultPackages[name] = createDefaultPackage(pkgSearchResult, sce)
   }
 
-  return defaultPackages;
+  return defaultPackages
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/helium/helium.service.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/helium/helium.service.js b/zeppelin-web/src/components/helium/helium.service.js
index 34520e1..c26f95b 100644
--- a/zeppelin-web/src/components/helium/helium.service.js
+++ b/zeppelin-web/src/components/helium/helium.service.js
@@ -12,26 +12,26 @@
  * limitations under the License.
  */
 
-import { HeliumType, } from './helium-type';
+import { HeliumType, } from './helium-type'
 import {
   createAllPackageConfigs,
   createPersistableConfig,
   mergePersistedConfWithSpec,
-} from './helium-conf';
+} from './helium-conf'
 import {
   createDefaultPackages,
-} from './helium-package';
+} from './helium-package'
 
-angular.module('zeppelinWebApp').service('heliumService', heliumService);
+angular.module('zeppelinWebApp').service('heliumService', heliumService)
 
-export default function heliumService($http, $sce, baseUrlSrv) {
-  'ngInject';
+export default function heliumService ($http, $sce, baseUrlSrv) {
+  'ngInject'
 
-  let visualizationBundles = [];
+  let visualizationBundles = []
   // name `heliumBundles` should be same as `HeliumBundleFactory.HELIUM_BUNDLES_VAR`
-  let heliumBundles = [];
+  let heliumBundles = []
   // map for `{ magic: interpreter }`
-  let spellPerMagic = {};
+  let spellPerMagic = {}
   // map for `{ magic: package-name }`
   let pkgNamePerMagic = {}
 
@@ -39,211 +39,211 @@ export default function heliumService($http, $sce, baseUrlSrv) {
    * @param magic {string} e.g `%flowchart`
    * @returns {SpellBase} undefined if magic is not registered
    */
-  this.getSpellByMagic = function(magic) {
-    return spellPerMagic[magic];
-  };
+  this.getSpellByMagic = function (magic) {
+    return spellPerMagic[magic]
+  }
 
-  this.executeSpell = function(magic, textWithoutMagic) {
+  this.executeSpell = function (magic, textWithoutMagic) {
     const promisedConf = this.getSinglePackageConfigUsingMagic(magic)
-      .then(confs => createPersistableConfig(confs));
+      .then(confs => createPersistableConfig(confs))
 
     return promisedConf.then(conf => {
-      const spell = this.getSpellByMagic(magic);
-      const spellResult = spell.interpret(textWithoutMagic, conf);
+      const spell = this.getSpellByMagic(magic)
+      const spellResult = spell.interpret(textWithoutMagic, conf)
       const parsed = spellResult.getAllParsedDataWithTypes(
-        spellPerMagic, magic, textWithoutMagic);
+        spellPerMagic, magic, textWithoutMagic)
 
-      return parsed;
-    });
-  };
+      return parsed
+    })
+  }
 
-  this.executeSpellAsDisplaySystem = function(magic, textWithoutMagic) {
+  this.executeSpellAsDisplaySystem = function (magic, textWithoutMagic) {
     const promisedConf = this.getSinglePackageConfigUsingMagic(magic)
-      .then(confs => createPersistableConfig(confs));
+      .then(confs => createPersistableConfig(confs))
 
     return promisedConf.then(conf => {
-      const spell = this.getSpellByMagic(magic);
-      const spellResult = spell.interpret(textWithoutMagic.trim(), conf);
-      const parsed = spellResult.getAllParsedDataWithTypes(spellPerMagic);
+      const spell = this.getSpellByMagic(magic)
+      const spellResult = spell.interpret(textWithoutMagic.trim(), conf)
+      const parsed = spellResult.getAllParsedDataWithTypes(spellPerMagic)
 
-      return parsed;
-    });
-  };
+      return parsed
+    })
+  }
 
-  this.getVisualizationBundles = function() {
-    return visualizationBundles;
-  };
+  this.getVisualizationBundles = function () {
+    return visualizationBundles
+  }
 
   /**
    * @returns {Promise} which returns bundleOrder
    */
-  this.getVisualizationPackageOrder = function() {
+  this.getVisualizationPackageOrder = function () {
     return $http.get(baseUrlSrv.getRestApiBase() + '/helium/order/visualization')
-      .then(function(response, status) {
-        return response.data.body;
+      .then(function (response, status) {
+        return response.data.body
+      })
+      .catch(function (error) {
+        console.error('Can not get bundle order', error)
       })
-      .catch(function(error) {
-        console.error('Can not get bundle order', error);
-      });
-  };
+  }
 
-  this.setVisualizationPackageOrder = function(list) {
-    return $http.post(baseUrlSrv.getRestApiBase() + '/helium/order/visualization', list);
-  };
+  this.setVisualizationPackageOrder = function (list) {
+    return $http.post(baseUrlSrv.getRestApiBase() + '/helium/order/visualization', list)
+  }
 
-  this.enable = function(name, artifact) {
-    return $http.post(baseUrlSrv.getRestApiBase() + '/helium/enable/' + name, artifact);
-  };
+  this.enable = function (name, artifact) {
+    return $http.post(baseUrlSrv.getRestApiBase() + '/helium/enable/' + name, artifact)
+  }
 
-  this.disable = function(name) {
-    return $http.post(baseUrlSrv.getRestApiBase() + '/helium/disable/' + name);
-  };
+  this.disable = function (name) {
+    return $http.post(baseUrlSrv.getRestApiBase() + '/helium/disable/' + name)
+  }
 
-  this.saveConfig = function(pkg , defaultPackageConfig, closeConfigPanelCallback) {
+  this.saveConfig = function (pkg, defaultPackageConfig, closeConfigPanelCallback) {
     // in case of local package, it will include `/`
-    const pkgArtifact = encodeURIComponent(pkg.artifact);
-    const pkgName = pkg.name;
-    const filtered = createPersistableConfig(defaultPackageConfig);
+    const pkgArtifact = encodeURIComponent(pkg.artifact)
+    const pkgName = pkg.name
+    const filtered = createPersistableConfig(defaultPackageConfig)
 
-    if (!pkgName || !pkgArtifact|| !filtered) {
+    if (!pkgName || !pkgArtifact || !filtered) {
       console.error(
-        `Can't save config for helium package '${pkgArtifact}'`, filtered);
-      return;
+        `Can't save config for helium package '${pkgArtifact}'`, filtered)
+      return
     }
 
-    const url = `${baseUrlSrv.getRestApiBase()}/helium/config/${pkgName}/${pkgArtifact}`;
+    const url = `${baseUrlSrv.getRestApiBase()}/helium/config/${pkgName}/${pkgArtifact}`
     return $http.post(url, filtered)
       .then(() => {
-        if (closeConfigPanelCallback) { closeConfigPanelCallback(); }
+        if (closeConfigPanelCallback) { closeConfigPanelCallback() }
       }).catch((error) => {
-        console.error(`Failed to save config for ${pkgArtifact}`, error);
-      });
-  };
+        console.error(`Failed to save config for ${pkgArtifact}`, error)
+      })
+  }
 
   /**
    * @returns {Promise<Object>} which including {name, Array<package info for artifact>}
    */
-  this.getAllPackageInfo = function() {
+  this.getAllPackageInfo = function () {
     return $http.get(`${baseUrlSrv.getRestApiBase()}/helium/package`)
-      .then(function(response, status) {
-        return response.data.body;
+      .then(function (response, status) {
+        return response.data.body
       })
-      .catch(function(error) {
-        console.error('Failed to get all package infos', error);
-      });
-  };
+      .catch(function (error) {
+        console.error('Failed to get all package infos', error)
+      })
+  }
 
-  this.getAllEnabledPackages = function() {
+  this.getAllEnabledPackages = function () {
     return $http.get(`${baseUrlSrv.getRestApiBase()}/helium/enabledPackage`)
-      .then(function(response, status) {
-        return response.data.body;
+      .then(function (response, status) {
+        return response.data.body
       })
-      .catch(function(error) {
-        console.error('Failed to get all enabled package infos', error);
-      });
-  };
+      .catch(function (error) {
+        console.error('Failed to get all enabled package infos', error)
+      })
+  }
 
-  this.getSingleBundle = function(pkgName) {
+  this.getSingleBundle = function (pkgName) {
     let url = `${baseUrlSrv.getRestApiBase()}/helium/bundle/load/${pkgName}`
     if (process.env.HELIUM_BUNDLE_DEV) {
-      url = url + '?refresh=true';
+      url = url + '?refresh=true'
     }
 
     return $http.get(url)
-      .then(function(response, status) {
+      .then(function (response, status) {
         const bundle = response.data
         if (bundle.substring(0, 'ERROR:'.length) === 'ERROR:') {
-          console.error(`Failed to get bundle: ${pkgName}`, bundle);
+          console.error(`Failed to get bundle: ${pkgName}`, bundle)
           return '' // empty bundle will be filtered later
         }
 
         return bundle
       })
-      .catch(function(error) {
-        console.error(`Failed to get single bundle: ${pkgName}`, error);
-      });
+      .catch(function (error) {
+        console.error(`Failed to get single bundle: ${pkgName}`, error)
+      })
   }
 
-  this.getDefaultPackages = function() {
+  this.getDefaultPackages = function () {
     return this.getAllPackageInfo()
       .then(pkgSearchResults => {
-        return createDefaultPackages(pkgSearchResults, $sce);
-      });
-  };
+        return createDefaultPackages(pkgSearchResults, $sce)
+      })
+  }
 
-  this.getAllPackageInfoAndDefaultPackages = function() {
+  this.getAllPackageInfoAndDefaultPackages = function () {
     return this.getAllPackageInfo()
       .then(pkgSearchResults => {
         return {
           pkgSearchResults: pkgSearchResults,
           defaultPackages: createDefaultPackages(pkgSearchResults, $sce),
-        };
-      });
-  };
+        }
+      })
+  }
 
   /**
    * get all package configs.
    * @return { Promise<{name, Array<Object>}> }
    */
-  this.getAllPackageConfigs = function() {
-    const promisedDefaultPackages = this.getDefaultPackages();
+  this.getAllPackageConfigs = function () {
+    const promisedDefaultPackages = this.getDefaultPackages()
     const promisedPersistedConfs =
       $http.get(`${baseUrlSrv.getRestApiBase()}/helium/config`)
-      .then(function(response, status) {
-        return response.data.body;
-      });
+      .then(function (response, status) {
+        return response.data.body
+      })
 
     return Promise.all([promisedDefaultPackages, promisedPersistedConfs])
       .then(values => {
-        const defaultPackages = values[0];
-        const persistedConfs = values[1];
+        const defaultPackages = values[0]
+        const persistedConfs = values[1]
 
-        return createAllPackageConfigs(defaultPackages, persistedConfs);
+        return createAllPackageConfigs(defaultPackages, persistedConfs)
+      })
+      .catch(function (error) {
+        console.error('Failed to get all package configs', error)
       })
-      .catch(function(error) {
-        console.error('Failed to get all package configs', error);
-      });
-  };
+  }
 
   /**
    * get the package config which is persisted in server.
    * @return { Promise<Array<Object>> }
    */
-  this.getSinglePackageConfigs = function(pkg) {
-    const pkgName = pkg.name;
+  this.getSinglePackageConfigs = function (pkg) {
+    const pkgName = pkg.name
     // in case of local package, it will include `/`
-    const pkgArtifact = encodeURIComponent(pkg.artifact);
+    const pkgArtifact = encodeURIComponent(pkg.artifact)
 
     if (!pkgName || !pkgArtifact) {
-      console.error('Failed to fetch config for\n', pkg);
-      return Promise.resolve([]);
+      console.error('Failed to fetch config for\n', pkg)
+      return Promise.resolve([])
     }
 
-    const confUrl = `${baseUrlSrv.getRestApiBase()}/helium/config/${pkgName}/${pkgArtifact}`;
+    const confUrl = `${baseUrlSrv.getRestApiBase()}/helium/config/${pkgName}/${pkgArtifact}`
     const promisedConf = $http.get(confUrl)
-      .then(function(response, status) {
-        return response.data.body;
-      });
+      .then(function (response, status) {
+        return response.data.body
+      })
 
     return promisedConf.then(({confSpec, confPersisted}) => {
       const merged = mergePersistedConfWithSpec(confPersisted, confSpec)
-      return merged;
-    });
-  };
+      return merged
+    })
+  }
 
-  this.getSinglePackageConfigUsingMagic = function(magic) {
-    const pkgName = pkgNamePerMagic[magic];
+  this.getSinglePackageConfigUsingMagic = function (magic) {
+    const pkgName = pkgNamePerMagic[magic]
 
-    const confUrl = `${baseUrlSrv.getRestApiBase()}/helium/spell/config/${pkgName}`;
+    const confUrl = `${baseUrlSrv.getRestApiBase()}/helium/spell/config/${pkgName}`
     const promisedConf = $http.get(confUrl)
-      .then(function(response, status) {
-        return response.data.body;
-      });
+      .then(function (response, status) {
+        return response.data.body
+      })
 
     return promisedConf.then(({confSpec, confPersisted}) => {
       const merged = mergePersistedConfWithSpec(confPersisted, confSpec)
-      return merged;
-    });
+      return merged
+    })
   }
 
   const p = this.getAllEnabledPackages()
@@ -260,15 +260,15 @@ export default function heliumService($http, $sce, baseUrlSrv) {
         // filter out empty bundle
         if (b === '') { return acc }
         acc.push(b)
-        return acc;
+        return acc
       }, [])
     })
 
   // load should be promise
   this.load = p.then(availableBundles => {
-
     // evaluate bundles
     availableBundles.map(b => {
+      // eslint-disable-next-line no-eval
       eval(b)
     })
 
@@ -284,5 +284,4 @@ export default function heliumService($http, $sce, baseUrlSrv) {
       }
     })
   })
-
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/interpreter/interpreter.directive.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/interpreter/interpreter.directive.js b/zeppelin-web/src/components/interpreter/interpreter.directive.js
index 0ec6353..7080760 100644
--- a/zeppelin-web/src/components/interpreter/interpreter.directive.js
+++ b/zeppelin-web/src/components/interpreter/interpreter.directive.js
@@ -12,21 +12,20 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').directive('interpreterDirective', interpreterDirective);
+angular.module('zeppelinWebApp').directive('interpreterDirective', interpreterDirective)
 
-function interpreterDirective($timeout) {
-  'ngInject';
+function interpreterDirective ($timeout) {
+  'ngInject'
 
   return {
     restrict: 'A',
-    link: function(scope, element, attr) {
+    link: function (scope, element, attr) {
       if (scope.$last === true) {
-        $timeout(function() {
-          var id = 'ngRenderFinished';
-          scope.$emit(id);
-        });
+        $timeout(function () {
+          let id = 'ngRenderFinished'
+          scope.$emit(id)
+        })
       }
     }
-  };
+  }
 }
-

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/login/login.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/login/login.controller.js b/zeppelin-web/src/components/login/login.controller.js
index 370466e..9190950 100644
--- a/zeppelin-web/src/components/login/login.controller.js
+++ b/zeppelin-web/src/components/login/login.controller.js
@@ -12,16 +12,15 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').controller('LoginCtrl', LoginCtrl);
+angular.module('zeppelinWebApp').controller('LoginCtrl', LoginCtrl)
 
-function LoginCtrl($scope, $rootScope, $http, $httpParamSerializer, baseUrlSrv, $location, $timeout) {
-  'ngInject';
+function LoginCtrl ($scope, $rootScope, $http, $httpParamSerializer, baseUrlSrv, $location, $timeout) {
+  'ngInject'
 
-  $scope.SigningIn = false;
-  $scope.loginParams = {};
-  $scope.login = function() {
-
-    $scope.SigningIn = true;
+  $scope.SigningIn = false
+  $scope.loginParams = {}
+  $scope.login = function () {
+    $scope.SigningIn = true
     $http({
       method: 'POST',
       url: baseUrlSrv.getRestApiBase() + '/login',
@@ -32,57 +31,54 @@ function LoginCtrl($scope, $rootScope, $http, $httpParamSerializer, baseUrlSrv,
         'userName': $scope.loginParams.userName,
         'password': $scope.loginParams.password
       })
-    }).then(function successCallback(response) {
-      $rootScope.ticket = response.data.body;
-      angular.element('#loginModal').modal('toggle');
-      $rootScope.$broadcast('loginSuccess', true);
-      $rootScope.userName = $scope.loginParams.userName;
-      $scope.SigningIn = false;
+    }).then(function successCallback (response) {
+      $rootScope.ticket = response.data.body
+      angular.element('#loginModal').modal('toggle')
+      $rootScope.$broadcast('loginSuccess', true)
+      $rootScope.userName = $scope.loginParams.userName
+      $scope.SigningIn = false
 
-      //redirect to the page from where the user originally was
+      // redirect to the page from where the user originally was
       if ($location.search() && $location.search()['ref']) {
-        $timeout(function() {
-          var redirectLocation = $location.search()['ref'];
-          $location.$$search = {};
-          $location.path(redirectLocation);
-        }, 100);
-
+        $timeout(function () {
+          let redirectLocation = $location.search()['ref']
+          $location.$$search = {}
+          $location.path(redirectLocation)
+        }, 100)
       }
-    }, function errorCallback(errorResponse) {
-      $scope.loginParams.errorText = 'The username and password that you entered don\'t match.';
-      $scope.SigningIn = false;
-    });
-
-  };
+    }, function errorCallback (errorResponse) {
+      $scope.loginParams.errorText = 'The username and password that you entered don\'t match.'
+      $scope.SigningIn = false
+    })
+  }
 
-  var initValues = function() {
+  let initValues = function () {
     $scope.loginParams = {
       userName: '',
       password: ''
-    };
-  };
+    }
+  }
 
-  //handle session logout message received from WebSocket
-  $rootScope.$on('session_logout', function(event, data) {
+  // handle session logout message received from WebSocket
+  $rootScope.$on('session_logout', function (event, data) {
     if ($rootScope.userName !== '') {
-      $rootScope.userName = '';
-      $rootScope.ticket = undefined;
+      $rootScope.userName = ''
+      $rootScope.ticket = undefined
 
-      setTimeout(function() {
-        $scope.loginParams = {};
-        $scope.loginParams.errorText = data.info;
-        angular.element('.nav-login-btn').click();
-      }, 1000);
-      var locationPath = $location.path();
-      $location.path('/').search('ref', locationPath);
+      setTimeout(function () {
+        $scope.loginParams = {}
+        $scope.loginParams.errorText = data.info
+        angular.element('.nav-login-btn').click()
+      }, 1000)
+      let locationPath = $location.path()
+      $location.path('/').search('ref', locationPath)
     }
-  });
+  })
 
   /*
    ** $scope.$on functions below
    */
-  $scope.$on('initLoginValues', function() {
-    initValues();
-  });
+  $scope.$on('initLoginValues', function () {
+    initValues()
+  })
 }
-

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/navbar/navbar.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/navbar/navbar.controller.js b/zeppelin-web/src/components/navbar/navbar.controller.js
index a7a7cde..a2ca20a 100644
--- a/zeppelin-web/src/components/navbar/navbar.controller.js
+++ b/zeppelin-web/src/components/navbar/navbar.controller.js
@@ -12,142 +12,142 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').controller('NavCtrl', NavCtrl);
+angular.module('zeppelinWebApp').controller('NavCtrl', NavCtrl)
 
-function NavCtrl($scope, $rootScope, $http, $routeParams, $location,
+function NavCtrl ($scope, $rootScope, $http, $routeParams, $location,
                  noteListDataFactory, baseUrlSrv, websocketMsgSrv,
                  arrayOrderingSrv, searchService, TRASH_FOLDER_ID) {
-  'ngInject';
+  'ngInject'
 
-  var vm = this;
-  vm.arrayOrderingSrv = arrayOrderingSrv;
-  vm.connected = websocketMsgSrv.isConnected();
-  vm.isActive = isActive;
-  vm.logout = logout;
-  vm.notes = noteListDataFactory;
-  vm.search = search;
-  vm.searchForm = searchService;
-  vm.showLoginWindow = showLoginWindow;
-  vm.TRASH_FOLDER_ID = TRASH_FOLDER_ID;
-  vm.isFilterNote = isFilterNote;
+  let vm = this
+  vm.arrayOrderingSrv = arrayOrderingSrv
+  vm.connected = websocketMsgSrv.isConnected()
+  vm.isActive = isActive
+  vm.logout = logout
+  vm.notes = noteListDataFactory
+  vm.search = search
+  vm.searchForm = searchService
+  vm.showLoginWindow = showLoginWindow
+  vm.TRASH_FOLDER_ID = TRASH_FOLDER_ID
+  vm.isFilterNote = isFilterNote
 
-  $scope.query = {q: ''};
+  $scope.query = {q: ''}
 
-  initController();
+  initController()
 
-  function getZeppelinVersion() {
+  function getZeppelinVersion () {
     $http.get(baseUrlSrv.getRestApiBase() + '/version').success(
-      function(data, status, headers, config) {
-        $rootScope.zeppelinVersion = data.body;
+      function (data, status, headers, config) {
+        $rootScope.zeppelinVersion = data.body
       }).error(
-      function(data, status, headers, config) {
-        console.log('Error %o %o', status, data.message);
-      });
+      function (data, status, headers, config) {
+        console.log('Error %o %o', status, data.message)
+      })
   }
 
-  function initController() {
-    $scope.isDrawNavbarNoteList = false;
-    angular.element('#notebook-list').perfectScrollbar({suppressScrollX: true});
+  function initController () {
+    $scope.isDrawNavbarNoteList = false
+    angular.element('#notebook-list').perfectScrollbar({suppressScrollX: true})
 
-    angular.element(document).click(function() {
-      $scope.query.q = '';
-    });
+    angular.element(document).click(function () {
+      $scope.query.q = ''
+    })
 
-    getZeppelinVersion();
-    loadNotes();
+    getZeppelinVersion()
+    loadNotes()
   }
 
-  function isFilterNote(note) {
+  function isFilterNote (note) {
     if (!$scope.query.q) {
-      return true;
+      return true
     }
 
-    var noteName = note.name;
+    let noteName = note.name
     if (noteName.toLowerCase().indexOf($scope.query.q.toLowerCase()) > -1) {
-      return true;
+      return true
     }
-    return false;
+    return false
   }
 
-  function isActive(noteId) {
-    return ($routeParams.noteId === noteId);
+  function isActive (noteId) {
+    return ($routeParams.noteId === noteId)
   }
 
-  function listConfigurations() {
-    websocketMsgSrv.listConfigurations();
+  function listConfigurations () {
+    websocketMsgSrv.listConfigurations()
   }
 
-  function loadNotes() {
-    websocketMsgSrv.getNoteList();
+  function loadNotes () {
+    websocketMsgSrv.getNoteList()
   }
 
-  function getHomeNote(){
-    websocketMsgSrv.getHomeNote();
+  function getHomeNote () {
+    websocketMsgSrv.getHomeNote()
   }
 
-  function logout() {
-    var logoutURL = baseUrlSrv.getRestApiBase() + '/login/logout';
-
-    //for firefox and safari
-    logoutURL = logoutURL.replace('//', '//false:false@');
-    $http.post(logoutURL).error(function() {
-      //force authcBasic (if configured) to logout
-      $http.post(logoutURL).error(function() {
-        $rootScope.userName = '';
-        $rootScope.ticket.principal = '';
-        $rootScope.ticket.ticket = '';
-        $rootScope.ticket.roles = '';
+  function logout () {
+    let logoutURL = baseUrlSrv.getRestApiBase() + '/login/logout'
+
+    // for firefox and safari
+    logoutURL = logoutURL.replace('//', '//false:false@')
+    $http.post(logoutURL).error(function () {
+      // force authcBasic (if configured) to logout
+      $http.post(logoutURL).error(function () {
+        $rootScope.userName = ''
+        $rootScope.ticket.principal = ''
+        $rootScope.ticket.ticket = ''
+        $rootScope.ticket.roles = ''
         BootstrapDialog.show({
           message: 'Logout Success'
-        });
-        setTimeout(function() {
-          window.location.replace('/');
-        }, 1000);
-      });
-    });
+        })
+        setTimeout(function () {
+          window.location.replace('/')
+        }, 1000)
+      })
+    })
   }
 
-  function search(searchTerm) {
-    $location.path('/search/' + searchTerm);
+  function search (searchTerm) {
+    $location.path('/search/' + searchTerm)
   }
 
-  function showLoginWindow() {
-    setTimeout(function() {
-      angular.element('#userName').focus();
-    }, 500);
+  function showLoginWindow () {
+    setTimeout(function () {
+      angular.element('#userName').focus()
+    }, 500)
   }
 
   /*
    ** $scope.$on functions below
    */
 
-  $scope.$on('setNoteMenu', function(event, notes) {
-    noteListDataFactory.setNotes(notes);
-    initNotebookListEventListener();
-  });
+  $scope.$on('setNoteMenu', function (event, notes) {
+    noteListDataFactory.setNotes(notes)
+    initNotebookListEventListener()
+  })
 
-  $scope.$on('setConnectedStatus', function(event, param) {
-    vm.connected = param;
-  });
+  $scope.$on('setConnectedStatus', function (event, param) {
+    vm.connected = param
+  })
 
-  $scope.$on('loginSuccess', function(event, param) {
-    listConfigurations();
-    loadNotes();
-    getHomeNote();
-  });
+  $scope.$on('loginSuccess', function (event, param) {
+    listConfigurations()
+    loadNotes()
+    getHomeNote()
+  })
 
   /*
    ** Performance optimization for Browser Render.
    */
-  function initNotebookListEventListener() {
-    angular.element(document).ready(function() {
-      angular.element('.notebook-list-dropdown').on('show.bs.dropdown', function() {
-        $scope.isDrawNavbarNoteList = true;
-      });
-
-      angular.element('.notebook-list-dropdown').on('hide.bs.dropdown', function() {
-        $scope.isDrawNavbarNoteList = false;
-      });
-    });
+  function initNotebookListEventListener () {
+    angular.element(document).ready(function () {
+      angular.element('.notebook-list-dropdown').on('show.bs.dropdown', function () {
+        $scope.isDrawNavbarNoteList = true
+      })
+
+      angular.element('.notebook-list-dropdown').on('hide.bs.dropdown', function () {
+        $scope.isDrawNavbarNoteList = false
+      })
+    })
   }
 }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/navbar/navbar.controller.test.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/navbar/navbar.controller.test.js b/zeppelin-web/src/components/navbar/navbar.controller.test.js
index 07a5945..bf29b84 100644
--- a/zeppelin-web/src/components/navbar/navbar.controller.test.js
+++ b/zeppelin-web/src/components/navbar/navbar.controller.test.js
@@ -1,18 +1,18 @@
-describe('Controller: NavCtrl', function() {
+describe('Controller: NavCtrl', function () {
   // load the controller's module
-  beforeEach(angular.mock.module('zeppelinWebApp'));
-  var NavCtrl;
-  var scope;
+  beforeEach(angular.mock.module('zeppelinWebApp'))
+  let NavCtrl
+  let scope
   // Initialize the controller and a mock scope
-  beforeEach(inject(function($controller, $rootScope) {
-    scope = $rootScope.$new();
+  beforeEach(inject(function ($controller, $rootScope) {
+    scope = $rootScope.$new()
     NavCtrl = $controller('NavCtrl', {
       $scope: scope
-    });
+    })
 
-    it('NavCtrl to toBeDefined', function() {
-      expect(NavCtrl).toBeDefined();
-      expect(NavCtrl.loadNotes).toBeDefined();
-    });
-  }));
-});
+    it('NavCtrl to toBeDefined', function () {
+      expect(NavCtrl).toBeDefined()
+      expect(NavCtrl.loadNotes).toBeDefined()
+    })
+  }))
+})

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19b0f30f/zeppelin-web/src/components/ngenter/ngenter.directive.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/ngenter/ngenter.directive.js b/zeppelin-web/src/components/ngenter/ngenter.directive.js
index 8b4fe8b..57ec01c 100644
--- a/zeppelin-web/src/components/ngenter/ngenter.directive.js
+++ b/zeppelin-web/src/components/ngenter/ngenter.directive.js
@@ -12,20 +12,19 @@
  * limitations under the License.
  */
 
-angular.module('zeppelinWebApp').directive('ngEnter', ngEnter);
+angular.module('zeppelinWebApp').directive('ngEnter', ngEnter)
 
-function ngEnter() {
-  return function(scope, element, attrs) {
-    element.bind('keydown keypress', function(event) {
+function ngEnter () {
+  return function (scope, element, attrs) {
+    element.bind('keydown keypress', function (event) {
       if (event.which === 13) {
         if (!event.shiftKey) {
-          scope.$apply(function() {
-            scope.$eval(attrs.ngEnter);
-          });
+          scope.$apply(function () {
+            scope.$eval(attrs.ngEnter)
+          })
         }
-        event.preventDefault();
+        event.preventDefault()
       }
-    });
-  };
+    })
+  }
 }
-