From 8b8f2c454049ca0af811523836a9b8b2f308dead Mon Sep 17 00:00:00 2001 From: Tobias Skarhed Date: Tue, 18 Jun 2019 11:44:17 +0200 Subject: [PATCH] noImplicitAny: SingleStat panel (#17616) * noImplicitAny on Singlestat * Lower threshold * Fix fixes --- public/app/plugins/panel/singlestat/module.ts | 71 +++++++----- .../panel/singlestat/specs/singlestat.test.ts | 108 ++++++++++-------- scripts/ci-frontend-metrics.sh | 2 +- yarn.lock | 2 +- 4 files changed, 100 insertions(+), 83 deletions(-) diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index 9a55d4418e0..f5560f1599a 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/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 '' + valueString + ''; @@ -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; } diff --git a/public/app/plugins/panel/singlestat/specs/singlestat.test.ts b/public/app/plugins/panel/singlestat/specs/singlestat.test.ts index 3f10d3ce9f6..67e038363bb 100644 --- a/public/app/plugins/panel/singlestat/specs/singlestat.test.ts +++ b/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']; diff --git a/scripts/ci-frontend-metrics.sh b/scripts/ci-frontend-metrics.sh index 53bfb73895b..9ba9cba8668 100755 --- a/scripts/ci-frontend-metrics.sh +++ b/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 diff --git a/yarn.lock b/yarn.lock index 1dd65f7cf97..33a9edd44c9 100644 --- a/yarn.lock +++ b/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==