Chore: reduce null check errors to 788 (currently over 798) (#23449)

* Fixed ts errors so build will succeed

* Update packages/grafana-data/src/types/graph.ts

Co-Authored-By: Ryan McKinley <ryantxu@gmail.com>

* Feedback from code review

* Leaving out trivial typing's

* Fix error with color being undefined now.

* fix test with timezone issue

* Fixed test

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

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

@@ -11,7 +11,7 @@ export type GraphSeriesValue = number | null;
 
 
 /** View model projection of a series */
 /** View model projection of a series */
 export interface GraphSeriesXY {
 export interface GraphSeriesXY {
-  color: string;
+  color?: string;
   data: GraphSeriesValue[][]; // [x,y][]
   data: GraphSeriesValue[][]; // [x,y][]
   isVisible: boolean;
   isVisible: boolean;
   label: string;
   label: string;

packages/grafana-data/src/utils/series.ts

@@ -4,9 +4,10 @@ import { Field } from '../types/dataFrame';
  * Returns minimal time step from series time field
  * Returns minimal time step from series time field
  * @param timeField
  * @param timeField
  */
  */
-export const getSeriesTimeStep = (timeField: Field) => {
-  let previousTime;
-  let minTimeStep;
+export const getSeriesTimeStep = (timeField: Field): number => {
+  let previousTime: number | undefined;
+  let minTimeStep: number | undefined;
+  let returnTimeStep = Number.MAX_VALUE;
 
 
   for (let i = 0; i < timeField.values.length; i++) {
   for (let i = 0; i < timeField.values.length; i++) {
     const currentTime = timeField.values.get(i);
     const currentTime = timeField.values.get(i);
@@ -15,16 +16,16 @@ export const getSeriesTimeStep = (timeField: Field) => {
       const timeStep = currentTime - previousTime;
       const timeStep = currentTime - previousTime;
 
 
       if (minTimeStep === undefined) {
       if (minTimeStep === undefined) {
-        minTimeStep = timeStep;
+        returnTimeStep = timeStep;
       }
       }
 
 
-      if (timeStep < minTimeStep) {
-        minTimeStep = timeStep;
+      if (timeStep < returnTimeStep) {
+        returnTimeStep = timeStep;
       }
       }
     }
     }
     previousTime = currentTime;
     previousTime = currentTime;
   }
   }
-  return minTimeStep;
+  return returnTimeStep;
 };
 };
 
 
 /**
 /**

packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx

@@ -82,7 +82,7 @@ export const GraphWithLegend: React.FunctionComponent<GraphWithLegendProps> = (p
       : acc.concat([
       : acc.concat([
           {
           {
             label: s.label,
             label: s.label,
-            color: s.color,
+            color: s.color || '',
             isVisible: s.isVisible,
             isVisible: s.isVisible,
             yAxis: s.yAxis.index,
             yAxis: s.yAxis.index,
             displayValues: s.info || [],
             displayValues: s.info || [],

public/app/core/time_series2.ts

@@ -91,7 +91,7 @@ export default class TimeSeries {
   label: string;
   label: string;
   alias: string;
   alias: string;
   aliasEscaped: string;
   aliasEscaped: string;
-  color: string;
+  color?: string;
   valueFormater: any;
   valueFormater: any;
   stats: any;
   stats: any;
   legend: boolean;
   legend: boolean;

public/app/core/utils/richHistory.test.ts

@@ -11,6 +11,7 @@ import {
 } from './richHistory';
 } from './richHistory';
 import store from 'app/core/store';
 import store from 'app/core/store';
 import { SortOrder } from './explore';
 import { SortOrder } from './explore';
+import { dateTime } from '@grafana/data';
 
 
 const mock: any = {
 const mock: any = {
   history: [
   history: [
@@ -164,6 +165,8 @@ describe('createDateStringFromTs', () => {
 
 
 describe('createQueryHeading', () => {
 describe('createQueryHeading', () => {
   it('should correctly create heading for queries when sort order is ascending ', () => {
   it('should correctly create heading for queries when sort order is ascending ', () => {
+    // Have to offset the timezone of a 1 microsecond epoch, and then reverse the changes
+    mock.history[0].ts = 1 + -1 * dateTime().utcOffset() * 60 * 1000;
     const heading = createQueryHeading(mock.history[0], SortOrder.Ascending);
     const heading = createQueryHeading(mock.history[0], SortOrder.Ascending);
     expect(heading).toEqual('January 1');
     expect(heading).toEqual('January 1');
   });
   });

public/app/features/explore/utils/ResultProcessor.test.ts

@@ -113,7 +113,7 @@ describe('ResultProcessor', () => {
               [200, 5],
               [200, 5],
               [300, 6],
               [300, 6],
             ],
             ],
-            info: undefined,
+            info: [],
             isVisible: true,
             isVisible: true,
             yAxis: {
             yAxis: {
               index: 1,
               index: 1,
@@ -234,7 +234,7 @@ describe('ResultProcessor', () => {
                 [200, 5],
                 [200, 5],
                 [300, 6],
                 [300, 6],
               ],
               ],
-              info: undefined,
+              info: [],
               isVisible: true,
               isVisible: true,
               yAxis: {
               yAxis: {
                 index: 1,
                 index: 1,

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

@@ -105,25 +105,25 @@ interface AxisSide {
   min: number;
   min: number;
 }
 }
 
 
-function checkCorrectAxis(axis: any[]) {
+function checkCorrectAxis(axis: any[]): boolean {
   return axis.length === 2 && checkCorrectAxes(axis[0]) && checkCorrectAxes(axis[1]);
   return axis.length === 2 && checkCorrectAxes(axis[0]) && checkCorrectAxes(axis[1]);
 }
 }
 
 
-function checkCorrectAxes(axes: any) {
+function checkCorrectAxes(axes: any): boolean {
   return 'min' in axes && 'max' in axes;
   return 'min' in axes && 'max' in axes;
 }
 }
 
 
-function checkOneSide(yLeft: AxisSide, yRight: AxisSide) {
+function checkOneSide(yLeft: AxisSide, yRight: AxisSide): boolean {
   // on the one hand with respect to zero
   // on the one hand with respect to zero
   return (yLeft.min >= 0 && yRight.min >= 0) || (yLeft.max <= 0 && yRight.max <= 0);
   return (yLeft.min >= 0 && yRight.min >= 0) || (yLeft.max <= 0 && yRight.max <= 0);
 }
 }
 
 
-function checkTwoCross(yLeft: AxisSide, yRight: AxisSide) {
+function checkTwoCross(yLeft: AxisSide, yRight: AxisSide): boolean {
   // both across zero
   // both across zero
   return yLeft.min <= 0 && yLeft.max >= 0 && yRight.min <= 0 && yRight.max >= 0;
   return yLeft.min <= 0 && yLeft.max >= 0 && yRight.min <= 0 && yRight.max >= 0;
 }
 }
 
 
-function checkOppositeSides(yLeft: AxisSide, yRight: AxisSide) {
+function checkOppositeSides(yLeft: AxisSide, yRight: AxisSide): boolean {
   // on the opposite sides with respect to zero
   // on the opposite sides with respect to zero
   return (yLeft.min >= 0 && yRight.max <= 0) || (yLeft.max <= 0 && yRight.min >= 0);
   return (yLeft.min >= 0 && yRight.max <= 0) || (yLeft.max <= 0 && yRight.min >= 0);
 }
 }
@@ -141,13 +141,13 @@ function getRate(yLeft: AxisSide, yRight: AxisSide): number {
     const absLeftMax = Math.abs(yLeft.max);
     const absLeftMax = Math.abs(yLeft.max);
     const absRightMin = Math.abs(yRight.min);
     const absRightMin = Math.abs(yRight.min);
     const absRightMax = Math.abs(yRight.max);
     const absRightMax = Math.abs(yRight.max);
-    const upLeft = _.max([absLeftMin, absLeftMax]);
-    const downLeft = _.min([absLeftMin, absLeftMax]);
-    const upRight = _.max([absRightMin, absRightMax]);
-    const downRight = _.min([absRightMin, absRightMax]);
+    const upLeft = Math.max(absLeftMin, absLeftMax);
+    const downLeft = Math.min(absLeftMin, absLeftMax);
+    const upRight = Math.max(absRightMin, absRightMax);
+    const downRight = Math.min(absRightMin, absRightMax);
 
 
-    const rateLeft = downLeft ? upLeft / downLeft : upLeft;
-    const rateRight = downRight ? upRight / downRight : upRight;
+    const rateLeft = downLeft !== 0 ? upLeft / downLeft : upLeft;
+    const rateRight = downRight !== 0 ? upRight / downRight : upRight;
 
 
     return rateLeft > rateRight ? rateLeft : rateRight;
     return rateLeft > rateRight ? rateLeft : rateRight;
   }
   }

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

@@ -249,7 +249,7 @@ class GraphElement {
       return;
       return;
     } else {
     } else {
       this.tooltip.clear(this.plot);
       this.tooltip.clear(this.plot);
-      let linksSupplier: LinkModelSupplier<FieldDisplay>;
+      let linksSupplier: LinkModelSupplier<FieldDisplay> | undefined;
 
 
       if (item) {
       if (item) {
         // pickup y-axis index to know which field's config to apply
         // pickup y-axis index to know which field's config to apply
@@ -258,7 +258,7 @@ class GraphElement {
         const field = dataFrame.fields[item.series.fieldIndex];
         const field = dataFrame.fields[item.series.fieldIndex];
         const dataIndex = this.getDataIndexWithNullValuesCorrection(item, dataFrame);
         const dataIndex = this.getDataIndexWithNullValuesCorrection(item, dataFrame);
 
 
-        let links = this.panel.options.dataLinks || [];
+        let links: any[] = this.panel.options.dataLinks || [];
         if (field.config.links && field.config.links.length) {
         if (field.config.links && field.config.links.length) {
           // Append the configured links to the panel datalinks
           // Append the configured links to the panel datalinks
           links = [...links, ...field.config.links];
           links = [...links, ...field.config.links];

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

@@ -170,6 +170,7 @@ export class TimeRegionManager {
 
 
         fromEnd = dateTime(fromStart);
         fromEnd = dateTime(fromStart);
 
 
+        if (fromEnd.hour) {
           if (hRange.from.h <= hRange.to.h) {
           if (hRange.from.h <= hRange.to.h) {
             fromEnd.add(hRange.to.h - hRange.from.h, 'hours');
             fromEnd.add(hRange.to.h - hRange.from.h, 'hours');
           } else if (hRange.from.h > hRange.to.h) {
           } else if (hRange.from.h > hRange.to.h) {
@@ -183,6 +184,7 @@ export class TimeRegionManager {
               fromEnd.add(1, 'hours');
               fromEnd.add(1, 'hours');
             }
             }
           }
           }
+        }
 
 
         fromEnd.set('minute', hRange.to.m);
         fromEnd.set('minute', hRange.to.m);
         fromEnd.set('second', hRange.to.s);
         fromEnd.set('second', hRange.to.s);

public/app/plugins/panel/graph2/getGraphSeriesModel.ts

@@ -62,8 +62,8 @@ export const getGraphSeriesModel = (
       });
       });
 
 
       if (points.length > 0) {
       if (points.length > 0) {
-        const seriesStats = reduceField({ field, reducers: legendOptions.stats });
-        let statsDisplayValues: DisplayValue[];
+        const seriesStats = reduceField({ field, reducers: legendOptions.stats || [] });
+        let statsDisplayValues: DisplayValue[] = [];
 
 
         if (legendOptions.stats) {
         if (legendOptions.stats) {
           statsDisplayValues = legendOptions.stats.map<DisplayValue>(stat => {
           statsDisplayValues = legendOptions.stats.map<DisplayValue>(stat => {

public/app/plugins/panel/heatmap/color_scale.ts

@@ -16,7 +16,7 @@ export function getOpacityScale(
   options: { cardColor?: null; colorScale?: any; exponent?: any },
   options: { cardColor?: null; colorScale?: any; exponent?: any },
   maxValue: number,
   maxValue: number,
   minValue = 0
   minValue = 0
-) {
+): any {
   let legendOpacityScale;
   let legendOpacityScale;
   if (options.colorScale === 'linear') {
   if (options.colorScale === 'linear') {
     legendOpacityScale = d3
     legendOpacityScale = d3

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

@@ -296,7 +296,7 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
   // Directly support DataFrame
   // Directly support DataFrame
   onDataFramesReceived(data: DataFrame[]) {
   onDataFramesReceived(data: DataFrame[]) {
     this.series = this.processor.getSeriesList({ dataList: data, range: this.range }).map(ts => {
     this.series = this.processor.getSeriesList({ dataList: data, range: this.range }).map(ts => {
-      ts.color = null; // remove whatever the processor set
+      ts.color = undefined; // remove whatever the processor set
       ts.flotpairs = ts.getFlotPairs(this.panel.nullPointMode);
       ts.flotpairs = ts.getFlotPairs(this.panel.nullPointMode);
       return ts;
       return ts;
     });
     });

public/app/plugins/panel/heatmap/heatmap_data_converter.ts

@@ -275,7 +275,7 @@ function pushToYBuckets(
   }
   }
   if (buckets[bucketNum]) {
   if (buckets[bucketNum]) {
     buckets[bucketNum].values.push(value);
     buckets[bucketNum].values.push(value);
-    buckets[bucketNum].points.push(point);
+    buckets[bucketNum].points?.push(point);
     buckets[bucketNum].count += count;
     buckets[bucketNum].count += count;
   } else {
   } else {
     buckets[bucketNum] = {
     buckets[bucketNum] = {

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

@@ -9,6 +9,8 @@ import { TableRenderer } from './renderer';
 import { isTableData, PanelEvents, PanelPlugin } from '@grafana/data';
 import { isTableData, PanelEvents, PanelPlugin } from '@grafana/data';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 import { dispatch } from 'app/store/store';
 import { dispatch } from 'app/store/store';
+import { ComponentType } from 'react';
+import { PanelProps } from '@grafana/data';
 import { applyFilterFromTable } from 'app/features/variables/adhoc/actions';
 import { applyFilterFromTable } from 'app/features/variables/adhoc/actions';
 
 
 export class TablePanelCtrl extends MetricsPanelCtrl {
 export class TablePanelCtrl extends MetricsPanelCtrl {
@@ -268,6 +270,6 @@ export class TablePanelCtrl extends MetricsPanelCtrl {
   }
   }
 }
 }
 
 
-export const plugin = new PanelPlugin(null);
+export const plugin = new PanelPlugin((null as unknown) as ComponentType<PanelProps<any>>);
 plugin.angularPanelCtrl = TablePanelCtrl;
 plugin.angularPanelCtrl = TablePanelCtrl;
 plugin.setNoPadding();
 plugin.setNoPadding();