feat(drilldown link): better access to drilldown links directly by clicking the external link icon in panel header, fixes #1575

CHANGELOG.md

@@ -27,6 +27,7 @@ it allows you to add queries of differnet data source types & instances to the s
 - [Issue #2647](https://github.com/grafana/grafana/issues/2647). InfluxDB: You can now set group by time interval on each query
 - [Issue #2599](https://github.com/grafana/grafana/issues/2599). InfluxDB: Improved alias support, you can now use the `AS` clause for each select statement
 - [Issue #2708](https://github.com/grafana/grafana/issues/2708). InfluxDB: You can now set math expression for select clauses.
+- [Issue #1575](https://github.com/grafana/grafana/issues/1575). Drilldown link: now you can click on the external link icon in the panel header to access drilldown links!
 
 **Fixes**
 - [Issue #2413](https://github.com/grafana/grafana/issues/2413). InfluxDB 0.9: Fix for handling empty series object in response from influxdb

public/app/features/panel/panelMenu.js

@@ -12,10 +12,22 @@ function (angular, $, _) {
       var linkTemplate =
           '<span class="panel-title drag-handle pointer">' +
             '<span class="panel-title-text drag-handle">{{panel.title | interpolateTemplateVars:this}}</span>' +
-            '<span class="panel-links-icon"></span>' +
+            '<span class="panel-links-btn"><i class="fa fa-external-link"></i></span>' +
             '<span class="panel-time-info" ng-show="panelMeta.timeInfo"><i class="fa fa-clock-o"></i> {{panelMeta.timeInfo}}</span>' +
           '</span>';
 
+      function createExternalLinkMenu($scope) {
+        var template = '<div class="panel-menu small">';
+        template += '<div class="panel-menu-row">';
+
+        if ($scope.panel.links) {
+          _.each($scope.panel.links, function(link) {
+            var info = linkSrv.getPanelLinkAnchorInfo(link, $scope.panel.scopedVars);
+            template += '<a class="panel-menu-link" href="' + info.href + '" target="' + info.target + '">' + info.title + '</a>';
+          });
+        }
+        return template;
+      }
       function createMenuTemplate($scope) {
         var template = '<div class="panel-menu small">';
 
@@ -68,6 +80,7 @@ function (angular, $, _) {
         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 timeout = null;
@@ -77,7 +90,7 @@ function (angular, $, _) {
 
           $scope.$watchCollection('panel.links', function(newValue) {
             var showIcon = (newValue ? newValue.length > 0 : false) && $scope.panel.title !== '';
-            $link.toggleClass('has-panel-links', showIcon);
+            $panelLinksBtn.toggle(showIcon);
           });
 
           function dismiss(time, force) {
@@ -118,7 +131,13 @@ function (angular, $, _) {
               return;
             }
 
-            var menuTemplate = createMenuTemplate($scope);
+            var menuTemplate;
+            if ($(e.target).hasClass('fa-external-link')) {
+              menuTemplate = createExternalLinkMenu($scope);
+            } else {
+              menuTemplate = createMenuTemplate($scope);
+            }
+
             $menu = $(menuTemplate);
             $menu.mouseleave(function() {
               dismiss(1000);

public/less/panel.less

@@ -43,16 +43,11 @@
   cursor: pointer;
   width: 100%;
   display: block;
+}
 
-  &.has-panel-links {
-    .panel-title-text:after {
-      content: "\f08e";
-      font-family:'FontAwesome';
-      padding-left: 10px;
-      position: relative;
-      top: 1px;
-    }
-  }
+.panel-links-btn {
+  margin-left: 10px;
+  display: none;
 }
 
 .panel-loading {