From ac9ae52cea3c4225050fc5c03aa967ed123f305c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 16 Dec 2016 12:46:29 +0100 Subject: [PATCH] feat(panel): working on panel help text and unifying panel links, panel errors, and panel help into a single panel feature, #4079 , #6847 --- public/app/features/panel/panel_ctrl.ts | 17 ++++++++++-- public/app/features/panel/panel_directive.ts | 20 ++++++++------ public/app/features/panel/panel_menu.js | 29 ++------------------ public/sass/components/_drop.scss | 4 +++ public/sass/pages/_dashboard.scss | 29 +++++++++++++++----- 5 files changed, 54 insertions(+), 45 deletions(-) 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 = '
'; - template += '
'; - - if (ctrl.panel.links) { - _.each(ctrl.panel.links, function(link) { - var info = linkSrv.getPanelLinkAnchorInfo(link, ctrl.panel.scopedVars); - template += '' + info.title + ''; - }); - } - return template; - } - function createMenuTemplate(ctrl) { var template = '
'; @@ -76,7 +62,6 @@ function (angular, $, _, Tether) { restrict: 'A', link: function($scope, elem) { var $link = $(linkTemplate); - var $panelLinksBtn = $link.find(".panel-links-btn"); var $panelContainer = elem.parents(".panel-container"); var menuScope = null; var ctrl = $scope.ctrl; @@ -86,12 +71,6 @@ function (angular, $, _, Tether) { elem.append($link); - $scope.$watchCollection('ctrl.panel.links', function(newValue) { - var showIcon = (newValue ? newValue.length > 0 : false) && ctrl.panel.title !== ''; - // cannot use toggle here, only works for attached elements - $panelLinksBtn.css({display: showIcon ? 'inline' : 'none'}); - }); - function dismiss(time, force) { clearTimeout(timeout); timeout = null; @@ -132,11 +111,7 @@ function (angular, $, _, Tether) { } var menuTemplate; - if ($(e.target).hasClass('fa-external-link')) { - menuTemplate = createExternalLinkMenu(ctrl); - } else { - menuTemplate = createMenuTemplate(ctrl); - } + menuTemplate = createMenuTemplate(ctrl); $menu = $(menuTemplate); $menu.mouseleave(function() { diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index 0916a5a89db..27264481c13 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -32,6 +32,10 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00); ul { padding-left: $spacer; } + + a { + text-decoration: underline; + } } .drop-hide-out-of-bounds { diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 9978ceac2c0..24dc6f1a238 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -95,15 +95,19 @@ div.flot-text { position: absolute; display: none; left: 0; - padding: 0px 17px 6px 5px; + width: 27px; + height: 27px; top: 0; z-index: 10; - i { + + .fa { position: relative; top: -2px; + left: -5px; + font-size: 90%; } - &--has-desc { + &--info { display: block; background: $blue-dark; .fa:before { @@ -111,7 +115,18 @@ div.flot-text { } } - &--has-error { + &--links { + display: block; + background: $blue-dark; + .fa { + left: -3px; + } + .fa:before { + content: "\f08e"; + } + } + + &--error { display: block; background: $errorBackground !important; .fa:before { @@ -124,9 +139,9 @@ div.flot-text { width: 0; height: 0; position: absolute; - border-left: 31px solid transparent; - border-right: 30px solid transparent; - border-bottom: 31px solid $panel-bg; + border-left: 27px solid transparent; + border-right: 0px solid transparent; + border-bottom: 26px solid $panel-bg; left: 0; bottom: 0; }