hard move

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

@@ -2,7 +2,6 @@
 import React, { Component } from 'react';
 import { Tooltip } from '@grafana/ui';
 
-import ErrorBoundary from 'app/core/components/ErrorBoundary/ErrorBoundary';
 // Services
 import { DatasourceSrv, getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 // Utils
@@ -18,8 +17,6 @@ import {
   TimeSeries,
 } from '@grafana/ui';
 
-const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
-
 interface RenderProps {
   loading: LoadingState;
   panelData: PanelData;
@@ -203,22 +200,10 @@ export class DataPanel extends Component<Props, State> {
     return (
       <>
         {this.renderLoadingStates()}
-        <ErrorBoundary>
-          {({ error, errorInfo }) => {
-            if (errorInfo) {
-              this.onError(error.message || DEFAULT_PLUGIN_ERROR);
-              return null;
-            }
-            return (
-              <>
-                {this.props.children({
-                  loading,
-                  panelData,
-                })}
-              </>
-            );
-          }}
-        </ErrorBoundary>
+        {this.props.children({
+          loading,
+          panelData,
+        })}
       </>
     );
   }

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

@@ -8,6 +8,7 @@ import { getTimeSrv, TimeSrv } from '../services/TimeSrv';
 // Components
 import { PanelHeader } from './PanelHeader/PanelHeader';
 import { DataPanel } from './DataPanel';
+import ErrorBoundary from '../../../core/components/ErrorBoundary/ErrorBoundary';
 
 // Utils
 import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel';
@@ -23,6 +24,8 @@ import variables from 'sass/_variables.scss';
 import templateSrv from 'app/features/templating/template_srv';
 import { DataQueryResponse } from '@grafana/ui/src';
 
+const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
+
 export interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
@@ -34,6 +37,9 @@ export interface State {
   renderCounter: number;
   timeInfo?: string;
   timeRange?: TimeRange;
+  loading: LoadingState;
+  isFirstLoad: boolean;
+  errorMessage: string;
 }
 
 export class PanelChrome extends PureComponent<Props, State> {
@@ -43,8 +49,11 @@ export class PanelChrome extends PureComponent<Props, State> {
     super(props);
 
     this.state = {
+      loading: LoadingState.NotStarted,
       refreshCounter: 0,
       renderCounter: 0,
+      isFirstLoad: false,
+      errorMessage: '',
     };
   }
 
@@ -94,6 +103,16 @@ export class PanelChrome extends PureComponent<Props, State> {
     return !this.props.dashboard.otherPanelInFullscreen(this.props.panel);
   }
 
+  onError = (errorMessage: string) => {
+    if (this.state.loading !== LoadingState.Error || this.state.errorMessage !== errorMessage) {
+      this.setState({
+        loading: LoadingState.Error,
+        isFirstLoad: false,
+        errorMessage: errorMessage,
+      });
+    }
+  };
+
   renderPanel(loading, panelData, width, height): JSX.Element {
     const { panel, plugin } = this.props;
     const { timeRange, renderCounter } = this.state;
@@ -145,23 +164,32 @@ export class PanelChrome extends PureComponent<Props, State> {
                 scopedVars={panel.scopedVars}
                 links={panel.links}
               />
-              {panel.snapshotData ? (
-                this.renderPanel(false, panel.snapshotData, width, height)
-              ) : (
-                <DataPanel
-                  datasource={datasource}
-                  queries={targets}
-                  timeRange={timeRange}
-                  isVisible={this.isVisible}
-                  widthPixels={width}
-                  refreshCounter={refreshCounter}
-                  onDataResponse={this.onDataResponse}
-                >
-                  {({ loading, panelData }) => {
-                    return this.renderPanel(loading, panelData, width, height);
-                  }}
-                </DataPanel>
-              )}
+              <ErrorBoundary>
+                {({ error, errorInfo }) => {
+                  if (errorInfo) {
+                    this.onError(error.message || DEFAULT_PLUGIN_ERROR);
+                    return null;
+                  }
+
+                  return panel.snapshotData ? (
+                    this.renderPanel(false, panel.snapshotData, width, height)
+                  ) : (
+                    <DataPanel
+                      datasource={datasource}
+                      queries={targets}
+                      timeRange={timeRange}
+                      isVisible={this.isVisible}
+                      widthPixels={width}
+                      refreshCounter={refreshCounter}
+                      onDataResponse={this.onDataResponse}
+                    >
+                      {({ loading, panelData }) => {
+                        return this.renderPanel(loading, panelData, width, height);
+                      }}
+                    </DataPanel>
+                  );
+                }}
+              </ErrorBoundary>
             </div>
           );
         }}