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;