noImplicitAny: SingleStat panel (#17616)

* noImplicitAny on Singlestat

* Lower threshold

* Fix fixes

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

@@ -10,9 +10,18 @@ import config from 'app/core/config';
 import TimeSeries from 'app/core/time_series2';
 import { MetricsPanelCtrl } from 'app/plugins/sdk';
 import { GrafanaThemeType, getValueFormat, getColorFromHexRgbOrName, isTableData } from '@grafana/ui';
+import { auto } from 'angular';
+import { LinkSrv } from 'app/features/panel/panellinks/link_srv';
+import TableModel from 'app/core/table_model';
 
 const BASE_FONT_SIZE = 38;
 
+interface DataFormat {
+  value: string | number;
+  valueFormatted: string;
+  valueRounded: number;
+}
+
 class SingleStatCtrl extends MetricsPanelCtrl {
   static templateUrl = 'module.html';
 
@@ -40,7 +49,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
   tableColumnOptions: any;
 
   // Set and populate defaults
-  panelDefaults = {
+  panelDefaults: any = {
     links: [],
     datasource: null,
     maxDataPoints: 100,
@@ -83,7 +92,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
   };
 
   /** @ngInject */
-  constructor($scope, $injector, private linkSrv, private $sanitize) {
+  constructor($scope: any, $injector: auto.IInjectorService, private linkSrv: LinkSrv, private $sanitize: any) {
     super($scope, $injector);
     _.defaults(this.panel, this.panelDefaults);
 
@@ -103,16 +112,16 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     this.unitFormats = kbn.getUnitFormats();
   }
 
-  setUnitFormat(subItem) {
+  setUnitFormat(subItem: { value: any }) {
     this.panel.format = subItem.value;
     this.refresh();
   }
 
-  onDataError(err) {
+  onDataError(err: any) {
     this.onDataReceived([]);
   }
 
-  onDataReceived(dataList) {
+  onDataReceived(dataList: any[]) {
     const data: any = {
       scopedVars: _.extend({}, this.panel.scopedVars),
     };
@@ -131,7 +140,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     this.render();
   }
 
-  seriesHandler(seriesData) {
+  seriesHandler(seriesData: any) {
     const series = new TimeSeries({
       datapoints: seriesData.datapoints || [],
       alias: seriesData.target,
@@ -141,9 +150,9 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     return series;
   }
 
-  tableHandler(tableData) {
-    const datapoints = [];
-    const columnNames = {};
+  tableHandler(tableData: TableModel) {
+    const datapoints: any[] = [];
+    const columnNames: string[] = [];
 
     tableData.columns.forEach((column, columnIndex) => {
       columnNames[columnIndex] = column.text;
@@ -155,9 +164,9 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     }
 
     tableData.rows.forEach(row => {
-      const datapoint = {};
+      const datapoint: any = {};
 
-      row.forEach((value, columnIndex) => {
+      row.forEach((value: any, columnIndex: number) => {
         const key = columnNames[columnIndex];
         datapoint[key] = value;
       });
@@ -168,7 +177,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     return datapoints;
   }
 
-  setTableColumnToSensibleDefault(tableData) {
+  setTableColumnToSensibleDefault(tableData: TableModel) {
     if (tableData.columns.length === 1) {
       this.panel.tableColumn = tableData.columns[0].text;
     } else {
@@ -178,7 +187,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     }
   }
 
-  setTableValues(tableData, data) {
+  setTableValues(tableData: any[], data: DataFormat) {
     if (!tableData || tableData.length === 0) {
       return;
     }
@@ -213,7 +222,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     return !this.panel.gauge.show;
   }
 
-  setColoring(options) {
+  setColoring(options: { background: any }) {
     if (options.background) {
       this.panel.colorValue = false;
       this.panel.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)'];
@@ -231,24 +240,24 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     this.render();
   }
 
-  onColorChange(panelColorIndex) {
-    return color => {
+  onColorChange(panelColorIndex: number) {
+    return (color: string) => {
       this.panel.colors[panelColorIndex] = color;
       this.render();
     };
   }
 
-  onSparklineColorChange(newColor) {
+  onSparklineColorChange(newColor: string) {
     this.panel.sparkline.lineColor = newColor;
     this.render();
   }
 
-  onSparklineFillChange(newColor) {
+  onSparklineFillChange(newColor: string) {
     this.panel.sparkline.fillColor = newColor;
     this.render();
   }
 
-  setValues(data) {
+  setValues(data: any) {
     data.flotpairs = [];
 
     if (this.series.length > 1) {
@@ -263,7 +272,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     }
 
     if (this.series && this.series.length > 0) {
-      const lastPoint = _.last(this.series[0].datapoints);
+      const lastPoint: any = _.last(this.series[0].datapoints);
       const lastValue = _.isArray(lastPoint) ? lastPoint[0] : null;
       const formatFunc = getValueFormat(this.panel.format);
 
@@ -300,7 +309,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     this.setValueMapping(data);
   }
 
-  setValueMapping(data) {
+  setValueMapping(data: DataFormat) {
     // check value to text mappings if its enabled
     if (this.panel.mappingType === 1) {
       for (let i = 0; i < this.panel.valueMaps.length; i++) {
@@ -348,7 +357,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     }
   }
 
-  removeValueMap(map) {
+  removeValueMap(map: any) {
     const index = _.indexOf(this.panel.valueMaps, map);
     this.panel.valueMaps.splice(index, 1);
     this.render();
@@ -358,7 +367,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     this.panel.valueMaps.push({ value: '', op: '=', text: '' });
   }
 
-  removeRangeMap(rangeMap) {
+  removeRangeMap(rangeMap: any) {
     const index = _.indexOf(this.panel.rangeMaps, rangeMap);
     this.panel.rangeMaps.splice(index, 1);
     this.render();
@@ -368,18 +377,18 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     this.panel.rangeMaps.push({ from: '', to: '', text: '' });
   }
 
-  link(scope, elem, attrs, ctrl) {
+  link(scope: any, elem: JQuery, attrs: any, ctrl: any) {
     const $location = this.$location;
     const linkSrv = this.linkSrv;
     const $timeout = this.$timeout;
     const $sanitize = this.$sanitize;
     const panel = ctrl.panel;
     const templateSrv = this.templateSrv;
-    let data, linkInfo;
+    let data: any, linkInfo: { target: string; href: string; title: string };
     const $panelContainer = elem.find('.panel-container');
     elem = elem.find('.singlestat-panel');
 
-    function applyColoringThresholds(valueString) {
+    function applyColoringThresholds(valueString: string) {
       const color = getColorForValue(data, data.value);
       if (color) {
         return '<span style="color:' + color + '">' + valueString + '</span>';
@@ -388,7 +397,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       return valueString;
     }
 
-    function getSpan(className, fontSizePercent, applyColoring, value) {
+    function getSpan(className: string, fontSizePercent: string, applyColoring: any, value: string) {
       value = $sanitize(templateSrv.replace(value, data.scopedVars));
       value = applyColoring ? applyColoringThresholds(value) : value;
       const pixelSize = (parseInt(fontSizePercent, 10) / 100) * BASE_FONT_SIZE;
@@ -467,7 +476,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       const thresholdMarkersWidth = gaugeWidth / 5;
       const thresholdLabelFontSize = fontSize / 2.5;
 
-      const options = {
+      const options: any = {
         series: {
           gauges: {
             gauge: {
@@ -586,12 +595,12 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       data = ctrl.data;
 
       // get thresholds
-      data.thresholds = panel.thresholds.split(',').map(strVale => {
+      data.thresholds = panel.thresholds.split(',').map((strVale: string) => {
         return Number(strVale.trim());
       });
 
       // Map panel colors to hex or rgb/a values
-      data.colorMap = panel.colors.map(color =>
+      data.colorMap = panel.colors.map((color: string) =>
         getColorFromHexRgbOrName(
           color,
           config.bootData.user.lightTheme ? GrafanaThemeType.Light : GrafanaThemeType.Dark
@@ -695,7 +704,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
   }
 }
 
-function getColorForValue(data, value) {
+function getColorForValue(data: any, value: number) {
   if (!_.isFinite(value)) {
     return null;
   }

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

@@ -1,5 +1,6 @@
 import { SingleStatCtrl } from '../module';
 import { dateTime } from '@grafana/ui/src/utils/moment_wrapper';
+import { LinkSrv } from 'app/features/panel/panellinks/link_srv';
 
 describe('SingleStatCtrl', () => {
   const ctx = {} as any;
@@ -29,11 +30,12 @@ describe('SingleStatCtrl', () => {
     on: () => {},
   };
 
-  function singleStatScenario(desc, func) {
+  function singleStatScenario(desc: string, func: any) {
     describe(desc, () => {
-      ctx.setup = setupFunc => {
+      ctx.setup = (setupFunc: any) => {
         beforeEach(() => {
-          ctx.ctrl = new SingleStatCtrl($scope, $injector, {}, $sanitize);
+          // @ts-ignore
+          ctx.ctrl = new SingleStatCtrl($scope, $injector, {} as LinkSrv, $sanitize);
           setupFunc();
           ctx.ctrl.onDataReceived(ctx.data);
           ctx.data = ctx.ctrl.data;
@@ -44,7 +46,7 @@ describe('SingleStatCtrl', () => {
     });
   }
 
-  singleStatScenario('with defaults', ctx => {
+  singleStatScenario('with defaults', (ctx: any) => {
     ctx.setup(() => {
       ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 1], [20, 2]] }];
     });
@@ -59,7 +61,7 @@ describe('SingleStatCtrl', () => {
     });
   });
 
-  singleStatScenario('showing serie name instead of value', ctx => {
+  singleStatScenario('showing serie name instead of value', (ctx: any) => {
     ctx.setup(() => {
       ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 1], [20, 2]] }];
       ctx.ctrl.panel.valueName = 'name';
@@ -75,7 +77,7 @@ describe('SingleStatCtrl', () => {
     });
   });
 
-  singleStatScenario('showing last iso time instead of value', ctx => {
+  singleStatScenario('showing last iso time instead of value', (ctx: any) => {
     ctx.setup(() => {
       ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 1505634997920]] }];
       ctx.ctrl.panel.valueName = 'last_time';
@@ -93,7 +95,7 @@ describe('SingleStatCtrl', () => {
     });
   });
 
-  singleStatScenario('showing last iso time instead of value (in UTC)', ctx => {
+  singleStatScenario('showing last iso time instead of value (in UTC)', (ctx: any) => {
     ctx.setup(() => {
       ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 5000]] }];
       ctx.ctrl.panel.valueName = 'last_time';
@@ -106,7 +108,7 @@ describe('SingleStatCtrl', () => {
     });
   });
 
-  singleStatScenario('showing last us time instead of value', ctx => {
+  singleStatScenario('showing last us time instead of value', (ctx: any) => {
     ctx.setup(() => {
       ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 1505634997920]] }];
       ctx.ctrl.panel.valueName = 'last_time';
@@ -124,7 +126,7 @@ describe('SingleStatCtrl', () => {
     });
   });
 
-  singleStatScenario('showing last us time instead of value (in UTC)', ctx => {
+  singleStatScenario('showing last us time instead of value (in UTC)', (ctx: any) => {
     ctx.setup(() => {
       ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 5000]] }];
       ctx.ctrl.panel.valueName = 'last_time';
@@ -137,7 +139,7 @@ describe('SingleStatCtrl', () => {
     });
   });
 
-  singleStatScenario('showing last time from now instead of value', ctx => {
+  singleStatScenario('showing last time from now instead of value', (ctx: any) => {
     ctx.setup(() => {
       ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 1505634997920]] }];
       ctx.ctrl.panel.valueName = 'last_time';
@@ -154,7 +156,7 @@ describe('SingleStatCtrl', () => {
     });
   });
 
-  singleStatScenario('showing last time from now instead of value (in UTC)', ctx => {
+  singleStatScenario('showing last time from now instead of value (in UTC)', (ctx: any) => {
     ctx.setup(() => {
       ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 1505634997920]] }];
       ctx.ctrl.panel.valueName = 'last_time';
@@ -166,24 +168,27 @@ describe('SingleStatCtrl', () => {
     });
   });
 
-  singleStatScenario('MainValue should use same number for decimals as displayed when checking thresholds', ctx => {
-    ctx.setup(() => {
-      ctx.data = [{ target: 'test.cpu1', datapoints: [[99.999, 1], [99.99999, 2]] }];
-      ctx.ctrl.panel.valueName = 'avg';
-      ctx.ctrl.panel.format = 'none';
-    });
+  singleStatScenario(
+    'MainValue should use same number for decimals as displayed when checking thresholds',
+    (ctx: any) => {
+      ctx.setup(() => {
+        ctx.data = [{ target: 'test.cpu1', datapoints: [[99.999, 1], [99.99999, 2]] }];
+        ctx.ctrl.panel.valueName = 'avg';
+        ctx.ctrl.panel.format = 'none';
+      });
 
-    it('Should be rounded', () => {
-      expect(ctx.data.value).toBe(99.999495);
-      expect(ctx.data.valueRounded).toBe(100);
-    });
+      it('Should be rounded', () => {
+        expect(ctx.data.value).toBe(99.999495);
+        expect(ctx.data.valueRounded).toBe(100);
+      });
 
-    it('should set formatted value', () => {
-      expect(ctx.data.valueFormatted).toBe('100');
-    });
-  });
+      it('should set formatted value', () => {
+        expect(ctx.data.valueFormatted).toBe('100');
+      });
+    }
+  );
 
-  singleStatScenario('When value to text mapping is specified', ctx => {
+  singleStatScenario('When value to text mapping is specified', (ctx: any) => {
     ctx.setup(() => {
       ctx.data = [{ target: 'test.cpu1', datapoints: [[9.9, 1]] }];
       ctx.ctrl.panel.valueMaps = [{ value: '10', text: 'OK' }];
@@ -202,7 +207,7 @@ describe('SingleStatCtrl', () => {
     });
   });
 
-  singleStatScenario('When range to text mapping is specified for first range', ctx => {
+  singleStatScenario('When range to text mapping is specified for first range', (ctx: any) => {
     ctx.setup(() => {
       ctx.data = [{ target: 'test.cpu1', datapoints: [[41, 50]] }];
       ctx.ctrl.panel.mappingType = 2;
@@ -214,7 +219,7 @@ describe('SingleStatCtrl', () => {
     });
   });
 
-  singleStatScenario('When range to text mapping is specified for other ranges', ctx => {
+  singleStatScenario('When range to text mapping is specified for other ranges', (ctx: any) => {
     ctx.setup(() => {
       ctx.data = [{ target: 'test.cpu1', datapoints: [[65, 75]] }];
       ctx.ctrl.panel.mappingType = 2;
@@ -235,7 +240,7 @@ describe('SingleStatCtrl', () => {
       },
     ];
 
-    singleStatScenario('with default values', ctx => {
+    singleStatScenario('with default values', (ctx: any) => {
       ctx.setup(() => {
         ctx.data = tableData;
         ctx.ctrl.panel = {
@@ -255,7 +260,7 @@ describe('SingleStatCtrl', () => {
       });
     });
 
-    singleStatScenario('When table data has multiple columns', ctx => {
+    singleStatScenario('When table data has multiple columns', (ctx: any) => {
       ctx.setup(() => {
         ctx.data = tableData;
         ctx.ctrl.panel.tableColumn = '';
@@ -266,25 +271,28 @@ describe('SingleStatCtrl', () => {
       });
     });
 
-    singleStatScenario('MainValue should use same number for decimals as displayed when checking thresholds', ctx => {
-      ctx.setup(() => {
-        ctx.data = tableData;
-        ctx.data[0].rows[0] = [1492759673649, 'ignore1', 99.99999, 'ignore2'];
-        ctx.ctrl.panel.mappingType = 0;
-        ctx.ctrl.panel.tableColumn = 'mean';
-      });
+    singleStatScenario(
+      'MainValue should use same number for decimals as displayed when checking thresholds',
+      (ctx: any) => {
+        ctx.setup(() => {
+          ctx.data = tableData;
+          ctx.data[0].rows[0] = [1492759673649, 'ignore1', 99.99999, 'ignore2'];
+          ctx.ctrl.panel.mappingType = 0;
+          ctx.ctrl.panel.tableColumn = 'mean';
+        });
 
-      it('Should be rounded', () => {
-        expect(ctx.data.value).toBe(99.99999);
-        expect(ctx.data.valueRounded).toBe(100);
-      });
+        it('Should be rounded', () => {
+          expect(ctx.data.value).toBe(99.99999);
+          expect(ctx.data.valueRounded).toBe(100);
+        });
 
-      it('should set formatted falue', () => {
-        expect(ctx.data.valueFormatted).toBe('100');
-      });
-    });
+        it('should set formatted falue', () => {
+          expect(ctx.data.valueFormatted).toBe('100');
+        });
+      }
+    );
 
-    singleStatScenario('When value to text mapping is specified', ctx => {
+    singleStatScenario('When value to text mapping is specified', (ctx: any) => {
       ctx.setup(() => {
         ctx.data = tableData;
         ctx.data[0].rows[0] = [1492759673649, 'ignore1', 9.9, 'ignore2'];
@@ -306,7 +314,7 @@ describe('SingleStatCtrl', () => {
       });
     });
 
-    singleStatScenario('When range to text mapping is specified for first range', ctx => {
+    singleStatScenario('When range to text mapping is specified for first range', (ctx: any) => {
       ctx.setup(() => {
         ctx.data = tableData;
         ctx.data[0].rows[0] = [1492759673649, 'ignore1', 41, 'ignore2'];
@@ -320,7 +328,7 @@ describe('SingleStatCtrl', () => {
       });
     });
 
-    singleStatScenario('When range to text mapping is specified for other ranges', ctx => {
+    singleStatScenario('When range to text mapping is specified for other ranges', (ctx: any) => {
       ctx.setup(() => {
         ctx.data = tableData;
         ctx.data[0].rows[0] = [1492759673649, 'ignore1', 65, 'ignore2'];
@@ -334,7 +342,7 @@ describe('SingleStatCtrl', () => {
       });
     });
 
-    singleStatScenario('When value is string', ctx => {
+    singleStatScenario('When value is string', (ctx: any) => {
       ctx.setup(() => {
         ctx.data = tableData;
         ctx.data[0].rows[0] = [1492759673649, 'ignore1', 65, 'ignore2'];
@@ -346,7 +354,7 @@ describe('SingleStatCtrl', () => {
       });
     });
 
-    singleStatScenario('When value is zero', ctx => {
+    singleStatScenario('When value is zero', (ctx: any) => {
       ctx.setup(() => {
         ctx.data = tableData;
         ctx.data[0].rows[0] = [1492759673649, 'ignore1', 0, 'ignore2'];

scripts/ci-frontend-metrics.sh

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

yarn.lock

@@ -2191,7 +2191,7 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/remarkable@^1.7.4":
+"@types/remarkable@1.7.4":
   version "1.7.4"
   resolved "https://registry.yarnpkg.com/@types/remarkable/-/remarkable-1.7.4.tgz#0faee73dc42cf21d718e20065a0961e53fa8e570"
   integrity sha512-fsFfCxJt0C4DvAxdMR9JcnVY6FfAQrH8ia7NT0MStVbsgR73+a7XYFRhNqRHg2/FC2Sxfbg3ekuiFuY8eMOvMQ==