From ca7bc25c83c24515761eb75c97774624962a127a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 16 Dec 2016 10:34:00 +0100 Subject: [PATCH] feat(panel): working on panel help text, #4079 , #6847 --- public/app/features/dashboard/model.ts | 4 +- .../dashboard}/partials/inspector.html | 3 +- .../dashboard/partials/panel_info.html | 18 +++++++ .../app/features/panel/metrics_panel_ctrl.ts | 1 - public/app/features/panel/panel_ctrl.ts | 20 +++++--- public/app/features/panel/panel_directive.ts | 51 +++++++++++++++++-- public/app/features/panel/panel_menu.js | 20 +------- public/sass/components/_alerts.scss | 4 +- public/sass/components/_drop.scss | 2 +- public/sass/components/_view_states.scss | 1 + public/sass/pages/_dashboard.scss | 28 ++++++++-- 11 files changed, 111 insertions(+), 41 deletions(-) rename public/app/{ => features/dashboard}/partials/inspector.html (95%) create mode 100644 public/app/features/dashboard/partials/panel_info.html diff --git a/public/app/features/dashboard/model.ts b/public/app/features/dashboard/model.ts index 6b8b2ed36d7..cff82d1ffb0 100644 --- a/public/app/features/dashboard/model.ts +++ b/public/app/features/dashboard/model.ts @@ -51,7 +51,7 @@ export class DashboardModel { this.style = data.style || "dark"; this.timezone = data.timezone || ''; this.editable = data.editable !== false; - this.graphTooltip = data.graphTooltip || false; + this.graphTooltip = data.graphTooltip || 0; this.hideControls = data.hideControls || false; this.time = data.time || { from: 'now-6h', to: 'now' }; this.timepicker = data.timepicker || {}; @@ -272,7 +272,7 @@ export class DashboardModel { } sharedTooltipModeEnabled() { - return this.graphTooltip !== 0; + return this.graphTooltip > 0; } sharedCrosshairModeOnly() { diff --git a/public/app/partials/inspector.html b/public/app/features/dashboard/partials/inspector.html similarity index 95% rename from public/app/partials/inspector.html rename to public/app/features/dashboard/partials/inspector.html index 228dfc7041e..37a1516c0b9 100644 --- a/public/app/partials/inspector.html +++ b/public/app/features/dashboard/partials/inspector.html @@ -1,7 +1,8 @@

- Inspector + + Inspector

    diff --git a/public/app/features/dashboard/partials/panel_info.html b/public/app/features/dashboard/partials/panel_info.html new file mode 100644 index 00000000000..88802d7c32e --- /dev/null +++ b/public/app/features/dashboard/partials/panel_info.html @@ -0,0 +1,18 @@ +
    +
    +

    + + Panel Description +

    + + + + +
    + +
    + {{panel.description}} +
    + +
    + diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index 5bb76e9fd45..aba4492401b 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -12,7 +12,6 @@ import * as dateMath from 'app/core/utils/datemath'; import {Subject} from 'vendor/npm/rxjs/Subject'; class MetricsPanelCtrl extends PanelCtrl { - error: any; loading: boolean; datasource: any; datasourceName: any; diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 3bd6cef569d..492d2b6f5c0 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -15,6 +15,7 @@ import {Emitter} from 'app/core/core'; export class PanelCtrl { panel: any; + error: any; row: any; dashboard: any; editorTabIndex: number; @@ -243,15 +244,22 @@ export class PanelCtrl { }); } - openInspector() { + openInfo() { var modalScope = this.$scope.$new(); modalScope.panel = this.panel; modalScope.dashboard = this.dashboard; - modalScope.inspector = $.extend(true, {}, this.inspector); - this.publishAppEvent('show-modal', { - src: 'public/app/partials/inspector.html', - scope: modalScope - }); + if (this.error) { + modalScope.inspector = $.extend(true, {}, this.inspector); + this.publishAppEvent('show-modal', { + src: 'public/app/features/dashboard/partials/inspector.html', + scope: modalScope + }); + } else { + 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 28ef0d2bd63..e93ade5a7e6 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -2,16 +2,17 @@ import angular from 'angular'; import $ from 'jquery'; +import _ from 'lodash'; +import Drop from 'tether-drop'; var module = angular.module('grafana.directives'); var panelTemplate = `
    - - - - + + + @@ -64,7 +65,9 @@ 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 ctrl = scope.ctrl; + var infoDrop; // the reason for handling these classes this way is for performance // limit the watchers on panels etc @@ -139,11 +142,36 @@ 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); + + if (ctrl.error || ctrl.panel.description) { + if (infoDrop) { + infoDrop.destroy(); + } + + infoDrop = new Drop({ + target: cornerInfoElem[0], + content: ctrl.error || ctrl.panel.description, + position: 'right middle', + classes: 'drop-help', + openOn: 'hover', + hoverOpenDelay: 400, + }); + } + }); + elem.on('mouseenter', mouseEnter); elem.on('mouseleave', mouseLeave); scope.$on('$destroy', function() { elem.off(); + + if (infoDrop) { + infoDrop.destroy(); + } }); } }; @@ -233,4 +261,19 @@ module.directive('panelResizer', function($rootScope) { }; }); +module.directive('panelHelpCorner', function($rootScope) { + return { + restrict: 'E', + template: ` + + + + + + `, + link: function(scope, elem) { + } + }; +}); + diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index a6a3fa9ae78..bf420f7dc15 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -9,26 +9,15 @@ function (angular, $, _, Tether) { angular .module('grafana.directives') - .directive('panelMenu', function($sanitize, $compile, linkSrv) { + .directive('panelMenu', function($compile, linkSrv) { var linkTemplate = '' + '' + '{{ctrl.panel.title | interpolateTemplateVars:this}}' + - '{{ctrl.panel.description}}' + '' + ' {{ctrl.timeInfo}}' + ''; - function sanitizeString(str) { - try { - return $sanitize(str); - } - catch(err) { - console.log('Could not sanitize annotation string, html escaping instead'); - return _.escape(str); - } - } - function createExternalLinkMenu(ctrl) { var template = '
    '; template += '
    '; @@ -89,7 +78,6 @@ function (angular, $, _, Tether) { var $link = $(linkTemplate); var $panelLinksBtn = $link.find(".panel-links-btn"); var $panelContainer = elem.parents(".panel-container"); - var $panelHelpDrop = $link.find(".panel-help-text"); var menuScope = null; var ctrl = $scope.ctrl; var timeout = null; @@ -104,12 +92,6 @@ function (angular, $, _, Tether) { $panelLinksBtn.css({display: showIcon ? 'inline' : 'none'}); }); - $scope.$watch('ctrl.panel.description', function(description) { - description = sanitizeString(description); - var showIcon = (description ? description.length > 0 : false) && ctrl.panel.title !== ''; - $panelHelpDrop.css({display: showIcon ? 'inline' : 'none'}); - }); - function dismiss(time, force) { clearTimeout(timeout); timeout = null; diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index 4434fa680f0..859e3b88f8c 100644 --- a/public/sass/components/_alerts.scss +++ b/public/sass/components/_alerts.scss @@ -6,8 +6,6 @@ // Base styles // ------------------------- - - .alert { padding: 0.5rem 2rem 0.5rem 1rem; margin-bottom: $line-height-base; @@ -30,9 +28,11 @@ .alert-error { background-color: $errorBackground; } + .alert-info { background-color: $infoBackground; } + .alert-warning { background-color: $state-warning-bg; } diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index 570c1862ef0..5f95f45063a 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -15,7 +15,6 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00); &.drop-open { display: block; } - } .drop-element, .drop-element * { @@ -41,6 +40,7 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00); display: none; } } + @include drop-theme("help", $popover-help-bg, $popover-help-color); @include drop-theme("popover", $popover-bg, $popover-color); diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index edbff235cd4..66a3806d97e 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -29,6 +29,7 @@ .dashnav-refresh-action, .dashnav-zoom-out, .dashnav-action-icons, + .panel-info-corner--has-desc, .dashnav-move-timeframe { opacity: 0; transition: all 1.5s ease-in-out 1s; diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 59875673982..9978ceac2c0 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -75,7 +75,7 @@ div.flot-text { .panel-help-text { margin-left: 10px; - display: none; + display: none; } .panel-loading { @@ -89,9 +89,11 @@ div.flot-text { text-align: center; } -.panel-error { - color: $white; +.panel-info-corner { + color: $text-color; + cursor: pointer; position: absolute; + display: none; left: 0; padding: 0px 17px 6px 5px; top: 0; @@ -100,15 +102,31 @@ div.flot-text { position: relative; top: -2px; } + + &--has-desc { + display: block; + background: $blue-dark; + .fa:before { + content: "\f129"; + } + } + + &--has-error { + display: block; + background: $errorBackground !important; + .fa:before { + content: "\f12a"; + } + } } -.panel-error-arrow { +.panel-info-corner-inner { width: 0; height: 0; position: absolute; border-left: 31px solid transparent; border-right: 30px solid transparent; - border-bottom: 27px solid $panel-bg; + border-bottom: 31px solid $panel-bg; left: 0; bottom: 0; }