more work on dash links

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() {

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>

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>

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

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;