Chore: reduce null check errors/warnigns (#25223)

* fix a few null errors

* more

* flip logic

* merge master

* more

* fewer changes

* processor

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-data/src/dataframe/DataFrameView.ts

@@ -53,15 +53,15 @@ export class DataFrameView<T = any> extends FunctionalVector<T> {
    * Helper function to return the {@link DisplayProcessor} for a given field column.
    * @param colIndex - the field column index for the data frame.
    */
-  getFieldDisplayProcessor(colIndex: number): DisplayProcessor | null {
+  getFieldDisplayProcessor(colIndex: number): DisplayProcessor | undefined {
     if (!this.dataFrame || !this.dataFrame.fields) {
-      return null;
+      return undefined;
     }
 
     const field = this.dataFrame.fields[colIndex];
 
     if (!field || !field.display) {
-      return null;
+      return undefined;
     }
 
     return field.display;

public/app/plugins/datasource/mixed/MixedDataSource.ts

@@ -40,9 +40,9 @@ export class MixedDatasource extends DataSourceApi<DataQuery> {
     const mixed: BatchedQueries[] = [];
     for (const key in sets) {
       const targets = sets[key];
-      const dsName = targets[0].datasource;
+      const dsName: string | undefined = targets[0].datasource;
       mixed.push({
-        datasource: getDataSourceSrv().get(dsName),
+        datasource: getDataSourceSrv().get(dsName, request.scopedVars),
         targets,
       });
     }

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

@@ -90,10 +90,10 @@ class AlertListPanel extends PanelCtrl {
 
     if (this.panel.show === 'current') {
       getAlertsPromise = this.getCurrentAlertState();
-    }
-
-    if (this.panel.show === 'changes') {
+    } else if (this.panel.show === 'changes') {
       getAlertsPromise = this.getStateChanges();
+    } else {
+      getAlertsPromise = Promise.resolve();
     }
 
     getAlertsPromise.then(() => {

public/app/plugins/panel/annolist/AnnoListPanel.tsx

@@ -4,20 +4,17 @@ import React, { PureComponent } from 'react';
 import { AnnoOptions } from './types';
 import { AnnotationEvent, AppEvents, dateTime, DurationUnit, PanelProps } from '@grafana/data';
 import { Tooltip } from '@grafana/ui';
-import { getBackendSrv } from '@grafana/runtime';
+import { getBackendSrv, getLocationSrv } from '@grafana/runtime';
 import { AbstractList } from '@grafana/ui/src/components/List/AbstractList';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import appEvents from 'app/core/app_events';
-
-import { updateLocation } from 'app/core/actions';
-import { store } from 'app/store/store';
 import { css, cx } from 'emotion';
 
 interface UserInfo {
-  id: number;
-  login: string;
-  email: string;
+  id?: number;
+  login?: string;
+  email?: string;
 }
 
 interface Props extends PanelProps<AnnoOptions> {}
@@ -108,6 +105,10 @@ export class AnnoListPanel extends PureComponent<Props, State> {
 
   onAnnoClick = (e: React.SyntheticEvent, anno: AnnotationEvent) => {
     e.stopPropagation();
+    if (!anno.time) {
+      return;
+    }
+
     const { options } = this.props;
     const dashboardSrv = getDashboardSrv();
     const current = dashboardSrv.getCurrent();
@@ -122,12 +123,10 @@ export class AnnoListPanel extends PureComponent<Props, State> {
     }
 
     if (current.id === anno.dashboardId) {
-      store.dispatch(
-        updateLocation({
-          query: params,
-          partial: true,
-        })
-      );
+      getLocationSrv().update({
+        query: params,
+        partial: true,
+      });
       return;
     }
 
@@ -136,12 +135,10 @@ export class AnnoListPanel extends PureComponent<Props, State> {
       .then((res: any[]) => {
         if (res && res.length && res[0].id === anno.dashboardId) {
           const dash = res[0];
-          store.dispatch(
-            updateLocation({
-              query: params,
-              path: dash.url,
-            })
-          );
+          getLocationSrv().update({
+            query: params,
+            path: dash.url,
+          });
           return;
         }
         appEvents.emit(AppEvents.alertWarning, ['Unknown Dashboard: ' + anno.dashboardId]);
@@ -164,7 +161,7 @@ export class AnnoListPanel extends PureComponent<Props, State> {
     return t.add(incr, unit as DurationUnit).valueOf();
   }
 
-  onTagClick = (e: React.SyntheticEvent, tag: string, remove: boolean) => {
+  onTagClick = (e: React.SyntheticEvent, tag: string, remove?: boolean) => {
     e.stopPropagation();
     const queryTags = remove ? this.state.queryTags.filter(item => item !== tag) : [...this.state.queryTags, tag];
 
@@ -188,7 +185,7 @@ export class AnnoListPanel extends PureComponent<Props, State> {
     });
   };
 
-  renderTags = (tags: string[], remove: boolean): JSX.Element | null => {
+  renderTags = (tags?: string[], remove?: boolean): JSX.Element | null => {
     if (!tags || !tags.length) {
       return null;
     }
@@ -197,7 +194,7 @@ export class AnnoListPanel extends PureComponent<Props, State> {
         {tags.map(tag => {
           return (
             <span key={tag} onClick={e => this.onTagClick(e, tag, remove)} className="pointer">
-              <TagBadge label={tag} removeIcon={remove} count={0} />
+              <TagBadge label={tag} removeIcon={!!remove} count={0} />
             </span>
           );
         })}
@@ -251,7 +248,9 @@ export class AnnoListPanel extends PureComponent<Props, State> {
             {showTags && this.renderTags(anno.tags, false)}
           </span>
 
-          <span className="pluginlist-version">{showTime && <span>{dashboard.formatDate(anno.time)}</span>}</span>
+          <span className="pluginlist-version">
+            {showTime && anno.time && <span>{dashboard.formatDate(anno.time)}</span>}
+          </span>
         </span>
       </div>
     );

public/app/plugins/panel/bargauge/BarGaugePanel.tsx

@@ -6,6 +6,7 @@ import {
   getFieldDisplayValues,
   PanelProps,
   FieldConfig,
+  DisplayProcessor,
   DisplayValue,
 } from '@grafana/data';
 import { BarGauge, DataLinksContextMenu, VizRepeater, VizRepeaterRenderValueProps } from '@grafana/ui';
@@ -13,6 +14,7 @@ import { BarGauge, DataLinksContextMenu, VizRepeater, VizRepeaterRenderValueProp
 import { config } from 'app/core/config';
 import { BarGaugeOptions } from './types';
 import { DataLinksContextMenuApi } from '@grafana/ui/src/components/DataLinks/DataLinksContextMenu';
+import { isNumber } from 'lodash';
 
 export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
   renderComponent = (
@@ -24,6 +26,11 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
     const { field, display, view, colIndex } = value;
     const { openMenu, targetClassName } = menuProps;
 
+    let processor: DisplayProcessor | undefined = undefined;
+    if (view && isNumber(colIndex)) {
+      processor = view!.getFieldDisplayProcessor(colIndex as number);
+    }
+
     return (
       <BarGauge
         value={clearNameForSingleSeries(count, field, display)}
@@ -31,7 +38,7 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
         height={height}
         orientation={orientation}
         field={field}
-        display={view?.getFieldDisplayProcessor(colIndex)}
+        display={processor}
         theme={config.theme}
         itemSpacing={this.getItemSpacing()}
         displayMode={options.displayMode}

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

@@ -286,18 +286,19 @@ class LegendTable extends PureComponent<Partial<LegendComponentProps>> {
           </tr>
         </thead>
         <tbody>
-          {seriesList.map((series, i) => (
-            <LegendItem
-              key={`${series.id}-${i}`}
-              asTable={true}
-              series={series}
-              hidden={hiddenSeries[series.alias]}
-              onLabelClick={this.props.onToggleSeries}
-              onColorChange={this.props.onColorChange}
-              onToggleAxis={this.props.onToggleAxis}
-              {...seriesValuesProps}
-            />
-          ))}
+          {seriesList &&
+            seriesList.map((series, i) => (
+              <LegendItem
+                key={`${series.id}-${i}`}
+                asTable={true}
+                series={series}
+                hidden={hiddenSeries[series.alias]}
+                onLabelClick={this.props.onToggleSeries}
+                onColorChange={this.props.onColorChange}
+                onToggleAxis={this.props.onToggleAxis}
+                {...seriesValuesProps}
+              />
+            ))}
         </tbody>
       </table>
     );

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

@@ -136,6 +136,8 @@ class LegendSeriesLabel extends PureComponent<LegendSeriesLabelProps & LegendSer
   render() {
     const { label, color, yaxis } = this.props;
     const { onColorChange, onToggleAxis } = this.props;
+    const onLabelClick = this.props.onLabelClick ? this.props.onLabelClick : () => {};
+
     return [
       <LegendSeriesIcon
         key="icon"
@@ -148,7 +150,7 @@ class LegendSeriesLabel extends PureComponent<LegendSeriesLabelProps & LegendSer
         className="graph-legend-alias pointer"
         title={label}
         key="label"
-        onClick={e => this.props.onLabelClick(e)}
+        onClick={onLabelClick}
         aria-label={selectors.components.Panels.Visualization.Graph.Legend.legendItemAlias(label)}
       >
         {label}

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

@@ -405,8 +405,9 @@ class SingleStatCtrl extends MetricsPanelCtrl {
 
     function addGauge() {
       const data: ShowData = ctrl.data;
-      const width = elem.width();
-      const height = elem.height();
+      const width = elem.width() || 10;
+      const height = elem.height() || 10;
+
       // Allow to use a bit more space for wide gauges
       const dimension = Math.min(width, height * 1.3);
 
@@ -501,13 +502,15 @@ class SingleStatCtrl extends MetricsPanelCtrl {
 
     function addSparkline() {
       const data: ShowData = ctrl.data;
-      const width = elem.width();
+      const width = elem.width() || 30;
+
       if (width && width < 30) {
         // element has not gotten it's width yet
         // delay sparkline render
         setTimeout(addSparkline, 30);
         return;
       }
+
       if (!data.sparkline || !data.sparkline.length) {
         // no sparkline data
         return;