Typescript: Reduce implicit any errors (#17550)

* Fix types on linkSrv

* Lower err count, shoot down some errs, add type pkg

* Fix changes and add test

* Update public/app/features/panel/panel_ctrl.ts

Co-Authored-By: Hugo Häggmark <hugo.haggmark@gmail.com>

* Update public/app/features/panel/panel_ctrl.ts

Co-Authored-By: Hugo Häggmark <hugo.haggmark@gmail.com>

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

Co-Authored-By: Hugo Häggmark <hugo.haggmark@gmail.com>

* Update public/app/features/panel/panel_ctrl.ts

Co-Authored-By: Hugo Häggmark <hugo.haggmark@gmail.com>

* Fix last types to compile

* Fix formatting issue

* Update public/app/features/panel/panel_ctrl.ts

Co-Authored-By: Hugo Häggmark <hugo.haggmark@gmail.com>

package.json

@@ -42,6 +42,7 @@
     "@types/react-transition-group": "2.0.16",
     "@types/react-virtualized": "9.18.12",
     "@types/react-window": "1.7.0",
+    "@types/remarkable": "1.7.4",
     "angular-mocks": "1.6.6",
     "autoprefixer": "9.5.0",
     "axios": "0.19.0",

public/app/features/dashboard/components/ShareModal/ShareModalCtrl.test.ts

@@ -1,6 +1,7 @@
 import config from 'app/core/config';
 import { LinkSrv } from 'app/features/panel/panellinks/link_srv';
 import { ShareModalCtrl } from './ShareModalCtrl';
+import { TemplateSrv } from 'app/features/templating/template_srv';
 
 describe('ShareModalCtrl', () => {
   const ctx = {
@@ -49,7 +50,7 @@ describe('ShareModalCtrl', () => {
       {},
       ctx.timeSrv,
       ctx.templateSrv,
-      new LinkSrv({}, ctx.stimeSrv)
+      new LinkSrv({} as TemplateSrv, ctx.stimeSrv)
     );
   });
 

public/app/features/panel/panel_ctrl.ts

@@ -16,6 +16,9 @@ import {
 
 import { GRID_COLUMN_COUNT } from 'app/core/constants';
 
+import { auto } from 'angular';
+import { TemplateSrv } from '../templating/template_srv';
+import { LinkSrv } from './panellinks/link_srv';
 export class PanelCtrl {
   panel: any;
   error: any;
@@ -24,7 +27,7 @@ export class PanelCtrl {
   pluginId: string;
   editorTabs: any;
   $scope: any;
-  $injector: any;
+  $injector: auto.IInjectorService;
   $location: any;
   $timeout: any;
   inspector: any;
@@ -36,7 +39,7 @@ export class PanelCtrl {
   timing: any;
   maxPanelsPerRowOptions: number[];
 
-  constructor($scope, $injector) {
+  constructor($scope: any, $injector: auto.IInjectorService) {
     this.$injector = $injector;
     this.$location = $injector.get('$location');
     this.$scope = $scope;
@@ -67,14 +70,14 @@ export class PanelCtrl {
     this.panel.refresh();
   }
 
-  publishAppEvent(evtName, evt) {
+  publishAppEvent(evtName: string, evt: any) {
     this.$scope.$root.appEvent(evtName, evt);
   }
 
-  changeView(fullscreen, edit) {
+  changeView(fullscreen: boolean, edit: boolean) {
     this.publishAppEvent('panel-change-view', {
-      fullscreen: fullscreen,
-      edit: edit,
+      fullscreen,
+      edit,
       panelId: this.panel.id,
     });
   }
@@ -99,7 +102,7 @@ export class PanelCtrl {
     }
   }
 
-  addEditorTab(title, directiveFn, index?, icon?) {
+  addEditorTab(title: string, directiveFn: any, index?: number, icon?: any) {
     const editorTab = { title, directiveFn, icon };
 
     if (_.isString(directiveFn)) {
@@ -193,7 +196,7 @@ export class PanelCtrl {
   }
 
   // Override in sub-class to add items before extended menu
-  getAdditionalMenuItems() {
+  getAdditionalMenuItems(): any[] {
     return [];
   }
 
@@ -201,12 +204,12 @@ export class PanelCtrl {
     return this.dashboard.meta.fullscreen && !this.panel.fullscreen;
   }
 
-  calculatePanelHeight(containerHeight) {
+  calculatePanelHeight(containerHeight: number) {
     this.containerHeight = containerHeight;
     this.height = calculateInnerPanelHeight(this.panel, containerHeight);
   }
 
-  render(payload?) {
+  render(payload?: any) {
     this.events.emit('render', payload);
   }
 
@@ -243,16 +246,16 @@ export class PanelCtrl {
     return '';
   }
 
-  getInfoContent(options) {
+  getInfoContent(options: { mode: string }) {
     let markdown = this.panel.description;
 
     if (options.mode === 'tooltip') {
       markdown = this.error || this.panel.description;
     }
 
-    const linkSrv = this.$injector.get('linkSrv');
-    const sanitize = this.$injector.get('$sanitize');
-    const templateSrv = this.$injector.get('templateSrv');
+    const linkSrv: LinkSrv = this.$injector.get('linkSrv');
+    const sanitize: any = this.$injector.get('$sanitize');
+    const templateSrv: TemplateSrv = this.$injector.get('templateSrv');
     const interpolatedMarkdown = templateSrv.replace(markdown, this.panel.scopedVars);
     let html = '<div class="markdown-html">';
 

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

@@ -1,14 +1,17 @@
 import angular from 'angular';
 import _ from 'lodash';
 import kbn from 'app/core/utils/kbn';
+import { TemplateSrv } from 'app/features/templating/template_srv';
+import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
+import { ScopedVars } from '@grafana/ui/src/types/datasource';
 
 export class LinkSrv {
   /** @ngInject */
-  constructor(private templateSrv, private timeSrv) {}
+  constructor(private templateSrv: TemplateSrv, private timeSrv: TimeSrv) {}
 
-  getLinkUrl(link) {
+  getLinkUrl(link: any) {
     const url = this.templateSrv.replace(link.url || '');
-    const params = {};
+    const params: { [key: string]: any } = {};
 
     if (link.keepTime) {
       const range = this.timeSrv.timeRangeForUrl();
@@ -23,8 +26,8 @@ export class LinkSrv {
     return this.addParamsToUrl(url, params);
   }
 
-  addParamsToUrl(url, params) {
-    const paramsArray = [];
+  addParamsToUrl(url: string, params: any) {
+    const paramsArray: Array<string | number> = [];
 
     _.each(params, (value, key) => {
       if (value === null) {
@@ -48,7 +51,7 @@ export class LinkSrv {
     return this.appendToQueryString(url, paramsArray.join('&'));
   }
 
-  appendToQueryString(url, stringToAppend) {
+  appendToQueryString(url: string, stringToAppend: string) {
     if (!_.isUndefined(stringToAppend) && stringToAppend !== null && stringToAppend !== '') {
       const pos = url.indexOf('?');
       if (pos !== -1) {
@@ -64,14 +67,14 @@ export class LinkSrv {
     return url;
   }
 
-  getAnchorInfo(link) {
+  getAnchorInfo(link: any) {
     const info: any = {};
     info.href = this.getLinkUrl(link);
     info.title = this.templateSrv.replace(link.title || '');
     return info;
   }
 
-  getPanelLinkAnchorInfo(link, scopedVars) {
+  getPanelLinkAnchorInfo(link: any, scopedVars: ScopedVars) {
     const info: any = {};
     info.target = link.targetBlank ? '_blank' : '';
     if (link.type === 'absolute') {
@@ -90,7 +93,7 @@ export class LinkSrv {
       info.href = 'dashboard/db/' + slug + '?';
     }
 
-    const params = {};
+    const params: any = {};
 
     if (link.keepTime) {
       const range = this.timeSrv.timeRangeForUrl();

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

@@ -1,5 +1,7 @@
 import { LinkSrv } from '../link_srv';
 import _ from 'lodash';
+import { TemplateSrv } from 'app/features/templating/template_srv';
+import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 
 jest.mock('angular', () => {
   const AngularJSMock = require('test/mocks/angular');
@@ -12,7 +14,7 @@ describe('linkSrv', () => {
   const timeSrvMock = {};
 
   beforeEach(() => {
-    linkSrv = new LinkSrv(templateSrvMock, timeSrvMock);
+    linkSrv = new LinkSrv(templateSrvMock as TemplateSrv, timeSrvMock as TimeSrv);
   });
 
   describe('when appending query strings', () => {

public/app/features/templating/specs/template_srv.test.ts

@@ -501,6 +501,11 @@ describe('templateSrv', () => {
       initTemplateSrv([]);
     });
 
+    it('should be possible to fetch value with getBuilInIntervalValue', () => {
+      const val = _templateSrv.getBuiltInIntervalValue();
+      expect(val).toBe('1s');
+    });
+
     it('should replace $__interval_ms with interval milliseconds', () => {
       const target = _templateSrv.replace('10 * $__interval_ms', {
         __interval_ms: { text: '100', value: '100' },

public/app/features/templating/template_srv.ts

@@ -13,7 +13,7 @@ export class TemplateSrv {
   private regex = variableRegex;
   private index = {};
   private grafanaVariables = {};
-  private builtIns = {};
+  private builtIns: any = {};
   private timeRange: TimeRange = null;
 
   constructor() {
@@ -28,6 +28,10 @@ export class TemplateSrv {
     this.updateIndex();
   }
 
+  getBuiltInIntervalValue() {
+    return this.builtIns.__interval.value;
+  }
+
   updateIndex() {
     const existsOrEmpty = value => value || value === '';
 

public/app/plugins/datasource/grafana-azure-monitor-datasource/query_ctrl.test.ts

@@ -5,6 +5,7 @@ jest.mock('./css/query_editor.css', () => {
 import { AzureMonitorQueryCtrl } from './query_ctrl';
 import Q from 'q';
 import { TemplateSrv } from 'app/features/templating/template_srv';
+import { auto } from 'angular';
 
 describe('AzureMonitorQueryCtrl', () => {
   let queryCtrl: any;
@@ -21,7 +22,7 @@ describe('AzureMonitorQueryCtrl', () => {
       azureMonitorDatasource: { isConfigured: () => false },
     };
 
-    queryCtrl = new AzureMonitorQueryCtrl({}, {}, new TemplateSrv());
+    queryCtrl = new AzureMonitorQueryCtrl({}, {} as auto.IInjectorService, new TemplateSrv());
   });
 
   describe('init query_ctrl variables', () => {

public/app/plugins/datasource/grafana-azure-monitor-datasource/query_ctrl.ts

@@ -4,6 +4,9 @@ import { QueryCtrl } from 'app/plugins/sdk';
 import TimegrainConverter from './time_grain_converter';
 import './editor/editor_component';
 
+import { TemplateSrv } from 'app/features/templating/template_srv';
+import { auto } from 'angular';
+
 export interface ResultFormat {
   text: string;
   value: string;
@@ -103,7 +106,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl {
   subscriptions: Array<{ text: string; value: string }>;
 
   /** @ngInject */
-  constructor($scope, $injector, private templateSrv) {
+  constructor($scope: any, $injector: auto.IInjectorService, private templateSrv: TemplateSrv) {
     super($scope, $injector);
 
     _.defaultsDeep(this.target, this.defaults);
@@ -360,7 +363,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl {
   getAutoInterval() {
     if (this.target.azureMonitor.timeGrain === 'auto') {
       return TimegrainConverter.findClosestTimeGrain(
-        this.templateSrv.builtIns.__interval.value,
+        this.templateSrv.getBuiltInIntervalValue(),
         _.map(this.target.azureMonitor.timeGrains, o =>
           TimegrainConverter.createKbnUnitFromISO8601Duration(o.value)
         ) || ['1m', '5m', '15m', '30m', '1h', '6h', '12h', '1d']
@@ -407,7 +410,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl {
   /* Application Insights Section */
 
   getAppInsightsAutoInterval() {
-    const interval = this.templateSrv.builtIns.__interval.value;
+    const interval = this.templateSrv.getBuiltInIntervalValue();
     if (interval[interval.length - 1] === 's') {
       return '1m';
     }

public/app/routes/GrafanaCtrl.ts

@@ -21,16 +21,21 @@ import { updateLocation } from 'app/core/actions';
 
 // Types
 import { KioskUrlValue } from 'app/types';
+import { UtilSrv } from 'app/core/services/util_srv';
+import { ContextSrv } from 'app/core/services/context_srv';
+import { BridgeSrv } from 'app/core/services/bridge_srv';
+import { PlaylistSrv } from 'app/features/playlist/playlist_srv';
+import { ILocationService, ITimeoutService, IRootScopeService, IControllerService } from 'angular';
 
 export class GrafanaCtrl {
   /** @ngInject */
   constructor(
-    $scope,
-    utilSrv,
-    $rootScope,
-    $controller,
-    contextSrv,
-    bridgeSrv,
+    $scope: any,
+    utilSrv: UtilSrv,
+    $rootScope: any,
+    $controller: IControllerService,
+    contextSrv: ContextSrv,
+    bridgeSrv: BridgeSrv,
     backendSrv: BackendSrv,
     timeSrv: TimeSrv,
     datasourceSrv: DatasourceSrv,
@@ -62,7 +67,7 @@ export class GrafanaCtrl {
 
     $rootScope.colors = colors;
 
-    $rootScope.onAppEvent = function(name, callback, localScope) {
+    $rootScope.onAppEvent = function(name: string, callback: () => void, localScope: any) {
       const unbind = $rootScope.$on(name, callback);
       let callerScope = this;
       if (callerScope.$id === 1 && !localScope) {
@@ -74,7 +79,7 @@ export class GrafanaCtrl {
       callerScope.$on('$destroy', unbind);
     };
 
-    $rootScope.appEvent = (name, payload) => {
+    $rootScope.appEvent = (name: string, payload: any) => {
       $rootScope.$emit(name, payload);
       appEvents.emit(name, payload);
     };
@@ -103,11 +108,17 @@ function setViewModeBodyClass(body: JQuery, mode: KioskUrlValue) {
 }
 
 /** @ngInject */
-export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScope, $location) {
+export function grafanaAppDirective(
+  playlistSrv: PlaylistSrv,
+  contextSrv: ContextSrv,
+  $timeout: ITimeoutService,
+  $rootScope: IRootScopeService,
+  $location: ILocationService
+) {
   return {
     restrict: 'E',
     controller: GrafanaCtrl,
-    link: (scope, elem) => {
+    link: (scope: any, elem: JQuery) => {
       const body = $('body');
 
       // see https://github.com/zenorocha/clipboard.js/issues/155
@@ -138,8 +149,8 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
 
       // tooltip removal fix
       // manage page classes
-      let pageClass;
-      scope.$on('$routeChangeSuccess', (evt, data) => {
+      let pageClass: string;
+      scope.$on('$routeChangeSuccess', (evt: any, data: any) => {
         if (pageClass) {
           body.removeClass(pageClass);
         }

scripts/ci-frontend-metrics.sh

@@ -2,7 +2,8 @@
 
 echo -e "Collecting code stats (typescript errors & more)"
 
-ERROR_COUNT_LIMIT=5131
+
+ERROR_COUNT_LIMIT=5120
 DIRECTIVES_LIMIT=172
 CONTROLLERS_LIMIT=139