diff --git a/public/app/features/dashlinks/editor.html b/public/app/features/dashlinks/editor.html
index 0dccb7b81f6..8f5570d9fe2 100644
--- a/public/app/features/dashlinks/editor.html
+++ b/public/app/features/dashlinks/editor.html
@@ -10,27 +10,32 @@
Type
-
+
- Dashboard
-
-
+ With tag
+
+
- Url
-
+ Url
+
- Title
-
+ Title
+
- Tooltip
-
+ Tooltip
+
+
+ Icon
+
+
+
diff --git a/public/app/features/dashlinks/module.html b/public/app/features/dashlinks/module.html
index ed5ee504bb7..32c001ccd38 100644
--- a/public/app/features/dashlinks/module.html
+++ b/public/app/features/dashlinks/module.html
@@ -1,4 +1,6 @@
-
-
-
-
+
diff --git a/public/app/features/dashlinks/module.js b/public/app/features/dashlinks/module.js
index 902621ae77a..ad7de426587 100644
--- a/public/app/features/dashlinks/module.js
+++ b/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() {
+ 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() {
+ }
+ };
+ });
+
+ module.directive('dashLinksContainer', function() {
+ return {
+ scope: {
+ links: "="
+ },
+ restrict: 'E',
+ controller: 'DashLinksContainerCtrl',
+ template: '',
+ 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));
}
- };
- }).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);
+ // tooltip
+ elem.find('a').tooltip({ title: scope.link.tooltip, html: true, container: 'body' });
+ icon.attr('class', scope.link.icon);
- 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', '');
- }
- }
+ update();
+ scope.$on('refresh', update);
+ }
+ };
+ });
- // 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
+ 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'
+ };
});
-
- update();
- scope.$on('refresh', update);
- $rootScope.onAppEvent('dash-links-updated', update);
- }
- };
- })
- .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');
- };
+ if (linkDef.type === 'link') {
+ return $q.when([{ url: linkDef.url, title: linkDef.title, icon: 'fa fa-external-link', }]);
+ }
- $scope.searchDashboards = function(queryStr, callback) {
- var query = {query: queryStr};
+ return $q.when([]);
+ }
- backendSrv.search(query).then(function(result) {
- var dashboards = _.map(result.dashboards, function(dash) {
- return dash.title;
- });
+ 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);
+ };
+
+ });
});
diff --git a/public/app/partials/submenu.html b/public/app/partials/submenu.html
index 22e9b043d5f..0de2bb1adc4 100644
--- a/public/app/partials/submenu.html
+++ b/public/app/partials/submenu.html
@@ -19,7 +19,7 @@
diff --git a/public/css/less/navbar.less b/public/css/less/navbar.less
index ab2312ecb33..e3c8826b22b 100644
--- a/public/css/less/navbar.less
+++ b/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;
diff --git a/public/css/less/submenu.less b/public/css/less/submenu.less
index 3de634e59aa..4f44edc5678 100644
--- a/public/css/less/submenu.less
+++ b/public/css/less/submenu.less
@@ -5,7 +5,7 @@
}
.submenu-controls {
- margin: 10px 10px 8px 14px;
+ margin: 15px 10px 8px 14px;
font-size: 16px;
}
diff --git a/public/css/less/variables.dark.less b/public/css/less/variables.dark.less
index 7682c1e940c..bc49b66cd74 100644
--- a/public/css/less/variables.dark.less
+++ b/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;