From 87688930a259c305d1f28271b426d862bfd5d938 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Wed, 22 May 2019 14:21:43 +0200
Subject: [PATCH] Panels: Show Drilldown links in top-left corner of custom
 React panels (#17142)

---
 .../dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx | 6 +++---
 public/sass/components/_panel_header.scss                | 9 +++++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
index 12f3b95ca21..9d057d5338e 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
@@ -48,7 +48,7 @@ export class PanelHeaderCorner extends Component<Props> {
     const remarkableInterpolatedMarkdown = new Remarkable().render(interpolatedMarkdown);
 
     return (
-      <div className="markdown-html">
+      <div className="panel-info-content markdown-html">
         <div dangerouslySetInnerHTML={{ __html: remarkableInterpolatedMarkdown }} />
         {panel.links && panel.links.length > 0 && (
           <ul className="text-left">
@@ -71,7 +71,7 @@ export class PanelHeaderCorner extends Component<Props> {
   renderCornerType(infoMode: InfoMode, content: string | JSX.Element) {
     const theme = infoMode === InfoMode.Error ? 'error' : 'info';
     return (
-      <Tooltip content={content} placement="bottom-start" theme={theme}>
+      <Tooltip content={content} placement="top-start" theme={theme}>
         <div className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}>
           <i className="fa" />
           <span className="panel-info-corner-inner" />
@@ -91,7 +91,7 @@ export class PanelHeaderCorner extends Component<Props> {
       return this.renderCornerType(infoMode, this.props.error);
     }
 
-    if (infoMode === InfoMode.Info) {
+    if (infoMode === InfoMode.Info || infoMode === InfoMode.Links) {
       return this.renderCornerType(infoMode, this.getInfoContent());
     }
 
diff --git a/public/sass/components/_panel_header.scss b/public/sass/components/_panel_header.scss
index 40afc2cd3aa..d9882d21351 100644
--- a/public/sass/components/_panel_header.scss
+++ b/public/sass/components/_panel_header.scss
@@ -167,6 +167,15 @@ $panel-header-no-title-zindex: 1;
   }
 }
 
+.panel-info-content {
+  a {
+    color: $white;
+    &:hover {
+      color: darken($white, 10%);
+    }
+  }
+}
+
 .panel-time-info {
   font-weight: $font-weight-semi-bold;
   float: right;