strictNullChecks: First batch (#18390)

* First batch of strictNullChecks

* Remove undefined

* Check an alternative solution

* Fix strict nullChecks

* Low hanging strictNullChecks

* Fixing strict nulls issues and more

* Minor change

* fixed unit test

* Fix feedback

* Update public/vendor/ansicolor/ansicolor.ts

Co-Authored-By: Dominik Prokop <dominik.prokop@grafana.com>

* Update public/vendor/ansicolor/ansicolor.ts

Co-Authored-By: Dominik Prokop <dominik.prokop@grafana.com>

* Update public/vendor/ansicolor/ansicolor.ts

Co-Authored-By: Dominik Prokop <dominik.prokop@grafana.com>

* Fix build errors

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

@@ -13,7 +13,7 @@ export class GraphContextMenuCtrl {
   private source?: FlotDataPoint | null;
   private scope?: any;
   menuItems: ContextMenuItem[];
-  scrollContextElement: HTMLElement;
+  scrollContextElement: HTMLElement | null;
   position: {
     x: number;
     y: number;
@@ -58,7 +58,7 @@ export class GraphContextMenuCtrl {
 
   // Sets element which is considered as a scroll context of given context menu.
   // Having access to this element allows scroll event attachement for menu to be closed when user scrolls
-  setScrollContextElement = (el: HTMLElement) => {
+  setScrollContextElement = (el: HTMLElement | null) => {
     this.scrollContextElement = el;
   };
 

public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx

@@ -9,9 +9,9 @@ export interface LegendLabelProps {
   series: TimeSeries;
   asTable?: boolean;
   hidden?: boolean;
-  onLabelClick?: (series: any, event: any) => void;
-  onColorChange?: (series: any, color: string) => void;
-  onToggleAxis?: (series: any) => void;
+  onLabelClick: (series: any, event: any) => void;
+  onColorChange: (series: any, color: string) => void;
+  onToggleAxis: (series: any) => void;
 }
 
 export interface LegendValuesProps {

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

@@ -135,9 +135,6 @@ class GraphElement {
   }
 
   onPanelTeardown() {
-    this.thresholdManager = null;
-    this.timeRegionManager = null;
-
     if (this.plot) {
       this.plot.destroy();
       this.plot = null;
@@ -587,19 +584,24 @@ class GraphElement {
   }
 
   addXHistogramAxis(options: any, bucketSize: number) {
-    let ticks, min, max;
+    let ticks: number | number[];
+    let min: number | undefined;
+    let max: number | undefined;
+
     const defaultTicks = this.panelWidth / 50;
 
     if (this.data.length && bucketSize) {
       const tickValues = [];
+
       for (const d of this.data) {
         for (const point of d.data) {
           tickValues[point[0]] = true;
         }
       }
+
       ticks = Object.keys(tickValues).map(v => Number(v));
-      min = _.min(ticks);
-      max = _.max(ticks);
+      min = _.min(ticks)!;
+      max = _.max(ticks)!;
 
       // Adjust tick step
       let tickStep = bucketSize;
@@ -819,7 +821,7 @@ class GraphElement {
     };
   }
 
-  time_format(ticks: number, min: number, max: number) {
+  time_format(ticks: number, min: number | null, max: number | null) {
     if (min && max && ticks) {
       const range = max - min;
       const secPerTick = range / ticks / 1000;

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

@@ -35,7 +35,7 @@ export class ThresholdManager {
     const handleElem = $(evt.currentTarget).parents('.alert-handle-wrapper');
     const handleIndex = $(evt.currentTarget).data('handleIndex');
 
-    let lastY: number = null;
+    let lastY: number | null = null;
     let posTop: number;
     const plot = this.plot;
     const panelCtrl = this.panelCtrl;

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

@@ -520,7 +520,7 @@ export class HeatmapRenderer {
       const logBase = this.panel.yAxis.logBase;
       const domain = this.yScale.domain();
       const tickValues = this.logScaleTickValues(domain, logBase);
-      this.data.buckets = mergeZeroBuckets(this.data.buckets, _.min(tickValues));
+      this.data.buckets = mergeZeroBuckets(this.data.buckets, _.min(tickValues)!);
     }
 
     const cardsData = this.data.cards;

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

@@ -12,7 +12,7 @@ import { MetricsPanelCtrl } from 'app/plugins/sdk';
 import { isTableData } from '@grafana/data';
 import { GrafanaThemeType, getValueFormat, getColorFromHexRgbOrName } from '@grafana/ui';
 import { auto } from 'angular';
-import { LinkSrv } from 'app/features/panel/panellinks/link_srv';
+import { LinkSrv, LinkModel } from 'app/features/panel/panellinks/link_srv';
 import TableModel from 'app/core/table_model';
 
 const BASE_FONT_SIZE = 38;
@@ -385,7 +385,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     const $sanitize = this.$sanitize;
     const panel = ctrl.panel;
     const templateSrv = this.templateSrv;
-    let data: any, linkInfo: { target: string; href: string; title: string };
+    let data: any;
+    let linkInfo: LinkModel | null = null;
     const $panelContainer = elem.find('.panel-container');
     elem = elem.find('.singlestat-panel');
 

public/app/plugins/panel/singlestat2/ColoringEditor.tsx

@@ -14,11 +14,6 @@ export interface Props {
   onChange: (options: SingleStatOptions) => void;
 }
 
-// colorBackground?: boolean;
-// colorValue?: boolean;
-// colorPrefix?: boolean;
-// colorPostfix?: boolean;
-
 export class ColoringEditor extends PureComponent<Props> {
   onToggleColorBackground = () =>
     this.props.onChange({ ...this.props.options, colorBackground: !this.props.options.colorBackground });
@@ -39,27 +34,27 @@ export class ColoringEditor extends PureComponent<Props> {
         <Switch
           label="Background"
           labelClass={`width-${labelWidth}`}
-          checked={colorBackground}
+          checked={colorBackground!}
           onChange={this.onToggleColorBackground}
         />
 
         <Switch
           label="Value"
           labelClass={`width-${labelWidth}`}
-          checked={colorValue}
+          checked={colorValue!}
           onChange={this.onToggleColorValue}
         />
 
         <Switch
           label="Prefix"
           labelClass={`width-${labelWidth}`}
-          checked={colorPrefix}
+          checked={colorPrefix!}
           onChange={this.onToggleColorPrefix}
         />
         <Switch
           label="Postfix"
           labelClass={`width-${labelWidth}`}
-          checked={colorPostfix}
+          checked={colorPostfix!}
           onChange={this.onToggleColorPostfix}
         />
       </PanelOptionsGroup>

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

@@ -55,7 +55,7 @@ export class TableRenderer {
   }
 
   getColorForValue(value: number, style: ColumnStyle) {
-    if (!style.thresholds) {
+    if (!style.thresholds || !style.colors) {
       return null;
     }
     for (let i = style.thresholds.length; i > 0; i--) {

public/app/plugins/panel/table/specs/transformers.test.ts

@@ -1,8 +1,7 @@
 import { transformers, transformDataToTable } from '../transformers';
-import { TableData } from '@grafana/data';
 
 describe('when transforming time series table', () => {
-  let table: TableData;
+  let table: any;
 
   describe('given 2 time series', () => {
     const time = new Date().getTime();

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

@@ -191,7 +191,7 @@ transformers['json'] = {
       const maxDocs = Math.min(series.datapoints.length, 100);
       for (let y = 0; y < maxDocs; y++) {
         const doc = series.datapoints[y];
-        const flattened = flatten(doc, null);
+        const flattened = flatten(doc, {});
         for (const propName in flattened) {
           names[propName] = true;
         }
@@ -228,7 +228,7 @@ transformers['json'] = {
         const values = [];
 
         if (_.isObject(dp) && panel.columns.length > 0) {
-          const flattened = flatten(dp, null);
+          const flattened = flatten(dp);
           for (z = 0; z < panel.columns.length; z++) {
             values.push(flattened[panel.columns[z].value]);
           }

public/app/plugins/panel/table2/types.ts

@@ -27,7 +27,6 @@ export const defaults: Options = {
       alias: '',
       decimals: 2,
       colors: ['rgba(245, 54, 54, 0.9)', 'rgba(237, 129, 40, 0.89)', 'rgba(50, 172, 45, 0.97)'],
-      colorMode: null,
       pattern: '/.*/',
       thresholds: [],
     },

public/app/plugins/panel/text2/TextPanelEditor.tsx

@@ -16,10 +16,10 @@ export class TextPanelEditor extends PureComponent<PanelEditorProps<TextOptions>
   ];
 
   onModeChange = (item: SelectableValue<TextMode>) =>
-    this.props.onOptionsChange({ ...this.props.options, mode: item.value });
+    this.props.onOptionsChange({ ...this.props.options, mode: item.value! });
 
   onContentChange = (evt: ChangeEvent<HTMLTextAreaElement>) => {
-    this.props.onOptionsChange({ ...this.props.options, content: (event.target as any).value });
+    this.props.onOptionsChange({ ...this.props.options, content: (evt.target as any).value });
   };
 
   render() {