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

This commit is contained in:
Torkel Ödegaard 2014-11-14 09:33:03 +01:00
parent d4adaaaf2b
commit 873d3d7c4a
3 changed files with 34 additions and 3 deletions

View File

@ -68,7 +68,8 @@ function (angular, $, _) {
elem.append($link); elem.append($link);
$scope.$watchCollection('panel.links', function(newValue) { $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) { function dismiss(time) {

View File

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

View File

@ -11,7 +11,7 @@ function (angular, app, _, $) {
var module = angular.module('grafana.panels.singlestat', []); var module = angular.module('grafana.panels.singlestat', []);
app.useModule(module); app.useModule(module);
module.directive('singlestatPanel', function() { module.directive('singlestatPanel', function($location, linkSrv, $timeout) {
return { return {
link: function(scope, elem) { link: function(scope, elem) {
@ -100,7 +100,7 @@ function (angular, app, _, $) {
plotCss.bottom = "0px"; plotCss.bottom = "0px";
plotCss.left = "-5px"; plotCss.left = "-5px";
plotCss.width = (width - 10) + 'px'; plotCss.width = (width - 10) + 'px';
plotCss.height = Math.floor(height * 0.3) + "px"; plotCss.height = Math.floor(height * 0.25) + "px";
} }
plotCanvas.css(plotCss); plotCanvas.css(plotCss);
@ -167,7 +167,36 @@ function (angular, app, _, $) {
if (panel.sparkline.show) { if (panel.sparkline.show) {
addSparkline(); 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);
});
} }
}; };
}); });