From 1f48c0739556bc0b443d28c63a09d22c044d54ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Wed, 6 May 2015 10:57:32 +0200
Subject: [PATCH] more work on dash links

---
 public/app/directives/bodyClass.js        |  2 +-
 public/app/features/dashlinks/editor.html | 19 ++++-----
 public/app/features/dashlinks/module.html |  2 +-
 public/app/features/dashlinks/module.js   | 47 ++++++++++++++++++-----
 public/css/less/navbar.less               |  2 +-
 5 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/public/app/directives/bodyClass.js b/public/app/directives/bodyClass.js
index d0274aca6b2..495390a59e8 100644
--- a/public/app/directives/bodyClass.js
+++ b/public/app/directives/bodyClass.js
@@ -16,7 +16,7 @@ function (angular, _, $) {
 
           // tooltip removal fix
           $scope.$on("$routeChangeSuccess", function() {
-            $("#tooltip").remove();
+            $("#tooltip, .tooltip").remove();
           });
 
           $scope.$watch('submenuEnabled', function() {
diff --git a/public/app/features/dashlinks/editor.html b/public/app/features/dashlinks/editor.html
index c96fb16878d..0dccb7b81f6 100644
--- a/public/app/features/dashlinks/editor.html
+++ b/public/app/features/dashlinks/editor.html
@@ -8,27 +8,28 @@
 						<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
 					</li>
 
-					<li class="tight-form-item" style="width: 80px;">Type</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: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']" ng-change="updated()"></select>
 					</li>
 
 					<li class="tight-form-item" ng-show="link.type === 'dashboard'">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-xlarge tight-form-input" ng-model-onblur ng-change="updated()">
 					</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: 69px">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-xlarge tight-form-input" ng-model-onblur ng-change="updated()">
 					</li>
 
 					<li class="tight-form-item">Title</li>
 					<li>
-						<input type="text" ng-model="link.title" class="input-medium tight-form-input">
+						<input type="text" ng-model="link.title" class="input-medium tight-form-input" ng-model-onblur ng-change="updated()">
+					</li>
+					<li class="tight-form-item">Tooltip</li>
+					<li>
+						<input type="text" ng-model="link.tooltip" class="input-medium tight-form-input" placeholder="Open dashbord" ng-model-onblur ng-change="updated()">
 					</li>
 				</ul>
 				<div class="clearfix"></div>
diff --git a/public/app/features/dashlinks/module.html b/public/app/features/dashlinks/module.html
index 369013c86d5..ed5ee504bb7 100644
--- a/public/app/features/dashlinks/module.html
+++ b/public/app/features/dashlinks/module.html
@@ -1,4 +1,4 @@
-<a class="pointer dash-nav-link" bs-tooltip="'asd'">
+<a class="pointer dash-nav-link" href="/asd" data-placement="bottom">
 	<i class="fa fa-th-large"></i>
 	<span></span>
 </a>
diff --git a/public/app/features/dashlinks/module.js b/public/app/features/dashlinks/module.js
index 4423498a2bf..902621ae77a 100644
--- a/public/app/features/dashlinks/module.js
+++ b/public/app/features/dashlinks/module.js
@@ -18,7 +18,7 @@ function (angular, _) {
         link: function() {
         }
       };
-    }).directive('dashLink', function(linkSrv) {
+    }).directive('dashLink', function(linkSrv, $rootScope) {
       return {
         scope: {
           link: "="
@@ -27,29 +27,52 @@ function (angular, _) {
         controller: 'DashLinkCtrl',
         templateUrl: 'app/features/dashlinks/module.html',
         link: function(scope, elem) {
+          var linkInfo;
+          var anchor = elem.find('a');
+          var icon = elem.find('i');
+          var span = elem.find('span');
 
           function update() {
-            var linkInfo = linkSrv.getPanelLinkAnchorInfo(scope.link);
-            elem.find("span").text(linkInfo.title);
-            elem.find("a").attr("href", linkInfo.href);
+            linkInfo = linkSrv.getPanelLinkAnchorInfo(scope.link);
+            span.text(linkInfo.title);
+            anchor.attr("href", linkInfo.href);
 
-            if (scope.link.type === 'dashboard') {
-              scope.tooltip = 'Go to dashboard';
+            if (scope.link.type === 'absolute') {
+              icon.attr('class', 'fa fw fa-external-link');
+              anchor.attr('target', '_blank');
+            } else {
+              icon.attr('class', 'fa fw fa-th-large');
+              anchor.attr('target', '');
             }
           }
 
+          // tooltip
+          elem.find('a').tooltip({
+            title: function () {
+              if (scope.link.tooltip) {
+                return scope.link.tooltip;
+              }
+              else if (scope.link.type === 'dashboard') {
+                return 'Open dashboard';
+              } else if (scope.link.type === 'absolute') {
+                return 'Open external page';
+              }
+            },
+            html: true,
+            container: 'body', // Grafana change
+          });
+
           update();
           scope.$on('refresh', update);
+          $rootScope.onAppEvent('dash-links-updated', update);
         }
       };
     })
-    .controller("DashLinkCtrl", function($scope) {
-
+    .controller("DashLinkCtrl", function() {
     })
-    .controller('DashLinkEditorCtrl', function($scope, backendSrv) {
+    .controller('DashLinkEditorCtrl', function($scope, backendSrv, $rootScope) {
 
       $scope.dashboard.links = $scope.dashboard.links || [];
-
       $scope.addLink = function() {
         $scope.dashboard.links.push({
           type: 'dashboard',
@@ -57,6 +80,10 @@ function (angular, _) {
         });
       };
 
+      $scope.updated = function() {
+        $rootScope.appEvent('dash-links-updated');
+      };
+
       $scope.searchDashboards = function(queryStr, callback) {
         var query = {query: queryStr};
 
diff --git a/public/css/less/navbar.less b/public/css/less/navbar.less
index e8dc8ccb555..ab2312ecb33 100644
--- a/public/css/less/navbar.less
+++ b/public/css/less/navbar.less
@@ -66,7 +66,7 @@
   color: #a2a2a2;
   border: 1px solid @grafanaTargetFuncHightlight;
   a {
-    .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
+    background-color: @btnInverseBackgroundHighlight;
     display: inline-block;
     //background: @btnInverseBackground;
     padding: 5px 15px 5px 10px;