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

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 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);
         }

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;