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') {
@ -131,8 +131,8 @@ function (angular, _) {
});
}
$scope.searchDashboards = function(link) {
return backendSrv.search({tag: link.tags}).then(function(results) {
$scope.searchDashboards = function(link, limit) {
return backendSrv.search({tag: link.tags, limit: limit}).then(function(results) {
return _.reduce(results, function(memo, dash) {
// do not add current dashboard
if (dash.id !== currentDashId) {
@ -150,7 +150,7 @@ function (angular, _) {
};
$scope.fillDropdown = function(link) {
$scope.searchDashboards(link).then(function(results) {
$scope.searchDashboards(link, 100).then(function(results) {
_.each(results, function(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) {
var info = {};
if (link.type === 'absolute') {
info.target = '_blank';
info.target = link.targetBlank ? '_blank' : '';
info.href = templateSrv.replace(link.url || '');
info.title = templateSrv.replace(link.title || '');
info.href += '?';
}
else if (link.dashUri) {
info.href = 'dashboard/' + link.dashUri + '?';
info.title = templateSrv.replace(link.title || '');
}
else {
info.title = templateSrv.replace(link.title || '');
var slug = kbn.slugifyForUrl(link.dashboard || '');
info.href = 'dashboard/db/' + slug + '?';
}
var range = timeSrv.timeRangeForUrl();
info.href += 'from=' + range.from;
info.href += '&to=' + range.to;
var params = {};
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) {
info.href += "&" + templateSrv.replace(link.params);
}

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

@ -2,49 +2,73 @@
<div class="section">
<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 class="tight-form" >
<ul class="tight-form-list">
<div ng-repeat="link in panel.links" style="margin-top: 20px;">
<div class="tight-form">
<ul class="tight-form-list pull-right">
<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>
</li>
</ul>
<li class="tight-form-item" style="width: 80px;">Link title</li>
<li>
<input type="text" ng-model="link.title" class="input-medium tight-form-input">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
<i class="fa fa-fw fa-unlink"></i>
</li>
<li class="tight-form-item">Type</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 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'">
<input type="text"
ng-model="link.dashboard"
bs-typeahead="searchDashboards"
class="input-large tight-form-input">
<input type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="input-large tight-form-input" ng-blur="dashboardChanged(link)">
</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'">
<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>
</ul>
<div class="clearfix"></div>
</div>
<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">
<i class="fa fa-remove invisible"></i>
<editor-checkbox text="Keep current time range" model="link.keepTime"></editor-checkbox>
</li>
<li class="tight-form-item" style="width: 80px;">
Params
<tip>Use var-variableName=value to pass templating variables.</tip>
<li class="tight-form-item">
<editor-checkbox text="Add current variable values" model="link.includeVars"></editor-checkbox>
</li>
<li>
<input type="text" ng-model="link.params" class="input-xxlarge tight-form-input">
<li class="tight-form-item last">
<editor-checkbox text="Open in new tab " model="link.targetBlank"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>

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

@ -26,15 +26,12 @@ function (angular, _) {
$scope.addLink = function() {
$scope.panel.links.push({
type: 'dashboard',
name: 'Drilldown dashboard'
});
};
$scope.searchDashboards = function(queryStr, callback) {
var query = {query: queryStr};
backendSrv.search(query).then(function(result) {
var dashboards = _.map(result.dashboards, function(dash) {
backendSrv.search({query: queryStr}).then(function(hits) {
var dashboards = _.map(hits, function(dash) {
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.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() {
if (panel.links.length === 0) { return; }
var linkInfo = linkSrv.getPanelLinkAnchorInfo(panel.links[0]);
if (linkInfo.href[0] === '#') { linkInfo.href = linkInfo.href.substring(1); }
var link = panel.links[0];
var linkInfo = linkSrv.getPanelLinkAnchorInfo(link);
if (panel.links[0].targetBlank) {
var redirectWindow = window.open(linkInfo.href, '_blank');
redirectWindow.location;
return;
}
if (linkInfo.href.indexOf('http') === 0) {
window.location.href = linkInfo.href;