mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
parent
d4adaaaf2b
commit
873d3d7c4a
@ -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) {
|
||||||
|
@ -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: [{}],
|
||||||
|
@ -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);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user