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

public/app/features/dashboard/model.ts

@@ -51,7 +51,7 @@ export class DashboardModel {
     this.style = data.style || "dark";
     this.timezone = data.timezone || '';
     this.editable = data.editable !== false;
-    this.graphTooltip = data.graphTooltip || false;
+    this.graphTooltip = data.graphTooltip || 0;
     this.hideControls = data.hideControls || false;
     this.time = data.time || { from: 'now-6h', to: 'now' };
     this.timepicker = data.timepicker || {};
@@ -272,7 +272,7 @@ export class DashboardModel {
   }
 
   sharedTooltipModeEnabled() {
-    return this.graphTooltip !== 0;
+    return this.graphTooltip > 0;
   }
 
   sharedCrosshairModeOnly() {

public/app/partials/inspector.html → public/app/features/dashboard/partials/inspector.html

 <div class="modal-body" ng-controller="InspectCtrl" ng-init="init()">
 	<div class="modal-header">
 		<h2 class="modal-header-title">
-			Inspector
+			<i class="fa fa-frown-o"></i>
+			<span class="p-l-1">Inspector</span>
 		</h2>
 
 		<ul class="gf-tabs">

public/app/features/dashboard/partials/panel_info.html

+<div class="modal-body">
+	<div class="modal-header">
+		<h2 class="modal-header-title">
+			<i class="fa fa-info-circle"></i>
+			<span class="p-l-1">Panel Description</span>
+		</h2>
+
+		<a class="modal-header-close" ng-click="dismiss();">
+			<i class="fa fa-remove"></i>
+		</a>
+	</div>
+
+	<div class="modal-content">
+		{{panel.description}}
+	</div>
+
+</div>
+

public/app/features/panel/metrics_panel_ctrl.ts

@@ -12,7 +12,6 @@ import * as dateMath from 'app/core/utils/datemath';
 import {Subject} from 'vendor/npm/rxjs/Subject';
 
 class MetricsPanelCtrl extends PanelCtrl {
-  error: any;
   loading: boolean;
   datasource: any;
   datasourceName: any;

public/app/features/panel/panel_ctrl.ts

@@ -15,6 +15,7 @@ import {Emitter} from 'app/core/core';
 
 export class PanelCtrl {
   panel: any;
+  error: any;
   row: any;
   dashboard: any;
   editorTabIndex: number;
@@ -243,15 +244,22 @@ export class PanelCtrl {
     });
   }
 
-  openInspector() {
+  openInfo() {
     var modalScope = this.$scope.$new();
     modalScope.panel = this.panel;
     modalScope.dashboard = this.dashboard;
-    modalScope.inspector = $.extend(true, {}, this.inspector);
 
-    this.publishAppEvent('show-modal', {
-      src: 'public/app/partials/inspector.html',
-      scope: modalScope
-    });
+    if (this.error) {
+      modalScope.inspector = $.extend(true, {}, this.inspector);
+      this.publishAppEvent('show-modal', {
+        src: 'public/app/features/dashboard/partials/inspector.html',
+        scope: modalScope
+      });
+    } else {
+      this.publishAppEvent('show-modal', {
+        src: 'public/app/features/dashboard/partials/panel_info.html',
+        scope: modalScope
+      });
+    }
   }
 }

public/app/features/panel/panel_directive.ts

@@ -2,16 +2,17 @@
 
 import angular from 'angular';
 import $ from 'jquery';
+import _ from 'lodash';
+import Drop from 'tether-drop';
 
 var module = angular.module('grafana.directives');
 
 var panelTemplate = `
   <div class="panel-container">
     <div class="panel-header">
-      <span class="alert-error panel-error small pointer" ng-if="ctrl.error" ng-click="ctrl.openInspector()">
-        <span data-placement="top" bs-tooltip="ctrl.error">
-          <i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span>
-        </span>
+      <span class="panel-info-corner" ng-click="ctrl.openInfo()">
+        <i class="fa"></i>
+        <span class="panel-info-corner-inner"></span>
       </span>
 
       <span class="panel-loading" ng-show="ctrl.loading">
@@ -64,7 +65,9 @@ module.directive('grafanaPanel', function($rootScope) {
     scope: { ctrl: "=" },
     link: function(scope, elem) {
       var panelContainer = elem.find('.panel-container');
+      var cornerInfoElem = elem.find('.panel-info-corner');
       var ctrl = scope.ctrl;
+      var infoDrop;
 
       // the reason for handling these classes this way is for performance
       // limit the watchers on panels etc
@@ -139,11 +142,36 @@ module.directive('grafanaPanel', function($rootScope) {
         }
       }, scope);
 
+      // panel corner info
+      scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], function() {
+        cornerInfoElem.toggleClass('panel-info-corner--has-desc', !!ctrl.panel.description);
+        cornerInfoElem.toggleClass('panel-info-corner--has-error', !!ctrl.error);
+
+        if (ctrl.error || ctrl.panel.description) {
+          if (infoDrop) {
+            infoDrop.destroy();
+          }
+
+          infoDrop = new Drop({
+            target: cornerInfoElem[0],
+            content: ctrl.error || ctrl.panel.description,
+            position: 'right middle',
+            classes: 'drop-help',
+            openOn: 'hover',
+            hoverOpenDelay: 400,
+          });
+        }
+      });
+
       elem.on('mouseenter', mouseEnter);
       elem.on('mouseleave', mouseLeave);
 
       scope.$on('$destroy', function() {
         elem.off();
+
+        if (infoDrop) {
+          infoDrop.destroy();
+        }
       });
     }
   };
@@ -233,4 +261,19 @@ module.directive('panelResizer', function($rootScope) {
   };
 });
 
+module.directive('panelHelpCorner', function($rootScope) {
+  return {
+    restrict: 'E',
+    template: `
+      <span class="alert-error panel-error small pointer" ng-if="ctrl.error" ng-click="ctrl.openInspector()">
+        <span data-placement="top" bs-tooltip="ctrl.error">
+          <i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span>
+        </span>
+      </span>
+    `,
+    link: function(scope, elem) {
+    }
+  };
+});
+
 

public/app/features/panel/panel_menu.js

@@ -9,26 +9,15 @@ function (angular, $, _, Tether) {
 
   angular
     .module('grafana.directives')
-    .directive('panelMenu', function($sanitize, $compile, linkSrv) {
+    .directive('panelMenu', function($compile, linkSrv) {
       var linkTemplate =
           '<span class="panel-title drag-handle pointer">' +
             '<span class="icon-gf panel-alert-icon"></span>' +
             '<span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>' +
-            '<span class="panel-help-text"><info-popover mode="bold">{{ctrl.panel.description}}</info-popover></span>' +
             '<span class="panel-links-btn"><i class="fa fa-external-link"></i></span>' +
             '<span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>' +
           '</span>';
 
-      function sanitizeString(str) {
-        try {
-          return $sanitize(str);
-        }
-        catch(err) {
-          console.log('Could not sanitize annotation string, html escaping instead');
-          return _.escape(str);
-        }
-      }
-
       function createExternalLinkMenu(ctrl) {
         var template = '<div class="panel-menu small">';
         template += '<div class="panel-menu-row">';
@@ -89,7 +78,6 @@ function (angular, $, _, Tether) {
           var $link = $(linkTemplate);
           var $panelLinksBtn = $link.find(".panel-links-btn");
           var $panelContainer = elem.parents(".panel-container");
-          var $panelHelpDrop = $link.find(".panel-help-text");
           var menuScope = null;
           var ctrl = $scope.ctrl;
           var timeout = null;
@@ -104,12 +92,6 @@ function (angular, $, _, Tether) {
             $panelLinksBtn.css({display: showIcon ? 'inline' : 'none'});
           });
 
-          $scope.$watch('ctrl.panel.description', function(description) {
-            description = sanitizeString(description);
-            var showIcon = (description ? description.length > 0 : false) && ctrl.panel.title !== '';
-            $panelHelpDrop.css({display: showIcon ? 'inline' : 'none'});
-          });
-
           function dismiss(time, force) {
             clearTimeout(timeout);
             timeout = null;

public/sass/components/_alerts.scss

@@ -6,8 +6,6 @@
 // Base styles
 // -------------------------
 
-
-
 .alert {
   padding: 0.5rem 2rem 0.5rem 1rem;
   margin-bottom: $line-height-base;
@@ -30,9 +28,11 @@
 .alert-error {
   background-color: $errorBackground;
 }
+
 .alert-info {
   background-color: $infoBackground;
 }
+
 .alert-warning {
   background-color: $state-warning-bg;
 }

public/sass/components/_drop.scss

@@ -15,7 +15,6 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
   &.drop-open {
     display: block;
   }
-
  }
 
 .drop-element, .drop-element * {
@@ -41,6 +40,7 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
     display: none;
   }
 }
+
 @include drop-theme("help", $popover-help-bg, $popover-help-color);
 @include drop-theme("popover", $popover-bg, $popover-color);
 

public/sass/components/_view_states.scss

@@ -29,6 +29,7 @@
   .dashnav-refresh-action,
   .dashnav-zoom-out,
   .dashnav-action-icons,
+  .panel-info-corner--has-desc,
   .dashnav-move-timeframe  {
     opacity: 0;
     transition: all 1.5s ease-in-out 1s;

public/sass/pages/_dashboard.scss

@@ -75,7 +75,7 @@ div.flot-text {
 
 .panel-help-text {
   margin-left: 10px;
-  display: none; 
+  display: none;
 }
 
 .panel-loading {
@@ -89,9 +89,11 @@ div.flot-text {
   text-align: center;
 }
 
-.panel-error {
-  color: $white;
+.panel-info-corner {
+  color: $text-color;
+  cursor: pointer;
   position: absolute;
+  display: none;
   left: 0;
   padding: 0px 17px 6px 5px;
   top: 0;
@@ -100,15 +102,31 @@ div.flot-text {
     position: relative;
     top: -2px;
   }
+
+  &--has-desc {
+    display: block;
+    background: $blue-dark;
+    .fa:before {
+      content: "\f129";
+    }
+  }
+
+  &--has-error {
+    display: block;
+    background: $errorBackground !important;
+    .fa:before {
+      content: "\f12a";
+    }
+  }
 }
 
-.panel-error-arrow {
+.panel-info-corner-inner {
   width: 0;
   height: 0;
   position: absolute;
   border-left: 31px solid transparent;
   border-right: 30px solid transparent;
-  border-bottom: 27px solid $panel-bg;
+  border-bottom: 31px solid $panel-bg;
   left: 0;
   bottom: 0;
 }