From 82326fed42053a2926baacdb0810d75c4740467f Mon Sep 17 00:00:00 2001
From: ryan <ryantxu@gmail.com>
Date: Wed, 6 Mar 2019 15:18:24 -0800
Subject: [PATCH] return the same panelData unless it changes

---
 .../features/dashboard/dashgrid/DataPanel.tsx | 12 +++---
 public/app/plugins/panel/gauge/GaugePanel.tsx | 43 +++++++++++++------
 2 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx
index ae3486e40fe..09864d85960 100644
--- a/public/app/features/dashboard/dashgrid/DataPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx
@@ -44,6 +44,7 @@ export interface State {
   isFirstLoad: boolean;
   loading: LoadingState;
   response: DataQueryResponse;
+  panelData: PanelData;
 }
 
 export class DataPanel extends Component<Props, State> {
@@ -63,6 +64,7 @@ export class DataPanel extends Component<Props, State> {
       response: {
         data: [],
       },
+      panelData: {},
       isFirstLoad: true,
     };
   }
@@ -147,6 +149,7 @@ export class DataPanel extends Component<Props, State> {
       this.setState({
         loading: LoadingState.Done,
         response: resp,
+        panelData: this.getPanelData(resp),
         isFirstLoad: false,
       });
     } 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') {
       return {
         tableData: response.data[0] as TableData,
@@ -183,12 +184,11 @@ export class DataPanel extends Component<Props, State> {
       timeSeries: response.data as TimeSeries[],
       tableData: null,
     };
-  };
+  }
 
   render() {
     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
     if (isFirstLoad && (loading === LoadingState.Loading || loading === LoadingState.NotStarted)) {
diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
index 2a42e31b9ab..b75d4a1c7f3 100644
--- a/public/app/plugins/panel/gauge/GaugePanel.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanel.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 
 // Services & Utils
 import { processTimeSeries, ThemeContext } from '@grafana/ui';
@@ -12,16 +12,28 @@ import { GaugeOptions } from './types';
 import { PanelProps, NullValueMode, TimeSeriesValue } from '@grafana/ui/src/types';
 
 interface Props extends PanelProps<GaugeOptions> {}
+interface State {
+  value: TimeSeriesValue;
+}
 
-export class GaugePanel extends PureComponent<Props> {
-  render() {
-    const { panelData, width, height, replaceVariables, options } = this.props;
+export class GaugePanel extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      value: this.findValue(props),
+    };
+  }
+
+  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;
 
-    const prefix = replaceVariables(valueOptions.prefix);
-    const suffix = replaceVariables(valueOptions.suffix);
-    let value: TimeSeriesValue;
-
     if (panelData.timeSeries) {
       const vmSeries = processTimeSeries({
         timeSeries: panelData.timeSeries,
@@ -29,14 +41,21 @@ export class GaugePanel extends PureComponent<Props> {
       });
 
       if (vmSeries[0]) {
-        value = vmSeries[0].stats[valueOptions.stat];
-      } else {
-        value = null;
+        return vmSeries[0].stats[valueOptions.stat];
       }
     } 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 (
       <ThemeContext.Consumer>
         {theme => (