More work on dashboards links

public/app/features/dashlinks/editor.html

@@ -10,27 +10,32 @@
 
 					<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']" ng-change="updated()"></select>
+						<select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboards','link']" 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-xlarge tight-form-input" ng-model-onblur ng-change="updated()">
+					<li class="tight-form-item" ng-show="link.type === 'dashboards'">With tag</li>
+					<li ng-show="link.type === 'dashboards'">
+						<input type="text" ng-model="link.tag" class="input-small tight-form-input" ng-model-onblur ng-change="updated()">
 					</li>
 
-					<li class="tight-form-item" ng-show="link.type === 'absolute'" style="width: 69px">Url</li>
-					<li ng-show="link.type === 'absolute'">
+					<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 69px">Url</li>
+					<li ng-show="link.type === 'link'">
 						<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>
+					<li class="tight-form-item" ng-show="link.type === 'link'">Title</li>
+					<li ng-show="link.type === 'link'">
 						<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>
+					<li class="tight-form-item" ng-show="link.type === 'link'">Tooltip</li>
+					<li ng-show="link.type === 'link'">
 						<input type="text" ng-model="link.tooltip" class="input-medium tight-form-input" placeholder="Open dashbord" ng-model-onblur ng-change="updated()">
 					</li>
+
+					<li class="tight-form-item" ng-show="link.type === 'link'">Icon</li>
+					<li ng-show="link.type === 'link'">
+						<select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.icon" ng-options="f for f in ['dashboard','external','help']" ng-change="updated()"></select>
+					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>

public/app/features/dashlinks/module.html

@@ -1,4 +1,6 @@
-<a class="pointer dash-nav-link" href="/asd" data-placement="bottom">
-	<i class="fa fa-th-large"></i>
-	<span></span>
-</a>
+<div class="submenu-item">
+	<a class="pointer dash-nav-link" href="/asd" data-placement="bottom">
+		<i class="fa fa-th-large"></i>
+		<span></span>
+	</a>
+</div>

public/app/features/dashlinks/module.js

@@ -5,100 +5,132 @@ define([
 function (angular, _) {
   'use strict';
 
-  angular
-    .module('grafana.directives')
-    .directive('dashLinksEditor', function() {
-      return {
-        scope: {
-          dashboard: "="
-        },
-        restrict: 'E',
-        controller: 'DashLinkEditorCtrl',
-        templateUrl: 'app/features/dashlinks/editor.html',
-        link: function() {
-        }
-      };
-    }).directive('dashLink', function(linkSrv, $rootScope) {
-      return {
-        scope: {
-          link: "="
-        },
-        restrict: 'E',
-        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() {
-            linkInfo = linkSrv.getPanelLinkAnchorInfo(scope.link);
-            span.text(linkInfo.title);
-            anchor.attr("href", linkInfo.href);
-
-            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
-          });
+  var module = angular.module('grafana.directives');
+
+  module.directive('dashLinksEditor', function() {
+    return {
+      scope: {
+        dashboard: "="
+      },
+      restrict: 'E',
+      controller: 'DashLinkEditorCtrl',
+      templateUrl: 'app/features/dashlinks/editor.html',
+      link: function() {
+      }
+    };
+  });
 
-          update();
-          scope.$on('refresh', update);
-          $rootScope.onAppEvent('dash-links-updated', update);
+  module.directive('dashLinksContainer', function() {
+    return {
+      scope: {
+        links: "="
+      },
+      restrict: 'E',
+      controller: 'DashLinksContainerCtrl',
+      template: '<dash-link ng-repeat="link in generatedLinks" link="link"></dash-link>',
+      link: function() { }
+    };
+  });
+
+  module.directive('dashLink', function(templateSrv) {
+    return {
+      scope: {
+        link: "="
+      },
+      restrict: 'E',
+      controller: 'DashLinkCtrl',
+      templateUrl: 'app/features/dashlinks/module.html',
+      link: function(scope, elem) {
+        var anchor = elem.find('a');
+        var icon = elem.find('i');
+        var span = elem.find('span');
+
+        function update() {
+          span.text(templateSrv.replace(scope.link.title));
+          anchor.attr("href", templateSrv.replace(scope.link.url));
         }
-      };
-    })
-    .controller("DashLinkCtrl", function() {
-    })
-    .controller('DashLinkEditorCtrl', function($scope, backendSrv, $rootScope) {
-
-      $scope.dashboard.links = $scope.dashboard.links || [];
-      $scope.addLink = function() {
-        $scope.dashboard.links.push({
-          type: 'dashboard',
-          name: 'Related dashboard'
-        });
-      };
 
-      $scope.updated = function() {
-        $rootScope.appEvent('dash-links-updated');
-      };
+        // tooltip
+        elem.find('a').tooltip({ title: scope.link.tooltip, html: true, container: 'body' });
+        icon.attr('class', scope.link.icon);
 
-      $scope.searchDashboards = function(queryStr, callback) {
-        var query = {query: queryStr};
+        update();
+        scope.$on('refresh', update);
+      }
+    };
+  });
 
-        backendSrv.search(query).then(function(result) {
-          var dashboards = _.map(result.dashboards, function(dash) {
-            return dash.title;
+  module.controller("DashLinksContainerCtrl", function($scope, $rootScope, $q, backendSrv) {
+
+    function buildLinks(linkDef) {
+      if (linkDef.type === 'dashboards') {
+        return backendSrv.search({tag: linkDef.tag}).then(function(results) {
+          return _.map(results.dashboards, function(dash) {
+            return {
+              title: dash.title,
+              url: 'dashboard/db/'+ dash.slug,
+              icon: 'fa fa-th-large'
+            };
           });
+        });
+      }
+
+      if (linkDef.type === 'link') {
+        return $q.when([{ url: linkDef.url, title: linkDef.title, icon: 'fa fa-external-link', }]);
+      }
+
+      return $q.when([]);
+    }
+
+    function updateDashLinks() {
+      var promises = _.map($scope.links, buildLinks);
 
-          callback(dashboards);
+      $q.all(promises).then(function(results) {
+        $scope.generatedLinks = _.flatten(results);
+      });
+    }
+
+    updateDashLinks();
+    $rootScope.onAppEvent('dash-links-updated', updateDashLinks);
+  });
+
+  module.controller("DashLinkCtrl", function($scope) {
+
+    if ($scope.link.type === 'dashboards') {
+      $scope.searchHits = [];
+    }
+
+  });
+
+  module.controller('DashLinkEditorCtrl', function($scope, backendSrv, $rootScope) {
+
+    $scope.dashboard.links = $scope.dashboard.links || [];
+    $scope.addLink = function() {
+      $scope.dashboard.links.push({
+        type: 'dashboard',
+        name: 'Related dashboard'
+      });
+    };
+
+    $scope.updated = function() {
+      $rootScope.appEvent('dash-links-updated');
+    };
+
+    $scope.searchDashboards = function(queryStr, callback) {
+      var query = {query: queryStr};
+
+      backendSrv.search(query).then(function(result) {
+        var dashboards = _.map(result.dashboards, function(dash) {
+          return dash.title;
         });
-      };
 
-      $scope.deleteLink = function(link) {
-        $scope.dashboard.links = _.without($scope.dashboard.links, link);
-      };
+        callback(dashboards);
+      });
+    };
+
+    $scope.deleteLink = function(link) {
+      $scope.dashboard.links = _.without($scope.dashboard.links, link);
+    };
 
-    });
+  });
 });

public/app/partials/submenu.html

@@ -19,7 +19,7 @@
 		</ul>
 
 		<ul class="tight-form-list pull-right" ng-if="dashboard.links.length > 0">
-			<dash-link ng-repeat="link in dashboard.links" link="link" class="submenu-item"></dash-link>
+			<dash-links-container links="dashboard.links"></dash-links-container>
 		</ul>
 
 		<div class="clearfix"></div>

public/css/less/navbar.less

@@ -64,11 +64,10 @@
   border-radius: 3px;
   font-size: 1.4em;
   color: #a2a2a2;
-  border: 1px solid @grafanaTargetFuncHightlight;
+  border: @grafanaTriggerBorder;
   a {
-    background-color: @btnInverseBackgroundHighlight;
+    background-color: @grafanaTargetFuncBackground;
     display: inline-block;
-    //background: @btnInverseBackground;
     padding: 5px 15px 5px 10px;
     border-radius: 3px;
     color: #a2a2a2;

public/css/less/submenu.less

@@ -5,7 +5,7 @@
 }
 
 .submenu-controls {
-  margin: 10px 10px 8px 14px;
+  margin: 15px 10px 8px 14px;
   font-size: 16px;
 }
 

public/css/less/variables.dark.less

@@ -213,8 +213,8 @@
 @navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
 
 @navbarHeight:                    52px;
-@navbarBackgroundHighlight:       @bodyBackground;
-@navbarBackground:                @bodyBackground;
+@navbarBackgroundHighlight:       @grayDark;
+@navbarBackground:                @grayDark;
 @navbarBorder:                    none;
 
 @navbarText:                      @grayLight;