noImplicitAny: Down approx 200 errors (#18143)

* noImplicitAny playlist approx 200

* Add AngularPanelMenuItem interface

* Roughly 100 noImplicitAny

package.json

@@ -179,6 +179,7 @@
     "@types/d3-scale-chromatic": "1.3.1",
     "@types/enzyme-adapter-react-16": "1.0.5",
     "@types/marked": "0.6.5",
+    "@types/prismjs": "1.16.0",
     "@types/react-redux": "^7.0.8",
     "@types/react-test-renderer": "16.8.2",
     "@types/redux-logger": "3.0.7",

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

@@ -123,6 +123,16 @@ export interface PanelMenuItem {
   subMenu?: PanelMenuItem[];
 }
 
+export interface AngularPanelMenuItem {
+  click: Function;
+  icon: string;
+  href: string;
+  divider: boolean;
+  text: string;
+  shortcut: string;
+  submenu: any[];
+}
+
 export enum VizOrientation {
   Auto = 'auto',
   Vertical = 'vertical',

public/app/features/explore/state/reducers.ts

@@ -667,6 +667,7 @@ export const exploreReducer = (state = initialExploreState, action: HigherOrderA
   if (action.payload) {
     const { exploreId } = action.payload as any;
     if (exploreId !== undefined) {
+      // @ts-ignore
       const exploreItemState = state[exploreId];
       return { ...state, [exploreId]: itemReducer(exploreItemState, action) };
     }

public/app/features/explore/state/selectors.test.ts

@@ -2,7 +2,7 @@ import { deduplicatedLogsSelector } from './selectors';
 import { LogsDedupStrategy } from '@grafana/data';
 import { ExploreItemState } from 'app/types';
 
-const state = {
+const state: any = {
   logsResult: {
     rows: [
       {

public/app/features/folders/CreateFolderCtrl.ts

@@ -1,5 +1,9 @@
 import appEvents from 'app/core/app_events';
 import locationUtil from 'app/core/utils/location_util';
+import { BackendSrv } from 'app/core/services/backend_srv';
+import { ILocationService } from 'angular';
+import { ValidationSrv } from 'app/features/manage-dashboards';
+import { NavModelSrv } from 'app/core/nav_model_srv';
 
 export default class CreateFolderCtrl {
   title = '';
@@ -9,7 +13,12 @@ export default class CreateFolderCtrl {
   validationError: any;
 
   /** @ngInject */
-  constructor(private backendSrv, private $location, private validationSrv, navModelSrv) {
+  constructor(
+    private backendSrv: BackendSrv,
+    private $location: ILocationService,
+    private validationSrv: ValidationSrv,
+    navModelSrv: NavModelSrv
+  ) {
     this.navModel = navModelSrv.getNav('dashboards', 'manage-dashboards', 0);
   }
 
@@ -18,7 +27,7 @@ export default class CreateFolderCtrl {
       return;
     }
 
-    return this.backendSrv.createFolder({ title: this.title }).then(result => {
+    return this.backendSrv.createFolder({ title: this.title }).then((result: any) => {
       appEvents.emit('alert-success', ['Folder Created', 'OK']);
       this.$location.url(locationUtil.stripBaseFromUrl(result.url));
     });

public/app/features/folders/FolderDashboardsCtrl.ts

@@ -1,5 +1,7 @@
 import { FolderPageLoader } from './services/FolderPageLoader';
 import locationUtil from 'app/core/utils/location_util';
+import { NavModelSrv } from 'app/core/core';
+import { ILocationService } from 'angular';
 
 export default class FolderDashboardsCtrl {
   navModel: any;
@@ -7,13 +9,18 @@ export default class FolderDashboardsCtrl {
   uid: string;
 
   /** @ngInject */
-  constructor(private backendSrv, navModelSrv, private $routeParams, $location) {
+  constructor(
+    private backendSrv: any,
+    navModelSrv: NavModelSrv,
+    private $routeParams: any,
+    $location: ILocationService
+  ) {
     if (this.$routeParams.uid) {
       this.uid = $routeParams.uid;
 
       const loader = new FolderPageLoader(this.backendSrv);
 
-      loader.load(this, this.uid, 'manage-folder-dashboards').then(folder => {
+      loader.load(this, this.uid, 'manage-folder-dashboards').then((folder: any) => {
         const url = locationUtil.stripBaseFromUrl(folder.url);
 
         if (url !== $location.path()) {

public/app/features/folders/services/FolderPageLoader.ts

@@ -1,7 +1,9 @@
+import { BackendSrv } from 'app/core/services/backend_srv';
+
 export class FolderPageLoader {
-  constructor(private backendSrv) {}
+  constructor(private backendSrv: BackendSrv) {}
 
-  load(ctrl, uid, activeChildId) {
+  load(ctrl: any, uid: any, activeChildId: any) {
     ctrl.navModel = {
       main: {
         icon: 'fa fa-folder-open',
@@ -36,20 +38,20 @@ export class FolderPageLoader {
       },
     };
 
-    return this.backendSrv.getFolderByUid(uid).then(folder => {
+    return this.backendSrv.getFolderByUid(uid).then((folder: any) => {
       ctrl.folderId = folder.id;
       const folderTitle = folder.title;
       const folderUrl = folder.url;
       ctrl.navModel.main.text = folderTitle;
 
-      const dashTab = ctrl.navModel.main.children.find(child => child.id === 'manage-folder-dashboards');
+      const dashTab = ctrl.navModel.main.children.find((child: any) => child.id === 'manage-folder-dashboards');
       dashTab.url = folderUrl;
 
       if (folder.canAdmin) {
-        const permTab = ctrl.navModel.main.children.find(child => child.id === 'manage-folder-permissions');
+        const permTab = ctrl.navModel.main.children.find((child: any) => child.id === 'manage-folder-permissions');
         permTab.url = folderUrl + '/permissions';
 
-        const settingsTab = ctrl.navModel.main.children.find(child => child.id === 'manage-folder-settings');
+        const settingsTab = ctrl.navModel.main.children.find((child: any) => child.id === 'manage-folder-settings');
         settingsTab.url = folderUrl + '/settings';
       } else {
         ctrl.navModel.main.children = [dashTab];

public/app/features/manage-dashboards/DashboardImportCtrl.test.ts

@@ -4,9 +4,9 @@ import config from 'app/core/config';
 describe('DashboardImportCtrl', () => {
   const ctx: any = {};
 
-  let navModelSrv;
-  let backendSrv;
-  let validationSrv;
+  let navModelSrv: any;
+  let backendSrv: any;
+  let validationSrv: any;
 
   beforeEach(() => {
     navModelSrv = {
@@ -23,7 +23,7 @@ describe('DashboardImportCtrl', () => {
       validateNewDashboardName: jest.fn().mockReturnValue(Promise.resolve()),
     };
 
-    ctx.ctrl = new DashboardImportCtrl(backendSrv, validationSrv, navModelSrv, {}, {});
+    ctx.ctrl = new DashboardImportCtrl(backendSrv, validationSrv, navModelSrv, {} as any, {} as any);
   });
 
   describe('when uploading json', () => {

public/app/features/manage-dashboards/DashboardImportCtrl.ts

@@ -1,6 +1,10 @@
 import _ from 'lodash';
 import config from 'app/core/config';
 import locationUtil from 'app/core/utils/location_util';
+import { BackendSrv } from '@grafana/runtime';
+import { ValidationSrv } from './services/ValidationSrv';
+import { NavModelSrv } from 'app/core/core';
+import { ILocationService } from 'angular';
 
 export class DashboardImportCtrl {
   navModel: any;
@@ -27,7 +31,13 @@ export class DashboardImportCtrl {
   isValidFolderSelection: boolean;
 
   /** @ngInject */
-  constructor(private backendSrv, private validationSrv, navModelSrv, private $location, $routeParams) {
+  constructor(
+    private backendSrv: BackendSrv,
+    private validationSrv: ValidationSrv,
+    navModelSrv: NavModelSrv,
+    private $location: ILocationService,
+    $routeParams: any
+  ) {
     this.navModel = navModelSrv.getNav('create', 'import');
 
     this.step = 1;
@@ -45,7 +55,7 @@ export class DashboardImportCtrl {
     }
   }
 
-  onUpload(dash) {
+  onUpload(dash: any) {
     this.dash = dash;
     this.dash.id = null;
     this.step = 2;
@@ -53,7 +63,7 @@ export class DashboardImportCtrl {
 
     if (this.dash.__inputs) {
       for (const input of this.dash.__inputs) {
-        const inputModel = {
+        const inputModel: any = {
           name: input.name,
           label: input.label,
           info: input.description,
@@ -78,7 +88,7 @@ export class DashboardImportCtrl {
     this.uidChanged(true);
   }
 
-  setDatasourceOptions(input, inputModel) {
+  setDatasourceOptions(input: { pluginId: string; pluginName: string }, inputModel: any) {
     const sources = _.filter(config.datasources, val => {
       return val.type === input.pluginId;
     });
@@ -123,7 +133,7 @@ export class DashboardImportCtrl {
       });
   }
 
-  uidChanged(initial) {
+  uidChanged(initial: boolean) {
     this.uidExists = false;
     this.hasUidValidationError = false;
 
@@ -132,20 +142,21 @@ export class DashboardImportCtrl {
     }
 
     this.backendSrv
+      // @ts-ignore
       .getDashboardByUid(this.dash.uid)
-      .then(res => {
+      .then((res: any) => {
         this.uidExists = true;
         this.hasUidValidationError = true;
         this.uidValidationError = `Dashboard named '${res.dashboard.title}' in folder '${
           res.meta.folderTitle
         }' has the same uid`;
       })
-      .catch(err => {
+      .catch((err: any) => {
         err.isHandled = true;
       });
   }
 
-  onFolderChange(folder) {
+  onFolderChange(folder: any) {
     this.folderId = folder.id;
     this.titleChanged();
   }

public/app/features/manage-dashboards/DashboardListCtrl.ts

@@ -1,8 +1,10 @@
+import { NavModelSrv } from 'app/core/core';
+
 export class DashboardListCtrl {
   navModel: any;
 
   /** @ngInject */
-  constructor(navModelSrv) {
+  constructor(navModelSrv: NavModelSrv) {
     this.navModel = navModelSrv.getNav('dashboards', 'manage-dashboards', 0);
   }
 }

public/app/features/manage-dashboards/SnapshotListCtrl.ts

@@ -1,22 +1,30 @@
 import _ from 'lodash';
+import { NavModelSrv } from 'app/core/core';
+import { ILocationService } from 'angular';
+import { BackendSrv } from '@grafana/runtime';
 
 export class SnapshotListCtrl {
   navModel: any;
   snapshots: any;
 
   /** @ngInject */
-  constructor(private $rootScope, private backendSrv, navModelSrv, private $location) {
+  constructor(
+    private $rootScope: any,
+    private backendSrv: BackendSrv,
+    navModelSrv: NavModelSrv,
+    private $location: ILocationService
+  ) {
     this.navModel = navModelSrv.getNav('dashboards', 'snapshots', 0);
-    this.backendSrv.get('/api/dashboard/snapshots').then(result => {
+    this.backendSrv.get('/api/dashboard/snapshots').then((result: any) => {
       const baseUrl = this.$location.absUrl().replace($location.url(), '');
-      this.snapshots = result.map(snapshot => ({
+      this.snapshots = result.map((snapshot: any) => ({
         ...snapshot,
         url: snapshot.externalUrl || `${baseUrl}/dashboard/snapshot/${snapshot.key}`,
       }));
     });
   }
 
-  removeSnapshotConfirmed(snapshot) {
+  removeSnapshotConfirmed(snapshot: any) {
     _.remove(this.snapshots, { key: snapshot.key });
     this.backendSrv.delete('/api/snapshots/' + snapshot.key).then(
       () => {},
@@ -26,7 +34,7 @@ export class SnapshotListCtrl {
     );
   }
 
-  removeSnapshot(snapshot) {
+  removeSnapshot(snapshot: any) {
     this.$rootScope.appEvent('confirm-modal', {
       title: 'Delete',
       text: 'Are you sure you want to delete snapshot ' + snapshot.name + '?',

public/app/features/manage-dashboards/components/MoveToFolderModal/MoveToFolderCtrl.ts

@@ -1,5 +1,6 @@
 import coreModule from 'app/core/core_module';
 import appEvents from 'app/core/app_events';
+import { BackendSrv } from 'app/core/services/backend_srv';
 
 export class MoveToFolderCtrl {
   dashboards: any;
@@ -9,14 +10,14 @@ export class MoveToFolderCtrl {
   isValidFolderSelection = true;
 
   /** @ngInject */
-  constructor(private backendSrv) {}
+  constructor(private backendSrv: BackendSrv) {}
 
-  onFolderChange(folder) {
+  onFolderChange(folder: any) {
     this.folder = folder;
   }
 
   save() {
-    return this.backendSrv.moveDashboards(this.dashboards, this.folder).then(result => {
+    return this.backendSrv.moveDashboards(this.dashboards, this.folder).then((result: any) => {
       if (result.successCount > 0) {
         const header = `Dashboard${result.successCount === 1 ? '' : 's'} Moved`;
         const msg = `${result.successCount} dashboard${result.successCount === 1 ? '' : 's'} moved to ${

public/app/features/manage-dashboards/components/UploadDashboard/uploadDashboardDirective.ts

@@ -1,6 +1,6 @@
 import coreModule from 'app/core/core_module';
 import appEvents from 'app/core/app_events';
-import angular from 'angular';
+import angular, { ILocationService } from 'angular';
 
 const template = `
 <input type="file" id="dashupload" name="dashupload" class="hide" onchange="angular.element(this).scope().file_selected"/>
@@ -10,7 +10,7 @@ const template = `
 `;
 
 /** @ngInject */
-export function uploadDashboardDirective(timer, $location) {
+export function uploadDashboardDirective(timer: any, $location: ILocationService) {
   return {
     restrict: 'E',
     template: template,
@@ -18,14 +18,14 @@ export function uploadDashboardDirective(timer, $location) {
       onUpload: '&',
       btnText: '@?',
     },
-    link: (scope, elem) => {
+    link: (scope: any, elem: JQuery) => {
       scope.btnText = angular.isDefined(scope.btnText) ? scope.btnText : 'Upload .json file';
 
-      function file_selected(evt) {
+      function file_selected(evt: any) {
         const files = evt.target.files; // FileList object
         const readerOnload = () => {
-          return e => {
-            let dash;
+          return (e: any) => {
+            let dash: any;
             try {
               dash = JSON.parse(e.target.result);
             } catch (err) {
@@ -35,7 +35,7 @@ export function uploadDashboardDirective(timer, $location) {
             }
 
             scope.$apply(() => {
-              scope.onUpload({ dash: dash });
+              scope.onUpload({ dash });
             });
           };
         };

public/app/features/manage-dashboards/services/ValidationSrv.ts

@@ -1,4 +1,6 @@
 import coreModule from 'app/core/core_module';
+import { IQService } from 'angular';
+import { BackendSrv } from 'app/core/services/backend_srv';
 
 const hitTypes = {
   FOLDER: 'dash-folder',
@@ -9,17 +11,17 @@ export class ValidationSrv {
   rootName = 'general';
 
   /** @ngInject */
-  constructor(private $q, private backendSrv) {}
+  constructor(private $q: IQService, private backendSrv: BackendSrv) {}
 
-  validateNewDashboardName(folderId, name) {
+  validateNewDashboardName(folderId: any, name: string) {
     return this.validate(folderId, name, 'A dashboard in this folder with the same name already exists');
   }
 
-  validateNewFolderName(name) {
+  validateNewFolderName(name: string) {
     return this.validate(0, name, 'A folder or dashboard in the general folder with the same name already exists');
   }
 
-  private validate(folderId, name, existingErrorMessage) {
+  private validate(folderId: any, name: string, existingErrorMessage: string) {
     name = (name || '').trim();
     const nameLowerCased = name.toLowerCase();
 
@@ -44,7 +46,7 @@ export class ValidationSrv {
     promises.push(this.backendSrv.search({ type: hitTypes.DASHBOARD, folderIds: [folderId], query: name }));
 
     this.$q.all(promises).then(res => {
-      let hits = [];
+      let hits: any[] = [];
 
       if (res.length > 0 && res[0].length > 0) {
         hits = res[0];

public/app/features/org/NewOrgCtrl.ts

@@ -1,14 +1,16 @@
 import angular from 'angular';
 import config from 'app/core/config';
+import { BackendSrv } from 'app/core/services/backend_srv';
+import { NavModelSrv } from 'app/core/core';
 
 export class NewOrgCtrl {
   /** @ngInject */
-  constructor($scope, $http, backendSrv, navModelSrv) {
+  constructor($scope: any, $http: any, backendSrv: BackendSrv, navModelSrv: NavModelSrv) {
     $scope.navModel = navModelSrv.getNav('admin', 'global-orgs', 0);
     $scope.newOrg = { name: '' };
 
     $scope.createOrg = () => {
-      backendSrv.post('/api/orgs/', $scope.newOrg).then(result => {
+      backendSrv.post('/api/orgs/', $scope.newOrg).then((result: any) => {
         backendSrv.post('/api/user/using/' + result.orgId).then(() => {
           window.location.href = config.appSubUrl + '/org';
         });

public/app/features/org/OrgDetailsPage.tsx

@@ -22,7 +22,7 @@ export class OrgDetailsPage extends PureComponent<Props> {
     await this.props.loadOrganization();
   }
 
-  onOrgNameChange = name => {
+  onOrgNameChange = (name: string) => {
     this.props.setOrganizationName(name);
   };
 

public/app/features/org/SelectOrgCtrl.ts

@@ -1,9 +1,10 @@
 import angular from 'angular';
 import config from 'app/core/config';
+import { BackendSrv } from 'app/core/services/backend_srv';
 
 export class SelectOrgCtrl {
   /** @ngInject */
-  constructor($scope, backendSrv, contextSrv) {
+  constructor($scope: any, backendSrv: BackendSrv, contextSrv: any) {
     contextSrv.sidemenu = false;
 
     $scope.navModel = {
@@ -19,12 +20,12 @@ export class SelectOrgCtrl {
     };
 
     $scope.getUserOrgs = () => {
-      backendSrv.get('/api/user/orgs').then(orgs => {
+      backendSrv.get('/api/user/orgs').then((orgs: any) => {
         $scope.orgs = orgs;
       });
     };
 
-    $scope.setUsingOrg = org => {
+    $scope.setUsingOrg = (org: any) => {
       backendSrv.post('/api/user/using/' + org.orgId).then(() => {
         window.location.href = config.appSubUrl + '/';
       });

public/app/features/org/UserInviteCtrl.ts

@@ -1,4 +1,7 @@
 import coreModule from 'app/core/core_module';
+import { BackendSrv } from 'app/core/services/backend_srv';
+import { NavModelSrv } from 'app/core/core';
+import { ILocationService } from 'angular';
 
 export class UserInviteCtrl {
   navModel: any;
@@ -6,7 +9,7 @@ export class UserInviteCtrl {
   inviteForm: any;
 
   /** @ngInject */
-  constructor(private backendSrv, navModelSrv, private $location) {
+  constructor(private backendSrv: BackendSrv, navModelSrv: NavModelSrv, private $location: ILocationService) {
     this.navModel = navModelSrv.getNav('cfg', 'users', 0);
 
     this.invite = {

public/app/features/panel/GeneralTabCtrl.ts

@@ -1,6 +1,6 @@
 import coreModule from 'app/core/core_module';
 
-const obj2string = obj => {
+const obj2string = (obj: any) => {
   return Object.keys(obj)
     .reduce((acc, curr) => acc.concat(curr + '=' + obj[curr]), [])
     .join();
@@ -10,7 +10,7 @@ export class GeneralTabCtrl {
   panelCtrl: any;
 
   /** @ngInject */
-  constructor($scope) {
+  constructor($scope: any) {
     this.panelCtrl = $scope.ctrl;
 
     const updatePanel = () => {
@@ -18,7 +18,7 @@ export class GeneralTabCtrl {
       this.panelCtrl.panel.render();
     };
 
-    const generateValueFromPanel = scope => {
+    const generateValueFromPanel = (scope: any) => {
       const { panel } = scope.ctrl;
       const panelPropsToTrack = ['title', 'description', 'transparent', 'repeat', 'repeatDirection', 'minSpan'];
       const panelPropsString = panelPropsToTrack

public/app/features/panel/panel_directive.ts

@@ -1,6 +1,8 @@
 import angular from 'angular';
 import $ from 'jquery';
+// @ts-ignore
 import Drop from 'tether-drop';
+// @ts-ignore
 import baron from 'baron';
 
 const module = angular.module('grafana.directives');
@@ -38,14 +40,14 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
       const panelContent = elem.find('.panel-content');
       const cornerInfoElem = elem.find('.panel-info-corner');
       const ctrl = scope.ctrl;
-      let infoDrop;
-      let panelScrollbar;
+      let infoDrop: any;
+      let panelScrollbar: any;
 
       // the reason for handling these classes this way is for performance
       // limit the watchers on panels etc
       let transparentLastState = false;
       let lastHasAlertRule = false;
-      let lastAlertState;
+      let lastAlertState: boolean;
       let hasAlertRule;
 
       function mouseEnter() {

public/app/features/panel/panel_editor_tab.ts

@@ -1,16 +1,16 @@
 import angular from 'angular';
 
 const directiveModule = angular.module('grafana.directives');
-const directiveCache = {};
+const directiveCache: any = {};
 
 /** @ngInject */
-function panelEditorTab(dynamicDirectiveSrv) {
+function panelEditorTab(dynamicDirectiveSrv: any) {
   return dynamicDirectiveSrv.create({
     scope: {
       ctrl: '=',
       editorTab: '=',
     },
-    directive: scope => {
+    directive: (scope: any) => {
       const pluginId = scope.ctrl.pluginId;
       const tabName = scope.editorTab.title
         .toLowerCase()

public/app/features/panel/panel_header.ts

@@ -1,4 +1,5 @@
 import { coreModule } from 'app/core/core';
+import { AngularPanelMenuItem } from '@grafana/ui';
 
 const template = `
 <span class="panel-title">
@@ -12,7 +13,7 @@ const template = `
   <span class="panel-time-info" ng-if="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>
 </span>`;
 
-function renderMenuItem(item, ctrl) {
+function renderMenuItem(item: AngularPanelMenuItem, ctrl: any) {
   let html = '';
   let listItemClass = '';
 
@@ -54,7 +55,7 @@ function renderMenuItem(item, ctrl) {
   return html;
 }
 
-function createMenuTemplate(ctrl) {
+function createMenuTemplate(ctrl: any) {
   let html = '';
 
   for (const item of ctrl.getMenu()) {
@@ -65,16 +66,16 @@ function createMenuTemplate(ctrl) {
 }
 
 /** @ngInject */
-function panelHeader($compile) {
+function panelHeader($compile: any) {
   return {
     restrict: 'E',
     template: template,
-    link: (scope, elem, attrs) => {
+    link: (scope: any, elem: any, attrs: any) => {
       const menuElem = elem.find('.panel-menu');
-      let menuScope;
-      let isDragged;
+      let menuScope: any;
+      let isDragged: boolean;
 
-      elem.click(evt => {
+      elem.click((evt: any) => {
         const targetClass = evt.target.className;
 
         // remove existing scope
@@ -92,20 +93,20 @@ function panelHeader($compile) {
         }
       });
 
-      function togglePanelMenu(e) {
+      function togglePanelMenu(e: any) {
         if (!isDragged) {
           e.stopPropagation();
           elem.find('[data-toggle=dropdown]').dropdown('toggle');
         }
       }
 
-      let mouseX, mouseY;
-      elem.mousedown(e => {
+      let mouseX: number, mouseY: number;
+      elem.mousedown((e: any) => {
         mouseX = e.pageX;
         mouseY = e.pageY;
       });
 
-      elem.mouseup(e => {
+      elem.mouseup((e: any) => {
         if (mouseX === e.pageX && mouseY === e.pageY) {
           isDragged = false;
         } else {

public/app/features/panel/panellinks/link_srv.ts

@@ -55,6 +55,7 @@ interface LinkModel {
 interface LinkDataPoint {
   datapoint: TimeSeriesValue[];
   seriesName: string;
+  [key: number]: any;
 }
 export interface LinkService {
   getDataLinkUIModel: (link: DataLink, scopedVars: ScopedVars, dataPoint?: LinkDataPoint) => LinkModel;

public/app/features/panel/panellinks/module.ts

@@ -1,6 +1,7 @@
 import angular from 'angular';
 import _ from 'lodash';
 import './link_srv';
+import { BackendSrv } from 'app/core/services/backend_srv';
 
 function panelLinksEditor() {
   return {
@@ -16,7 +17,7 @@ function panelLinksEditor() {
 
 export class PanelLinksEditorCtrl {
   /** @ngInject */
-  constructor($scope, backendSrv) {
+  constructor($scope: any, backendSrv: BackendSrv) {
     $scope.panel.links = $scope.panel.links || [];
 
     $scope.addLink = () => {
@@ -25,7 +26,7 @@ export class PanelLinksEditorCtrl {
       });
     };
 
-    $scope.searchDashboards = (queryStr, callback) => {
+    $scope.searchDashboards = (queryStr: string, callback: Function) => {
       backendSrv.search({ query: queryStr }).then(hits => {
         const dashboards = _.map(hits, dash => {
           return dash.title;
@@ -35,7 +36,7 @@ export class PanelLinksEditorCtrl {
       });
     };
 
-    $scope.dashboardChanged = link => {
+    $scope.dashboardChanged = (link: any) => {
       backendSrv.search({ query: link.dashboard }).then(hits => {
         const dashboard: any = _.find(hits, { title: link.dashboard });
         if (dashboard) {
@@ -50,7 +51,7 @@ export class PanelLinksEditorCtrl {
       });
     };
 
-    $scope.deleteLink = link => {
+    $scope.deleteLink = (link: any) => {
       $scope.panel.links = _.without($scope.panel.links, link);
     };
   }

public/app/features/panel/query_ctrl.ts

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import { auto } from 'angular';
 
 export class QueryCtrl {
   target: any;
@@ -9,7 +10,7 @@ export class QueryCtrl {
   error: string;
   isLastQuery: boolean;
 
-  constructor(public $scope, public $injector) {
+  constructor(public $scope: any, public $injector: auto.IInjectorService) {
     this.panel = this.panelCtrl.panel;
     this.isLastQuery = _.indexOf(this.panel.targets, this.target) === this.panel.targets.length - 1;
   }

public/app/features/panel/repeat_option.ts

@@ -1,5 +1,5 @@
 import { coreModule } from 'app/core/core';
-
+import { VariableSrv } from 'app/features/templating/variable_srv';
 const template = `
 <div class="gf-form-select-wrapper max-width-18">
   <select class="gf-form-input" ng-model="panel.repeat" ng-options="f.value as f.text for f in variables" ng-change="optionChanged()">
@@ -8,17 +8,17 @@ const template = `
 `;
 
 /** @ngInject */
-function dashRepeatOptionDirective(variableSrv) {
+function dashRepeatOptionDirective(variableSrv: VariableSrv) {
   return {
     restrict: 'E',
     template: template,
     scope: {
       panel: '=',
     },
-    link: (scope, element) => {
+    link: (scope: any, element: JQuery) => {
       element.css({ display: 'block', width: '100%' });
 
-      scope.variables = variableSrv.variables.map(item => {
+      scope.variables = variableSrv.variables.map((item: any) => {
         return { text: item.name, value: item.name };
       });
 

public/app/features/panel/specs/metrics_panel_ctrl.test.ts

@@ -13,6 +13,7 @@ jest.mock('app/core/config', () => {
   };
 });
 
+// @ts-ignore
 import q from 'q';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
 import { MetricsPanelCtrl } from '../metrics_panel_ctrl';
@@ -49,7 +50,7 @@ describe('MetricsPanelCtrl', () => {
 
 function setupController({ hasAccessToExplore } = { hasAccessToExplore: false }) {
   const injectorStub = {
-    get: type => {
+    get: (type: any) => {
       switch (type) {
         case '$q': {
           return q;
@@ -64,7 +65,7 @@ function setupController({ hasAccessToExplore } = { hasAccessToExplore: false })
     },
   };
 
-  const scope = {
+  const scope: any = {
     panel: { events: [] },
     appEvent: jest.fn(),
     onAppEvent: jest.fn(),

public/app/features/playlist/playlist_edit_ctrl.ts

@@ -1,6 +1,15 @@
 import _ from 'lodash';
 import coreModule from '../../core/core_module';
-
+import { ILocationService } from 'angular';
+import { BackendSrv } from 'app/core/services/backend_srv';
+import { NavModelSrv } from 'app/core/nav_model_srv';
+
+export interface PlaylistItem {
+  value: any;
+  id: any;
+  type: string;
+  order: any;
+}
 export class PlaylistEditCtrl {
   filteredDashboards: any = [];
   filteredTags: any = [];
@@ -17,18 +26,24 @@ export class PlaylistEditCtrl {
   isNew: boolean;
 
   /** @ngInject */
-  constructor(private $scope, private backendSrv, private $location, $route, navModelSrv) {
+  constructor(
+    private $scope: any,
+    private backendSrv: BackendSrv,
+    private $location: ILocationService,
+    $route: any,
+    navModelSrv: NavModelSrv
+  ) {
     this.navModel = navModelSrv.getNav('dashboards', 'playlists', 0);
     this.isNew = !$route.current.params.id;
 
     if ($route.current.params.id) {
       const playlistId = $route.current.params.id;
 
-      backendSrv.get('/api/playlists/' + playlistId).then(result => {
+      backendSrv.get('/api/playlists/' + playlistId).then((result: any) => {
         this.playlist = result;
       });
 
-      backendSrv.get('/api/playlists/' + playlistId + '/items').then(result => {
+      backendSrv.get('/api/playlists/' + playlistId + '/items').then((result: any) => {
         this.playlistItems = result;
       });
     }
@@ -48,7 +63,7 @@ export class PlaylistEditCtrl {
     });
   }
 
-  addPlaylistItem(playlistItem) {
+  addPlaylistItem(playlistItem: PlaylistItem) {
     playlistItem.value = playlistItem.id.toString();
     playlistItem.type = 'dashboard_by_id';
     playlistItem.order = this.playlistItems.length + 1;
@@ -57,7 +72,7 @@ export class PlaylistEditCtrl {
     this.filterFoundPlaylistItems();
   }
 
-  addTagPlaylistItem(tag) {
+  addTagPlaylistItem(tag: { term: any }) {
     const playlistItem: any = {
       value: tag.term,
       type: 'dashboard_by_tag',
@@ -69,14 +84,14 @@ export class PlaylistEditCtrl {
     this.filterFoundPlaylistItems();
   }
 
-  removePlaylistItem(playlistItem) {
+  removePlaylistItem(playlistItem: PlaylistItem) {
     _.remove(this.playlistItems, listedPlaylistItem => {
       return playlistItem === listedPlaylistItem;
     });
     this.filterFoundPlaylistItems();
   }
 
-  savePlaylist(playlist, playlistItems) {
+  savePlaylist(playlist: any, playlistItems: PlaylistItem[]) {
     let savePromise;
 
     playlist.items = playlistItems;
@@ -104,15 +119,15 @@ export class PlaylistEditCtrl {
     this.$location.path('/playlists');
   }
 
-  searchStarted(promise) {
-    promise.then(data => {
+  searchStarted(promise: Promise<any>) {
+    promise.then((data: any) => {
       this.dashboardresult = data.dashboardResult;
       this.tagresult = data.tagResult;
       this.filterFoundPlaylistItems();
     });
   }
 
-  movePlaylistItem(playlistItem, offset) {
+  movePlaylistItem(playlistItem: PlaylistItem, offset: number) {
     const currentPosition = this.playlistItems.indexOf(playlistItem);
     const newPosition = currentPosition + offset;
 
@@ -122,11 +137,11 @@ export class PlaylistEditCtrl {
     }
   }
 
-  movePlaylistItemUp(playlistItem) {
+  movePlaylistItemUp(playlistItem: PlaylistItem) {
     this.movePlaylistItem(playlistItem, -1);
   }
 
-  movePlaylistItemDown(playlistItem) {
+  movePlaylistItemDown(playlistItem: PlaylistItem) {
     this.movePlaylistItem(playlistItem, 1);
   }
 }

public/app/features/playlist/playlist_routes.ts

@@ -1,7 +1,8 @@
 import angular from 'angular';
+import { PlaylistSrv } from './playlist_srv';
 
 /** @ngInject */
-function grafanaRoutes($routeProvider) {
+function grafanaRoutes($routeProvider: any) {
   $routeProvider
     .when('/playlists', {
       templateUrl: 'public/app/features/playlist/partials/playlists.html',
@@ -21,7 +22,7 @@ function grafanaRoutes($routeProvider) {
     .when('/playlists/play/:id', {
       template: '',
       resolve: {
-        init: (playlistSrv, $route) => {
+        init: (playlistSrv: PlaylistSrv, $route: any) => {
           const playlistId = $route.current.params.id;
           playlistSrv.start(playlistId);
         },

public/app/features/playlist/playlist_search.ts

@@ -1,4 +1,5 @@
 import coreModule from '../../core/core_module';
+import { BackendSrv } from 'app/core/services/backend_srv';
 
 export class PlaylistSearchCtrl {
   query: any;
@@ -7,7 +8,7 @@ export class PlaylistSearchCtrl {
   searchStarted: any;
 
   /** @ngInject */
-  constructor($timeout, private backendSrv) {
+  constructor($timeout: any, private backendSrv: BackendSrv) {
     this.query = { query: '', tag: [], starred: false, limit: 20 };
 
     $timeout(() => {
@@ -40,7 +41,7 @@ export class PlaylistSearchCtrl {
     return this.query.query === '' && this.query.starred === false && this.query.tag.length === 0;
   }
 
-  filterByTag(tag, evt) {
+  filterByTag(tag: any, evt: any) {
     this.query.tag.push(tag);
     this.searchDashboards();
     if (evt) {
@@ -51,11 +52,11 @@ export class PlaylistSearchCtrl {
 
   getTags() {
     const prom: any = {};
-    prom.promise = this.backendSrv.get('/api/dashboards/tags').then(result => {
+    prom.promise = this.backendSrv.get('/api/dashboards/tags').then((result: any) => {
       return {
         dashboardResult: [],
         tagResult: result,
-      };
+      } as any;
     });
 
     this.searchStarted(prom);

public/app/features/playlist/playlist_srv.ts

@@ -75,7 +75,7 @@ export class PlaylistSrv {
     }
   }
 
-  start(playlistId) {
+  start(playlistId: number) {
     this.stop();
 
     this.startUrl = window.location.href;
@@ -88,8 +88,8 @@ export class PlaylistSrv {
 
     appEvents.emit('playlist-started');
 
-    return this.backendSrv.get(`/api/playlists/${playlistId}`).then(playlist => {
-      return this.backendSrv.get(`/api/playlists/${playlistId}/dashboards`).then(dashboards => {
+    return this.backendSrv.get(`/api/playlists/${playlistId}`).then((playlist: any) => {
+      return this.backendSrv.get(`/api/playlists/${playlistId}/dashboards`).then((dashboards: any) => {
         this.dashboards = dashboards;
         this.interval = kbn.interval_to_ms(playlist.interval);
         this.next();

public/app/features/playlist/playlists_ctrl.ts

@@ -1,23 +1,25 @@
 import _ from 'lodash';
 import coreModule from '../../core/core_module';
+import { BackendSrv } from '@grafana/runtime';
+import { NavModelSrv } from 'app/core/nav_model_srv';
 
 export class PlaylistsCtrl {
   playlists: any;
   navModel: any;
 
   /** @ngInject */
-  constructor(private $scope, private backendSrv, navModelSrv) {
+  constructor(private $scope: any, private backendSrv: BackendSrv, navModelSrv: NavModelSrv) {
     this.navModel = navModelSrv.getNav('dashboards', 'playlists', 0);
 
-    backendSrv.get('/api/playlists').then(result => {
-      this.playlists = result.map(item => {
+    backendSrv.get('/api/playlists').then((result: any) => {
+      this.playlists = result.map((item: any) => {
         item.startUrl = `playlists/play/${item.id}`;
         return item;
       });
     });
   }
 
-  removePlaylistConfirmed(playlist) {
+  removePlaylistConfirmed(playlist: any) {
     _.remove(this.playlists, { id: playlist.id });
 
     this.backendSrv.delete('/api/playlists/' + playlist.id).then(
@@ -31,7 +33,7 @@ export class PlaylistsCtrl {
     );
   }
 
-  removePlaylist(playlist) {
+  removePlaylist(playlist: any) {
     this.$scope.appEvent('confirm-modal', {
       title: 'Delete',
       text: 'Are you sure you want to delete playlist ' + playlist.name + '?',

public/app/features/playlist/specs/playlist_edit_ctrl.test.ts

@@ -4,9 +4,9 @@ import { PlaylistEditCtrl } from '../playlist_edit_ctrl';
 describe('PlaylistEditCtrl', () => {
   let ctx: any;
   beforeEach(() => {
-    const navModelSrv = {
+    const navModelSrv: any = {
       getNav: () => {
-        return { breadcrumbs: [], node: {} };
+        return { breadcrumbs: [], node: {} } as any;
       },
     };
 

public/app/features/playlist/specs/playlist_srv.test.ts

@@ -1,3 +1,4 @@
+// @ts-ignore
 import configureMockStore from 'redux-mock-store';
 import { PlaylistSrv } from '../playlist_srv';
 import { setStore } from 'app/store/store';

public/app/features/plugins/PluginDashboards.tsx

@@ -60,7 +60,7 @@ export class PluginDashboards extends PureComponent<Props, State> {
   import = (dash: PluginDashboard, overwrite: boolean) => {
     const { plugin, datasource } = this.props;
 
-    const installCmd = {
+    const installCmd: any = {
       pluginId: plugin.id,
       path: dash.path,
       overwrite: overwrite,

public/app/features/plugins/PluginListPage.tsx

@@ -10,6 +10,7 @@ import { getLayoutMode, getPlugins, getPluginsSearchQuery } from './state/select
 import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector';
 import { NavModel } from '@grafana/data';
 import { PluginMeta } from '@grafana/ui';
+import { StoreState } from 'app/types';
 
 export interface Props {
   navModel: NavModel;
@@ -66,7 +67,7 @@ export class PluginListPage extends PureComponent<Props> {
   }
 }
 
-function mapStateToProps(state) {
+function mapStateToProps(state: StoreState) {
   return {
     navModel: getNavModel(state.navIndex, 'plugins'),
     plugins: getPlugins(state.plugins),

public/app/features/plugins/PluginSettingsCache.ts

@@ -14,11 +14,11 @@ export function getPluginSettings(pluginId: string): Promise<PluginMeta> {
   }
   return getBackendSrv()
     .get(`/api/plugins/${pluginId}/settings`)
-    .then(settings => {
+    .then((settings: any) => {
       pluginInfoCache[pluginId] = settings;
       return settings;
     })
-    .catch(err => {
+    .catch((err: any) => {
       // err.isHandled = true;
       return Promise.reject('Unknown Plugin');
     });

public/app/features/plugins/__mocks__/pluginMocks.ts

@@ -31,7 +31,7 @@ export const getMockPlugins = (amount: number): PluginMeta[] => {
     });
   }
 
-  return plugins;
+  return plugins as any;
 };
 
 export const getPanelPlugin = (

public/app/features/plugins/built_in_plugins.ts

@@ -35,7 +35,7 @@ import * as barGaugePanel from 'app/plugins/panel/bargauge/module';
 
 import * as exampleApp from 'app/plugins/app/example-app/module';
 
-const builtInPlugins = {
+const builtInPlugins: any = {
   'app/plugins/datasource/graphite/module': graphitePlugin,
   'app/plugins/datasource/cloudwatch/module': cloudwatchPlugin,
   'app/plugins/datasource/elasticsearch/module': elasticsearchPlugin,

public/app/features/plugins/datasource_srv.ts

@@ -9,12 +9,19 @@ import { DataSourceSrv as DataSourceService, getDataSourceSrv as getDataSourceSe
 
 // Types
 import { DataSourceApi, DataSourceSelectItem, ScopedVars } from '@grafana/ui';
+import { auto } from 'angular';
+import { TemplateSrv } from '../templating/template_srv';
 
 export class DatasourceSrv implements DataSourceService {
   datasources: { [name: string]: DataSourceApi };
 
   /** @ngInject */
-  constructor(private $q, private $injector, private $rootScope, private templateSrv) {
+  constructor(
+    private $q: any,
+    private $injector: auto.IInjectorService,
+    private $rootScope: any,
+    private templateSrv: TemplateSrv
+  ) {
     this.init();
   }
 
@@ -28,7 +35,7 @@ export class DatasourceSrv implements DataSourceService {
     }
 
     // Interpolation here is to support template variable in data source selection
-    name = this.templateSrv.replace(name, scopedVars, (value, variable) => {
+    name = this.templateSrv.replace(name, scopedVars, (value: any[], variable: any) => {
       if (Array.isArray(value)) {
         return value[0];
       }
@@ -95,7 +102,7 @@ export class DatasourceSrv implements DataSourceService {
   }
 
   getAnnotationSources() {
-    const sources = [];
+    const sources: any[] = [];
 
     this.addDataSourceVariables(sources);
 
@@ -108,7 +115,7 @@ export class DatasourceSrv implements DataSourceService {
     return sources;
   }
 
-  getMetricSources(options?) {
+  getMetricSources(options?: { skipVariables?: boolean }) {
     const metricSources: DataSourceSelectItem[] = [];
 
     _.each(config.datasources, (value, key) => {
@@ -148,7 +155,7 @@ export class DatasourceSrv implements DataSourceService {
     return metricSources;
   }
 
-  addDataSourceVariables(list) {
+  addDataSourceVariables(list: any[]) {
     // look for data source variables
     for (let i = 0; i < this.templateSrv.variables.length; i++) {
       const variable = this.templateSrv.variables[i];

public/app/features/plugins/plugin_component.ts

@@ -1,4 +1,4 @@
-import angular from 'angular';
+import angular, { IQService } from 'angular';
 import _ from 'lodash';
 
 import config from 'app/core/config';
@@ -6,10 +6,19 @@ import coreModule from 'app/core/core_module';
 
 import { DataSourceApi } from '@grafana/ui';
 import { importPanelPlugin, importDataSourcePlugin, importAppPlugin } from './plugin_loader';
+import DatasourceSrv from './datasource_srv';
 
 /** @ngInject */
-function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $templateCache, $timeout) {
-  function getTemplate(component) {
+function pluginDirectiveLoader(
+  $compile: any,
+  datasourceSrv: DatasourceSrv,
+  $rootScope: any,
+  $q: IQService,
+  $http: any,
+  $templateCache: any,
+  $timeout: any
+) {
+  function getTemplate(component: { template: any; templateUrl: any }) {
     if (component.template) {
       return $q.when(component.template);
     }
@@ -17,7 +26,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
     if (cached) {
       return $q.when(cached);
     }
-    return $http.get(component.templateUrl).then(res => {
+    return $http.get(component.templateUrl).then((res: any) => {
       return res.data;
     });
   }
@@ -32,7 +41,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
     return baseUrl + '/' + templateUrl;
   }
 
-  function getPluginComponentDirective(options) {
+  function getPluginComponentDirective(options: any) {
     // handle relative template urls for plugin templates
     options.Component.templateUrl = relativeTemplateUrlToAbs(options.Component.templateUrl, options.baseUrl);
 
@@ -45,7 +54,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
         controllerAs: 'ctrl',
         bindToController: true,
         scope: options.bindings,
-        link: (scope, elem, attrs, ctrl) => {
+        link: (scope: any, elem: any, attrs: any, ctrl: any) => {
           if (ctrl.link) {
             ctrl.link(scope, elem, attrs, ctrl);
           }
@@ -57,7 +66,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
     };
   }
 
-  function loadPanelComponentInfo(scope, attrs) {
+  function loadPanelComponentInfo(scope: any, attrs: any) {
     const componentInfo: any = {
       name: 'panel-plugin-' + scope.panel.type,
       bindings: { dashboard: '=', panel: '=', row: '=' },
@@ -78,7 +87,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
       }
 
       if (PanelCtrl.templatePromise) {
-        return PanelCtrl.templatePromise.then(res => {
+        return PanelCtrl.templatePromise.then((res: any) => {
           return componentInfo;
         });
       }
@@ -87,7 +96,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
         PanelCtrl.templateUrl = relativeTemplateUrlToAbs(PanelCtrl.templateUrl, panelInfo.baseUrl);
       }
 
-      PanelCtrl.templatePromise = getTemplate(PanelCtrl).then(template => {
+      PanelCtrl.templatePromise = getTemplate(PanelCtrl).then((template: any) => {
         PanelCtrl.templateUrl = null;
         PanelCtrl.template = `<grafana-panel ctrl="ctrl" class="panel-height-helper">${template}</grafana-panel>`;
         return componentInfo;
@@ -97,7 +106,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
     });
   }
 
-  function getModule(scope: any, attrs: any) {
+  function getModule(scope: any, attrs: any): any {
     switch (attrs.type) {
       // QueryCtrl
       case 'query-ctrl': {
@@ -189,7 +198,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
     }
   }
 
-  function appendAndCompile(scope, elem, componentInfo) {
+  function appendAndCompile(scope: any, elem: JQuery, componentInfo: any) {
     const child = angular.element(document.createElement(componentInfo.name));
     _.each(componentInfo.attrs, (value, key) => {
       child.attr(key, value);
@@ -211,7 +220,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
     });
   }
 
-  function registerPluginComponent(scope, elem, attrs, componentInfo) {
+  function registerPluginComponent(scope: any, elem: JQuery, attrs: any, componentInfo: any) {
     if (componentInfo.notFound) {
       elem.empty();
       return;
@@ -235,12 +244,12 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
 
   return {
     restrict: 'E',
-    link: (scope, elem, attrs) => {
+    link: (scope: any, elem: JQuery, attrs: any) => {
       getModule(scope, attrs)
-        .then(componentInfo => {
+        .then((componentInfo: any) => {
           registerPluginComponent(scope, elem, attrs, componentInfo);
         })
-        .catch(err => {
+        .catch((err: any) => {
           console.log('Plugin component error', err);
         });
     },

public/app/features/plugins/plugin_loader.ts

@@ -9,7 +9,9 @@ import jquery from 'jquery';
 // Experimental module exports
 import prismjs from 'prismjs';
 import slate from 'slate';
+// @ts-ignore
 import slateReact from 'slate-react';
+// @ts-ignore
 import slatePlain from 'slate-plain-serializer';
 import react from 'react';
 import reactDom from 'react-dom';
@@ -37,7 +39,7 @@ import { Observable, Subject } from 'rxjs';
 
 // add cache busting
 const bust = `?_cache=${Date.now()}`;
-function locate(load) {
+function locate(load: { address: string }) {
   return load.address + bust;
 }
 grafanaRuntime.SystemJS.registry.set('plugin-loader', grafanaRuntime.SystemJS.newModule({ locate: locate }));
@@ -64,7 +66,7 @@ grafanaRuntime.SystemJS.config({
 });
 
 function exposeToPlugin(name: string, component: any) {
-  grafanaRuntime.SystemJS.registerDynamic(name, [], true, (require, exports, module) => {
+  grafanaRuntime.SystemJS.registerDynamic(name, [], true, (require: any, exports: any, module: { exports: any }) => {
     module.exports = component;
   });
 }

public/app/features/plugins/plugin_page_ctrl.ts

@@ -1,8 +1,9 @@
-import angular from 'angular';
+import angular, { IQService } from 'angular';
 import _ from 'lodash';
 
 import { getPluginSettings } from './PluginSettingsCache';
 import { PluginMeta } from '@grafana/ui';
+import { NavModelSrv } from 'app/core/core';
 
 export class AppPageCtrl {
   page: any;
@@ -11,7 +12,12 @@ export class AppPageCtrl {
   navModel: any;
 
   /** @ngInject */
-  constructor(private $routeParams: any, private $rootScope, private navModelSrv, private $q) {
+  constructor(
+    private $routeParams: any,
+    private $rootScope: any,
+    private navModelSrv: NavModelSrv,
+    private $q: IQService
+  ) {
     this.pluginId = $routeParams.pluginId;
 
     this.$q

public/app/features/plugins/specs/datasource_srv.test.ts

@@ -4,7 +4,7 @@ import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { PluginMeta, DataSourcePluginMeta } from '@grafana/ui';
 
 // Datasource variable $datasource with current value 'BBB'
-const templateSrv = {
+const templateSrv: any = {
   variables: [
     {
       type: 'datasource',
@@ -17,7 +17,7 @@ const templateSrv = {
 };
 
 describe('datasource_srv', () => {
-  const _datasourceSrv = new DatasourceSrv({}, {}, {}, templateSrv);
+  const _datasourceSrv = new DatasourceSrv({}, {} as any, {}, templateSrv);
 
   describe('when loading external datasources', () => {
     beforeEach(() => {
@@ -55,7 +55,7 @@ describe('datasource_srv', () => {
   });
 
   describe('when loading metric sources', () => {
-    let metricSources;
+    let metricSources: any;
     const unsortedDatasources = {
       mmm: {
         type: 'test-db',

public/app/features/plugins/state/selectors.ts

@@ -1,4 +1,6 @@
-export const getPlugins = state => {
+import { PluginsState } from 'app/types/plugins';
+
+export const getPlugins = (state: PluginsState) => {
   const regex = new RegExp(state.searchQuery, 'i');
 
   return state.plugins.filter(item => {
@@ -6,5 +8,5 @@ export const getPlugins = state => {
   });
 };
 
-export const getPluginsSearchQuery = state => state.searchQuery;
-export const getLayoutMode = state => state.layoutMode;
+export const getPluginsSearchQuery = (state: PluginsState) => state.searchQuery;
+export const getLayoutMode = (state: PluginsState) => state.layoutMode;

public/app/features/plugins/variableQueryEditorLoader.tsx

@@ -19,7 +19,7 @@ async function loadComponent(meta: DataSourcePluginMeta) {
 function variableQueryEditorLoader(templateSrv: TemplateSrv) {
   return {
     restrict: 'E',
-    link: async (scope, elem) => {
+    link: async (scope: any, elem: JQuery) => {
       const Component = await loadComponent(scope.currentDatasource.meta);
       const props = {
         datasource: scope.currentDatasource,

public/app/features/templating/datasource_variable.ts

@@ -109,7 +109,7 @@ export class DatasourceVariable implements Variable {
     return this.current.value;
   }
 }
-// @ts-ignore
+
 variableTypes['datasource'] = {
   name: 'Datasource',
   ctor: DatasourceVariable,

yarn.lock

@@ -3153,6 +3153,11 @@
   version "20.0.1"
   resolved "https://registry.yarnpkg.com/@types/pretty-format/-/pretty-format-20.0.1.tgz#7ce03b403887b087701a2b4534464f48ce7b2f48"
 
+"@types/prismjs@1.16.0":
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.16.0.tgz#4328c9f65698e59f4feade8f4e5d928c748fd643"
+  integrity sha512-mEyuziLrfDCQ4juQP1k706BUU/c8OGn/ZFl69AXXY6dStHClKX4P+N8+rhqpul1vRDA2VOygzMRSJJZHyDEOfw==
+
 "@types/prop-types@*":
   version "15.7.1"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"