feat(panel): working on panel help text and unifying panel links, panel errors,…

feat(panel): working on panel help text and unifying panel links, panel errors, and panel help into a single panel feature, #4079 , #6847

public/app/features/panel/panel_ctrl.ts

@@ -245,7 +245,20 @@ export class PanelCtrl {
     });
   }
 
-  getPanelInfoContent() {
+  getInfoMode() {
+    if (this.error) {
+      return 'error';
+    }
+    if (!!this.panel.description) {
+      return 'info';
+    }
+    if (this.panel.links.length > 0) {
+      return 'links';
+    }
+    return '';
+  }
+
+  getInfoContent() {
     var markdown = this.error || this.panel.description;
     var linkSrv = this.$injector.get('linkSrv');
     var templateSrv = this.$injector.get('templateSrv');
@@ -276,7 +289,7 @@ export class PanelCtrl {
         scope: modalScope
       });
     } else {
-      modalScope.html = this.getPanelInfoContent();
+      modalScope.html = this.getInfoContent();
       this.publishAppEvent('show-modal', {
         src: 'public/app/features/dashboard/partials/panel_info.html',
         scope: modalScope

public/app/features/panel/panel_directive.ts

@@ -65,7 +65,7 @@ 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 cornerInfoElem = elem.find('.panel-info-corner')[0];
       var ctrl = scope.ctrl;
       var infoDrop;
 
@@ -142,26 +142,28 @@ 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);
+      function updatePanelCornerInfo() {
+        var cornerMode = ctrl.getInfoMode();
+        cornerInfoElem.className = 'panel-info-corner + panel-info-corner--' + cornerMode;
 
-        if (ctrl.error || ctrl.panel.description) {
+        if (cornerMode) {
           if (infoDrop) {
             infoDrop.destroy();
           }
 
           infoDrop = new Drop({
-            target: cornerInfoElem[0],
-            content: ctrl.getPanelInfoContent.bind(ctrl),
+            target: cornerInfoElem,
+            content: ctrl.getInfoContent.bind(ctrl),
             position: 'right middle',
             classes: ctrl.error ? 'drop-error' : 'drop-help',
             openOn: 'hover',
             hoverOpenDelay: 400,
           });
         }
-      });
+      }
+
+      scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], updatePanelCornerInfo);
+      scope.$watchCollection('ctrl.panel.links', updatePanelCornerInfo);
 
       elem.on('mouseenter', mouseEnter);
       elem.on('mouseleave', mouseLeave);

public/app/features/panel/panel_menu.js

@@ -9,28 +9,14 @@ function (angular, $, _, Tether) {
 
   angular
     .module('grafana.directives')
-    .directive('panelMenu', function($compile, linkSrv) {
+    .directive('panelMenu', function($compile) {
       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-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 createExternalLinkMenu(ctrl) {
-        var template = '<div class="panel-menu small">';
-        template += '<div class="panel-menu-row">';
-
-        if (ctrl.panel.links) {
-          _.each(ctrl.panel.links, function(link) {
-            var info = linkSrv.getPanelLinkAnchorInfo(link, ctrl.panel.scopedVars);
-            template += '<a class="panel-menu-link" href="' + info.href + '" target="' + info.target + '">' + info.title + '</a>';
-          });
-        }
-        return template;
-      }
-
       function createMenuTemplate(ctrl) {
         var template = '<div class="panel-menu small">';
 
@@ -76,7 +62,6 @@ function (angular, $, _, Tether) {
         restrict: 'A',
         link: function($scope, elem) {
           var $link = $(linkTemplate);
-          var $panelLinksBtn = $link.find(".panel-links-btn");
           var $panelContainer = elem.parents(".panel-container");
           var menuScope = null;
           var ctrl = $scope.ctrl;
@@ -86,12 +71,6 @@ function (angular, $, _, Tether) {
 
           elem.append($link);
 
-          $scope.$watchCollection('ctrl.panel.links', function(newValue) {
-            var showIcon = (newValue ? newValue.length > 0 : false) && ctrl.panel.title !== '';
-            // cannot use toggle here, only works for attached elements
-            $panelLinksBtn.css({display: showIcon ? 'inline' : 'none'});
-          });
-
           function dismiss(time, force) {
             clearTimeout(timeout);
             timeout = null;
@@ -132,11 +111,7 @@ function (angular, $, _, Tether) {
             }
 
             var menuTemplate;
-            if ($(e.target).hasClass('fa-external-link')) {
-              menuTemplate = createExternalLinkMenu(ctrl);
-            } else {
-              menuTemplate = createMenuTemplate(ctrl);
-            }
+            menuTemplate = createMenuTemplate(ctrl);
 
             $menu = $(menuTemplate);
             $menu.mouseleave(function() {

public/sass/components/_drop.scss

@@ -32,6 +32,10 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
   ul {
     padding-left: $spacer;
   }
+
+  a {
+    text-decoration: underline;
+  }
 }
 
 .drop-hide-out-of-bounds {

public/sass/pages/_dashboard.scss

@@ -95,15 +95,19 @@ div.flot-text {
   position: absolute;
   display: none;
   left: 0;
-  padding: 0px 17px 6px 5px;
+  width: 27px;
+  height: 27px;
   top: 0;
   z-index: 10;
-  i {
+
+  .fa {
     position: relative;
     top: -2px;
+    left: -5px;
+    font-size: 90%;
   }
 
-  &--has-desc {
+  &--info {
     display: block;
     background: $blue-dark;
     .fa:before {
@@ -111,7 +115,18 @@ div.flot-text {
     }
   }
 
-  &--has-error {
+  &--links {
+    display: block;
+    background: $blue-dark;
+    .fa {
+      left: -3px;
+    }
+    .fa:before {
+      content: "\f08e";
+    }
+  }
+
+  &--error {
     display: block;
     background: $errorBackground !important;
     .fa:before {
@@ -124,9 +139,9 @@ div.flot-text {
   width: 0;
   height: 0;
   position: absolute;
-  border-left: 31px solid transparent;
-  border-right: 30px solid transparent;
-  border-bottom: 31px solid $panel-bg;
+  border-left: 27px solid transparent;
+  border-right: 0px solid transparent;
+  border-bottom: 26px solid $panel-bg;
   left: 0;
   bottom: 0;
 }