Skip to content

N
nexpie-grafana-theme
Commit a361d1f4 by Torkel Ödegaard
Options

feat(panel): refinements for panel help text, made the inspector the home for the model version

parent 2c05237d
Showing with 36 additions and 45 deletions
public/app/core/controllers/inspect_ctrl.js
...@@ -48,13 +48,13 @@ function (angular, _, $, coreModule) { ...@@ -48,13 +48,13 @@ function (angular, _, $, coreModule) {
} }
if (model.error.stack) { if (model.error.stack) {
$scope.editor.index = 2; $scope.editor.index = 3;
$scope.stack_trace = model.error.stack; $scope.stack_trace = model.error.stack;
$scope.message = model.error.message; $scope.message = model.error.message;
} }
if (model.error.config && model.error.config.data) { if (model.error.config && model.error.config.data) {
$scope.editor.index = 1; $scope.editor.index = 2;
if (_.isString(model.error.config.data)) { if (_.isString(model.error.config.data)) {
$scope.request_parameters = getParametersFromQueryString(model.error.config.data); $scope.request_parameters = getParametersFromQueryString(model.error.config.data);
......
public/app/features/dashboard/partials/inspector.html
<div class="modal-body" ng-controller="InspectCtrl" ng-init="init()"> <div class="modal-body" ng-controller="InspectCtrl" ng-init="init()">
<div class="modal-header"> <div class="modal-header">
<h2 class="modal-header-title"> <h2 class="modal-header-title">
<i class="fa fa-frown-o"></i> <i class="fa fa-info-circle"></i>
<span class="p-l-1">Inspector</span> <span class="p-l-1">Inspector</span>
</h2> </h2>
<ul class="gf-tabs"> <ul class="gf-tabs">
<li class="gf-tabs-item" ng-repeat="tab in ['Request', 'Response', 'JS Error']"> <li class="gf-tabs-item" ng-repeat="tab in ['Panel Description', 'Request', 'Response', 'JS Error']">
<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}"> <a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
{{::tab}} {{::tab}}
</a> </a>
...@@ -19,8 +19,10 @@ ...@@ -19,8 +19,10 @@
</div> </div>
<div class="modal-content"> <div class="modal-content">
<div ng-if="editor.index == 0" ng-bind-html="panelInfoHtml">
</div>
<div ng-if="editor.index == 0"> <div ng-if="editor.index == 1">
<h5 class="section-heading">Request details</h5> <h5 class="section-heading">Request details</h5>
<table class="filter-table gf-form-group"> <table class="filter-table gf-form-group">
<tr> <tr>
...@@ -54,14 +56,14 @@ ...@@ -54,14 +56,14 @@
</table> </table>
</div> </div>
<div ng-if="editor.index == 1"> <div ng-if="editor.index == 2">
<h5 ng-show="message">{{message}}</h5> <h5 ng-show="message">{{message}}</h5>
<pre class="small"> <pre class="small">
{{response}} {{response}}
</pre> </pre>
</div> </div>
<div ng-if="editor.index == 2"> <div ng-if="editor.index == 3">
<label>Message:</label> <label>Message:</label>
<pre> <pre>
......
public/app/features/dashboard/partials/panel_info.html deleted 100644 → 0
<div class="modal-body">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-info-circle"></i>
<span class="p-l-1">Panel Description</span>
</h2>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<div class="modal-content markdown-html" ng-bind-html="html">
</div>
</div>
public/app/features/panel/panel_ctrl.ts
...@@ -258,8 +258,13 @@ export class PanelCtrl { ...@@ -258,8 +258,13 @@ export class PanelCtrl {
return ''; return '';
} }
getInfoContent() { getInfoContent(options) {
var markdown = this.error || this.panel.description; var markdown = this.panel.description;
if (options.mode === 'tooltip') {
markdown = this.error || this.panel.description;
}
var linkSrv = this.$injector.get('linkSrv'); var linkSrv = this.$injector.get('linkSrv');
var templateSrv = this.$injector.get('templateSrv'); var templateSrv = this.$injector.get('templateSrv');
var interpolatedMarkdown = templateSrv.replace(markdown, this.panel.scopedVars); var interpolatedMarkdown = templateSrv.replace(markdown, this.panel.scopedVars);
...@@ -279,23 +284,16 @@ export class PanelCtrl { ...@@ -279,23 +284,16 @@ export class PanelCtrl {
return html + '</div>'; return html + '</div>';
} }
openInfo() { openInspector() {
var modalScope = this.$scope.$new(); var modalScope = this.$scope.$new();
modalScope.panel = this.panel; modalScope.panel = this.panel;
modalScope.dashboard = this.dashboard; modalScope.dashboard = this.dashboard;
modalScope.panelInfoHtml = this.getInfoContent({mode: 'inspector'});
if (this.error) { modalScope.inspector = $.extend(true, {}, this.inspector);
modalScope.inspector = $.extend(true, {}, this.inspector); this.publishAppEvent('show-modal', {
this.publishAppEvent('show-modal', { src: 'public/app/features/dashboard/partials/inspector.html',
src: 'public/app/features/dashboard/partials/inspector.html', scope: modalScope
scope: modalScope });
});
} else {
modalScope.html = this.getInfoContent();
this.publishAppEvent('show-modal', {
src: 'public/app/features/dashboard/partials/panel_info.html',
scope: modalScope
});
}
} }
} }
public/app/features/panel/panel_directive.ts
...@@ -10,7 +10,7 @@ var module = angular.module('grafana.directives'); ...@@ -10,7 +10,7 @@ var module = angular.module('grafana.directives');
var panelTemplate = ` var panelTemplate = `
<div class="panel-container"> <div class="panel-container">
<div class="panel-header"> <div class="panel-header">
<span class="panel-info-corner" ng-click="ctrl.openInfo()"> <span class="panel-info-corner">
<i class="fa"></i> <i class="fa"></i>
<span class="panel-info-corner-inner"></span> <span class="panel-info-corner-inner"></span>
</span> </span>
...@@ -65,7 +65,7 @@ module.directive('grafanaPanel', function($rootScope) { ...@@ -65,7 +65,7 @@ module.directive('grafanaPanel', function($rootScope) {
scope: { ctrl: "=" }, scope: { ctrl: "=" },
link: function(scope, elem) { link: function(scope, elem) {
var panelContainer = elem.find('.panel-container'); 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 ctrl = scope.ctrl;
var infoDrop; var infoDrop;
...@@ -144,7 +144,7 @@ module.directive('grafanaPanel', function($rootScope) { ...@@ -144,7 +144,7 @@ module.directive('grafanaPanel', function($rootScope) {
function updatePanelCornerInfo() { function updatePanelCornerInfo() {
var cornerMode = ctrl.getInfoMode(); 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 (cornerMode) {
if (infoDrop) { if (infoDrop) {
...@@ -152,8 +152,10 @@ module.directive('grafanaPanel', function($rootScope) { ...@@ -152,8 +152,10 @@ module.directive('grafanaPanel', function($rootScope) {
} }
infoDrop = new Drop({ infoDrop = new Drop({
target: cornerInfoElem, target: cornerInfoElem[0],
content: ctrl.getInfoContent.bind(ctrl), content: function() {
return ctrl.getInfoContent({mode: 'tooltip'});
},
position: 'right middle', position: 'right middle',
classes: ctrl.error ? 'drop-error' : 'drop-help', classes: ctrl.error ? 'drop-error' : 'drop-help',
openOn: 'hover', openOn: 'hover',
...@@ -165,11 +167,17 @@ module.directive('grafanaPanel', function($rootScope) { ...@@ -165,11 +167,17 @@ module.directive('grafanaPanel', function($rootScope) {
scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], updatePanelCornerInfo); scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], updatePanelCornerInfo);
scope.$watchCollection('ctrl.panel.links', 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('mouseenter', mouseEnter);
elem.on('mouseleave', mouseLeave); elem.on('mouseleave', mouseLeave);
scope.$on('$destroy', function() { scope.$on('$destroy', function() {
elem.off(); elem.off();
cornerInfoElem.off();
if (infoDrop) { if (infoDrop) {
infoDrop.destroy(); infoDrop.destroy();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment