panel-header: Move the corner information in the panel header to its own component

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

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import classNames from 'classnames';
 
 
+import PanelHeaderCorner from './PanelHeaderCorner';
 import { PanelHeaderMenu } from './PanelHeaderMenu';
 import { PanelHeaderMenu } from './PanelHeaderMenu';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
 
 
 import { DashboardModel } from 'app/features/dashboard/dashboard_model';
 import { DashboardModel } from 'app/features/dashboard/dashboard_model';
 import { PanelModel } from 'app/features/dashboard/panel_model';
 import { PanelModel } from 'app/features/dashboard/panel_model';
@@ -44,23 +44,13 @@ export class PanelHeader extends PureComponent<Props, State> {
     const { panel, dashboard, timeInfo } = this.props;
     const { panel, dashboard, timeInfo } = this.props;
     return (
     return (
       <>
       <>
-        {panel.description && (
-          <Tooltip
-            content={panel.description}
-            className="absolute"
-            refClassName="panel-info-corner panel-info-corner--info"
-          >
-            <i className="fa" />
-            <span className="panel-info-corner-inner" />
-          </Tooltip>
-        )}
-        {isLoading && (
-          <span className="panel-loading">
-            <i className="fa fa-spinner fa-spin" />
-          </span>
-        )}
-
+        <PanelHeaderCorner panel={panel} />
         <div className={panelHeaderClass}>
         <div className={panelHeaderClass}>
+          {isLoading && (
+            <span className="panel-loading">
+              <i className="fa fa-spinner fa-spin" />
+            </span>
+          )}
           <div className="panel-title-container" onClick={this.onMenuToggle}>
           <div className="panel-title-container" onClick={this.onMenuToggle}>
             <div className="panel-title">
             <div className="panel-title">
               <span className="icon-gf panel-alert-icon" />
               <span className="icon-gf panel-alert-icon" />

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

+import React, { PureComponent } from 'react';
+import { PanelModel } from 'app/features/dashboard/panel_model';
+import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import templateSrv from 'app/features/templating/template_srv';
+import { LinkSrv } from 'app/features/dashboard/panellinks/link_srv';
+import { getTimeSrv, TimeSrv } from 'app/features/dashboard/time_srv';
+import Remarkable from 'remarkable';
+
+enum InfoModes {
+  Error = 'Error',
+  Info = 'Info',
+  Links = 'Links',
+}
+
+interface Props {
+  panel: PanelModel;
+}
+
+export class PanelHeaderCorner extends PureComponent<Props> {
+  timeSrv: TimeSrv = getTimeSrv();
+
+  getInfoMode = () => {
+    const { panel } = this.props;
+    // TODO
+    // if (error) {
+    //   return InfoModes.Error;
+    // }
+    if (!!panel.description) {
+      return InfoModes.Info;
+    }
+    if (panel.links && panel.links.length) {
+      return InfoModes.Links;
+    }
+
+    return undefined;
+  };
+
+  getInfoContent = () => {
+    const { panel } = this.props;
+    const markdown = panel.description;
+    const linkSrv = new LinkSrv(templateSrv, this.timeSrv);
+    const sanitize = str => str; // TODO
+    const interpolatedMarkdown = templateSrv.replace(markdown, panel.scopedVars);
+    const remarkableInterpolatedMarkdown = new Remarkable().render(interpolatedMarkdown);
+
+    const html = (
+      <div className="markdown-html">
+        <div dangerouslySetInnerHTML={{ __html: remarkableInterpolatedMarkdown }} />
+        {panel.links &&
+          panel.links.length > 0 && (
+            <ul>
+              {panel.links.map((link, idx) => {
+                const info = linkSrv.getPanelLinkAnchorInfo(link, panel.scopedVars);
+                return (
+                  <li key={idx}>
+                    <a className="panel-menu-link" href={info.href} target={info.target}>
+                      {info.title}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+      </div>
+    );
+    return sanitize(html);
+  };
+
+  render() {
+    const infoMode: InfoModes | undefined = this.getInfoMode();
+
+    if (!infoMode) {
+      return null;
+    }
+    const infoContent = this.getInfoContent();
+
+    return (
+      <>
+        {infoMode === InfoModes.Info || infoMode === InfoModes.Links ? (
+          <Tooltip
+            content={infoContent}
+            className="absolute"
+            refClassName={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
+          >
+            <i className="fa" />
+            <span className="panel-info-corner-inner" />
+          </Tooltip>
+        ) : null}
+      </>
+    );
+  }
+}
+
+export default PanelHeaderCorner;

public/app/features/dashboard/panel_model.ts

@@ -50,6 +50,7 @@ export class PanelModel {
   maxDataPoints?: number;
   maxDataPoints?: number;
   interval?: string;
   interval?: string;
   description?: string;
   description?: string;
+  links?: [];
 
 
   // non persisted
   // non persisted
   fullscreen: boolean;
   fullscreen: boolean;