Panel: more work on panel links, #1041

src/app/components/panellinkeditor/linkSrv.js

@@ -13,14 +13,14 @@ function (angular, kbn) {
         var info = {};
         var info = {};
         if (link.type === 'absolute') {
         if (link.type === 'absolute') {
           info.target = '_blank';
           info.target = '_blank';
-          info.href = templateSrv.replace(link.url);
-          info.title = templateSrv.replace(link.title);
+          info.href = templateSrv.replace(link.url || '');
+          info.title = templateSrv.replace(link.title || '');
           info.href += '?';
           info.href += '?';
 
 
         }
         }
         else {
         else {
-          info.title = templateSrv.replace(link.title);
-          var slug = kbn.slugifyForUrl(link.dashboard);
+          info.title = templateSrv.replace(link.title || '');
+          var slug = kbn.slugifyForUrl(link.dashboard || '');
           info.href = '#dashboard/db/' + slug + '?';
           info.href = '#dashboard/db/' + slug + '?';
         }
         }
 
 

src/app/directives/panelMenu.js

@@ -9,7 +9,11 @@ function (angular, $, _) {
   angular
   angular
     .module('grafana.directives')
     .module('grafana.directives')
     .directive('panelMenu', function($compile, linkSrv) {
     .directive('panelMenu', function($compile, linkSrv) {
-      var linkTemplate = '<span class="panel-title drag-handle pointer">{{panel.title | interpolateTemplateVars}}</span>';
+      var linkTemplate =
+          '<span class="panel-title drag-handle pointer">' +
+            '<span class="panel-title-text">{{panel.title | interpolateTemplateVars}}</span>' +
+            '<span class="panel-links-icon"></span>' +
+          '</span>';
 
 
       function createMenuTemplate($scope) {
       function createMenuTemplate($scope) {
         var template = '<div class="panel-menu small">';
         var template = '<div class="panel-menu small">';
@@ -39,13 +43,15 @@ function (angular, $, _) {
       }
       }
 
 
       function getExtendedMenu($scope) {
       function getExtendedMenu($scope) {
-        var menu =angular.copy($scope.panelMeta.extendedMenu);
-        if (!$scope.panel.links) { return; }
+        var menu = angular.copy($scope.panelMeta.extendedMenu);
 
 
+        if ($scope.panel.links) {
           _.each($scope.panel.links, function(link) {
           _.each($scope.panel.links, function(link) {
             var info = linkSrv.getPanelLinkAnchorInfo(link);
             var info = linkSrv.getPanelLinkAnchorInfo(link);
             menu.push({text: info.title, href: info.href, target: info.target });
             menu.push({text: info.title, href: info.href, target: info.target });
           });
           });
+        }
+
         return menu;
         return menu;
       }
       }
 
 
@@ -61,6 +67,10 @@ function (angular, $, _) {
 
 
           elem.append($link);
           elem.append($link);
 
 
+          $scope.$watchCollection('panel.links', function(newValue) {
+            $link.toggleClass('has-panel-links', newValue ? newValue.length > 0 : false);
+          });
+
           function dismiss(time) {
           function dismiss(time) {
             clearTimeout(timeout);
             clearTimeout(timeout);
             timeout = null;
             timeout = null;

src/css/less/panel.less

@@ -27,6 +27,15 @@
   font-weight: bold;
   font-weight: bold;
   position: relative;
   position: relative;
   cursor: context-menu;
   cursor: context-menu;
+
+  &.has-panel-links {
+    .panel-title-text:after {
+      content: "\f0c1";
+      font-family:'FontAwesome';
+      font-size: 80%;
+      padding-left: 10px;
+    }
+  }
 }
 }
 
 
 .panel-loading {
 .panel-loading {