noImplicitAny: Reduce errors to 3800-ish (#17781)

* Reduce noImplicitAny errors to 3900-ish

* Fix lots of errors

* Add interface

package.json

@@ -196,6 +196,7 @@
     "@types/redux-logger": "3.0.7",
     "@types/reselect": "2.2.0",
     "@types/slate": "0.44.11",
+    "@types/tinycolor2": "1.4.2",
     "angular": "1.6.6",
     "angular-bindonce": "0.3.1",
     "angular-native-dragdrop": "1.2.2",

packages/grafana-ui/src/types/graph.ts

@@ -11,3 +11,7 @@ export interface GraphSeriesXY {
   isVisible: boolean;
   yAxis: number;
 }
+
+export interface CreatePlotOverlay {
+  (element: JQuery, event: any, plot: { getOptions: () => { events: { manager: any } } }): any;
+}

public/app/features/annotations/annotations_srv.ts

@@ -1,5 +1,5 @@
 // Libaries
-import angular from 'angular';
+import angular, { IQService } from 'angular';
 import _ from 'lodash';
 
 // Components
@@ -11,6 +11,9 @@ import { makeRegions, dedupAnnotations } from './events_processing';
 
 // Types
 import { DashboardModel } from '../dashboard/state/DashboardModel';
+import DatasourceSrv from '../plugins/datasource_srv';
+import { BackendSrv } from 'app/core/services/backend_srv';
+import { TimeSrv } from '../dashboard/services/TimeSrv';
 
 export class AnnotationsSrv {
   globalAnnotationsPromise: any;
@@ -18,7 +21,13 @@ export class AnnotationsSrv {
   datasourcePromises: any;
 
   /** @ngInject */
-  constructor(private $rootScope, private $q, private datasourceSrv, private backendSrv, private timeSrv) {}
+  constructor(
+    private $rootScope: any,
+    private $q: IQService,
+    private datasourceSrv: DatasourceSrv,
+    private backendSrv: BackendSrv,
+    private timeSrv: TimeSrv
+  ) {}
 
   init(dashboard: DashboardModel) {
     // always clearPromiseCaches when loading new dashboard
@@ -33,7 +42,7 @@ export class AnnotationsSrv {
     this.datasourcePromises = null;
   }
 
-  getAnnotations(options) {
+  getAnnotations(options: any) {
     return this.$q
       .all([this.getGlobalAnnotations(options), this.getAlertStates(options)])
       .then(results => {
@@ -70,7 +79,7 @@ export class AnnotationsSrv {
       });
   }
 
-  getAlertStates(options) {
+  getAlertStates(options: any) {
     if (!options.dashboard.id) {
       return this.$q.when([]);
     }
@@ -94,7 +103,7 @@ export class AnnotationsSrv {
     return this.alertStatesPromise;
   }
 
-  getGlobalAnnotations(options) {
+  getGlobalAnnotations(options: any) {
     const dashboard = options.dashboard;
 
     if (this.globalAnnotationsPromise) {
@@ -117,7 +126,7 @@ export class AnnotationsSrv {
       dsPromises.push(datasourcePromise);
       promises.push(
         datasourcePromise
-          .then(datasource => {
+          .then((datasource: any) => {
             // issue query against data source
             return datasource.annotationQuery({
               range: range,
@@ -141,17 +150,17 @@ export class AnnotationsSrv {
     return this.globalAnnotationsPromise;
   }
 
-  saveAnnotationEvent(annotation) {
+  saveAnnotationEvent(annotation: any) {
     this.globalAnnotationsPromise = null;
     return this.backendSrv.post('/api/annotations', annotation);
   }
 
-  updateAnnotationEvent(annotation) {
+  updateAnnotationEvent(annotation: { id: any }) {
     this.globalAnnotationsPromise = null;
     return this.backendSrv.put(`/api/annotations/${annotation.id}`, annotation);
   }
 
-  deleteAnnotationEvent(annotation) {
+  deleteAnnotationEvent(annotation: { id: any; isRegion: any; regionId: any }) {
     this.globalAnnotationsPromise = null;
     let deleteUrl = `/api/annotations/${annotation.id}`;
     if (annotation.isRegion) {
@@ -161,7 +170,7 @@ export class AnnotationsSrv {
     return this.backendSrv.delete(deleteUrl);
   }
 
-  translateQueryResult(annotation, results) {
+  translateQueryResult(annotation: any, results: any) {
     // if annotation has snapshotData
     // make clone and remove it
     if (annotation.snapshotData) {

public/app/features/explore/LogRow.tsx

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import _ from 'lodash';
+// @ts-ignore
 import Highlighter from 'react-highlight-words';
 import classnames from 'classnames';
 
@@ -58,7 +59,7 @@ interface State {
  * Renders a highlighted field.
  * When hovering, a stats icon is shown.
  */
-const FieldHighlight = onClick => props => {
+const FieldHighlight = (onClick: any) => (props: any) => {
   return (
     <span className={props.className} style={props.style}>
       {props.children}
@@ -86,7 +87,7 @@ const getLogRowWithContextStyles = (theme: GrafanaTheme, state: State) => {
     row: css`
       z-index: 1;
       outline: 9999px solid
-        ${tinycolor(outlineColor)
+        ${tinycolor(outlineColor as tinycolor.ColorInput)
           .setAlpha(0.7)
           .toRgbString()};
     `,
@@ -103,7 +104,7 @@ const getLogRowWithContextStyles = (theme: GrafanaTheme, state: State) => {
 export class LogRow extends PureComponent<Props, State> {
   mouseMessageTimer: NodeJS.Timer;
 
-  state = {
+  state: any = {
     fieldCount: 0,
     fieldLabel: null,
     fieldStats: null,

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

@@ -5,7 +5,7 @@ import _ from 'lodash';
  * @param yAxes data [{min: min_y1, min: max_y1}, {min: min_y2, max: max_y2}]
  * @param level Y level
  */
-export function alignYLevel(yAxes, level) {
+export function alignYLevel(yAxes: any, level: any) {
   if (isNaN(level) || !checkCorrectAxis(yAxes)) {
     return;
   }
@@ -65,7 +65,7 @@ export function alignYLevel(yAxes, level) {
   restoreLevelFromZero(yLeft, yRight, level);
 }
 
-function expandStuckValues(yLeft, yRight) {
+function expandStuckValues(yLeft: { max: number; min: number }, yRight: { max: number; min: number }) {
   // wide Y min and max using increased wideFactor
   const wideFactor = 0.25;
   if (yLeft.max === yLeft.min) {
@@ -78,7 +78,7 @@ function expandStuckValues(yLeft, yRight) {
   }
 }
 
-function moveLevelToZero(yLeft, yRight, level) {
+function moveLevelToZero(yLeft: { min: number; max: number }, yRight: { min: number; max: number }, level: number) {
   if (level !== 0) {
     yLeft.min -= level;
     yLeft.max -= level;
@@ -87,7 +87,11 @@ function moveLevelToZero(yLeft, yRight, level) {
   }
 }
 
-function restoreLevelFromZero(yLeft, yRight, level) {
+function restoreLevelFromZero(
+  yLeft: { min: number; max: number },
+  yRight: { min: number; max: number },
+  level: number
+) {
   if (level !== 0) {
     yLeft.min += level;
     yLeft.max += level;
@@ -96,30 +100,35 @@ function restoreLevelFromZero(yLeft, yRight, level) {
   }
 }
 
-function checkCorrectAxis(axis) {
+interface AxisSide {
+  max: number;
+  min: number;
+}
+
+function checkCorrectAxis(axis: any[]) {
   return axis.length === 2 && checkCorrectAxes(axis[0]) && checkCorrectAxes(axis[1]);
 }
 
-function checkCorrectAxes(axes) {
+function checkCorrectAxes(axes: any) {
   return 'min' in axes && 'max' in axes;
 }
 
-function checkOneSide(yLeft, yRight) {
+function checkOneSide(yLeft: AxisSide, yRight: AxisSide) {
   // on the one hand with respect to zero
   return (yLeft.min >= 0 && yRight.min >= 0) || (yLeft.max <= 0 && yRight.max <= 0);
 }
 
-function checkTwoCross(yLeft, yRight) {
+function checkTwoCross(yLeft: AxisSide, yRight: AxisSide) {
   // both across zero
   return yLeft.min <= 0 && yLeft.max >= 0 && yRight.min <= 0 && yRight.max >= 0;
 }
 
-function checkOppositeSides(yLeft, yRight) {
+function checkOppositeSides(yLeft: AxisSide, yRight: AxisSide) {
   // on the opposite sides with respect to zero
   return (yLeft.min >= 0 && yRight.max <= 0) || (yLeft.max <= 0 && yRight.min >= 0);
 }
 
-function getRate(yLeft, yRight) {
+function getRate(yLeft: AxisSide, yRight: AxisSide) {
   let rateLeft, rateRight, rate;
   if (checkTwoCross(yLeft, yRight)) {
     rateLeft = yRight.min ? yLeft.min / yRight.min : 0;

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

@@ -9,7 +9,7 @@ type Options = {
 };
 
 export class DataProcessor {
-  constructor(private panel) {}
+  constructor(private panel: any) {}
 
   getSeriesList(options: Options): TimeSeries[] {
     const list: TimeSeries[] = [];
@@ -140,7 +140,7 @@ export class DataProcessor {
     }
   }
 
-  getXAxisValueOptions(options) {
+  getXAxisValueOptions(options: any) {
     switch (this.panel.xaxis.mode) {
       case 'series': {
         return [

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

@@ -16,7 +16,7 @@ import GraphTooltip from './graph_tooltip';
 import { ThresholdManager } from './threshold_manager';
 import { TimeRegionManager } from './time_region_manager';
 import { EventManager } from 'app/features/annotations/all';
-import { LinkService } from 'app/features/panel/panellinks/link_srv';
+import { LinkService, LinkSrv } from 'app/features/panel/panellinks/link_srv';
 import { convertToHistogramData } from './histogram';
 import { alignYLevel } from './align_yaxes';
 import config from 'app/core/config';
@@ -29,6 +29,8 @@ import { getValueFormat, ContextMenuItem, ContextMenuGroup, DataLink } from '@gr
 import { provideTheme } from 'app/core/utils/ConfigProvider';
 import { toUtc } from '@grafana/ui/src/utils/moment_wrapper';
 import { GraphContextMenuCtrl, FlotDataPoint } from './GraphContextMenuCtrl';
+import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
+import { ContextSrv } from 'app/core/services/context_srv';
 
 const LegendWithThemeProvider = provideTheme(Legend);
 
@@ -48,8 +50,7 @@ class GraphElement {
   timeRegionManager: TimeRegionManager;
   legendElem: HTMLElement;
 
-  // @ts-ignore
-  constructor(private scope, private elem, private timeSrv, private linkSrv: LinkService) {
+  constructor(private scope: any, private elem: JQuery, private timeSrv: TimeSrv, private linkSrv: LinkService) {
     this.ctrl = scope.ctrl;
     this.contextMenu = scope.ctrl.contextMenuCtrl;
     this.dashboard = this.ctrl.dashboard;
@@ -60,6 +61,7 @@ class GraphElement {
     this.eventManager = new EventManager(this.ctrl);
     this.thresholdManager = new ThresholdManager(this.ctrl);
     this.timeRegionManager = new TimeRegionManager(this.ctrl, config.theme.type);
+    // @ts-ignore
     this.tooltip = new GraphTooltip(this.elem, this.ctrl.dashboard, this.scope, () => {
       return this.sortedSeries;
     });
@@ -80,7 +82,7 @@ class GraphElement {
     }
   }
 
-  onRender(renderData) {
+  onRender(renderData: any[]) {
     this.data = renderData || this.data;
     if (!this.data) {
       return;
@@ -217,7 +219,7 @@ class GraphElement {
   onPlotClick(event: JQueryEventObject, pos: any, item: any) {
     const scrollContextElement = this.elem.closest('.view') ? this.elem.closest('.view').get()[0] : null;
     const contextMenuSourceItem = item;
-    let contextMenuItems;
+    let contextMenuItems: ContextMenuItem[];
 
     if (this.panel.xaxis.mode !== 'time') {
       // Skip if panel in histogram or series mode
@@ -235,7 +237,7 @@ class GraphElement {
       return;
     } else {
       this.tooltip.clear(this.plot);
-      contextMenuItems = this.getContextMenuItems(pos, item);
+      contextMenuItems = this.getContextMenuItems(pos, item) as ContextMenuItem[];
       this.scope.$apply(() => {
         // Setting nearest CustomScrollbar element as a scroll context for graph context menu
         this.contextMenu.setScrollContextElement(scrollContextElement);
@@ -258,7 +260,7 @@ class GraphElement {
     return false;
   }
 
-  drawHook(plot) {
+  drawHook(plot: any) {
     // add left axis labels
     if (this.panel.yaxes[0].label && this.panel.yaxes[0].show) {
       $("<div class='axisLabel left-yaxis-label flot-temp-elem'></div>")
@@ -281,7 +283,7 @@ class GraphElement {
     this.timeRegionManager.draw(plot);
   }
 
-  processOffsetHook(plot, gridMargin) {
+  processOffsetHook(plot: any, gridMargin: { left: number; right: number }) {
     const left = this.panel.yaxes[0];
     const right = this.panel.yaxes[1];
     if (left.show && left.label) {
@@ -294,14 +296,14 @@ class GraphElement {
     // apply y-axis min/max options
     const yaxis = plot.getYAxes();
     for (let i = 0; i < yaxis.length; i++) {
-      const axis = yaxis[i];
+      const axis: any = yaxis[i];
       const panelOptions = this.panel.yaxes[i];
       axis.options.max = axis.options.max !== null ? axis.options.max : panelOptions.max;
       axis.options.min = axis.options.min !== null ? axis.options.min : panelOptions.min;
     }
   }
 
-  processRangeHook(plot) {
+  processRangeHook(plot: any) {
     const yAxes = plot.getYAxes();
     const align = this.panel.yaxis.align || false;
 
@@ -314,7 +316,7 @@ class GraphElement {
   // Series could have different timeSteps,
   // let's find the smallest one so that bars are correctly rendered.
   // In addition, only take series which are rendered as bars for this.
-  getMinTimeStepOfSeries(data) {
+  getMinTimeStepOfSeries(data: any[]) {
     let min = Number.MAX_VALUE;
 
     for (let i = 0; i < data.length; i++) {
@@ -364,7 +366,7 @@ class GraphElement {
     this.callPlot(options, true);
   }
 
-  buildFlotPairs(data) {
+  buildFlotPairs(data: any) {
     for (let i = 0; i < data.length; i++) {
       const series = data[i];
       series.data = series.getFlotPairs(series.nullPointMode || this.panel.nullPointMode);
@@ -377,7 +379,7 @@ class GraphElement {
     }
   }
 
-  prepareXAxis(options, panel) {
+  prepareXAxis(options: any, panel: any) {
     switch (panel.xaxis.mode) {
       case 'series': {
         options.series.bars.barWidth = 0.7;
@@ -430,7 +432,7 @@ class GraphElement {
     }
   }
 
-  callPlot(options, incrementRenderCounter) {
+  callPlot(options: any, incrementRenderCounter: boolean) {
     try {
       this.plot = $.plot(this.elem, this.sortedSeries, options);
       if (this.ctrl.renderError) {
@@ -449,13 +451,13 @@ class GraphElement {
     }
   }
 
-  buildFlotOptions(panel) {
+  buildFlotOptions(panel: any) {
     let gridColor = '#c8c8c8';
     if (config.bootData.user.lightTheme === true) {
       gridColor = '#a1a1a1';
     }
     const stack = panel.stack ? true : null;
-    const options = {
+    const options: any = {
       hooks: {
         draw: [this.drawHook.bind(this)],
         processOffset: [this.processOffsetHook.bind(this)],
@@ -518,7 +520,7 @@ class GraphElement {
     return options;
   }
 
-  sortSeries(series, panel) {
+  sortSeries(series: any, panel: any) {
     const sortBy = panel.legend.sort;
     const sortOrder = panel.legend.sortDesc;
     const haveSortBy = sortBy !== null && sortBy !== undefined && panel.legend[sortBy];
@@ -551,7 +553,7 @@ class GraphElement {
     }
   }
 
-  addTimeAxis(options) {
+  addTimeAxis(options: any) {
     const ticks = this.panelWidth / 100;
     const min = _.isUndefined(this.ctrl.range.from) ? null : this.ctrl.range.from.valueOf();
     const max = _.isUndefined(this.ctrl.range.to) ? null : this.ctrl.range.to.valueOf();
@@ -568,7 +570,7 @@ class GraphElement {
     };
   }
 
-  addXSeriesAxis(options) {
+  addXSeriesAxis(options: any) {
     const ticks = _.map(this.data, (series, index) => {
       return [index + 1, series.alias];
     });
@@ -584,7 +586,7 @@ class GraphElement {
     };
   }
 
-  addXHistogramAxis(options, bucketSize) {
+  addXHistogramAxis(options: any, bucketSize: number) {
     let ticks, min, max;
     const defaultTicks = this.panelWidth / 50;
 
@@ -637,7 +639,7 @@ class GraphElement {
     this.configureAxisMode(options.xaxis, 'short');
   }
 
-  addXTableAxis(options) {
+  addXTableAxis(options: any) {
     let ticks = _.map(this.data, (series, seriesIndex) => {
       return _.map(series.datapoints, (point, pointIndex) => {
         const tickIndex = seriesIndex * series.datapoints.length + pointIndex;
@@ -658,7 +660,7 @@ class GraphElement {
     };
   }
 
-  configureYAxisOptions(data, options) {
+  configureYAxisOptions(data: any, options: any) {
     const defaults = {
       position: 'left',
       show: this.panel.yaxes[0].show,
@@ -703,7 +705,7 @@ class GraphElement {
     return _.toNumber(value);
   }
 
-  applyLogScale(axis, data) {
+  applyLogScale(axis: any, data: any) {
     if (axis.logBase === 1) {
       return;
     }
@@ -733,10 +735,10 @@ class GraphElement {
       }
     }
 
-    axis.transform = v => {
+    axis.transform = (v: number) => {
       return v < Number.MIN_VALUE ? null : Math.log(v) / Math.log(axis.logBase);
     };
-    axis.inverseTransform = v => {
+    axis.inverseTransform = (v: any) => {
       return Math.pow(axis.logBase, v);
     };
 
@@ -784,7 +786,7 @@ class GraphElement {
     }
   }
 
-  generateTicksForLogScaleYAxis(min, max, logBase) {
+  generateTicksForLogScaleYAxis(min: any, max: number, logBase: number) {
     let ticks = [];
 
     let nextTick;
@@ -806,7 +808,7 @@ class GraphElement {
     return ticks;
   }
 
-  configureAxisMode(axis, format) {
+  configureAxisMode(axis: { tickFormatter: (val: any, axis: any) => string }, format: string) {
     axis.tickFormatter = (val, axis) => {
       const formatter = getValueFormat(format);
 
@@ -817,7 +819,7 @@ class GraphElement {
     };
   }
 
-  time_format(ticks, min, max) {
+  time_format(ticks: number, min: number, max: number) {
     if (min && max && ticks) {
       const range = max - min;
       const secPerTick = range / ticks / 1000;
@@ -846,11 +848,11 @@ class GraphElement {
 }
 
 /** @ngInject */
-function graphDirective(timeSrv, popoverSrv, contextSrv, linkSrv) {
+function graphDirective(timeSrv: TimeSrv, popoverSrv: any, contextSrv: ContextSrv, linkSrv: LinkSrv) {
   return {
     restrict: 'A',
     template: '',
-    link: (scope, elem) => {
+    link: (scope: any, elem: JQuery) => {
       return new GraphElement(scope, elem, timeSrv, linkSrv);
     },
   };

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

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import { appEvents } from 'app/core/core';
 
-export default function GraphTooltip(this: any, elem, dashboard, scope, getSeriesFn) {
+export default function GraphTooltip(this: any, elem: any, dashboard: any, scope: any, getSeriesFn: any) {
   const self = this;
   const ctrl = scope.ctrl;
   const panel = ctrl.panel;
@@ -12,7 +12,7 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie
     $tooltip.remove();
   };
 
-  this.findHoverIndexFromDataPoints = (posX, series, last) => {
+  this.findHoverIndexFromDataPoints = (posX: number, series: any, last: number) => {
     const ps = series.datapoints.pointsize;
     const initial = last * ps;
     const len = series.datapoints.points.length;
@@ -30,7 +30,7 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie
     return j / ps - 1;
   };
 
-  this.findHoverIndexFromData = (posX, series) => {
+  this.findHoverIndexFromData = (posX: any, series: any) => {
     let lower = 0;
     let upper = series.data.length - 1;
     let middle;
@@ -49,14 +49,14 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie
     }
   };
 
-  this.renderAndShow = (absoluteTime, innerHtml, pos, xMode) => {
+  this.renderAndShow = (absoluteTime: string, innerHtml: string, pos: { pageX: number; pageY: any }, xMode: string) => {
     if (xMode === 'time') {
       innerHtml = '<div class="graph-tooltip-time">' + absoluteTime + '</div>' + innerHtml;
     }
     $tooltip.html(innerHtml).place_tt(pos.pageX + 20, pos.pageY);
   };
 
-  this.getMultiSeriesPlotHoverInfo = function(seriesList, pos) {
+  this.getMultiSeriesPlotHoverInfo = function(seriesList: any[], pos: { x: number }) {
     let value, i, series, hoverIndex, hoverDistance, pointTime, yaxis;
     // 3 sub-arrays, 1st for hidden series, 2nd for left yaxis, 3rd for right yaxis.
     let results: any = [[], [], []];
@@ -158,7 +158,7 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie
     appEvents.emit('graph-hover-clear');
   });
 
-  elem.bind('plothover', (event, pos, item) => {
+  elem.bind('plothover', (event: any, pos: { panelRelY: number; pageY: number }, item: any) => {
     self.show(pos, item);
 
     // broadcast to other graph panels that we are hovering!
@@ -166,17 +166,17 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie
     appEvents.emit('graph-hover', { pos: pos, panel: panel });
   });
 
-  elem.bind('plotclick', (event, pos, item) => {
+  elem.bind('plotclick', (event: any, pos: any, item: any) => {
     appEvents.emit('graph-click', { pos: pos, panel: panel, item: item });
   });
 
-  this.clear = plot => {
+  this.clear = (plot: { clearCrosshair: () => void; unhighlight: () => void }) => {
     $tooltip.detach();
     plot.clearCrosshair();
     plot.unhighlight();
   };
 
-  this.show = (pos, item) => {
+  this.show = (pos: any, item: any) => {
     const plot = elem.data().plot;
     const plotData = plot.getData();
     const xAxes = plot.getXAxes();
@@ -232,11 +232,11 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie
       // Dynamically reorder the hovercard for the current time point if the
       // option is enabled.
       if (panel.tooltip.sort === 2) {
-        seriesHoverInfo.sort((a, b) => {
+        seriesHoverInfo.sort((a: { value: number }, b: { value: number }) => {
           return b.value - a.value;
         });
       } else if (panel.tooltip.sort === 1) {
-        seriesHoverInfo.sort((a, b) => {
+        seriesHoverInfo.sort((a: { value: number }, b: { value: number }) => {
           return a.value - b.value;
         });
       }

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

@@ -30,7 +30,7 @@ export function getSeriesValues(dataList: TimeSeries[]): number[] {
  * @param bucketSize
  */
 export function convertValuesToHistogram(values: number[], bucketSize: number, min: number, max: number): any[] {
-  const histogram = {};
+  const histogram: any = {};
 
   const minBound = getBucketBound(min, bucketSize);
   const maxBound = getBucketBound(max, bucketSize);
@@ -71,7 +71,7 @@ export function convertToHistogramData(
   min: number,
   max: number
 ): any[] {
-  return data.map(series => {
+  return data.map((series: any) => {
     const values = getSeriesValues([series]);
     series.histogram = true;
     if (!hiddenSeries[series.alias]) {

public/app/plugins/panel/graph/jquery.flot.events.ts

@@ -1,10 +1,12 @@
 import angular from 'angular';
 import $ from 'jquery';
 import _ from 'lodash';
+//@ts-ignore
 import Drop from 'tether-drop';
+import { CreatePlotOverlay } from '@grafana/ui';
 
 /** @ngInject */
-export function createAnnotationToolip(element, event, plot) {
+const createAnnotationToolip: CreatePlotOverlay = (element, event, plot) => {
   const injector = angular.element(document).injector();
   const content = document.createElement('div');
   content.innerHTML = '<annotation-tooltip event="event" on-edit="onEdit()"></annotation-tooltip>';
@@ -45,12 +47,12 @@ export function createAnnotationToolip(element, event, plot) {
       });
     },
   ]);
-}
+};
 
-let markerElementToAttachTo = null;
+let markerElementToAttachTo: any = null;
 
 /** @ngInject */
-export function createEditPopover(element, event, plot) {
+const createEditPopover: CreatePlotOverlay = (element, event, plot) => {
   const eventManager = plot.getOptions().events.manager;
   if (eventManager.editorOpen) {
     // update marker element to attach to (needed in case of legend on the right
@@ -75,7 +77,7 @@ export function createEditPopover(element, event, plot) {
       '$rootScope',
       ($compile, $rootScope) => {
         const scope = $rootScope.$new(true);
-        let drop;
+        let drop: any;
 
         scope.event = event;
         scope.panelCtrl = eventManager.panelCtrl;
@@ -111,7 +113,9 @@ export function createEditPopover(element, event, plot) {
       },
     ]);
   }, 100);
-}
+};
+
+export { createEditPopover, createAnnotationToolip };
 
 /*
  * jquery.flot.events
@@ -141,12 +145,21 @@ export class DrawableEvent {
   _height: any;
 
   /** @ngInject */
-  constructor(object, drawFunc, clearFunc, moveFunc, left, top, width, height) {
+  constructor(
+    object: JQuery,
+    drawFunc: any,
+    clearFunc: any,
+    moveFunc: any,
+    left: number,
+    top: number,
+    width: number,
+    height: number
+  ) {
     this._object = object;
     this._drawFunc = drawFunc;
     this._clearFunc = clearFunc;
     this._moveFunc = moveFunc;
-    this._position = { left: left, top: top };
+    this._position = { left, top };
     this._width = width;
     this._height = height;
   }
@@ -169,7 +182,7 @@ export class DrawableEvent {
   getObject() {
     return this._object;
   }
-  moveTo(position) {
+  moveTo(position: { left: number; top: number }) {
     this._position = position;
     this._moveFunc(this._object, this._position);
   }
@@ -185,7 +198,7 @@ export class VisualEvent {
   _hidden: any;
 
   /** @ngInject */
-  constructor(options, drawableEvent) {
+  constructor(options: any, drawableEvent: DrawableEvent) {
     this._options = options;
     this._drawableEvent = drawableEvent;
     this._hidden = false;
@@ -221,7 +234,7 @@ export class EventMarkers {
   eventsEnabled: any;
 
   /** @ngInject */
-  constructor(plot) {
+  constructor(plot: any) {
     this._events = [];
     this._types = [];
     this._plot = plot;
@@ -232,14 +245,14 @@ export class EventMarkers {
     return this._events;
   }
 
-  setTypes(types) {
+  setTypes(types: any) {
     return (this._types = types);
   }
 
   /**
    * create internal objects for the given events
    */
-  setupEvents(events) {
+  setupEvents(events: any[]) {
     const parts = _.partition(events, 'isRegion');
     const regions = parts[0];
     events = parts[1];
@@ -254,7 +267,7 @@ export class EventMarkers {
       this._events.push(vre);
     });
 
-    this._events.sort((a, b) => {
+    this._events.sort((a: any, b: any) => {
       const ao = a.getOptions(),
         bo = b.getOptions();
       if (ao.min > bo.min) {
@@ -315,7 +328,7 @@ export class EventMarkers {
   /**
    * create a DOM element for the given event
    */
-  _buildDiv(event) {
+  _buildDiv(event: { eventType: any; min: any; editModel: any }) {
     const that = this;
 
     const container = this._plot.getPlaceholder();
@@ -440,13 +453,13 @@ export class EventMarkers {
 
     const drawableEvent = new DrawableEvent(
       line,
-      function drawFunc(obj) {
+      function drawFunc(obj: { show: () => void }) {
         obj.show();
       },
-      obj => {
+      (obj: { remove: () => void }) => {
         obj.remove();
       },
-      (obj, position) => {
+      (obj: any, position: { top: any; left: any }) => {
         obj.css({
           top: position.top,
           left: position.left,
@@ -464,13 +477,19 @@ export class EventMarkers {
   /**
    * create a DOM element for the given region
    */
-  _buildRegDiv(event) {
+  _buildRegDiv(event: { eventType: any; min: number; timeEnd: number; editModel: any }) {
     const that = this;
 
     const container = this._plot.getPlaceholder();
     const o = this._plot.getPlotOffset();
     const xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
-    let top, left, lineWidth, regionWidth, lineStyle, color, markerTooltip;
+    let top,
+      left,
+      lineWidth: number,
+      regionWidth,
+      lineStyle: string | number | cssPropertySetter,
+      color: string,
+      markerTooltip;
 
     // map the eventType to a types object
     const eventTypeId = event.eventType;
@@ -560,13 +579,13 @@ export class EventMarkers {
 
     const drawableEvent = new DrawableEvent(
       region,
-      function drawFunc(obj) {
+      function drawFunc(obj: { show: () => void }) {
         obj.show();
       },
-      obj => {
+      (obj: { remove: () => void }) => {
         obj.remove();
       },
-      (obj, position) => {
+      (obj: { css: (arg0: { top: any; left: any }) => void }, position: { top: any; left: any }) => {
         obj.css({
           top: position.top,
           left: position.left,
@@ -584,7 +603,7 @@ export class EventMarkers {
   /**
    * check if the event is inside visible range
    */
-  _insidePlot(x) {
+  _insidePlot(x: any) {
     const xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
     const xc = xaxis.p2c(x);
     return xc > 0 && xc < xaxis.p2c(xaxis.max);
@@ -596,7 +615,7 @@ export class EventMarkers {
  */
 
 /** @ngInject */
-export function init(this: any, plot) {
+export function init(this: any, plot: any) {
   /*jshint validthis:true */
   const that = this;
   const eventMarkers = new EventMarkers(plot);
@@ -624,20 +643,20 @@ export function init(this: any, plot) {
   };
 
   // change events on an existing plot
-  plot.setEvents = events => {
+  plot.setEvents = (events: any[]) => {
     if (eventMarkers.eventsEnabled) {
       eventMarkers.setupEvents(events);
     }
   };
 
-  plot.hooks.processOptions.push((plot, options) => {
+  plot.hooks.processOptions.push((plot: any, options: any) => {
     // enable the plugin
     if (options.events.data != null) {
       eventMarkers.eventsEnabled = true;
     }
   });
 
-  plot.hooks.draw.push(plot => {
+  plot.hooks.draw.push((plot: any) => {
     const options = plot.getOptions();
 
     if (eventMarkers.eventsEnabled) {
@@ -654,7 +673,7 @@ export function init(this: any, plot) {
   });
 }
 
-const defaultOptions = {
+const defaultOptions: any = {
   events: {
     data: null,
     types: null,

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

@@ -17,6 +17,9 @@ import { PanelQueryRunnerFormat } from 'app/features/dashboard/state/PanelQueryR
 import { GraphContextMenuCtrl } from './GraphContextMenuCtrl';
 import { getDataLinksVariableSuggestions } from 'app/features/panel/panellinks/link_srv';
 
+import { auto } from 'angular';
+import { AnnotationsSrv } from 'app/features/annotations/all';
+
 class GraphCtrl extends MetricsPanelCtrl {
   static template = template;
 
@@ -35,7 +38,7 @@ class GraphCtrl extends MetricsPanelCtrl {
   contextMenuCtrl: GraphContextMenuCtrl;
   linkVariableSuggestions: VariableSuggestion[] = getDataLinksVariableSuggestions();
 
-  panelDefaults = {
+  panelDefaults: any = {
     // datasource name, null = default datasource
     datasource: null,
     // sets client side (flot) or native graphite png renderer (png)
@@ -130,7 +133,7 @@ class GraphCtrl extends MetricsPanelCtrl {
   };
 
   /** @ngInject */
-  constructor($scope, $injector, private annotationsSrv) {
+  constructor($scope: any, $injector: auto.IInjectorService, private annotationsSrv: AnnotationsSrv) {
     super($scope, $injector);
 
     _.defaults(this.panel, this.panelDefaults);
@@ -162,12 +165,12 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.subTabIndex = 0;
   }
 
-  onInitPanelActions(actions) {
+  onInitPanelActions(actions: any[]) {
     actions.push({ text: 'Export CSV', click: 'ctrl.exportCsv()' });
     actions.push({ text: 'Toggle legend', click: 'ctrl.toggleLegend()', shortcut: 'p l' });
   }
 
-  issueQueries(datasource) {
+  issueQueries(datasource: any) {
     this.annotationsPromise = this.annotationsSrv.getAnnotations({
       dashboard: this.dashboard,
       panel: this.panel,
@@ -180,16 +183,16 @@ class GraphCtrl extends MetricsPanelCtrl {
      * (but not wait for completion). This resolves
      * issue 11806.
      */
-    return this.annotationsSrv.datasourcePromises.then(r => {
+    return this.annotationsSrv.datasourcePromises.then((r: any) => {
       return super.issueQueries(datasource);
     });
   }
 
-  zoomOut(evt) {
+  zoomOut(evt: any) {
     this.publishAppEvent('zoom-out', 2);
   }
 
-  onDataSnapshotLoad(snapshotData) {
+  onDataSnapshotLoad(snapshotData: any) {
     this.annotationsPromise = this.annotationsSrv.getAnnotations({
       dashboard: this.dashboard,
       panel: this.panel,
@@ -198,7 +201,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.onDataReceived(snapshotData);
   }
 
-  onDataError(err) {
+  onDataError(err: any) {
     this.seriesList = [];
     this.annotations = [];
     this.render([]);
@@ -242,7 +245,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     }
 
     this.annotationsPromise.then(
-      result => {
+      (result: { alertState: any; annotations: any }) => {
         this.loading = false;
         this.alertState = result.alertState;
         this.annotations = result.annotations;
@@ -269,24 +272,24 @@ class GraphCtrl extends MetricsPanelCtrl {
     }
   }
 
-  onColorChange = (series, color) => {
+  onColorChange = (series: any, color: string) => {
     series.setColor(getColorFromHexRgbOrName(color, config.theme.type));
     this.panel.aliasColors[series.alias] = color;
     this.render();
   };
 
-  onToggleSeries = hiddenSeries => {
+  onToggleSeries = (hiddenSeries: any) => {
     this.hiddenSeries = hiddenSeries;
     this.render();
   };
 
-  onToggleSort = (sortBy, sortDesc) => {
+  onToggleSort = (sortBy: any, sortDesc: any) => {
     this.panel.legend.sort = sortBy;
     this.panel.legend.sortDesc = sortDesc;
     this.render();
   };
 
-  onToggleAxis = info => {
+  onToggleAxis = (info: { alias: any; yaxis: any }) => {
     let override: any = _.find(this.panel.seriesOverrides, { alias: info.alias });
     if (!override) {
       override = { alias: info.alias };
@@ -303,11 +306,11 @@ class GraphCtrl extends MetricsPanelCtrl {
     });
   }
 
-  addSeriesOverride(override) {
+  addSeriesOverride(override: any) {
     this.panel.seriesOverrides.push(override || {});
   }
 
-  removeSeriesOverride(override) {
+  removeSeriesOverride(override: any) {
     this.panel.seriesOverrides = _.without(this.panel.seriesOverrides, override);
     this.render();
   }

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

@@ -2,17 +2,17 @@ import _ from 'lodash';
 import coreModule from 'app/core/core_module';
 
 /** @ngInject */
-export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
+export function SeriesOverridesCtrl($scope: any, $element: JQuery, popoverSrv: any) {
   $scope.overrideMenu = [];
   $scope.currentOverrides = [];
   $scope.override = $scope.override || {};
 
-  $scope.addOverrideOption = (name, propertyName, values) => {
+  $scope.addOverrideOption = (name: string, propertyName: string, values: any) => {
     const option = {
       text: name,
       propertyName: propertyName,
       index: $scope.overrideMenu.length,
-      values: values,
+      values,
       submenu: _.map(values, value => {
         return { text: String(value), value: value };
       }),
@@ -21,7 +21,7 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
     $scope.overrideMenu.push(option);
   };
 
-  $scope.setOverride = (item, subItem) => {
+  $scope.setOverride = (item: { propertyName: string }, subItem: { value: any }) => {
     // handle color overrides
     if (item.propertyName === 'color') {
       $scope.openColorSelector($scope.override['color']);
@@ -41,14 +41,14 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
     $scope.ctrl.render();
   };
 
-  $scope.colorSelected = color => {
+  $scope.colorSelected = (color: any) => {
     $scope.override['color'] = color;
     $scope.updateCurrentOverrides();
     $scope.ctrl.render();
   };
 
-  $scope.openColorSelector = color => {
-    const fakeSeries = { color: color };
+  $scope.openColorSelector = (color: any) => {
+    const fakeSeries = { color };
     popoverSrv.show({
       element: $element.find('.dropdown')[0],
       position: 'top center',
@@ -67,7 +67,7 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
     });
   };
 
-  $scope.removeOverride = option => {
+  $scope.removeOverride = (option: { propertyName: string | number }) => {
     delete $scope.override[option.propertyName];
     $scope.updateCurrentOverrides();
     $scope.ctrl.refresh();

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

@@ -29,7 +29,7 @@ import { graphDirective } from '../graph';
 import { dateTime } from '@grafana/ui/src/utils/moment_wrapper';
 
 const ctx = {} as any;
-let ctrl;
+let ctrl: any;
 const scope = {
   ctrl: {},
   range: {
@@ -41,7 +41,7 @@ const scope = {
 let link;
 
 describe('grafanaGraph', () => {
-  const setupCtx = (beforeRender?) => {
+  const setupCtx = (beforeRender?: any) => {
     config.bootData = {
       user: {
         lightTheme: false,
@@ -110,15 +110,19 @@ describe('grafanaGraph', () => {
       },
       {
         get: () => {},
-      },
-      {}
+      } as any,
+      {} as any
     );
 
     // @ts-ignore
     $.plot = ctrl.plot = jest.fn();
     scope.ctrl = ctrl;
 
-    link = graphDirective({}, {}, {}, {}).link(scope, { width: () => 500, mouseleave: () => {}, bind: () => {} });
+    link = graphDirective({} as any, {}, {} as any, {} as any).link(scope, {
+      width: () => 500,
+      mouseleave: () => {},
+      bind: () => {},
+    } as any);
     if (typeof beforeRender === 'function') {
       beforeRender();
     }
@@ -555,9 +559,9 @@ describe('grafanaGraph', () => {
     });
 
     it('should not contain values lower than min', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(200);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(200);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
     });
   });
 
@@ -576,9 +580,9 @@ describe('grafanaGraph', () => {
     });
 
     it('should not contain values lower than zero', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
     });
   });
 
@@ -597,9 +601,9 @@ describe('grafanaGraph', () => {
     });
 
     it('xaxis min should not affect the histogram', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(-100);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
     });
   });
 
@@ -618,9 +622,9 @@ describe('grafanaGraph', () => {
     });
 
     it('xaxis min should not affect the histogram', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(-100);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
     });
   });
 
@@ -639,9 +643,9 @@ describe('grafanaGraph', () => {
     });
 
     it('should not contain values greater than max', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(200);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(200);
     });
   });
 
@@ -660,9 +664,9 @@ describe('grafanaGraph', () => {
     });
 
     it('should not contain values greater than zero', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(-100);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(-100);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100);
     });
   });
 
@@ -681,9 +685,9 @@ describe('grafanaGraph', () => {
     });
 
     it('xaxis max should not affect the histogram', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(-100);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
     });
   });
 
@@ -702,9 +706,9 @@ describe('grafanaGraph', () => {
     });
 
     it('xaxis max should not should node affect the histogram', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(-100);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
     });
   });
 
@@ -724,9 +728,9 @@ describe('grafanaGraph', () => {
     });
 
     it('should not contain values lower than min and greater than max', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(200);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(200);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(200);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(200);
     });
   });
 
@@ -746,9 +750,9 @@ describe('grafanaGraph', () => {
     });
 
     it('xaxis max should be ignored otherwise the bucketSize is zero', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
     });
   });
 
@@ -768,9 +772,9 @@ describe('grafanaGraph', () => {
     });
 
     it('xaxis min and max should not affect the histogram', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
     });
   });
 
@@ -790,9 +794,9 @@ describe('grafanaGraph', () => {
     });
 
     it('xaxis min and max should not affect the histogram', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
     });
   });
 
@@ -812,9 +816,9 @@ describe('grafanaGraph', () => {
     });
 
     it('xaxis max should be ignored otherwise the bucketSize is negative', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(200);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(200);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
     });
   });
 
@@ -834,9 +838,9 @@ describe('grafanaGraph', () => {
     });
 
     it('xaxis min should be ignored otherwise the bucketSize is negative', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
     });
   });
 
@@ -855,9 +859,9 @@ describe('grafanaGraph', () => {
     });
 
     it('xaxis min should be ignored otherwise the bucketSize is zero', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
     });
   });
 
@@ -876,9 +880,9 @@ describe('grafanaGraph', () => {
     });
 
     it('xaxis min should not affect the histogram', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
     });
   });
 
@@ -897,9 +901,9 @@ describe('grafanaGraph', () => {
     });
 
     it('should calculate correct histogram', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(100);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
     });
   });
 
@@ -918,7 +922,7 @@ describe('grafanaGraph', () => {
     });
 
     it('should calculate empty histogram', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
       expect(nonZero.length).toBe(0);
     });
   });
@@ -938,9 +942,9 @@ describe('grafanaGraph', () => {
     });
 
     it('should calculate correct histogram', () => {
-      const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
-      expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100);
-      expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300);
+      const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0);
+      expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100);
+      expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300);
     });
   });
 });

public/app/plugins/panel/graph/specs/graph_ctrl.test.ts

@@ -33,7 +33,7 @@ describe('GraphCtrl', () => {
   const ctx = {} as any;
 
   beforeEach(() => {
-    ctx.ctrl = new GraphCtrl(scope, injector, {});
+    ctx.ctrl = new GraphCtrl(scope, injector as any, {} as any);
     ctx.ctrl.events = {
       emit: () => {},
     };
@@ -86,7 +86,7 @@ describe('GraphCtrl', () => {
 
   describe('datapointsCount given 2 series', () => {
     beforeEach(() => {
-      const data = [{ target: 'test.cpu1', datapoints: [] }, { target: 'test.cpu2', datapoints: [] }];
+      const data: any = [{ target: 'test.cpu1', datapoints: [] }, { target: 'test.cpu2', datapoints: [] }];
       ctx.ctrl.onDataReceived(data);
     });
 

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

@@ -13,7 +13,7 @@ const elem = $('<div></div>');
 const dashboard = {};
 const getSeriesFn = () => {};
 
-function describeSharedTooltip(desc, fn) {
+function describeSharedTooltip(desc: string, fn: any) {
   const ctx: any = {};
   ctx.ctrl = scope.ctrl;
   ctx.ctrl.panel = {
@@ -24,13 +24,14 @@ function describeSharedTooltip(desc, fn) {
     stack: false,
   };
 
-  ctx.setup = setupFn => {
+  ctx.setup = (setupFn: any) => {
     ctx.setupFn = setupFn;
   };
 
   describe(desc, () => {
     beforeEach(() => {
       ctx.setupFn();
+      // @ts-ignore
       const tooltip = new GraphTooltip(elem, dashboard, scope, getSeriesFn);
       ctx.results = tooltip.getMultiSeriesPlotHoverInfo(ctx.data, ctx.pos);
     });
@@ -40,6 +41,7 @@ function describeSharedTooltip(desc, fn) {
 }
 
 describe('findHoverIndexFromData', () => {
+  // @ts-ignore
   const tooltip = new GraphTooltip(elem, dashboard, scope, getSeriesFn);
   const series = {
     data: [[100, 0], [101, 0], [102, 0], [103, 0], [104, 0], [105, 0], [106, 0], [107, 0]],
@@ -66,7 +68,7 @@ describe('findHoverIndexFromData', () => {
   });
 });
 
-describeSharedTooltip('steppedLine false, stack false', ctx => {
+describeSharedTooltip('steppedLine false, stack false', (ctx: any) => {
   ctx.setup(() => {
     ctx.data = [
       { data: [[10, 15], [12, 20]], lines: {}, hideTooltip: false },
@@ -90,14 +92,14 @@ describeSharedTooltip('steppedLine false, stack false', ctx => {
   });
 });
 
-describeSharedTooltip('one series is hidden', ctx => {
+describeSharedTooltip('one series is hidden', (ctx: any) => {
   ctx.setup(() => {
     ctx.data = [{ data: [[10, 15], [12, 20]] }, { data: [] }];
     ctx.pos = { x: 11 };
   });
 });
 
-describeSharedTooltip('steppedLine false, stack true, individual false', ctx => {
+describeSharedTooltip('steppedLine false, stack true, individual false', (ctx: any) => {
   ctx.setup(() => {
     ctx.data = [
       {
@@ -130,7 +132,7 @@ describeSharedTooltip('steppedLine false, stack true, individual false', ctx =>
   });
 });
 
-describeSharedTooltip('steppedLine false, stack true, individual false, series stack false', ctx => {
+describeSharedTooltip('steppedLine false, stack true, individual false, series stack false', (ctx: any) => {
   ctx.setup(() => {
     ctx.data = [
       {
@@ -163,7 +165,7 @@ describeSharedTooltip('steppedLine false, stack true, individual false, series s
   });
 });
 
-describeSharedTooltip('steppedLine false, stack true, individual true', ctx => {
+describeSharedTooltip('steppedLine false, stack true, individual true', (ctx: any) => {
   ctx.setup(() => {
     ctx.data = [
       {

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

@@ -2,7 +2,7 @@ import { convertValuesToHistogram, getSeriesValues } from '../histogram';
 
 describe('Graph Histogam Converter', () => {
   describe('Values to histogram converter', () => {
-    let values;
+    let values: any;
     let bucketSize = 10;
 
     beforeEach(() => {
@@ -27,7 +27,7 @@ describe('Graph Histogam Converter', () => {
   });
 
   describe('Series to values converter', () => {
-    let data;
+    let data: any;
 
     beforeEach(() => {
       data = [

public/app/plugins/panel/graph/specs/series_override_ctrl.test.ts

@@ -3,7 +3,7 @@ import { SeriesOverridesCtrl } from '../series_overrides_ctrl';
 
 describe('SeriesOverridesCtrl', () => {
   const popoverSrv = {};
-  let $scope;
+  let $scope: any;
 
   beforeEach(() => {
     $scope = {
@@ -14,7 +14,7 @@ describe('SeriesOverridesCtrl', () => {
       },
       render: jest.fn(() => {}),
     };
-    SeriesOverridesCtrl($scope, {}, popoverSrv);
+    SeriesOverridesCtrl($scope, {} as JQuery, popoverSrv);
   });
 
   describe('When setting an override', () => {

public/app/plugins/panel/graph/specs/threshold_manager.test.ts

@@ -3,7 +3,7 @@ import TimeSeries from 'app/core/time_series2';
 import { ThresholdManager } from '../threshold_manager';
 
 describe('ThresholdManager', () => {
-  function plotOptionsScenario(desc, func) {
+  function plotOptionsScenario(desc: string, func: any) {
     describe(desc, () => {
       const ctx: any = {
         panel: {
@@ -15,7 +15,7 @@ describe('ThresholdManager', () => {
         panelCtrl: {},
       };
 
-      ctx.setup = (thresholds, data) => {
+      ctx.setup = (thresholds: any, data: any) => {
         ctx.panel.thresholds = thresholds;
         const manager = new ThresholdManager(ctx.panelCtrl);
         if (data !== undefined) {
@@ -30,7 +30,7 @@ describe('ThresholdManager', () => {
   }
 
   describe('When creating plot markings', () => {
-    plotOptionsScenario('for simple gt threshold', ctx => {
+    plotOptionsScenario('for simple gt threshold', (ctx: any) => {
       ctx.setup([{ op: 'gt', value: 300, fill: true, line: true, colorMode: 'critical' }]);
 
       it('should add fill for threshold with fill: true', () => {
@@ -49,7 +49,7 @@ describe('ThresholdManager', () => {
       });
     });
 
-    plotOptionsScenario('for two gt thresholds', ctx => {
+    plotOptionsScenario('for two gt thresholds', (ctx: any) => {
       ctx.setup([
         { op: 'gt', value: 200, fill: true, colorMode: 'warning' },
         { op: 'gt', value: 300, fill: true, colorMode: 'critical' },
@@ -68,7 +68,7 @@ describe('ThresholdManager', () => {
       });
     });
 
-    plotOptionsScenario('for lt then gt threshold (inside)', ctx => {
+    plotOptionsScenario('for lt then gt threshold (inside)', (ctx: any) => {
       ctx.setup([
         { op: 'lt', value: 300, fill: true, colorMode: 'critical' },
         { op: 'gt', value: 200, fill: true, colorMode: 'critical' },
@@ -87,7 +87,7 @@ describe('ThresholdManager', () => {
       });
     });
 
-    plotOptionsScenario('for gt then lt threshold (outside)', ctx => {
+    plotOptionsScenario('for gt then lt threshold (outside)', (ctx: any) => {
       ctx.setup([
         { op: 'gt', value: 300, fill: true, colorMode: 'critical' },
         { op: 'lt', value: 200, fill: true, colorMode: 'critical' },
@@ -106,7 +106,7 @@ describe('ThresholdManager', () => {
       });
     });
 
-    plotOptionsScenario('for threshold on two Y axes', ctx => {
+    plotOptionsScenario('for threshold on two Y axes', (ctx: any) => {
       const data = new Array(2);
       data[0] = new TimeSeries({
         datapoints: [[0, 1], [300, 2]],

public/app/plugins/panel/graph/specs/time_region_manager.test.ts

@@ -2,7 +2,7 @@ import { TimeRegionManager, colorModes } from '../time_region_manager';
 import { dateTime } from '@grafana/ui/src/utils/moment_wrapper';
 
 describe('TimeRegionManager', () => {
-  function plotOptionsScenario(desc, func) {
+  function plotOptionsScenario(desc: string, func: any) {
     describe(desc, () => {
       const ctx: any = {
         panel: {
@@ -19,7 +19,7 @@ describe('TimeRegionManager', () => {
         },
       };
 
-      ctx.setup = (regions, from, to) => {
+      ctx.setup = (regions: any, from: any, to: any) => {
         ctx.panel.timeRegions = regions;
         ctx.panelCtrl.range.from = from;
         ctx.panelCtrl.range.to = to;
@@ -46,7 +46,7 @@ describe('TimeRegionManager', () => {
   }
 
   describe('When colors missing in config', () => {
-    plotOptionsScenario('should not throw an error when fillColor is undefined', ctx => {
+    plotOptionsScenario('should not throw an error when fillColor is undefined', (ctx: any) => {
       const regions = [
         { fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, line: true, lineColor: '#ffffff', colorMode: 'custom' },
       ];
@@ -54,7 +54,7 @@ describe('TimeRegionManager', () => {
       const to = dateTime('2018-01-01T23:59:00+01:00');
       expect(() => ctx.setup(regions, from, to)).not.toThrow();
     });
-    plotOptionsScenario('should not throw an error when lineColor is undefined', ctx => {
+    plotOptionsScenario('should not throw an error when lineColor is undefined', (ctx: any) => {
       const regions = [
         { fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, fillColor: '#ffffff', line: true, colorMode: 'custom' },
       ];
@@ -65,7 +65,7 @@ describe('TimeRegionManager', () => {
   });
 
   describe('When creating plot markings using local time', () => {
-    plotOptionsScenario('for day of week region', ctx => {
+    plotOptionsScenario('for day of week region', (ctx: any) => {
       const regions = [{ fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, line: true, colorMode: 'red' }];
       const from = dateTime('2018-01-01T00:00:00+01:00');
       const to = dateTime('2018-01-01T23:59:00+01:00');
@@ -97,7 +97,7 @@ describe('TimeRegionManager', () => {
       });
     });
 
-    plotOptionsScenario('for time from region', ctx => {
+    plotOptionsScenario('for time from region', (ctx: any) => {
       const regions = [{ from: '05:00', fill: true, colorMode: 'red' }];
       const from = dateTime('2018-01-01T00:00+01:00');
       const to = dateTime('2018-01-03T23:59+01:00');
@@ -124,7 +124,7 @@ describe('TimeRegionManager', () => {
       });
     });
 
-    plotOptionsScenario('for time to region', ctx => {
+    plotOptionsScenario('for time to region', (ctx: any) => {
       const regions = [{ to: '05:00', fill: true, colorMode: 'red' }];
       const from = dateTime('2018-02-01T00:00+01:00');
       const to = dateTime('2018-02-03T23:59+01:00');
@@ -151,7 +151,7 @@ describe('TimeRegionManager', () => {
       });
     });
 
-    plotOptionsScenario('for time from/to region', ctx => {
+    plotOptionsScenario('for time from/to region', (ctx: any) => {
       const regions = [{ from: '00:00', to: '05:00', fill: true, colorMode: 'red' }];
       const from = dateTime('2018-12-01T00:00+01:00');
       const to = dateTime('2018-12-03T23:59+01:00');
@@ -178,7 +178,7 @@ describe('TimeRegionManager', () => {
       });
     });
 
-    plotOptionsScenario('for time from/to region crossing midnight', ctx => {
+    plotOptionsScenario('for time from/to region crossing midnight', (ctx: any) => {
       const regions = [{ from: '22:00', to: '00:30', fill: true, colorMode: 'red' }];
       const from = dateTime('2018-12-01T12:00+01:00');
       const to = dateTime('2018-12-04T08:00+01:00');
@@ -205,7 +205,7 @@ describe('TimeRegionManager', () => {
       });
     });
 
-    plotOptionsScenario('for day of week from/to region', ctx => {
+    plotOptionsScenario('for day of week from/to region', (ctx: any) => {
       const regions = [{ fromDayOfWeek: 7, toDayOfWeek: 7, fill: true, colorMode: 'red' }];
       const from = dateTime('2018-01-01T18:45:05+01:00');
       const to = dateTime('2018-01-22T08:27:00+01:00');
@@ -232,7 +232,7 @@ describe('TimeRegionManager', () => {
       });
     });
 
-    plotOptionsScenario('for day of week from region', ctx => {
+    plotOptionsScenario('for day of week from region', (ctx: any) => {
       const regions = [{ fromDayOfWeek: 7, fill: true, colorMode: 'red' }];
       const from = dateTime('2018-01-01T18:45:05+01:00');
       const to = dateTime('2018-01-22T08:27:00+01:00');
@@ -259,7 +259,7 @@ describe('TimeRegionManager', () => {
       });
     });
 
-    plotOptionsScenario('for day of week to region', ctx => {
+    plotOptionsScenario('for day of week to region', (ctx: any) => {
       const regions = [{ toDayOfWeek: 7, fill: true, colorMode: 'red' }];
       const from = dateTime('2018-01-01T18:45:05+01:00');
       const to = dateTime('2018-01-22T08:27:00+01:00');
@@ -286,7 +286,7 @@ describe('TimeRegionManager', () => {
       });
     });
 
-    plotOptionsScenario('for day of week from/to time region', ctx => {
+    plotOptionsScenario('for day of week from/to time region', (ctx: any) => {
       const regions = [{ fromDayOfWeek: 7, from: '23:00', toDayOfWeek: 1, to: '01:40', fill: true, colorMode: 'red' }];
       const from = dateTime('2018-12-07T12:51:19+01:00');
       const to = dateTime('2018-12-10T13:51:29+01:00');
@@ -304,7 +304,7 @@ describe('TimeRegionManager', () => {
       });
     });
 
-    plotOptionsScenario('for day of week from/to time region', ctx => {
+    plotOptionsScenario('for day of week from/to time region', (ctx: any) => {
       const regions = [{ fromDayOfWeek: 6, from: '03:00', toDayOfWeek: 7, to: '02:00', fill: true, colorMode: 'red' }];
       const from = dateTime('2018-12-07T12:51:19+01:00');
       const to = dateTime('2018-12-10T13:51:29+01:00');
@@ -322,7 +322,7 @@ describe('TimeRegionManager', () => {
       });
     });
 
-    plotOptionsScenario('for day of week from/to time region with daylight saving time', ctx => {
+    plotOptionsScenario('for day of week from/to time region with daylight saving time', (ctx: any) => {
       const regions = [{ fromDayOfWeek: 7, from: '20:00', toDayOfWeek: 7, to: '23:00', fill: true, colorMode: 'red' }];
       const from = dateTime('2018-03-17T06:00:00+01:00');
       const to = dateTime('2018-04-03T06:00:00+02:00');
@@ -346,7 +346,7 @@ describe('TimeRegionManager', () => {
       });
     });
 
-    plotOptionsScenario('for each day of week with winter time', ctx => {
+    plotOptionsScenario('for each day of week with winter time', (ctx: any) => {
       const regions = [{ fromDayOfWeek: 7, toDayOfWeek: 7, fill: true, colorMode: 'red' }];
       const from = dateTime('2018-10-20T14:50:11+02:00');
       const to = dateTime('2018-11-07T12:56:23+01:00');

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

@@ -7,7 +7,7 @@ export class ThresholdFormCtrl {
   disabled: boolean;
 
   /** @ngInject */
-  constructor($scope) {
+  constructor($scope: any) {
     this.panel = this.panelCtrl.panel;
 
     if (this.panel.alert) {
@@ -35,7 +35,7 @@ export class ThresholdFormCtrl {
     this.panelCtrl.render();
   }
 
-  removeThreshold(index) {
+  removeThreshold(index: number) {
     this.panel.thresholds.splice(index, 1);
     this.panelCtrl.render();
   }
@@ -44,21 +44,21 @@ export class ThresholdFormCtrl {
     this.panelCtrl.render();
   }
 
-  onFillColorChange(index) {
-    return newColor => {
+  onFillColorChange(index: number) {
+    return (newColor: string) => {
       this.panel.thresholds[index].fillColor = newColor;
       this.render();
     };
   }
 
-  onLineColorChange(index) {
-    return newColor => {
+  onLineColorChange(index: number) {
+    return (newColor: string) => {
       this.panel.thresholds[index].lineColor = newColor;
       this.render();
     };
   }
 
-  onThresholdTypeChange(index) {
+  onThresholdTypeChange(index: number) {
     // Because of the ng-model binding, threshold's color mode is already set here
     if (this.panel.thresholds[index].colorMode === 'custom') {
       this.panel.thresholds[index].fillColor = tinycolor(config.theme.colors.blueBase)

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

@@ -27,7 +27,7 @@ describe('HeatmapCtrl', () => {
 
   describe('when time series are outside range', () => {
     beforeEach(() => {
-      const data = [
+      const data: any = [
         {
           target: 'test.cpu1',
           datapoints: [[45, 1234567890], [60, 1234567899]],
@@ -52,7 +52,7 @@ describe('HeatmapCtrl', () => {
         to: dateTime().valueOf(),
       };
 
-      const data = [
+      const data: any = [
         {
           target: 'test.cpu1',
           datapoints: [[45, range.from + 1000], [60, range.from + 10000]],
@@ -70,7 +70,7 @@ describe('HeatmapCtrl', () => {
 
   describe('datapointsCount given 2 series', () => {
     beforeEach(() => {
-      const data = [{ target: 'test.cpu1', datapoints: [] }, { target: 'test.cpu2', datapoints: [] }];
+      const data: any = [{ target: 'test.cpu1', datapoints: [] }, { target: 'test.cpu2', datapoints: [] }];
       ctx.ctrl.onDataReceived(data);
     });
 

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

@@ -17,7 +17,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
   table: any;
   renderer: any;
 
-  panelDefaults = {
+  panelDefaults: any = {
     targets: [{}],
     transform: 'timeseries_to_columns',
     pageSize: null,
@@ -180,7 +180,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
   }
 
   link(scope: any, elem: JQuery, attrs: any, ctrl: TablePanelCtrl) {
-    let data;
+    let data: any;
     const panel = ctrl.panel;
     let pageCount = 0;
 
@@ -194,19 +194,19 @@ class TablePanelCtrl extends MetricsPanelCtrl {
       return panelHeight - 31 + 'px';
     }
 
-    function appendTableRows(tbodyElem) {
+    function appendTableRows(tbodyElem: JQuery) {
       ctrl.renderer.setTable(data);
       tbodyElem.empty();
       tbodyElem.html(ctrl.renderer.render(ctrl.pageIndex));
     }
 
-    function switchPage(e) {
+    function switchPage(e: any) {
       const el = $(e.currentTarget);
       ctrl.pageIndex = parseInt(el.text(), 10) - 1;
       renderPanel();
     }
 
-    function appendPaginationControls(footerElem) {
+    function appendPaginationControls(footerElem: JQuery) {
       footerElem.empty();
 
       const pageSize = panel.pageSize || 100;
@@ -251,7 +251,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
       selector: '[data-link-tooltip]',
     });
 
-    function addFilterClicked(e) {
+    function addFilterClicked(e: any) {
       const filterData = $(e.currentTarget).data();
       const options = {
         datasource: panel.datasource,
@@ -272,7 +272,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
       unbindDestroy();
     });
 
-    ctrl.events.on('render', renderData => {
+    ctrl.events.on('render', (renderData: any) => {
       data = renderData || data;
       if (data) {
         renderPanel();

public/app/routes/GrafanaCtrl.ts

@@ -1,6 +1,7 @@
 // Libraries
 import _ from 'lodash';
 import $ from 'jquery';
+// @ts-ignore
 import Drop from 'tether-drop';
 
 // Utils and servies

public/app/routes/registry.ts

@@ -1,10 +1,12 @@
+import { route } from 'angular';
+
 interface RegisterRoutesHandler {
-  ($routeProvider): any;
+  ($routeProvider: route.IRouteProvider): any;
 }
 
 const handlers: RegisterRoutesHandler[] = [];
 
-export function applyRouteRegistrationHandlers($routeProvider) {
+export function applyRouteRegistrationHandlers($routeProvider: route.IRouteProvider) {
   for (const handler of handlers) {
     handler($routeProvider);
   }

public/app/store/store.ts

@@ -1,5 +1,5 @@
-export let store;
+export let store: any;
 
-export function setStore(newStore) {
+export function setStore(newStore: any) {
   store = newStore;
 }

public/e2e-test/core/pages.ts

@@ -49,6 +49,7 @@ export class TestPage<T> implements TestPageType<T> {
     }
 
     Object.keys(this.pageObjects).forEach(key => {
+      // @ts-ignore
       const pageObject: PageObject = this.pageObjects[key];
       pageObject.init(page);
     });

public/test/core/redux/epicTester.ts

@@ -106,6 +106,7 @@ export const epicTester = (
   };
 
   const getDependencyMock = (dependency: string, method?: string) => {
+    // @ts-ignore
     const dep = theDependencies[dependency];
     let mock = null;
     if (dep instanceof Function) {

scripts/ci-frontend-metrics.sh

@@ -3,7 +3,7 @@
 echo -e "Collecting code stats (typescript errors & more)"
 
 
-ERROR_COUNT_LIMIT=4400
+ERROR_COUNT_LIMIT=3789
 DIRECTIVES_LIMIT=172
 CONTROLLERS_LIMIT=139
 

yarn.lock

@@ -2376,6 +2376,11 @@
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.1.tgz#2f5670c9d1d6e558897a810ed284b44918fc1253"
 
+"@types/tinycolor2@1.4.2":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.2.tgz#721ca5c5d1a2988b4a886e35c2ffc5735b6afbdf"
+  integrity sha512-PeHg/AtdW6aaIO2a+98Xj7rWY4KC1E6yOy7AFknJQ7VXUGNrMlyxDFxJo7HqLtjQms/ZhhQX52mLVW/EX3JGOw==
+
 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"