From 42de27a2cb2cb99ccb08a73fd7cb76c1cffcfed2 Mon Sep 17 00:00:00 2001 From: utkarshcmu Date: Tue, 6 Dec 2016 03:54:44 -0800 Subject: [PATCH 01/10] Added help text for users --- public/app/features/panel/panel_menu.js | 1 + public/app/partials/panelgeneral.html | 7 +++++++ public/sass/components/_gf-form.scss | 4 ++++ 3 files changed, 12 insertions(+) diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index bf420f7dc15..cb6f74fb89d 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -14,6 +14,7 @@ function (angular, $, _, Tether) { '' + '' + '{{ctrl.panel.title | interpolateTemplateVars:this}}' + + '{{ctrl.panel.helpText}}' + '' + ' {{ctrl.timeInfo}}' + ''; diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html index 99e56cc27de..077660302e9 100644 --- a/public/app/partials/panelgeneral.html +++ b/public/app/partials/panelgeneral.html @@ -27,6 +27,13 @@ +
+
+ Help Text + + +
+
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 42498c47ac3..877276b674b 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -244,6 +244,10 @@ $gf-form-margin: 0.25rem; padding-left: $spacer; color: $text-color-weak; + &--bold { + color: $text-color-emphasis; + } + &--right-absolute { position: absolute; right: $spacer; From 034d84354ea474e472165e6880b8ee94c1e5c7a9 Mon Sep 17 00:00:00 2001 From: utkarshcmu Date: Tue, 6 Dec 2016 03:58:38 -0800 Subject: [PATCH 02/10] Fixed HelpText input box --- public/app/partials/panelgeneral.html | 1 - 1 file changed, 1 deletion(-) diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html index 077660302e9..d86ae54c0de 100644 --- a/public/app/partials/panelgeneral.html +++ b/public/app/partials/panelgeneral.html @@ -30,7 +30,6 @@
Help Text -
From 13f0b32a8ff43f394c270ed8f3afb9d30bf7ccda Mon Sep 17 00:00:00 2001 From: utkarshcmu Date: Tue, 6 Dec 2016 05:24:03 -0800 Subject: [PATCH 03/10] Added sanitizer to help text --- public/app/features/panel/panel_menu.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index cb6f74fb89d..3524a0c019f 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -9,7 +9,7 @@ function (angular, $, _, Tether) { angular .module('grafana.directives') - .directive('panelMenu', function($compile, linkSrv) { + .directive('panelMenu', function($sanitize, $compile, linkSrv) { var linkTemplate = '' + '' + @@ -19,6 +19,16 @@ function (angular, $, _, Tether) { ' {{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 += '
'; @@ -79,6 +89,7 @@ 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; @@ -93,6 +104,12 @@ function (angular, $, _, Tether) { $panelLinksBtn.css({display: showIcon ? 'inline' : 'none'}); }); + $scope.$watch('ctrl.panel.helpText', function(helpText) { + helpText = sanitizeString(helpText); + var showIcon = (helpText ? helpText.length > 0 : false) && ctrl.panel.title !== ''; + $panelHelpDrop.css({display: showIcon ? 'inline' : 'none'}); + }); + function dismiss(time, force) { clearTimeout(timeout); timeout = null; From 6b26a0f91d1a9c3ca7f9c8594b8f5b277b74825e Mon Sep 17 00:00:00 2001 From: utkarshcmu Date: Tue, 6 Dec 2016 05:53:33 -0800 Subject: [PATCH 04/10] Fixed hover position --- public/sass/components/_gf-form.scss | 1 + public/sass/pages/_dashboard.scss | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 877276b674b..004ab86fb76 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -246,6 +246,7 @@ $gf-form-margin: 0.25rem; &--bold { color: $text-color-emphasis; + padding-left: 0; } &--right-absolute { diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 11933e0d76b..59875673982 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -73,6 +73,11 @@ div.flot-text { display: none; } +.panel-help-text { + margin-left: 10px; + display: none; +} + .panel-loading { position:absolute; top: -3px; From 467ddc19c3f1f6dd767e904230f748b2bb18a5aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 14 Dec 2016 17:22:19 +0100 Subject: [PATCH 05/10] feat(panel): worked on panel description tooltip, #6847 --- public/app/features/panel/panel_menu.js | 8 +-- public/app/features/panellinks/module.html | 78 +++++++++------------- public/app/partials/panelgeneral.html | 54 ++++++++------- 3 files changed, 64 insertions(+), 76 deletions(-) diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index 3524a0c019f..a6a3fa9ae78 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -14,7 +14,7 @@ function (angular, $, _, Tether) { '' + '' + '{{ctrl.panel.title | interpolateTemplateVars:this}}' + - '{{ctrl.panel.helpText}}' + + '{{ctrl.panel.description}}' + '' + ' {{ctrl.timeInfo}}' + ''; @@ -104,9 +104,9 @@ function (angular, $, _, Tether) { $panelLinksBtn.css({display: showIcon ? 'inline' : 'none'}); }); - $scope.$watch('ctrl.panel.helpText', function(helpText) { - helpText = sanitizeString(helpText); - var showIcon = (helpText ? helpText.length > 0 : false) && ctrl.panel.title !== ''; + $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'}); }); diff --git a/public/app/features/panellinks/module.html b/public/app/features/panellinks/module.html index 0cc977f7a9b..96d9b785a1b 100644 --- a/public/app/features/panellinks/module.html +++ b/public/app/features/panellinks/module.html @@ -3,60 +3,44 @@ Drilldown / detail linkThese links appear in the dropdown menu in the panel menu. -
-
- -
-
- -
- -
- Type -
- -
-
- -
- Dashboard - - - Url - -
- -
- +
+
+
+ Type +
+
-
-
- -
+
+ Dashboard + -
-
Title
- -
- -
- Url params - -
+ Url +
-
-
- -
+
+
Title
+ +
-
- - - -
+
+ +
+
+ Url params + +
+ + + + +
+ +
+
+
diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html index d86ae54c0de..a69884dc5cc 100644 --- a/public/app/partials/panelgeneral.html +++ b/public/app/partials/panelgeneral.html @@ -1,40 +1,44 @@ -
-
-
- Title - -
+
+
+
Info
- Span - + Title +
-
- Height - +
+ Description +
-
-
-
- Repeat Panel - +
+
Dimensions
+
+ Span +
- Min span + Height + +
+ +
+ +
+
Templating
+
+ Repeat Panel + +
+
+ Min span
-
-
- Help Text - -
-
-
+
- + 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 06/10] 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; } From b9043c915e8a7d90f9f2e57ce1adc354e4b03604 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 16 Dec 2016 11:48:32 +0100 Subject: [PATCH 07/10] feat(panel): working on panel help text, #4079 , #6847 --- package.json | 2 +- .../dashboard/partials/panel_info.html | 3 +-- public/app/features/panel/panel_ctrl.ts | 21 +++++++++++++++++++ public/app/features/panel/panel_directive.ts | 4 ++-- public/app/headers/common.d.ts | 5 +++++ public/sass/components/_drop.scss | 2 ++ 6 files changed, 32 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 05599868fb9..8f5585d4c81 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "sinon": "1.17.6", "systemjs-builder": "^0.15.34", "tether": "^1.4.0", - "tether-drop": "^1.4.2", + "tether-drop": "git://github.com/torkelo/drop", "tslint": "^4.0.2", "typescript": "^2.1.4", "virtual-scroll": "^1.1.1" diff --git a/public/app/features/dashboard/partials/panel_info.html b/public/app/features/dashboard/partials/panel_info.html index 88802d7c32e..cdccf679829 100644 --- a/public/app/features/dashboard/partials/panel_info.html +++ b/public/app/features/dashboard/partials/panel_info.html @@ -10,8 +10,7 @@
    -
    - {{panel.description}} +
    diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 492d2b6f5c0..c7e094cb71c 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -5,6 +5,7 @@ import _ from 'lodash'; import angular from 'angular'; import $ from 'jquery'; import {profiler} from 'app/core/profiler'; +import Remarkable from 'remarkable'; const TITLE_HEIGHT = 25; const EMPTY_TITLE_HEIGHT = 9; @@ -244,6 +245,25 @@ export class PanelCtrl { }); } + getPanelInfoContent() { + var markdown = this.error || this.panel.description; + var linkSrv = this.$injector.get('linkSrv'); + var templateSrv = this.$injector.get('templateSrv'); + var interpolatedMarkdown = templateSrv.replace(markdown, this.panel.scopedVars); + var html = new Remarkable().render(interpolatedMarkdown); + + if (this.panel.links && this.panel.links.length > 0) { + html += '
      '; + for (let link of this.panel.links) { + var info = linkSrv.getPanelLinkAnchorInfo(link, this.panel.scopedVars); + html += '
    • ' + info.title + '
      • '; + } + html += '
    '; + } + + return html; + } + openInfo() { var modalScope = this.$scope.$new(); modalScope.panel = this.panel; @@ -256,6 +276,7 @@ export class PanelCtrl { scope: modalScope }); } else { + modalScope.html = this.getPanelInfoContent(); 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 e93ade5a7e6..05d4cbea5c4 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -154,9 +154,9 @@ module.directive('grafanaPanel', function($rootScope) { infoDrop = new Drop({ target: cornerInfoElem[0], - content: ctrl.error || ctrl.panel.description, + content: ctrl.getPanelInfoContent.bind(ctrl), position: 'right middle', - classes: 'drop-help', + classes: ctrl.error ? 'drop-error' : 'drop-help', openOn: 'hover', hoverOpenDelay: 400, }); diff --git a/public/app/headers/common.d.ts b/public/app/headers/common.d.ts index 215df3e006a..aa4825829a1 100644 --- a/public/app/headers/common.d.ts +++ b/public/app/headers/common.d.ts @@ -62,3 +62,8 @@ declare module 'mousetrap' { var config: any; export default config; } + +declare module 'remarkable' { + var config: any; + export default config; +} diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index 5f95f45063a..0916a5a89db 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -42,8 +42,10 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00); } @include drop-theme("help", $popover-help-bg, $popover-help-color); +@include drop-theme("error", $errorBackground, $popover-color); @include drop-theme("popover", $popover-bg, $popover-color); @include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing); +@include drop-animation-scale("drop", "error", $attachmentOffset: $attachmentOffset, $easing: $easing); @include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing); 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 08/10] 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; } From 62f3b16671999f39a51b2ffa4d834e7196149e73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 16 Dec 2016 13:06:04 +0100 Subject: [PATCH 09/10] feat(panel): working on panel help text and unifying panel links, panel errors, and panel help into a single panel feature, #4079 , #6847 --- .../dashboard/partials/panel_info.html | 2 +- public/app/features/panel/panel_ctrl.ts | 6 ++- .../plugins/partials/plugin_edit.html | 2 +- public/app/plugins/panel/text/module.html | 2 +- public/sass/base/_type.scss | 39 +++++++++++++++++++ public/sass/components/_drop.scss | 9 ++--- public/sass/components/_panel_text.scss | 7 ---- public/sass/pages/_plugins.scss | 26 ------------- 8 files changed, 50 insertions(+), 43 deletions(-) diff --git a/public/app/features/dashboard/partials/panel_info.html b/public/app/features/dashboard/partials/panel_info.html index cdccf679829..de863eaa258 100644 --- a/public/app/features/dashboard/partials/panel_info.html +++ b/public/app/features/dashboard/partials/panel_info.html @@ -10,7 +10,7 @@
    -
    +
    diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index af282b99935..32563519991 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -263,7 +263,9 @@ export class PanelCtrl { var linkSrv = this.$injector.get('linkSrv'); var templateSrv = this.$injector.get('templateSrv'); var interpolatedMarkdown = templateSrv.replace(markdown, this.panel.scopedVars); - var html = new Remarkable().render(interpolatedMarkdown); + var html = '
    '; + + html += new Remarkable().render(interpolatedMarkdown); if (this.panel.links && this.panel.links.length > 0) { html += '
      '; @@ -274,7 +276,7 @@ export class PanelCtrl { html += '
    '; } - return html; + return html + '
    '; } openInfo() { diff --git a/public/app/features/plugins/partials/plugin_edit.html b/public/app/features/plugins/partials/plugin_edit.html index 2acb3eef8bf..e6659191961 100644 --- a/public/app/features/plugins/partials/plugin_edit.html +++ b/public/app/features/plugins/partials/plugin_edit.html @@ -31,7 +31,7 @@
    -
    +
    diff --git a/public/app/plugins/panel/text/module.html b/public/app/plugins/panel/text/module.html index 4ed7806753d..9fcf5a9f557 100644 --- a/public/app/plugins/panel/text/module.html +++ b/public/app/plugins/panel/text/module.html @@ -1,2 +1,2 @@ -

    +

    diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index f165d40e2eb..f400bb8f57a 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -290,3 +290,42 @@ a.external-link { .pointer { cursor: pointer; } + +.markdown-html { + img { + max-width: 100%; + } + + ul { + padding-left: $spacer*1.5; + margin-bottom: $spacer; + } + + table { + td, th { + padding: $spacer*.5 $spacer; + } + th { + font-weight: normal; + background: $table-bg-accent; + } + } + + table, th, td { + border: 1px solid $table-border; + border-collapse: collapse; + } + + a { + text-decoration: underline; + color: $external-link-color; + &:hover { + color: lighten($external-link-color, 10%); + } + } + + p:last-child { + margin-bottom: 0; + } +} + diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index 27264481c13..6f3aff23cef 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -29,12 +29,11 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00); } .drop-help { - ul { - padding-left: $spacer; - } - a { - text-decoration: underline; + color: $white; + &:hover { + color: darken($white, 10%); + } } } diff --git a/public/sass/components/_panel_text.scss b/public/sass/components/_panel_text.scss index 6e0301cecc5..8b137891791 100644 --- a/public/sass/components/_panel_text.scss +++ b/public/sass/components/_panel_text.scss @@ -1,8 +1 @@ -.panel-text-content { - ul { - margin: 0 0 $spacer $spacer * 1.5; - } - li {line-height: 2;} - a { color: $external-link-color; } -} diff --git a/public/sass/pages/_plugins.scss b/public/sass/pages/_plugins.scss index ed4d39d316f..075a7f1649c 100644 --- a/public/sass/pages/_plugins.scss +++ b/public/sass/pages/_plugins.scss @@ -37,32 +37,6 @@ overflow: hidden; } -.plugin-markdown-readme { - img { - max-width: 100%; - } - - ul { - padding-left: $spacer*1.5; - margin-bottom: $spacer*2; - } - - table { - td, th { - padding: $spacer*.5 $spacer; - } - th { - font-weight: normal; - background: $table-bg-accent; - } - } - - table, th, td { - border: 1px solid $table-border; - border-collapse: collapse; - } -} - .get-more-plugins-link { color: $text-muted; font-size: $font-size-sm; From af363ab4783746b9e0df51b4e181dd78974abd60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 16 Dec 2016 13:43:43 +0100 Subject: [PATCH 10/10] fix(panel): build fixes --- public/sass/base/_type.scss | 4 ++++ public/sass/components/_view_states.scss | 3 ++- public/test/test-main.js | 1 + 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index f400bb8f57a..7dd6c2f94e7 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -327,5 +327,9 @@ a.external-link { p:last-child { margin-bottom: 0; } + + ul:last-child { + margin-bottom: 0; + } } diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index 66a3806d97e..a1ed89f9888 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -29,7 +29,8 @@ .dashnav-refresh-action, .dashnav-zoom-out, .dashnav-action-icons, - .panel-info-corner--has-desc, + .panel-info-corner--info, + .panel-info-corner--links, .dashnav-move-timeframe { opacity: 0; transition: all 1.5s ease-in-out 1s; diff --git a/public/test/test-main.js b/public/test/test-main.js index 4e77a7eae54..54fbc7d2910 100644 --- a/public/test/test-main.js +++ b/public/test/test-main.js @@ -12,6 +12,7 @@ paths: { 'mousetrap': 'vendor/npm/mousetrap/mousetrap.js', 'eventemitter3': 'vendor/npm/eventemitter3/index.js', + 'remarkable': 'vendor/npm/remarkable/dist/remarkable.js', 'tether': 'vendor/npm/tether/dist/js/tether.js', 'tether-drop': 'vendor/npm/tether-drop/dist/js/drop.js', 'moment': 'vendor/moment.js',