implement show error in panelcorner

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

@@ -34,7 +34,6 @@ export interface Props {
   maxDataPoints?: number;
   children: (r: RenderProps) => JSX.Element;
   onDataResponse?: (data: DataQueryResponse) => void;
-  onError?: (errorMessage: string) => void;
 }
 
 export interface State {
@@ -147,7 +146,7 @@ export class DataPanel extends Component<Props, State> {
     } catch (err) {
       console.log('Loading error', err);
       this.setState({ isFirstLoad: false });
-      this.props.onError('Request Error');
+      throw new Error('Request Error');
     }
   };
 

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

@@ -119,6 +119,15 @@ export class PanelChrome extends PureComponent<Props, State> {
     return this.hasPanelSnapshot ? snapshotDataToPanelData(panel) : null;
   }
 
+  onError = (errorMessage: string) => {
+    if (this.state.loading !== LoadingState.Error || this.state.errorMessage !== errorMessage) {
+      this.setState({
+        loading: LoadingState.Error,
+        errorMessage: errorMessage,
+      });
+    }
+  };
+
   renderPanelPlugin(loading: LoadingState, panelData: PanelData, width: number, height: number): JSX.Element {
     const { panel, plugin } = this.props;
     const { timeRange, renderCounter } = this.state;
@@ -174,15 +183,6 @@ export class PanelChrome extends PureComponent<Props, State> {
     );
   };
 
-  onError = (errorMessage: string) => {
-    if (this.state.loading !== LoadingState.Error || this.state.errorMessage !== errorMessage) {
-      this.setState({
-        loading: LoadingState.Error,
-        errorMessage: errorMessage,
-      });
-    }
-  };
-
   render() {
     const { dashboard, panel } = this.props;
     const { timeInfo } = this.state;
@@ -206,6 +206,7 @@ export class PanelChrome extends PureComponent<Props, State> {
                 description={panel.description}
                 scopedVars={panel.scopedVars}
                 links={panel.links}
+                error={this.state.errorMessage}
               />
               <ErrorBoundary>
                 {({ error, errorInfo }) => {

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

@@ -18,6 +18,7 @@ export interface Props {
   description?: string;
   scopedVars?: string;
   links?: [];
+  error?: string;
 }
 
 interface ClickCoordinates {
@@ -71,7 +72,7 @@ export class PanelHeader extends Component<Props, State> {
     const isFullscreen = false;
     const isLoading = false;
     const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
-    const { panel, dashboard, timeInfo, scopedVars } = this.props;
+    const { panel, dashboard, timeInfo, scopedVars, error } = this.props;
     const title = templateSrv.replaceWithText(panel.title, scopedVars);
 
     return (
@@ -82,6 +83,7 @@ export class PanelHeader extends Component<Props, State> {
           description={panel.description}
           scopedVars={panel.scopedVars}
           links={panel.links}
+          error={error}
         />
         <div className={panelHeaderClass}>
           {isLoading && (

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

@@ -18,13 +18,17 @@ interface Props {
   description?: string;
   scopedVars?: string;
   links?: [];
+  error?: string;
 }
 
 export class PanelHeaderCorner extends Component<Props> {
   timeSrv: TimeSrv = getTimeSrv();
 
   getInfoMode = () => {
-    const { panel } = this.props;
+    const { panel, error } = this.props;
+    if (error) {
+      return InfoModes.Error;
+    }
     if (!!panel.description) {
       return InfoModes.Info;
     }
@@ -42,7 +46,7 @@ export class PanelHeaderCorner extends Component<Props> {
     const interpolatedMarkdown = templateSrv.replace(markdown, panel.scopedVars);
     const remarkableInterpolatedMarkdown = new Remarkable().render(interpolatedMarkdown);
 
-    const html = (
+    return (
       <div className="markdown-html">
         <div dangerouslySetInnerHTML={{ __html: remarkableInterpolatedMarkdown }} />
         {panel.links &&
@@ -62,10 +66,19 @@ export class PanelHeaderCorner extends Component<Props> {
           )}
       </div>
     );
-
-    return html;
   };
 
+  renderCornerType(infoMode: InfoModes, content: string | JSX.Element) {
+    return (
+      <Tooltip content={content} placement="bottom-start">
+        <div className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}>
+          <i className="fa" />
+          <span className="panel-info-corner-inner" />
+        </div>
+      </Tooltip>
+    );
+  }
+
   render() {
     const infoMode: InfoModes | undefined = this.getInfoMode();
 
@@ -73,23 +86,15 @@ export class PanelHeaderCorner extends Component<Props> {
       return null;
     }
 
-    return (
-      <>
-        {infoMode === InfoModes.Info || infoMode === InfoModes.Links ? (
-          <Tooltip
-            content={this.getInfoContent()}
-            placement="bottom-start"
-          >
-            <div
-              className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
-            >
-              <i className="fa" />
-              <span className="panel-info-corner-inner" />
-            </div>
-          </Tooltip>
-        ) : null}
-      </>
-    );
+    if (infoMode === InfoModes.Error) {
+      return this.renderCornerType(infoMode, this.props.error);
+    }
+
+    if (infoMode === InfoModes.Info) {
+      return this.renderCornerType(infoMode, this.getInfoContent());
+    }
+
+    return null;
   }
 }