SinglestatPanel: Added integration with drilldown link feature, if a drilldown link is present the entire singlestat panel will act as a link, with hover tooltip containing the link name, #951, #1041

src/app/directives/panelMenu.js

@@ -68,7 +68,8 @@ function (angular, $, _) {
           elem.append($link);
 
           $scope.$watchCollection('panel.links', function(newValue) {
-            $link.toggleClass('has-panel-links', newValue ? newValue.length > 0 : false);
+            var showIcon = (newValue ? newValue.length > 0 : false) && $scope.panel.title !== '';
+            $link.toggleClass('has-panel-links', showIcon);
           });
 
           function dismiss(time) {

src/app/panels/singlestat/module.js

@@ -27,6 +27,7 @@ function (angular, app, _, TimeSeries, kbn, PanelMeta) {
 
     // Set and populate defaults
     var _d = {
+      links: [],
       maxDataPoints: 100,
       interval: null,
       targets: [{}],

src/app/panels/singlestat/singleStatPanel.js

@@ -11,7 +11,7 @@ function (angular, app, _, $) {
   var module = angular.module('grafana.panels.singlestat', []);
   app.useModule(module);
 
-  module.directive('singlestatPanel', function() {
+  module.directive('singlestatPanel', function($location, linkSrv, $timeout) {
 
     return {
       link: function(scope, elem) {
@@ -100,7 +100,7 @@ function (angular, app, _, $) {
             plotCss.bottom = "0px";
             plotCss.left = "-5px";
             plotCss.width = (width - 10) + 'px';
-            plotCss.height = Math.floor(height * 0.3) + "px";
+            plotCss.height = Math.floor(height * 0.25) + "px";
           }
 
           plotCanvas.css(plotCss);
@@ -167,7 +167,36 @@ function (angular, app, _, $) {
           if (panel.sparkline.show) {
             addSparkline();
           }
+
+          elem.toggleClass('pointer', panel.links.length > 0);
         }
+
+        // drilldown link tooltip
+        var drilldownTooltip = $('<div id="tooltip" class="">gello</div>"');
+
+        elem.mouseleave(function() {
+          if (panel.links.length === 0) { return;}
+          drilldownTooltip.detach();
+        });
+
+        elem.click(function() {
+          if (panel.links.length === 0) { return; }
+
+          var linkInfo = linkSrv.getPanelLinkAnchorInfo(panel.links[0]);
+          if (linkInfo.href[0] === '#') { linkInfo.href = linkInfo.href.substring(1); }
+
+          $timeout(function() { $location.path(linkInfo.href); });
+
+          drilldownTooltip.detach();
+        });
+
+        elem.mousemove(function(e) {
+          if (panel.links.length === 0) { return;}
+
+          drilldownTooltip.text('click to go to: ' + panel.links[0].title);
+
+          drilldownTooltip.place_tt(e.clientX+20, e.clientY-15);
+        });
       }
     };
   });