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): refinements for panel help text, made the inspector the home for the model version

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-12-16 16:08:32 +01:00
parent 2c05237d90
commit a361d1f488
5 changed files with 36 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -258,8 +258,13 @@ export class PanelCtrl {
return '';
}
getInfoContent() {
var markdown = this.error || this.panel.description;
getInfoContent(options) {
var markdown = this.panel.description;
if (options.mode === 'tooltip') {
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);
@@ -279,23 +284,16 @@ export class PanelCtrl {
return html + '</div>';
}
openInfo() {
openInspector() {
var modalScope = this.$scope.$new();
modalScope.panel = this.panel;
modalScope.dashboard = this.dashboard;
modalScope.panelInfoHtml = this.getInfoContent({mode: 'inspector'});
if (this.error) {
modalScope.inspector = $.extend(true, {}, this.inspector);
this.publishAppEvent('show-modal', {
src: 'public/app/features/dashboard/partials/inspector.html',
scope: modalScope
});
} else {
modalScope.html = this.getInfoContent();
this.publishAppEvent('show-modal', {
src: 'public/app/features/dashboard/partials/panel_info.html',
scope: modalScope
});
}
modalScope.inspector = $.extend(true, {}, this.inspector);
this.publishAppEvent('show-modal', {
src: 'public/app/features/dashboard/partials/inspector.html',
scope: modalScope
});
}
}

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

@@ -10,7 +10,7 @@ var module = angular.module('grafana.directives');
var panelTemplate = `
<div class="panel-container">
<div class="panel-header">
<span class="panel-info-corner" ng-click="ctrl.openInfo()">
<span class="panel-info-corner">
<i class="fa"></i>
<span class="panel-info-corner-inner"></span>
</span>
@@ -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')[0];
var cornerInfoElem = elem.find('.panel-info-corner');
var ctrl = scope.ctrl;
var infoDrop;
@@ -144,7 +144,7 @@ module.directive('grafanaPanel', function($rootScope) {
function updatePanelCornerInfo() {
var cornerMode = ctrl.getInfoMode();
cornerInfoElem.className = 'panel-info-corner + panel-info-corner--' + cornerMode;
cornerInfoElem[0].className = 'panel-info-corner + panel-info-corner--' + cornerMode;
if (cornerMode) {
if (infoDrop) {
@@ -152,8 +152,10 @@ module.directive('grafanaPanel', function($rootScope) {
}
infoDrop = new Drop({
target: cornerInfoElem,
content: ctrl.getInfoContent.bind(ctrl),
target: cornerInfoElem[0],
content: function() {
return ctrl.getInfoContent({mode: 'tooltip'});
},
position: 'right middle',
classes: ctrl.error ? 'drop-error' : 'drop-help',
openOn: 'hover',
@@ -165,11 +167,17 @@ module.directive('grafanaPanel', function($rootScope) {
scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], updatePanelCornerInfo);
scope.$watchCollection('ctrl.panel.links', updatePanelCornerInfo);
cornerInfoElem.on('click', function() {
infoDrop.close();
scope.$apply(ctrl.openInspector.bind(ctrl));
});
elem.on('mouseenter', mouseEnter);
elem.on('mouseleave', mouseLeave);
scope.$on('$destroy', function() {
elem.off();
cornerInfoElem.off();
if (infoDrop) {
infoDrop.destroy();