diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index c7e094cb71c..af282b99935 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -245,7 +245,20 @@ export class PanelCtrl { }); } - getPanelInfoContent() { + getInfoMode() { + if (this.error) { + return 'error'; + } + if (!!this.panel.description) { + return 'info'; + } + if (this.panel.links.length > 0) { + return 'links'; + } + return ''; + } + + getInfoContent() { var markdown = this.error || this.panel.description; var linkSrv = this.$injector.get('linkSrv'); var templateSrv = this.$injector.get('templateSrv'); @@ -276,7 +289,7 @@ export class PanelCtrl { scope: modalScope }); } else { - modalScope.html = this.getPanelInfoContent(); + modalScope.html = this.getInfoContent(); this.publishAppEvent('show-modal', { src: 'public/app/features/dashboard/partials/panel_info.html', scope: modalScope diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 05d4cbea5c4..e5fcc7b4afe 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -65,7 +65,7 @@ module.directive('grafanaPanel', function($rootScope) { scope: { ctrl: "=" }, link: function(scope, elem) { var panelContainer = elem.find('.panel-container'); - var cornerInfoElem = elem.find('.panel-info-corner'); + var cornerInfoElem = elem.find('.panel-info-corner')[0]; var ctrl = scope.ctrl; var infoDrop; @@ -142,26 +142,28 @@ module.directive('grafanaPanel', function($rootScope) { } }, scope); - // panel corner info - scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], function() { - cornerInfoElem.toggleClass('panel-info-corner--has-desc', !!ctrl.panel.description); - cornerInfoElem.toggleClass('panel-info-corner--has-error', !!ctrl.error); + function updatePanelCornerInfo() { + var cornerMode = ctrl.getInfoMode(); + cornerInfoElem.className = 'panel-info-corner + panel-info-corner--' + cornerMode; - if (ctrl.error || ctrl.panel.description) { + if (cornerMode) { if (infoDrop) { infoDrop.destroy(); } infoDrop = new Drop({ - target: cornerInfoElem[0], - content: ctrl.getPanelInfoContent.bind(ctrl), + target: cornerInfoElem, + content: ctrl.getInfoContent.bind(ctrl), position: 'right middle', classes: ctrl.error ? 'drop-error' : 'drop-help', openOn: 'hover', hoverOpenDelay: 400, }); } - }); + } + + scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], updatePanelCornerInfo); + scope.$watchCollection('ctrl.panel.links', updatePanelCornerInfo); elem.on('mouseenter', mouseEnter); elem.on('mouseleave', mouseLeave); diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index bf420f7dc15..2e71fd19ff5 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -9,28 +9,14 @@ function (angular, $, _, Tether) { angular .module('grafana.directives') - .directive('panelMenu', function($compile, linkSrv) { + .directive('panelMenu', function($compile) { var linkTemplate = '' + '' + '{{ctrl.panel.title | interpolateTemplateVars:this}}' + - '' + ' {{ctrl.timeInfo}}' + ''; - function createExternalLinkMenu(ctrl) { - var template = '