IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(panel): working on panel help text, #4079 , #6847

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-12-16 11:48:32 +01:00
parent ca7bc25c83
commit b9043c915e
6 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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"

3
public/app/features/dashboard/partials/panel_info.html
View File

@ -10,8 +10,7 @@
</a>
</div>
<div class="modal-content">
{{panel.description}}
<div class="modal-content" ng-bind-html="html">
</div>
</div>

21
public/app/features/panel/panel_ctrl.ts
View File

@ -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 += '<ul>';
for (let link of this.panel.links) {
var info = linkSrv.getPanelLinkAnchorInfo(link, this.panel.scopedVars);
html += '<li><a class="panel-menu-link" href="' + info.href + '" target="' + info.target + '">' + info.title + '</a></li>';
}
html += '</ul>';
}
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

4
public/app/features/panel/panel_directive.ts
View File

@ -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,
});

5
public/app/headers/common.d.ts vendored
View File

@ -62,3 +62,8 @@ declare module 'mousetrap' {
var config: any;
export default config;
}
declare module 'remarkable' {
var config: any;
export default config;
}

2
public/sass/components/_drop.scss
View File

@ -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);