Gauge: Fixes issue with all null values cause min & max to be null (#30156)

e2e/suite1/specs/gauge.spec.ts

@@ -0,0 +1,24 @@
+import { e2e } from '@grafana/e2e';
+
+e2e.scenario({
+  describeName: 'Gauge Panel',
+  itName: 'Gauge rendering e2e tests',
+  addScenarioDataSource: false,
+  addScenarioDashBoard: false,
+  skipScenario: false,
+  scenario: () => {
+    // open Panel Tests - Gauge
+    e2e.flows.openDashboard({ uid: '_5rDmaQiz' });
+
+    cy.wait(1000);
+
+    // check that gauges are rendered
+    e2e()
+      .get('body')
+      .find(`.flot-base`)
+      .should('have.length', 16);
+
+    // check that no panel errors exist
+    e2e.components.Panels.Panel.headerCornerInfo('error').should('not.exist');
+  },
+});

packages/grafana-data/src/field/fieldDisplay.ts

@@ -128,10 +128,15 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
         }
 
         let config = field.config; // already set by the prepare task
+
         if (field.state?.range) {
           // Us the global min/max values
-          config = { ...config, ...field.state?.range };
+          config = {
+            ...config,
+            ...field.state?.range,
+          };
         }
+
         const displayName = field.config.displayName ?? defaultDisplayName;
 
         const display =

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -18,6 +18,7 @@ export const Components = {
       title: (title: string) => `Panel header title item ${title}`,
       headerItems: (item: string) => `Panel header item ${item}`,
       containerByTitle: (title: string) => `Panel container title ${title}`,
+      headerCornerInfo: (mode: string) => `Panel header ${mode}`,
     },
     Visualization: {
       Graph: {

packages/grafana-ui/src/components/Gauge/Gauge.tsx

@@ -64,8 +64,9 @@ export class Gauge extends PureComponent<Props> {
     const thresholds = field.thresholds ?? Gauge.defaultProps.field?.thresholds!;
     const isPercent = thresholds.mode === ThresholdsMode.Percentage;
     const steps = thresholds.steps;
-    let min = field.min!;
-    let max = field.max!;
+
+    let min = field.min ?? 0;
+    let max = field.max ?? 100;
 
     if (isPercent) {
       min = 0;
@@ -113,9 +114,10 @@ export class Gauge extends PureComponent<Props> {
     const fontSize = this.props.text?.valueSize ?? calculateFontSize(text, valueWidth, dimension, 1, gaugeWidth * 1.7);
     const thresholdLabelFontSize = fontSize / 2.5;
 
-    let min = field.min!;
-    let max = field.max!;
+    let min = field.min ?? 0;
+    let max = field.max ?? 100;
     let numeric = value.numeric;
+
     if (field.thresholds?.mode === ThresholdsMode.Percentage) {
       min = 0;
       max = 100;
@@ -127,6 +129,7 @@ export class Gauge extends PureComponent<Props> {
     }
 
     const decimals = field.decimals === undefined ? 2 : field.decimals!;
+
     if (showThresholdMarkers) {
       min = +min.toFixed(decimals);
       max = +max.toFixed(decimals);

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx

@@ -7,6 +7,7 @@ import { getLocationSrv, getTemplateSrv } from '@grafana/runtime';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
 import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { InspectTab } from '../../components/Inspector/types';
+import { selectors } from '@grafana/e2e-selectors';
 
 enum InfoMode {
   Error = 'Error',
@@ -78,9 +79,12 @@ export class PanelHeaderCorner extends Component<Props> {
 
   renderCornerType(infoMode: InfoMode, content: PopoverContent, onClick?: () => void) {
     const theme = infoMode === InfoMode.Error ? 'error' : 'info';
+    const className = `panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`;
+    const ariaLabel = selectors.components.Panels.Panel.headerCornerInfo(infoMode.toLowerCase());
+
     return (
       <Tooltip content={content} placement="top-start" theme={theme}>
-        <div className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`} onClick={onClick}>
+        <div className={className} onClick={onClick} aria-label={ariaLabel}>
           <i className="fa" />
           <span className="panel-info-corner-inner" />
         </div>