Merge pull request #15841 from ryantxu/fix-15840

return the same panelData unless it changes

public/app/features/dashboard/dashgrid/DataPanel.tsx

@@ -44,6 +44,7 @@ export interface State {
   isFirstLoad: boolean;
   isFirstLoad: boolean;
   loading: LoadingState;
   loading: LoadingState;
   response: DataQueryResponse;
   response: DataQueryResponse;
+  panelData: PanelData;
 }
 }
 
 
 export class DataPanel extends Component<Props, State> {
 export class DataPanel extends Component<Props, State> {
@@ -63,6 +64,7 @@ export class DataPanel extends Component<Props, State> {
       response: {
       response: {
         data: [],
         data: [],
       },
       },
+      panelData: {},
       isFirstLoad: true,
       isFirstLoad: true,
     };
     };
   }
   }
@@ -147,6 +149,7 @@ export class DataPanel extends Component<Props, State> {
       this.setState({
       this.setState({
         loading: LoadingState.Done,
         loading: LoadingState.Done,
         response: resp,
         response: resp,
+        panelData: this.getPanelData(resp),
         isFirstLoad: false,
         isFirstLoad: false,
       });
       });
     } catch (err) {
     } catch (err) {
@@ -169,9 +172,7 @@ export class DataPanel extends Component<Props, State> {
     }
     }
   };
   };
 
 
-  getPanelData = () => {
-    const { response } = this.state;
-
+  getPanelData(response: DataQueryResponse) {
     if (response.data.length > 0 && (response.data[0] as TableData).type === 'table') {
     if (response.data.length > 0 && (response.data[0] as TableData).type === 'table') {
       return {
       return {
         tableData: response.data[0] as TableData,
         tableData: response.data[0] as TableData,
@@ -183,12 +184,11 @@ export class DataPanel extends Component<Props, State> {
       timeSeries: response.data as TimeSeries[],
       timeSeries: response.data as TimeSeries[],
       tableData: null,
       tableData: null,
     };
     };
-  };
+  }
 
 
   render() {
   render() {
     const { queries } = this.props;
     const { queries } = this.props;
-    const { loading, isFirstLoad } = this.state;
-    const panelData = this.getPanelData();
+    const { loading, isFirstLoad, panelData } = this.state;
 
 
     // do not render component until we have first data
     // do not render component until we have first data
     if (isFirstLoad && (loading === LoadingState.Loading || loading === LoadingState.NotStarted)) {
     if (isFirstLoad && (loading === LoadingState.Loading || loading === LoadingState.NotStarted)) {

public/app/plugins/panel/gauge/GaugePanel.tsx

 // Libraries
 // Libraries
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 
 
 // Services & Utils
 // Services & Utils
 import { processTimeSeries, ThemeContext } from '@grafana/ui';
 import { processTimeSeries, ThemeContext } from '@grafana/ui';
@@ -12,15 +12,27 @@ import { GaugeOptions } from './types';
 import { PanelProps, NullValueMode, TimeSeriesValue } from '@grafana/ui/src/types';
 import { PanelProps, NullValueMode, TimeSeriesValue } from '@grafana/ui/src/types';
 
 
 interface Props extends PanelProps<GaugeOptions> {}
 interface Props extends PanelProps<GaugeOptions> {}
+interface State {
+  value: TimeSeriesValue;
+}
 
 
-export class GaugePanel extends PureComponent<Props> {
-  render() {
-    const { panelData, width, height, replaceVariables, options } = this.props;
-    const { valueOptions } = options;
+export class GaugePanel extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      value: this.findValue(props),
+    };
+  }
 
 
-    const prefix = replaceVariables(valueOptions.prefix);
-    const suffix = replaceVariables(valueOptions.suffix);
-    let value: TimeSeriesValue;
+  componentDidUpdate(prevProps: Props) {
+    if (this.props.panelData !== prevProps.panelData) {
+      this.setState({ value: this.findValue(this.props) });
+    }
+  }
+
+  findValue(props: Props): number | null {
+    const { panelData, options } = props;
+    const { valueOptions } = options;
 
 
     if (panelData.timeSeries) {
     if (panelData.timeSeries) {
       const vmSeries = processTimeSeries({
       const vmSeries = processTimeSeries({
@@ -29,14 +41,21 @@ export class GaugePanel extends PureComponent<Props> {
       });
       });
 
 
       if (vmSeries[0]) {
       if (vmSeries[0]) {
-        value = vmSeries[0].stats[valueOptions.stat];
-      } else {
-        value = null;
+        return vmSeries[0].stats[valueOptions.stat];
       }
       }
     } else if (panelData.tableData) {
     } else if (panelData.tableData) {
-      value = panelData.tableData.rows[0].find(prop => prop > 0);
+      return panelData.tableData.rows[0].find(prop => prop > 0);
     }
     }
+    return null;
+  }
+
+  render() {
+    const { width, height, replaceVariables, options } = this.props;
+    const { valueOptions } = options;
+    const { value } = this.state;
 
 
+    const prefix = replaceVariables(valueOptions.prefix);
+    const suffix = replaceVariables(valueOptions.suffix);
     return (
     return (
       <ThemeContext.Consumer>
       <ThemeContext.Consumer>
         {theme => (
         {theme => (