More work on dashboards links

public/app/features/dashboard/dashboardCtrl.js

@@ -41,6 +41,7 @@ function (angular, $, config) {
       $rootScope.performance.panelsRendered = 0;
 
       var dashboard = dashboardSrv.create(data.dashboard, data.meta);
+      dashboardSrv.setCurrent(dashboard);
 
       // init services
       timeSrv.init(dashboard);
@@ -63,7 +64,7 @@ function (angular, $, config) {
 
         $scope.appEvent("dashboard-loaded", $scope.dashboard);
       }).catch(function(err) {
-        console.log('Failed to initialize dashboard template variables, error: ', err);
+        console.log('Failed to initialize dashboard', err);
         $scope.appEvent("alert-error", ['Dashboard init failed', 'Template variables could not be initialized: ' + err.message]);
       });
     };

public/app/features/dashboard/dashboardSrv.js

@@ -306,8 +306,13 @@ function (angular, $, kbn, _, moment) {
     return {
       create: function(dashboard, meta) {
         return new DashboardModel(dashboard, meta);
-      }
+      },
+      setCurrent: function(dashboard) {
+        this.currentDashboard = dashboard;
+      },
+      getCurrent: function() {
+        return this.currentDashboard;
+      },
     };
-
   });
 });

public/app/features/dashlinks/editor.html

@@ -2,43 +2,61 @@
 		<div class="tight-form-section">
 			<h5>Links and Dash Navigation</h5>
 
-			<div class="tight-form" ng-repeat="link in dashboard.links">
+			<div class="tight-form" ng-repeat-start="link in dashboard.links" style="margin-top: 10px;">
 				<ul class="tight-form-list">
-					<li class="tight-form-item">
-						<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
+					<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 ['dashboards','link']" ng-change="updated()"></select>
+						<select class="input-medium tight-form-input" style="width: 151px;" 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 === '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()">
+						<input type="text" ng-model="link.tag" class="input-small tight-form-input" style="width: 151px" ng-model-onblur ng-change="updated()">
 					</li>
 
-					<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 69px">Url</li>
+					<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 51px">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" 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" 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 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-arrow-down"></i>
 					</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 class="tight-form-item">
+						<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>
+			<div ng-repeat-end>
+				<div class="tight-form" ng-if="link.type === 'link'">
+					<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" ng-show="link.type === 'link'" style="width: 31px">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" ng-show="link.type === 'link'" style="width: 52px">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: 110px;" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
+						</li>
+
+					</ul>
+					<div class="clearfix"></div>
+				</div>
+			</div>
 			<!-- <div class="tight&#45;form"> -->
 				<!-- 	<ul class="tight&#45;form&#45;list" role="menu"> -->
 					<!-- 		<li class="tight&#45;form&#45;item"> -->

public/app/features/dashlinks/module.js

@@ -7,6 +7,16 @@ function (angular, _) {
 
   var module = angular.module('grafana.directives');
 
+  var iconMap = {
+    "external link": "fa-external-link",
+    "dashboard": "fa-th-large",
+    "question": "fa-question",
+    "info": "fa-info",
+    "bolt": "fa-bolt",
+    "doc": "fa-file-text-o",
+    "cloud": "fa-cloud",
+  };
+
   module.directive('dashLinksEditor', function() {
     return {
       scope: {
@@ -38,7 +48,6 @@ function (angular, _) {
         link: "="
       },
       restrict: 'E',
-      controller: 'DashLinkCtrl',
       templateUrl: 'app/features/dashlinks/module.html',
       link: function(scope, elem) {
         var anchor = elem.find('a');
@@ -52,7 +61,7 @@ function (angular, _) {
 
         // tooltip
         elem.find('a').tooltip({ title: scope.link.tooltip, html: true, container: 'body' });
-        icon.attr('class', scope.link.icon);
+        icon.attr('class', 'fa fa-fw ' + scope.link.icon);
 
         update();
         scope.$on('refresh', update);
@@ -60,23 +69,33 @@ function (angular, _) {
     };
   });
 
-  module.controller("DashLinksContainerCtrl", function($scope, $rootScope, $q, backendSrv) {
+  module.controller("DashLinksContainerCtrl", function($scope, $rootScope, $q, backendSrv, dashboardSrv) {
+    var currentDashId = dashboardSrv.getCurrent().id;
 
     function buildLinks(linkDef) {
       if (linkDef.type === 'dashboards') {
+        if (!linkDef.tag) {
+          console.log('Dashboard link missing tag');
+          return $q.when([]);
+        }
+
         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'
-            };
-          });
+          return _.reduce(results.dashboards, function(memo, dash) {
+            // do not add current dashboard
+            if (dash.id !== currentDashId) {
+              memo.push({ title: dash.title, url: 'dashboard/db/'+ dash.slug, icon: 'fa fa-th-large' });
+            }
+            return memo;
+          }, []);
         });
       }
 
       if (linkDef.type === 'link') {
-        return $q.when([{ url: linkDef.url, title: linkDef.title, icon: 'fa fa-external-link', }]);
+        return $q.when([{
+          url: linkDef.url,
+          title: linkDef.title,
+          icon: iconMap[linkDef.icon]
+        }]);
       }
 
       return $q.when([]);
@@ -94,38 +113,21 @@ function (angular, _) {
     $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) {
+  module.controller('DashLinkEditorCtrl', function($scope, $rootScope) {
 
+    $scope.iconMap = iconMap;
     $scope.dashboard.links = $scope.dashboard.links || [];
     $scope.addLink = function() {
-      $scope.dashboard.links.push({
-        type: 'dashboard',
-        name: 'Related dashboard'
-      });
+      $scope.dashboard.links.push({ type: 'dashboards', icon: 'external link' });
     };
 
-    $scope.updated = function() {
-      $rootScope.appEvent('dash-links-updated');
+    $scope.moveLink = function(index, dir) {
+      _.move($scope.dashboard.links, index, index+dir);
+      $scope.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;
-        });
-
-        callback(dashboards);
-      });
+    $scope.updated = function() {
+      $rootScope.appEvent('dash-links-updated');
     };
 
     $scope.deleteLink = function(link) {