IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Worked on enhancing panel links to support dash link features, like auto variable to url params includes, Closes #2200

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-06-22 17:44:42 +02:00
parent 3f917b0af5
commit 98a07eff81
5 changed files with 85 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/features/dashlinks/module.js
View File

@ -105,7 +105,7 @@ function (angular, _) {
}]); }]);
} }
return $scope.searchDashboards(linkDef); return $scope.searchDashboards(linkDef, 7);
} }
if (linkDef.type === 'link') { if (linkDef.type === 'link') {
@ -131,8 +131,8 @@ function (angular, _) {
}); });
} }
$scope.searchDashboards = function(link) { $scope.searchDashboards = function(link, limit) {
return backendSrv.search({tag: link.tags}).then(function(results) { return backendSrv.search({tag: link.tags, limit: limit}).then(function(results) {
return _.reduce(results, function(memo, dash) { return _.reduce(results, function(memo, dash) {
// do not add current dashboard // do not add current dashboard
if (dash.id !== currentDashId) { if (dash.id !== currentDashId) {
@ -150,7 +150,7 @@ function (angular, _) {
}; };
$scope.fillDropdown = function(link) { $scope.fillDropdown = function(link) {
$scope.searchDashboards(link).then(function(results) { $scope.searchDashboards(link, 100).then(function(results) {
_.each(results, function(hit) { _.each(results, function(hit) {
hit.url = linkSrv.getLinkUrl(hit); hit.url = linkSrv.getLinkUrl(hit);
}); });

21
public/app/features/panellinks/linkSrv.js
View File

@ -62,21 +62,34 @@ function (angular, kbn, _) {
this.getPanelLinkAnchorInfo = function(link) { this.getPanelLinkAnchorInfo = function(link) {
var info = {}; var info = {};
if (link.type === 'absolute') { if (link.type === 'absolute') {
info.target = '_blank'; info.target = link.targetBlank ? '_blank' : '';
info.href = templateSrv.replace(link.url || ''); info.href = templateSrv.replace(link.url || '');
info.title = templateSrv.replace(link.title || ''); info.title = templateSrv.replace(link.title || '');
info.href += '?'; info.href += '?';
} }
else if (link.dashUri) {
info.href = 'dashboard/' + link.dashUri + '?';
info.title = templateSrv.replace(link.title || '');
}
else { else {
info.title = templateSrv.replace(link.title || ''); info.title = templateSrv.replace(link.title || '');
var slug = kbn.slugifyForUrl(link.dashboard || ''); var slug = kbn.slugifyForUrl(link.dashboard || '');
info.href = 'dashboard/db/' + slug + '?'; info.href = 'dashboard/db/' + slug + '?';
} }
var range = timeSrv.timeRangeForUrl(); var params = {};
info.href += 'from=' + range.from;
info.href += '&to=' + range.to;
if (link.keepTime) {
var range = timeSrv.timeRangeForUrl();
params['from'] = range.from;
params['to'] = range.to;
}
if (link.includeVars) {
templateSrv.fillVariableValuesForUrl(params);
}
info.href = this.addParamsToUrl(info.href, params);
if (link.params) { if (link.params) {
info.href += "&" + templateSrv.replace(link.params); info.href += "&" + templateSrv.replace(link.params);
} }

66
public/app/features/panellinks/module.html
View File

@ -2,49 +2,73 @@
<div class="section"> <div class="section">
<h5>Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5> <h5>Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
<div ng-repeat="link in panel.links"> <div ng-repeat="link in panel.links" style="margin-top: 20px;">
<div class="tight-form" > <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list pull-right">
<li class="tight-form-item"> <li class="tight-form-item">
<i ng-click="moveLink($index, -1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
<i ng-click="moveLink($index, 1)" ng-hide="$last" class="pointer fa fa-fw fa-arrow-down"></i>
</li>
<li class="tight-form-item last">
<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i> <i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
</li> </li>
</ul>
<li class="tight-form-item" style="width: 80px;">Link title</li> <ul class="tight-form-list">
<li> <li class="tight-form-item" style="width: 20px">
<input type="text" ng-model="link.title" class="input-medium tight-form-input"> <i class="fa fa-fw fa-unlink"></i>
</li> </li>
<li class="tight-form-item">Type</li> <li class="tight-form-item">Type</li>
<li> <li>
<select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select> <select class="input-medium tight-form-input" style="width: 150px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
</li> </li>
<li class="tight-form-item" ng-show="link.type === 'dashboard'">Dashboard</li> <li class="tight-form-item" ng-show="link.type === 'dashboard'" style="width: 73px;">Dashboard</li>
<li ng-show="link.type === 'dashboard'"> <li ng-show="link.type === 'dashboard'">
<input type="text" <input type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="input-large tight-form-input" ng-blur="dashboardChanged(link)">
ng-model="link.dashboard"
bs-typeahead="searchDashboards"
class="input-large tight-form-input">
</li> </li>
<li class="tight-form-item" ng-show="link.type === 'absolute'">Url</li> <li class="tight-form-item" ng-show="link.type === 'absolute'" style="width: 73px;">Url</li>
<li ng-show="link.type === 'absolute'"> <li ng-show="link.type === 'absolute'">
<input type="text" ng-model="link.url" class="input-xlarge tight-form-input"> <input type="text" ng-model="link.url" class="input-large tight-form-input">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
<i class="fa fa-fw fa-unlink invisible"></i>
</li>
<li class="tight-form-item" style="width: 31px">Title</li>
<li>
<input type="text" ng-model="link.title" class="input-medium tight-form-input">
</li>
<li class="tight-form-item" style="width: 73px;">
Url params
</li>
<li>
<input type="text" ng-model="link.params" class="input-large tight-form-input">
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list" role="menu"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
<i class="fa fa-fw fa-unlink invisible"></i>
</li>
<li class="tight-form-item"> <li class="tight-form-item">
<i class="fa fa-remove invisible"></i> <editor-checkbox text="Keep current time range" model="link.keepTime"></editor-checkbox>
</li> </li>
<li class="tight-form-item" style="width: 80px;"> <li class="tight-form-item">
Params <editor-checkbox text="Add current variable values" model="link.includeVars"></editor-checkbox>
<tip>Use var-variableName=value to pass templating variables.</tip>
</li> </li>
<li> <li class="tight-form-item last">
<input type="text" ng-model="link.params" class="input-xxlarge tight-form-input"> <editor-checkbox text="Open in new tab " model="link.targetBlank"></editor-checkbox>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>

17
public/app/features/panellinks/module.js
View File

@ -26,15 +26,12 @@ function (angular, _) {
$scope.addLink = function() { $scope.addLink = function() {
$scope.panel.links.push({ $scope.panel.links.push({
type: 'dashboard', type: 'dashboard',
name: 'Drilldown dashboard'
}); });
}; };
$scope.searchDashboards = function(queryStr, callback) { $scope.searchDashboards = function(queryStr, callback) {
var query = {query: queryStr}; backendSrv.search({query: queryStr}).then(function(hits) {
var dashboards = _.map(hits, function(dash) {
backendSrv.search(query).then(function(result) {
var dashboards = _.map(result.dashboards, function(dash) {
return dash.title; return dash.title;
}); });
@ -42,6 +39,16 @@ function (angular, _) {
}); });
}; };
$scope.dashboardChanged = function(link) {
backendSrv.search({query: link.dashboard}).then(function(hits) {
var dashboard = _.findWhere(hits, {title: link.dashboard});
if (dashboard) {
link.dashUri = dashboard.uri;
link.title = dashboard.title;
}
});
};
$scope.deleteLink = function(link) { $scope.deleteLink = function(link) {
$scope.panel.links = _.without($scope.panel.links, link); $scope.panel.links = _.without($scope.panel.links, link);
}; };

10
public/app/panels/singlestat/singleStatPanel.js
View File

@ -182,9 +182,13 @@ function (angular, app, _, $) {
elem.click(function() { elem.click(function() {
if (panel.links.length === 0) { return; } if (panel.links.length === 0) { return; }
var link = panel.links[0];
var linkInfo = linkSrv.getPanelLinkAnchorInfo(panel.links[0]); var linkInfo = linkSrv.getPanelLinkAnchorInfo(link);
if (linkInfo.href[0] === '#') { linkInfo.href = linkInfo.href.substring(1); } if (panel.links[0].targetBlank) {
var redirectWindow = window.open(linkInfo.href, '_blank');
redirectWindow.location;
return;
}
if (linkInfo.href.indexOf('http') === 0) { if (linkInfo.href.indexOf('http') === 0) {
window.location.href = linkInfo.href; window.location.href = linkInfo.href;