Skip to content

N
nexpie-grafana-theme
Commit 98a07eff by Torkel Ödegaard
Options

Worked on enhancing panel links to support dash link features, like auto… 

Worked on enhancing panel links to support dash link features, like auto variable to url params includes, Closes #2200
parent 3f917b0a
Showing with 84 additions and 36 deletions
public/app/features/dashlinks/module.js
......@@ -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);
});
......
public/app/features/panellinks/linkSrv.js
......@@ -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 params = {};
if (link.keepTime) {
var range = timeSrv.timeRangeForUrl();
info.href += 'from=' + range.from;
info.href += '&to=' + range.to;
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);
}
......
public/app/features/panellinks/module.html
......@@ -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" role="menu">
<li class="tight-form-item">
<i class="fa fa-remove invisible"></i>
<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: 80px;">
Params
<tip>Use var-variableName=value to pass templating variables.</tip>
<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-xxlarge tight-form-input">
<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">
<li class="tight-form-item" style="width: 20px">
<i class="fa fa-fw fa-unlink invisible"></i>
</li>
<li class="tight-form-item">
<editor-checkbox text="Keep current time range" model="link.keepTime"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Add current variable values" model="link.includeVars"></editor-checkbox>
</li>
<li class="tight-form-item last">
<editor-checkbox text="Open in new tab " model="link.targetBlank"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
......
public/app/features/panellinks/module.js
......@@ -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);
};
......
public/app/panels/singlestat/singleStatPanel.js
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment