Updated rules for variable name (#13106)

* updated rules for variable name and fixed files that didn't follow new rules

* fixed test so it uses new rule

* made exceptions to rule in interval_variable

public/app/app.ts

@@ -105,9 +105,9 @@ export class GrafanaApp {
       'react',
     ];
 
-    const module_types = ['controllers', 'directives', 'factories', 'services', 'filters', 'routes'];
+    const moduleTypes = ['controllers', 'directives', 'factories', 'services', 'filters', 'routes'];
 
-    _.each(module_types, type => {
+    _.each(moduleTypes, type => {
       const moduleName = 'grafana.' + type;
       this.useModule(angular.module(moduleName, []));
     });

public/app/core/config.ts

@@ -11,9 +11,9 @@ export class Settings {
   datasources: any;
   panels: any;
   appSubUrl: string;
-  window_title_prefix: string;
+  windowTitlePrefix: string;
   buildInfo: BuildInfo;
-  new_panel_title: string;
+  newPanelTitle: string;
   bootData: any;
   externalUserMngLinkUrl: string;
   externalUserMngLinkName: string;

public/app/core/utils/outline.ts

@@ -2,32 +2,32 @@
 function outlineFixer() {
   const d: any = document;
 
-  const style_element = d.createElement('STYLE');
-  const dom_events = 'addEventListener' in d;
+  const styleElement = d.createElement('STYLE');
+  const domEvents = 'addEventListener' in d;
 
-  const add_event_listener = function(type, callback) {
+  const addEventListener = function(type, callback) {
     // Basic cross-browser event handling
-    if (dom_events) {
+    if (domEvents) {
       d.addEventListener(type, callback);
     } else {
       d.attachEvent('on' + type, callback);
     }
   };
 
-  const set_css = function(css_text) {
+  const setCss = function(cssText) {
     // Handle setting of <style> element contents in IE8
-    !!style_element.styleSheet ? (style_element.styleSheet.cssText = css_text) : (style_element.innerHTML = css_text);
+    !!styleElement.styleSheet ? (styleElement.styleSheet.cssText = cssText) : (styleElement.innerHTML = cssText);
   };
 
-  d.getElementsByTagName('HEAD')[0].appendChild(style_element);
+  d.getElementsByTagName('HEAD')[0].appendChild(styleElement);
 
   // Using mousedown instead of mouseover, so that previously focused elements don't lose focus ring on mouse move
-  add_event_listener('mousedown', function() {
-    set_css(':focus{outline:0 !important}::-moz-focus-inner{border:0;}');
+  addEventListener('mousedown', function() {
+    setCss(':focus{outline:0 !important}::-moz-focus-inner{border:0;}');
   });
 
-  add_event_listener('keydown', function() {
-    set_css('');
+  addEventListener('keydown', function() {
+    setCss('');
   });
 }
 

public/app/core/utils/ticks.ts

@@ -26,8 +26,8 @@ export function tickStep(start: number, stop: number, count: number): number {
   return stop < start ? -step1 : step1;
 }
 
-export function getScaledDecimals(decimals, tick_size) {
-  return decimals - Math.floor(Math.log(tick_size) / Math.LN10);
+export function getScaledDecimals(decimals, tickSize) {
+  return decimals - Math.floor(Math.log(tickSize) / Math.LN10);
 }
 
 /**
@@ -201,10 +201,10 @@ export function getPrecision(num: number): number {
  * Get decimal precision of number stored as a string ("3.14" => 2)
  */
 export function getStringPrecision(num: string): number {
-  const dot_index = num.indexOf('.');
-  if (dot_index === -1) {
+  const dotIndex = num.indexOf('.');
+  if (dotIndex === -1) {
     return 0;
   } else {
-    return num.length - dot_index - 1;
+    return num.length - dotIndex - 1;
   }
 }

public/app/core/utils/version.ts

@@ -29,6 +29,6 @@ export class SemVersion {
 }
 
 export function isVersionGtOrEq(a: string, b: string): boolean {
-  const a_semver = new SemVersion(a);
-  return a_semver.isGtOrEq(b);
+  const aSemver = new SemVersion(a);
+  return aSemver.isGtOrEq(b);
 }

public/app/features/annotations/events_processing.ts

@@ -14,33 +14,33 @@ export function makeRegions(annotations, options) {
 }
 
 function getRegions(events, range) {
-  const region_events = _.filter(events, event => {
+  const regionEvents = _.filter(events, event => {
     return event.regionId;
   });
-  let regions = _.groupBy(region_events, 'regionId');
+  let regions = _.groupBy(regionEvents, 'regionId');
   regions = _.compact(
-    _.map(regions, region_events => {
-      const region_obj = _.head(region_events);
-      if (region_events && region_events.length > 1) {
-        region_obj.timeEnd = region_events[1].time;
-        region_obj.isRegion = true;
-        return region_obj;
+    _.map(regions, regionEvents => {
+      const regionObj = _.head(regionEvents);
+      if (regionEvents && regionEvents.length > 1) {
+        regionObj.timeEnd = regionEvents[1].time;
+        regionObj.isRegion = true;
+        return regionObj;
       } else {
-        if (region_events && region_events.length) {
+        if (regionEvents && regionEvents.length) {
           // Don't change proper region object
-          if (!region_obj.time || !region_obj.timeEnd) {
+          if (!regionObj.time || !regionObj.timeEnd) {
             // This is cut region
-            if (isStartOfRegion(region_obj)) {
-              region_obj.timeEnd = range.to.valueOf() - 1;
+            if (isStartOfRegion(regionObj)) {
+              regionObj.timeEnd = range.to.valueOf() - 1;
             } else {
               // Start time = null
-              region_obj.timeEnd = region_obj.time;
-              region_obj.time = range.from.valueOf() + 1;
+              regionObj.timeEnd = regionObj.time;
+              regionObj.time = range.from.valueOf() + 1;
             }
-            region_obj.isRegion = true;
+            regionObj.isRegion = true;
           }
 
-          return region_obj;
+          return regionObj;
         }
       }
     })

public/app/features/dashboard/dashboard_ctrl.ts

@@ -102,7 +102,7 @@ export class DashboardCtrl implements PanelContainer {
   }
 
   setWindowTitleAndTheme() {
-    window.document.title = config.window_title_prefix + this.dashboard.title;
+    window.document.title = config.windowTitlePrefix + this.dashboard.title;
   }
 
   showJsonEditor(evt, options) {

public/app/features/dashboard/dashboard_loader_srv.ts

@@ -106,7 +106,7 @@ export class DashboardLoaderSrv {
     };
 
     /*jshint -W054 */
-    const script_func = new Function(
+    const scriptFunc = new Function(
       'ARGS',
       'kbn',
       'dateMath',
@@ -119,12 +119,12 @@ export class DashboardLoaderSrv {
       'services',
       result.data
     );
-    const script_result = script_func(this.$routeParams, kbn, dateMath, _, moment, window, document, $, $, services);
+    const scriptResult = scriptFunc(this.$routeParams, kbn, dateMath, _, moment, window, document, $, $, services);
 
     // Handle async dashboard scripts
-    if (_.isFunction(script_result)) {
+    if (_.isFunction(scriptResult)) {
       const deferred = this.$q.defer();
-      script_result(dashboard => {
+      scriptResult(dashboard => {
         this.$timeout(() => {
           deferred.resolve({ data: dashboard });
         });
@@ -132,7 +132,7 @@ export class DashboardLoaderSrv {
       return deferred.promise;
     }
 
-    return { data: script_result };
+    return { data: scriptResult };
   }
 }
 

public/app/features/dashboard/specs/repeat.test.ts

@@ -271,8 +271,8 @@ describe('given dashboard with row repeat and panel repeat in horizontal directi
   });
 
   it('should panels in self row', () => {
-    const panel_types = _.map(dashboard.panels, 'type');
-    expect(panel_types).toEqual([
+    const panelTypes = _.map(dashboard.panels, 'type');
+    expect(panelTypes).toEqual([
       'row',
       'graph',
       'graph',
@@ -350,8 +350,8 @@ describe('given dashboard with row repeat', function() {
   });
 
   it('should not repeat only row', function() {
-    const panel_types = _.map(dashboard.panels, 'type');
-    expect(panel_types).toEqual(['row', 'graph', 'graph', 'row', 'graph', 'graph', 'row', 'graph']);
+    const panelTypes = _.map(dashboard.panels, 'type');
+    expect(panelTypes).toEqual(['row', 'graph', 'graph', 'row', 'graph', 'graph', 'row', 'graph']);
   });
 
   it('should set scopedVars for each panel', function() {
@@ -399,8 +399,8 @@ describe('given dashboard with row repeat', function() {
     dashboard = new DashboardModel(dashboardJSON);
     dashboard.processRepeats();
 
-    const panel_types = _.map(dashboard.panels, 'type');
-    expect(panel_types).toEqual(['row', 'row', 'row', 'graph']);
+    const panelTypes = _.map(dashboard.panels, 'type');
+    expect(panelTypes).toEqual(['row', 'row', 'row', 'graph']);
     expect(dashboard.panels[0].panels).toHaveLength(2);
     expect(dashboard.panels[1].panels).toHaveLength(2);
   });
@@ -441,8 +441,8 @@ describe('given dashboard with row repeat', function() {
     dashboard = new DashboardModel(dashboardJSON);
     dashboard.processRepeats();
 
-    const panel_types = _.map(dashboard.panels, 'type');
-    expect(panel_types).toEqual([
+    const panelTypes = _.map(dashboard.panels, 'type');
+    expect(panelTypes).toEqual([
       'row',
       'graph',
       'graph',
@@ -488,7 +488,7 @@ describe('given dashboard with row repeat', function() {
     dashboard = new DashboardModel(dashboardJSON);
     dashboard.processRepeats();
 
-    const panel_ids = _.flattenDeep(
+    const panelIds = _.flattenDeep(
       _.map(dashboard.panels, panel => {
         let ids = [];
         if (panel.panels && panel.panels.length) {
@@ -498,7 +498,7 @@ describe('given dashboard with row repeat', function() {
         return ids;
       })
     );
-    expect(panel_ids.length).toEqual(_.uniq(panel_ids).length);
+    expect(panelIds.length).toEqual(_.uniq(panelIds).length);
   });
 
   it('should place new panels in proper order', function() {
@@ -511,10 +511,10 @@ describe('given dashboard with row repeat', function() {
     dashboard = new DashboardModel(dashboardJSON);
     dashboard.processRepeats();
 
-    const panel_types = _.map(dashboard.panels, 'type');
-    expect(panel_types).toEqual(['row', 'graph', 'graph', 'graph', 'row', 'graph', 'graph', 'graph']);
-    const panel_y_positions = _.map(dashboard.panels, p => p.gridPos.y);
-    expect(panel_y_positions).toEqual([0, 1, 1, 5, 7, 8, 8, 12]);
+    const panelTypes = _.map(dashboard.panels, 'type');
+    expect(panelTypes).toEqual(['row', 'graph', 'graph', 'graph', 'row', 'graph', 'graph', 'graph']);
+    const panelYPositions = _.map(dashboard.panels, p => p.gridPos.y);
+    expect(panelYPositions).toEqual([0, 1, 1, 5, 7, 8, 8, 12]);
   });
 });
 
@@ -566,8 +566,8 @@ describe('given dashboard with row and panel repeat', () => {
   });
 
   it('should repeat row and panels for each row', () => {
-    const panel_types = _.map(dashboard.panels, 'type');
-    expect(panel_types).toEqual(['row', 'graph', 'graph', 'row', 'graph', 'graph']);
+    const panelTypes = _.map(dashboard.panels, 'type');
+    expect(panelTypes).toEqual(['row', 'graph', 'graph', 'row', 'graph', 'graph']);
   });
 
   it('should clean up old repeated panels', () => {
@@ -592,8 +592,8 @@ describe('given dashboard with row and panel repeat', () => {
     dashboard = new DashboardModel(dashboardJSON);
     dashboard.processRepeats();
 
-    const panel_types = _.map(dashboard.panels, 'type');
-    expect(panel_types).toEqual(['row', 'graph', 'graph', 'row', 'graph', 'graph']);
+    const panelTypes = _.map(dashboard.panels, 'type');
+    expect(panelTypes).toEqual(['row', 'graph', 'graph', 'row', 'graph', 'graph']);
   });
 
   it('should set scopedVars for each row', () => {

public/app/features/org/profile_ctrl.ts

@@ -3,7 +3,7 @@ import { coreModule } from 'app/core/core';
 
 export class ProfileCtrl {
   user: any;
-  old_theme: any;
+  oldTheme: any;
   teams: any = [];
   orgs: any = [];
   userForm: any;
@@ -54,7 +54,7 @@ export class ProfileCtrl {
 
     this.backendSrv.put('/api/user/', this.user).then(() => {
       this.contextSrv.user.name = this.user.name || this.user.login;
-      if (this.old_theme !== this.user.theme) {
+      if (this.oldTheme !== this.user.theme) {
         window.location.href = config.appSubUrl + this.$location.path();
       }
     });

public/app/features/templating/interval_variable.ts

@@ -4,8 +4,8 @@ import { Variable, assignModelProperties, variableTypes } from './variable';
 
 export class IntervalVariable implements Variable {
   name: string;
-  auto_count: number;
-  auto_min: number;
+  auto_count: number; // tslint:disable-line variable-name
+  auto_min: number; // tslint:disable-line variable-name
   options: any;
   auto: boolean;
   query: string;

public/app/plugins/datasource/elasticsearch/datasource.ts

@@ -57,9 +57,9 @@ export class ElasticDatasource {
 
   private get(url) {
     const range = this.timeSrv.timeRange();
-    const index_list = this.indexPattern.getIndexList(range.from.valueOf(), range.to.valueOf());
-    if (_.isArray(index_list) && index_list.length) {
-      return this.request('GET', index_list[0] + url).then(function(results) {
+    const indexList = this.indexPattern.getIndexList(range.from.valueOf(), range.to.valueOf());
+    if (_.isArray(indexList) && indexList.length) {
+      return this.request('GET', indexList[0] + url).then(function(results) {
         results.data.$$config = results.config;
         return results.data;
       });
@@ -229,15 +229,15 @@ export class ElasticDatasource {
   }
 
   getQueryHeader(searchType, timeFrom, timeTo) {
-    const query_header: any = {
+    const queryHeader: any = {
       search_type: searchType,
       ignore_unavailable: true,
       index: this.indexPattern.getIndexList(timeFrom, timeTo),
     };
     if (this.esVersion >= 56) {
-      query_header['max_concurrent_shard_requests'] = this.maxConcurrentShardRequests;
+      queryHeader['max_concurrent_shard_requests'] = this.maxConcurrentShardRequests;
     }
-    return angular.toJson(query_header);
+    return angular.toJson(queryHeader);
   }
 
   query(options) {

public/app/plugins/datasource/elasticsearch/metric_agg.ts

@@ -67,8 +67,8 @@ export class ElasticMetricAggCtrl {
       }
       switch ($scope.agg.type) {
         case 'cardinality': {
-          const precision_threshold = $scope.agg.settings.precision_threshold || '';
-          $scope.settingsLinkText = 'Precision threshold: ' + precision_threshold;
+          const precisionThreshold = $scope.agg.settings.precision_threshold || '';
+          $scope.settingsLinkText = 'Precision threshold: ' + precisionThreshold;
           break;
         }
         case 'percentiles': {

public/app/plugins/datasource/elasticsearch/specs/query_builder.test.ts

@@ -19,12 +19,12 @@ describe('ElasticQueryBuilder', () => {
   });
 
   it('with defaults on es5.x', () => {
-    const builder_5x = new ElasticQueryBuilder({
+    const builder5x = new ElasticQueryBuilder({
       timeField: '@timestamp',
       esVersion: 5,
     });
 
-    const query = builder_5x.build({
+    const query = builder5x.build({
       metrics: [{ type: 'Count', id: '0' }],
       timeField: '@timestamp',
       bucketAggs: [{ type: 'date_histogram', field: '@timestamp', id: '1' }],
@@ -134,11 +134,11 @@ describe('ElasticQueryBuilder', () => {
   });
 
   it('with filters aggs on es5.x', () => {
-    const builder_5x = new ElasticQueryBuilder({
+    const builder5x = new ElasticQueryBuilder({
       timeField: '@timestamp',
       esVersion: 5,
     });
-    const query = builder_5x.build({
+    const query = builder5x.build({
       metrics: [{ type: 'count', id: '1' }],
       timeField: '@timestamp',
       bucketAggs: [

public/app/plugins/datasource/graphite/datasource.ts

@@ -490,8 +490,8 @@ export function GraphiteDatasource(this: any, instanceSettings, $q, backendSrv,
   this._seriesRefLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 
   this.buildGraphiteParams = function(options, scopedVars) {
-    const graphite_options = ['from', 'until', 'rawData', 'format', 'maxDataPoints', 'cacheTimeout'];
-    const clean_options = [],
+    const graphiteOptions = ['from', 'until', 'rawData', 'format', 'maxDataPoints', 'cacheTimeout'];
+    const cleanOptions = [],
       targets = {};
     let target, targetValue, i;
     const regex = /\#([A-Z])/g;
@@ -535,16 +535,16 @@ export function GraphiteDatasource(this: any, instanceSettings, $q, backendSrv,
 
       if (!target.hide) {
         hasTargets = true;
-        clean_options.push('target=' + encodeURIComponent(targetValue));
+        cleanOptions.push('target=' + encodeURIComponent(targetValue));
       }
     }
 
     _.each(options, function(value, key) {
-      if (_.indexOf(graphite_options, key) === -1) {
+      if (_.indexOf(graphiteOptions, key) === -1) {
         return;
       }
       if (value) {
-        clean_options.push(key + '=' + encodeURIComponent(value));
+        cleanOptions.push(key + '=' + encodeURIComponent(value));
       }
     });
 
@@ -552,7 +552,7 @@ export function GraphiteDatasource(this: any, instanceSettings, $q, backendSrv,
       return [];
     }
 
-    return clean_options;
+    return cleanOptions;
   };
 }
 

public/app/plugins/datasource/opentsdb/datasource.ts

@@ -277,35 +277,35 @@ export default class OpenTsDatasource {
       });
     };
 
-    const metrics_regex = /metrics\((.*)\)/;
-    const tag_names_regex = /tag_names\((.*)\)/;
-    const tag_values_regex = /tag_values\((.*?),\s?(.*)\)/;
-    const tag_names_suggest_regex = /suggest_tagk\((.*)\)/;
-    const tag_values_suggest_regex = /suggest_tagv\((.*)\)/;
-
-    const metrics_query = interpolated.match(metrics_regex);
-    if (metrics_query) {
-      return this._performSuggestQuery(metrics_query[1], 'metrics').then(responseTransform);
+    const metricsRegex = /metrics\((.*)\)/;
+    const tagNamesRegex = /tag_names\((.*)\)/;
+    const tagValuesRegex = /tag_values\((.*?),\s?(.*)\)/;
+    const tagNamesSuggestRegex = /suggest_tagk\((.*)\)/;
+    const tagValuesSuggestRegex = /suggest_tagv\((.*)\)/;
+
+    const metricsQuery = interpolated.match(metricsRegex);
+    if (metricsQuery) {
+      return this._performSuggestQuery(metricsQuery[1], 'metrics').then(responseTransform);
     }
 
-    const tag_names_query = interpolated.match(tag_names_regex);
-    if (tag_names_query) {
-      return this._performMetricKeyLookup(tag_names_query[1]).then(responseTransform);
+    const tagNamesQuery = interpolated.match(tagNamesRegex);
+    if (tagNamesQuery) {
+      return this._performMetricKeyLookup(tagNamesQuery[1]).then(responseTransform);
     }
 
-    const tag_values_query = interpolated.match(tag_values_regex);
-    if (tag_values_query) {
-      return this._performMetricKeyValueLookup(tag_values_query[1], tag_values_query[2]).then(responseTransform);
+    const tagValuesQuery = interpolated.match(tagValuesRegex);
+    if (tagValuesQuery) {
+      return this._performMetricKeyValueLookup(tagValuesQuery[1], tagValuesQuery[2]).then(responseTransform);
     }
 
-    const tag_names_suggest_query = interpolated.match(tag_names_suggest_regex);
-    if (tag_names_suggest_query) {
-      return this._performSuggestQuery(tag_names_suggest_query[1], 'tagk').then(responseTransform);
+    const tagNamesSuggestQuery = interpolated.match(tagNamesSuggestRegex);
+    if (tagNamesSuggestQuery) {
+      return this._performSuggestQuery(tagNamesSuggestQuery[1], 'tagk').then(responseTransform);
     }
 
-    const tag_values_suggest_query = interpolated.match(tag_values_suggest_regex);
-    if (tag_values_suggest_query) {
-      return this._performSuggestQuery(tag_values_suggest_query[1], 'tagv').then(responseTransform);
+    const tagValuesSuggestQuery = interpolated.match(tagValuesSuggestRegex);
+    if (tagValuesSuggestQuery) {
+      return this._performSuggestQuery(tagValuesSuggestQuery[1], 'tagv').then(responseTransform);
     }
 
     return this.$q.when([]);
@@ -440,9 +440,9 @@ export default class OpenTsDatasource {
     if (target.filters && target.filters.length > 0) {
       query.filters = angular.copy(target.filters);
       if (query.filters) {
-        for (const filter_key in query.filters) {
-          query.filters[filter_key].filter = this.templateSrv.replace(
-            query.filters[filter_key].filter,
+        for (const filterKey in query.filters) {
+          query.filters[filterKey].filter = this.templateSrv.replace(
+            query.filters[filterKey].filter,
             options.scopedVars,
             'pipe'
           );
@@ -451,8 +451,8 @@ export default class OpenTsDatasource {
     } else {
       query.tags = angular.copy(target.tags);
       if (query.tags) {
-        for (const tag_key in query.tags) {
-          query.tags[tag_key] = this.templateSrv.replace(query.tags[tag_key], options.scopedVars, 'pipe');
+        for (const tagKey in query.tags) {
+          query.tags[tagKey] = this.templateSrv.replace(query.tags[tagKey], options.scopedVars, 'pipe');
         }
       }
     }

public/app/plugins/datasource/prometheus/metric_find_query.ts

@@ -12,27 +12,27 @@ export default class PrometheusMetricFindQuery {
   }
 
   process() {
-    const label_values_regex = /^label_values\((?:(.+),\s*)?([a-zA-Z_][a-zA-Z0-9_]+)\)\s*$/;
-    const metric_names_regex = /^metrics\((.+)\)\s*$/;
-    const query_result_regex = /^query_result\((.+)\)\s*$/;
-
-    const label_values_query = this.query.match(label_values_regex);
-    if (label_values_query) {
-      if (label_values_query[1]) {
-        return this.labelValuesQuery(label_values_query[2], label_values_query[1]);
+    const labelValuesRegex = /^label_values\((?:(.+),\s*)?([a-zA-Z_][a-zA-Z0-9_]+)\)\s*$/;
+    const metricNamesRegex = /^metrics\((.+)\)\s*$/;
+    const queryResultRegex = /^query_result\((.+)\)\s*$/;
+
+    const labelValuesQuery = this.query.match(labelValuesRegex);
+    if (labelValuesQuery) {
+      if (labelValuesQuery[1]) {
+        return this.labelValuesQuery(labelValuesQuery[2], labelValuesQuery[1]);
       } else {
-        return this.labelValuesQuery(label_values_query[2], null);
+        return this.labelValuesQuery(labelValuesQuery[2], null);
       }
     }
 
-    const metric_names_query = this.query.match(metric_names_regex);
-    if (metric_names_query) {
-      return this.metricNameQuery(metric_names_query[1]);
+    const metricNamesQuery = this.query.match(metricNamesRegex);
+    if (metricNamesQuery) {
+      return this.metricNameQuery(metricNamesQuery[1]);
     }
 
-    const query_result_query = this.query.match(query_result_regex);
-    if (query_result_query) {
-      return this.queryResultQuery(query_result_query[1]);
+    const queryResultQuery = this.query.match(queryResultRegex);
+    if (queryResultQuery) {
+      return this.queryResultQuery(queryResultQuery[1]);
     }
 
     // if query contains full metric name, return metric name and label list

public/app/plugins/datasource/prometheus/result_transformer.ts

@@ -45,9 +45,9 @@ export class ResultTransformer {
     }
 
     for (const value of metricData.values) {
-      let dp_value = parseFloat(value[1]);
-      if (_.isNaN(dp_value)) {
-        dp_value = null;
+      let dpValue = parseFloat(value[1]);
+      if (_.isNaN(dpValue)) {
+        dpValue = null;
       }
 
       const timestamp = parseFloat(value[0]) * 1000;
@@ -55,7 +55,7 @@ export class ResultTransformer {
         dps.push([null, t]);
       }
       baseTimestamp = timestamp + stepMs;
-      dps.push([dp_value, timestamp]);
+      dps.push([dpValue, timestamp]);
     }
 
     const endTimestamp = end * 1000;

public/app/plugins/panel/graph/graph.ts

@@ -484,22 +484,22 @@ class GraphElement {
     const defaultTicks = this.panelWidth / 50;
 
     if (this.data.length && bucketSize) {
-      const tick_values = [];
+      const tickValues = [];
       for (const d of this.data) {
         for (const point of d.data) {
-          tick_values[point[0]] = true;
+          tickValues[point[0]] = true;
         }
       }
-      ticks = Object.keys(tick_values).map(v => Number(v));
+      ticks = Object.keys(tickValues).map(v => Number(v));
       min = _.min(ticks);
       max = _.max(ticks);
 
       // Adjust tick step
       let tickStep = bucketSize;
-      let ticks_num = Math.floor((max - min) / tickStep);
-      while (ticks_num > defaultTicks) {
+      let ticksNum = Math.floor((max - min) / tickStep);
+      while (ticksNum > defaultTicks) {
         tickStep = tickStep * 2;
-        ticks_num = Math.ceil((max - min) / tickStep);
+        ticksNum = Math.ceil((max - min) / tickStep);
       }
 
       // Expand ticks for pretty view

public/app/plugins/panel/graph/graph_tooltip.ts

@@ -62,7 +62,7 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie
     let results: any = [[], [], []];
 
     //now we know the current X (j) position for X and Y values
-    let last_value = 0; //needed for stacked values
+    let lastValue = 0; //needed for stacked values
 
     let minDistance, minTime;
 
@@ -106,8 +106,8 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie
         } else if (!series.stack) {
           value = series.data[hoverIndex][1];
         } else {
-          last_value += series.data[hoverIndex][1];
-          value = last_value;
+          lastValue += series.data[hoverIndex][1];
+          value = lastValue;
         }
       } else {
         value = series.data[hoverIndex][1];

public/app/plugins/panel/graph/histogram.ts

@@ -47,12 +47,12 @@ export function convertValuesToHistogram(values: number[], bucketSize: number, m
     histogram[bound] = histogram[bound] + 1;
   }
 
-  const histogam_series = _.map(histogram, (count, bound) => {
+  const histogamSeries = _.map(histogram, (count, bound) => {
     return [Number(bound), count];
   });
 
   // Sort by Y axis values
-  return _.sortBy(histogam_series, point => point[0]);
+  return _.sortBy(histogamSeries, point => point[0]);
 }
 
 /**

public/app/plugins/panel/heatmap/heatmap_ctrl.ts

@@ -97,7 +97,7 @@ const colorSchemes = [
   { name: 'YlOrRd', value: 'interpolateYlOrRd', invert: 'dark' },
 ];
 
-const ds_support_histogram_sort = ['prometheus', 'elasticsearch'];
+const dsSupportHistogramSort = ['prometheus', 'elasticsearch'];
 
 export class HeatmapCtrl extends MetricsPanelCtrl {
   static templateUrl = 'module.html';
@@ -221,7 +221,7 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
     let xBucketSize, yBucketSize, bucketsData, tsBuckets;
 
     // Try to sort series by bucket bound, if datasource doesn't do it.
-    if (!_.includes(ds_support_histogram_sort, panelDatasource)) {
+    if (!_.includes(dsSupportHistogramSort, panelDatasource)) {
       this.series.sort(sortSeriesByLabel);
     }
 

public/app/plugins/panel/heatmap/heatmap_data_converter.ts

@@ -253,16 +253,16 @@ function pushToXBuckets(buckets, point, bucketNum, seriesName) {
   }
 
   // Add series name to point for future identification
-  const point_ext = _.concat(point, seriesName);
+  const pointExt = _.concat(point, seriesName);
 
   if (buckets[bucketNum] && buckets[bucketNum].values) {
     buckets[bucketNum].values.push(value);
-    buckets[bucketNum].points.push(point_ext);
+    buckets[bucketNum].points.push(pointExt);
   } else {
     buckets[bucketNum] = {
       x: bucketNum,
       values: [value],
-      points: [point_ext],
+      points: [pointExt],
     };
   }
 }
@@ -335,17 +335,17 @@ function getLogScaleBucketBounds(value, yBucketSplitFactor, logBase) {
     return { bottom: 0, top: 0 };
   }
 
-  const value_log = logp(value, logBase);
+  const valueLog = logp(value, logBase);
   let pow, powTop;
   if (yBucketSplitFactor === 1 || !yBucketSplitFactor) {
-    pow = Math.floor(value_log);
+    pow = Math.floor(valueLog);
     powTop = pow + 1;
   } else {
-    const additional_bucket_size = 1 / yBucketSplitFactor;
-    let additional_log = value_log - Math.floor(value_log);
-    additional_log = Math.floor(additional_log / additional_bucket_size) * additional_bucket_size;
-    pow = Math.floor(value_log) + additional_log;
-    powTop = pow + additional_bucket_size;
+    const additionalBucketSize = 1 / yBucketSplitFactor;
+    let additionalLog = valueLog - Math.floor(valueLog);
+    additionalLog = Math.floor(additionalLog / additionalBucketSize) * additionalBucketSize;
+    pow = Math.floor(valueLog) + additionalLog;
+    powTop = pow + additionalBucketSize;
   }
   bottom = Math.pow(logBase, pow);
   top = Math.pow(logBase, powTop);
@@ -427,46 +427,46 @@ function getDistance(a: number, b: number, logBase = 1): number {
  * @param objB
  */
 function isHeatmapDataEqual(objA: any, objB: any): boolean {
-  let is_eql = !emptyXOR(objA, objB);
+  let isEql = !emptyXOR(objA, objB);
 
   _.forEach(objA, (xBucket: XBucket, x) => {
     if (objB[x]) {
       if (emptyXOR(xBucket.buckets, objB[x].buckets)) {
-        is_eql = false;
+        isEql = false;
         return false;
       }
 
       _.forEach(xBucket.buckets, (yBucket: YBucket, y) => {
         if (objB[x].buckets && objB[x].buckets[y]) {
           if (objB[x].buckets[y].values) {
-            is_eql = _.isEqual(_.sortBy(yBucket.values), _.sortBy(objB[x].buckets[y].values));
-            if (!is_eql) {
+            isEql = _.isEqual(_.sortBy(yBucket.values), _.sortBy(objB[x].buckets[y].values));
+            if (!isEql) {
               return false;
             } else {
               return true;
             }
           } else {
-            is_eql = false;
+            isEql = false;
             return false;
           }
         } else {
-          is_eql = false;
+          isEql = false;
           return false;
         }
       });
 
-      if (!is_eql) {
+      if (!isEql) {
         return false;
       } else {
         return true;
       }
     } else {
-      is_eql = false;
+      isEql = false;
       return false;
     }
   });
 
-  return is_eql;
+  return isEql;
 }
 
 function emptyXOR(foo: any, bar: any): boolean {

public/app/plugins/panel/heatmap/rendering.ts

@@ -117,23 +117,23 @@ export class HeatmapRenderer {
   }
 
   getYAxisWidth(elem) {
-    const axis_text = elem.selectAll('.axis-y text').nodes();
-    const max_text_width = _.max(
-      _.map(axis_text, text => {
+    const axisText = elem.selectAll('.axis-y text').nodes();
+    const maxTextWidth = _.max(
+      _.map(axisText, text => {
         // Use SVG getBBox method
         return text.getBBox().width;
       })
     );
 
-    return max_text_width;
+    return maxTextWidth;
   }
 
   getXAxisHeight(elem) {
-    const axis_line = elem.select('.axis-x line');
-    if (!axis_line.empty()) {
-      const axis_line_position = parseFloat(elem.select('.axis-x line').attr('y2'));
-      const canvas_width = parseFloat(elem.attr('height'));
-      return canvas_width - axis_line_position;
+    const axisLine = elem.select('.axis-x line');
+    if (!axisLine.empty()) {
+      const axisLinePosition = parseFloat(elem.select('.axis-x line').attr('y2'));
+      const canvasWidth = parseFloat(elem.attr('height'));
+      return canvasWidth - axisLinePosition;
     } else {
       // Default height
       return 30;
@@ -180,42 +180,42 @@ export class HeatmapRenderer {
 
   addYAxis() {
     let ticks = Math.ceil(this.chartHeight / DEFAULT_Y_TICK_SIZE_PX);
-    let tick_interval = ticksUtils.tickStep(this.data.heatmapStats.min, this.data.heatmapStats.max, ticks);
-    let { y_min, y_max } = this.wideYAxisRange(this.data.heatmapStats.min, this.data.heatmapStats.max, tick_interval);
+    let tickInterval = ticksUtils.tickStep(this.data.heatmapStats.min, this.data.heatmapStats.max, ticks);
+    let { yMin, yMax } = this.wideYAxisRange(this.data.heatmapStats.min, this.data.heatmapStats.max, tickInterval);
 
     // Rewrite min and max if it have been set explicitly
-    y_min = this.panel.yAxis.min !== null ? this.panel.yAxis.min : y_min;
-    y_max = this.panel.yAxis.max !== null ? this.panel.yAxis.max : y_max;
+    yMin = this.panel.yAxis.min !== null ? this.panel.yAxis.min : yMin;
+    yMax = this.panel.yAxis.max !== null ? this.panel.yAxis.max : yMax;
 
     // Adjust ticks after Y range widening
-    tick_interval = ticksUtils.tickStep(y_min, y_max, ticks);
-    ticks = Math.ceil((y_max - y_min) / tick_interval);
+    tickInterval = ticksUtils.tickStep(yMin, yMax, ticks);
+    ticks = Math.ceil((yMax - yMin) / tickInterval);
 
-    const decimalsAuto = ticksUtils.getPrecision(tick_interval);
+    const decimalsAuto = ticksUtils.getPrecision(tickInterval);
     let decimals = this.panel.yAxis.decimals === null ? decimalsAuto : this.panel.yAxis.decimals;
     // Calculate scaledDecimals for log scales using tick size (as in jquery.flot.js)
-    const flot_tick_size = ticksUtils.getFlotTickSize(y_min, y_max, ticks, decimalsAuto);
-    const scaledDecimals = ticksUtils.getScaledDecimals(decimals, flot_tick_size);
+    const flotTickSize = ticksUtils.getFlotTickSize(yMin, yMax, ticks, decimalsAuto);
+    const scaledDecimals = ticksUtils.getScaledDecimals(decimals, flotTickSize);
     this.ctrl.decimals = decimals;
     this.ctrl.scaledDecimals = scaledDecimals;
 
     // Set default Y min and max if no data
     if (_.isEmpty(this.data.buckets)) {
-      y_max = 1;
-      y_min = -1;
+      yMax = 1;
+      yMin = -1;
       ticks = 3;
       decimals = 1;
     }
 
     this.data.yAxis = {
-      min: y_min,
-      max: y_max,
+      min: yMin,
+      max: yMax,
       ticks: ticks,
     };
 
     this.scope.yScale = this.yScale = d3
       .scaleLinear()
-      .domain([y_min, y_max])
+      .domain([yMin, yMax])
       .range([this.chartHeight, 0]);
 
     const yAxis = d3
@@ -245,67 +245,67 @@ export class HeatmapRenderer {
 
   // Wide Y values range and anjust to bucket size
   wideYAxisRange(min, max, tickInterval) {
-    const y_widing = (max * (this.dataRangeWidingFactor - 1) - min * (this.dataRangeWidingFactor - 1)) / 2;
-    let y_min, y_max;
+    const yWiding = (max * (this.dataRangeWidingFactor - 1) - min * (this.dataRangeWidingFactor - 1)) / 2;
+    let yMin, yMax;
 
     if (tickInterval === 0) {
-      y_max = max * this.dataRangeWidingFactor;
-      y_min = min - min * (this.dataRangeWidingFactor - 1);
-      tickInterval = (y_max - y_min) / 2;
+      yMax = max * this.dataRangeWidingFactor;
+      yMin = min - min * (this.dataRangeWidingFactor - 1);
+      tickInterval = (yMax - yMin) / 2;
     } else {
-      y_max = Math.ceil((max + y_widing) / tickInterval) * tickInterval;
-      y_min = Math.floor((min - y_widing) / tickInterval) * tickInterval;
+      yMax = Math.ceil((max + yWiding) / tickInterval) * tickInterval;
+      yMin = Math.floor((min - yWiding) / tickInterval) * tickInterval;
     }
 
     // Don't wide axis below 0 if all values are positive
-    if (min >= 0 && y_min < 0) {
-      y_min = 0;
+    if (min >= 0 && yMin < 0) {
+      yMin = 0;
     }
 
-    return { y_min, y_max };
+    return { yMin, yMax };
   }
 
   addLogYAxis() {
-    const log_base = this.panel.yAxis.logBase;
-    let { y_min, y_max } = this.adjustLogRange(this.data.heatmapStats.minLog, this.data.heatmapStats.max, log_base);
+    const logBase = this.panel.yAxis.logBase;
+    let { yMin, yMax } = this.adjustLogRange(this.data.heatmapStats.minLog, this.data.heatmapStats.max, logBase);
 
-    y_min =
-      this.panel.yAxis.min && this.panel.yAxis.min !== '0' ? this.adjustLogMin(this.panel.yAxis.min, log_base) : y_min;
-    y_max = this.panel.yAxis.max !== null ? this.adjustLogMax(this.panel.yAxis.max, log_base) : y_max;
+    yMin =
+      this.panel.yAxis.min && this.panel.yAxis.min !== '0' ? this.adjustLogMin(this.panel.yAxis.min, logBase) : yMin;
+    yMax = this.panel.yAxis.max !== null ? this.adjustLogMax(this.panel.yAxis.max, logBase) : yMax;
 
     // Set default Y min and max if no data
     if (_.isEmpty(this.data.buckets)) {
-      y_max = Math.pow(log_base, 2);
-      y_min = 1;
+      yMax = Math.pow(logBase, 2);
+      yMin = 1;
     }
 
     this.scope.yScale = this.yScale = d3
       .scaleLog()
       .base(this.panel.yAxis.logBase)
-      .domain([y_min, y_max])
+      .domain([yMin, yMax])
       .range([this.chartHeight, 0]);
 
     const domain = this.yScale.domain();
-    const tick_values = this.logScaleTickValues(domain, log_base);
+    const tickValues = this.logScaleTickValues(domain, logBase);
 
-    const decimalsAuto = ticksUtils.getPrecision(y_min);
+    const decimalsAuto = ticksUtils.getPrecision(yMin);
     const decimals = this.panel.yAxis.decimals || decimalsAuto;
 
     // Calculate scaledDecimals for log scales using tick size (as in jquery.flot.js)
-    const flot_tick_size = ticksUtils.getFlotTickSize(y_min, y_max, tick_values.length, decimalsAuto);
-    const scaledDecimals = ticksUtils.getScaledDecimals(decimals, flot_tick_size);
+    const flotTickSize = ticksUtils.getFlotTickSize(yMin, yMax, tickValues.length, decimalsAuto);
+    const scaledDecimals = ticksUtils.getScaledDecimals(decimals, flotTickSize);
     this.ctrl.decimals = decimals;
     this.ctrl.scaledDecimals = scaledDecimals;
 
     this.data.yAxis = {
-      min: y_min,
-      max: y_max,
-      ticks: tick_values.length,
+      min: yMin,
+      max: yMax,
+      ticks: tickValues.length,
     };
 
     const yAxis = d3
       .axisLeft(this.yScale)
-      .tickValues(tick_values)
+      .tickValues(tickValues)
       .tickFormat(this.tickValueFormatter(decimals, scaledDecimals))
       .tickSizeInner(0 - this.width)
       .tickSizeOuter(0)
@@ -322,7 +322,7 @@ export class HeatmapRenderer {
     this.heatmap.select('.axis-y').attr('transform', 'translate(' + posX + ',' + posY + ')');
 
     // Set first tick as pseudo 0
-    if (y_min < 1) {
+    if (yMin < 1) {
       this.heatmap
         .select('.axis-y')
         .select('.tick text')
@@ -344,7 +344,7 @@ export class HeatmapRenderer {
       .domain([0, tsBuckets.length - 1])
       .range([this.chartHeight, 0]);
 
-    const tick_values = _.map(tsBuckets, (b, i) => i);
+    const tickValues = _.map(tsBuckets, (b, i) => i);
     const decimalsAuto = _.max(_.map(tsBuckets, ticksUtils.getStringPrecision));
     const decimals = this.panel.yAxis.decimals === null ? decimalsAuto : this.panel.yAxis.decimals;
     this.ctrl.decimals = decimals;
@@ -364,7 +364,7 @@ export class HeatmapRenderer {
 
     const yAxis = d3
       .axisLeft(this.yScale)
-      .tickValues(tick_values)
+      .tickValues(tickValues)
       .tickFormat(tickFormatter)
       .tickSizeInner(0 - this.width)
       .tickSizeOuter(0)
@@ -389,19 +389,19 @@ export class HeatmapRenderer {
 
   // Adjust data range to log base
   adjustLogRange(min, max, logBase) {
-    let y_min, y_max;
+    let yMin, yMax;
 
-    y_min = this.data.heatmapStats.minLog;
+    yMin = this.data.heatmapStats.minLog;
     if (this.data.heatmapStats.minLog > 1 || !this.data.heatmapStats.minLog) {
-      y_min = 1;
+      yMin = 1;
     } else {
-      y_min = this.adjustLogMin(this.data.heatmapStats.minLog, logBase);
+      yMin = this.adjustLogMin(this.data.heatmapStats.minLog, logBase);
     }
 
     // Adjust max Y value to log base
-    y_max = this.adjustLogMax(this.data.heatmapStats.max, logBase);
+    yMax = this.adjustLogMax(this.data.heatmapStats.max, logBase);
 
-    return { y_min, y_max };
+    return { yMin, yMax };
   }
 
   adjustLogMax(max, base) {
@@ -418,17 +418,17 @@ export class HeatmapRenderer {
     const tickValues = [];
 
     if (domainMin < 1) {
-      const under_one_ticks = Math.floor(ticksUtils.logp(domainMin, base));
-      for (let i = under_one_ticks; i < 0; i++) {
-        const tick_value = Math.pow(base, i);
-        tickValues.push(tick_value);
+      const underOneTicks = Math.floor(ticksUtils.logp(domainMin, base));
+      for (let i = underOneTicks; i < 0; i++) {
+        const tickValue = Math.pow(base, i);
+        tickValues.push(tickValue);
       }
     }
 
     const ticks = Math.ceil(ticksUtils.logp(domainMax, base));
     for (let i = 0; i <= ticks; i++) {
-      const tick_value = Math.pow(base, i);
-      tickValues.push(tick_value);
+      const tickValue = Math.pow(base, i);
+      tickValues.push(tickValue);
     }
 
     return tickValues;
@@ -490,7 +490,7 @@ export class HeatmapRenderer {
   }
 
   addHeatmapCanvas() {
-    const heatmap_elem = this.$heatmap[0];
+    const heatmapElem = this.$heatmap[0];
 
     this.width = Math.floor(this.$heatmap.width()) - this.padding.right;
     this.height = Math.floor(this.$heatmap.height()) - this.padding.bottom;
@@ -503,7 +503,7 @@ export class HeatmapRenderer {
     }
 
     this.heatmap = d3
-      .select(heatmap_elem)
+      .select(heatmapElem)
       .append('svg')
       .attr('width', this.width)
       .attr('height', this.height);
@@ -514,10 +514,10 @@ export class HeatmapRenderer {
     this.addAxes();
 
     if (this.panel.yAxis.logBase !== 1 && this.panel.dataFormat !== 'tsbuckets') {
-      const log_base = this.panel.yAxis.logBase;
+      const logBase = this.panel.yAxis.logBase;
       const domain = this.yScale.domain();
-      const tick_values = this.logScaleTickValues(domain, log_base);
-      this.data.buckets = mergeZeroBuckets(this.data.buckets, _.min(tick_values));
+      const tickValues = this.logScaleTickValues(domain, logBase);
+      this.data.buckets = mergeZeroBuckets(this.data.buckets, _.min(tickValues));
     }
 
     const cardsData = this.data.cards;
@@ -565,9 +565,9 @@ export class HeatmapRenderer {
     const color = d3.select(event.target).style('fill');
     const highlightColor = d3.color(color).darker(2);
     const strokeColor = d3.color(color).brighter(4);
-    const current_card = d3.select(event.target);
+    const currentCard = d3.select(event.target);
     this.tooltip.originalFillColor = color;
-    current_card
+    currentCard
       .style('fill', highlightColor.toString())
       .style('stroke', strokeColor.toString())
       .style('stroke-width', 1);
@@ -611,8 +611,8 @@ export class HeatmapRenderer {
     let w;
     if (this.xScale(d.x) < 0) {
       // Cut card left to prevent overlay
-      const cutted_width = this.xScale(d.x) + this.cardWidth;
-      w = cutted_width > 0 ? cutted_width : 0;
+      const cuttedWidth = this.xScale(d.x) + this.cardWidth;
+      w = cuttedWidth > 0 ? cuttedWidth : 0;
     } else if (this.xScale(d.x) + this.cardWidth > this.chartWidth) {
       // Cut card right to prevent overlay
       w = this.chartWidth - this.xScale(d.x) - this.cardPadding;

public/app/plugins/panel/table/renderer.ts

@@ -194,11 +194,11 @@ export class TableRenderer {
 
   renderRowVariables(rowIndex) {
     const scopedVars = {};
-    let cell_variable;
+    let cellVariable;
     const row = this.table.rows[rowIndex];
     for (let i = 0; i < row.length; i++) {
-      cell_variable = `__cell_${i}`;
-      scopedVars[cell_variable] = { value: row[i] };
+      cellVariable = `__cell_${i}`;
+      scopedVars[cellVariable] = { value: row[i] };
     }
     return scopedVars;
   }
@@ -324,11 +324,11 @@ export class TableRenderer {
 
     for (let y = 0; y < this.table.rows.length; y++) {
       const row = this.table.rows[y];
-      const new_row = [];
+      const newRow = [];
       for (let i = 0; i < this.table.columns.length; i++) {
-        new_row.push(this.formatColumnValue(i, row[i]));
+        newRow.push(this.formatColumnValue(i, row[i]));
       }
-      rows.push(new_row);
+      rows.push(newRow);
     }
     return {
       columns: this.table.columns,

tslint.json

@@ -56,7 +56,14 @@
         "variable-declaration": "nospace"
       }
     ],
-    "variable-name": [true, "ban-keywords"],
+    "variable-name": [
+      true,
+      "check-format",
+      "ban-keywords",
+      "allow-leading-underscore",
+      "allow-trailing-underscore",
+      "allow-pascal-case"
+    ],
     "whitespace": [true, "check-branch", "check-decl", "check-type", "check-preblock"]
   }
 }