From c7d22aafd24dd65edb67e4fad28495fae1b83fae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Sat, 19 Sep 2015 15:53:48 +0200
Subject: [PATCH] feat(drilldown link): better access to drilldown links
 directly by clicking the external link icon in panel header, fixes #1575

---
 CHANGELOG.md                           |  1 +
 public/app/features/panel/panelMenu.js | 25 ++++++++++++++++++++++---
 public/less/panel.less                 | 13 ++++---------
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07d12c5b1c0..9c9d24714bf 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/public/app/features/panel/panelMenu.js b/public/app/features/panel/panelMenu.js
index 95af6eddd20..13babde87c1 100644
--- a/public/app/features/panel/panelMenu.js
+++ b/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);
diff --git a/public/less/panel.less b/public/less/panel.less
index 01c0df452d8..0156571a822 100644
--- a/public/less/panel.less
+++ b/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 {