feat(panel): working on panel help text, #4079 , #6847

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"

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>

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

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,
           });

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;
+}

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);