From b9043c915e8a7d90f9f2e57ce1adc354e4b03604 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Fri, 16 Dec 2016 11:48:32 +0100
Subject: [PATCH] feat(panel): working on panel help text, #4079 , #6847

---
 package.json                                  |  2 +-
 .../dashboard/partials/panel_info.html        |  3 +--
 public/app/features/panel/panel_ctrl.ts       | 21 +++++++++++++++++++
 public/app/features/panel/panel_directive.ts  |  4 ++--
 public/app/headers/common.d.ts                |  5 +++++
 public/sass/components/_drop.scss             |  2 ++
 6 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 05599868fb9..8f5585d4c81 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "sinon": "1.17.6",
     "systemjs-builder": "^0.15.34",
     "tether": "^1.4.0",
-    "tether-drop": "^1.4.2",
+    "tether-drop": "git://github.com/torkelo/drop",
     "tslint": "^4.0.2",
     "typescript": "^2.1.4",
     "virtual-scroll": "^1.1.1"
diff --git a/public/app/features/dashboard/partials/panel_info.html b/public/app/features/dashboard/partials/panel_info.html
index 88802d7c32e..cdccf679829 100644
--- a/public/app/features/dashboard/partials/panel_info.html
+++ b/public/app/features/dashboard/partials/panel_info.html
@@ -10,8 +10,7 @@
 		</a>
 	</div>
 
-	<div class="modal-content">
-		{{panel.description}}
+	<div class="modal-content" ng-bind-html="html">
 	</div>
 
 </div>
diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts
index 492d2b6f5c0..c7e094cb71c 100644
--- a/public/app/features/panel/panel_ctrl.ts
+++ b/public/app/features/panel/panel_ctrl.ts
@@ -5,6 +5,7 @@ import _ from 'lodash';
 import angular from 'angular';
 import $ from 'jquery';
 import {profiler} from 'app/core/profiler';
+import Remarkable from 'remarkable';
 
 const TITLE_HEIGHT = 25;
 const EMPTY_TITLE_HEIGHT = 9;
@@ -244,6 +245,25 @@ export class PanelCtrl {
     });
   }
 
+  getPanelInfoContent() {
+    var markdown = this.error || this.panel.description;
+    var linkSrv = this.$injector.get('linkSrv');
+    var templateSrv = this.$injector.get('templateSrv');
+    var interpolatedMarkdown = templateSrv.replace(markdown, this.panel.scopedVars);
+    var html = new Remarkable().render(interpolatedMarkdown);
+
+    if (this.panel.links && this.panel.links.length > 0) {
+      html += '<ul>';
+      for (let link of this.panel.links) {
+        var info = linkSrv.getPanelLinkAnchorInfo(link, this.panel.scopedVars);
+        html += '<li><a class="panel-menu-link" href="' + info.href + '" target="' + info.target + '">' + info.title + '</a></li>';
+      }
+      html += '</ul>';
+    }
+
+    return html;
+  }
+
   openInfo() {
     var modalScope = this.$scope.$new();
     modalScope.panel = this.panel;
@@ -256,6 +276,7 @@ export class PanelCtrl {
         scope: modalScope
       });
     } else {
+      modalScope.html = this.getPanelInfoContent();
       this.publishAppEvent('show-modal', {
         src: 'public/app/features/dashboard/partials/panel_info.html',
         scope: modalScope
diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts
index e93ade5a7e6..05d4cbea5c4 100644
--- a/public/app/features/panel/panel_directive.ts
+++ b/public/app/features/panel/panel_directive.ts
@@ -154,9 +154,9 @@ module.directive('grafanaPanel', function($rootScope) {
 
           infoDrop = new Drop({
             target: cornerInfoElem[0],
-            content: ctrl.error || ctrl.panel.description,
+            content: ctrl.getPanelInfoContent.bind(ctrl),
             position: 'right middle',
-            classes: 'drop-help',
+            classes: ctrl.error ? 'drop-error' : 'drop-help',
             openOn: 'hover',
             hoverOpenDelay: 400,
           });
diff --git a/public/app/headers/common.d.ts b/public/app/headers/common.d.ts
index 215df3e006a..aa4825829a1 100644
--- a/public/app/headers/common.d.ts
+++ b/public/app/headers/common.d.ts
@@ -62,3 +62,8 @@ declare module 'mousetrap' {
   var config: any;
   export default config;
 }
+
+declare module 'remarkable' {
+  var config: any;
+  export default config;
+}
diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss
index 5f95f45063a..0916a5a89db 100644
--- a/public/sass/components/_drop.scss
+++ b/public/sass/components/_drop.scss
@@ -42,8 +42,10 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
 }
 
 @include drop-theme("help", $popover-help-bg, $popover-help-color);
+@include drop-theme("error", $errorBackground, $popover-color);
 @include drop-theme("popover", $popover-bg, $popover-color);
 
 @include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
+@include drop-animation-scale("drop", "error", $attachmentOffset: $attachmentOffset, $easing: $easing);
 @include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);