Skip to content

Commit a361d1f

Browse files
torkelotorkelo
committed
feat(panel): refinements for panel help text, made the inspector the home for the model version
1 parent 2c05237 commit a361d1f

File tree

5 files changed

+36
-45
lines changed

5 files changed

+36
-45
lines changed

‎public/app/core/controllers/inspect_ctrl.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,13 @@ function (angular, _, $, coreModule) {
4848
}
4949

5050
if (model.error.stack) {
51-
$scope.editor.index = 2;
51+
$scope.editor.index = 3;
5252
$scope.stack_trace = model.error.stack;
5353
$scope.message = model.error.message;
5454
}
5555

5656
if (model.error.config && model.error.config.data) {
57-
$scope.editor.index = 1;
57+
$scope.editor.index = 2;
5858

5959
if (_.isString(model.error.config.data)) {
6060
$scope.request_parameters = getParametersFromQueryString(model.error.config.data);

‎public/app/features/dashboard/partials/inspector.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<div class="modal-body" ng-controller="InspectCtrl" ng-init="init()">
22
<div class="modal-header">
33
<h2 class="modal-header-title">
4-
<i class="fa fa-frown-o"></i>
4+
<i class="fa fa-info-circle"></i>
55
<span class="p-l-1">Inspector</span>
66
</h2>
77

88
<ul class="gf-tabs">
9-
<li class="gf-tabs-item" ng-repeat="tab in ['Request', 'Response', 'JS Error']">
9+
<li class="gf-tabs-item" ng-repeat="tab in ['Panel Description', 'Request', 'Response', 'JS Error']">
1010
<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
1111
{{::tab}}
1212
</a>
@@ -19,8 +19,10 @@ <h2 class="modal-header-title">
1919
</div>
2020

2121
<div class="modal-content">
22+
<div ng-if="editor.index == 0" ng-bind-html="panelInfoHtml">
23+
</div>
2224

23-
<div ng-if="editor.index == 0">
25+
<div ng-if="editor.index == 1">
2426
<h5 class="section-heading">Request details</h5>
2527
<table class="filter-table gf-form-group">
2628
<tr>
@@ -54,14 +56,14 @@ <h5 class="section-heading">Request parameters</h5>
5456
</table>
5557
</div>
5658

57-
<div ng-if="editor.index == 1">
59+
<div ng-if="editor.index == 2">
5860
<h5 ng-show="message">{{message}}</h5>
5961
<pre class="small">
6062
{{response}}
6163
</pre>
6264
</div>
6365

64-
<div ng-if="editor.index == 2">
66+
<div ng-if="editor.index == 3">
6567

6668
<label>Message:</label>
6769
<pre>

‎public/app/features/dashboard/partials/panel_info.html

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎public/app/features/panel/panel_ctrl.ts

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -258,8 +258,13 @@ export class PanelCtrl {
258258
return '';
259259
}
260260

261-
getInfoContent() {
262-
var markdown = this.error || this.panel.description;
261+
getInfoContent(options) {
262+
var markdown = this.panel.description;
263+
264+
if (options.mode === 'tooltip') {
265+
markdown = this.error || this.panel.description;
266+
}
267+
263268
var linkSrv = this.$injector.get('linkSrv');
264269
var templateSrv = this.$injector.get('templateSrv');
265270
var interpolatedMarkdown = templateSrv.replace(markdown, this.panel.scopedVars);
@@ -279,23 +284,16 @@ export class PanelCtrl {
279284
return html + '</div>';
280285
}
281286

282-
openInfo() {
287+
openInspector() {
283288
var modalScope = this.$scope.$new();
284289
modalScope.panel = this.panel;
285290
modalScope.dashboard = this.dashboard;
291+
modalScope.panelInfoHtml = this.getInfoContent({mode: 'inspector'});
286292

287-
if (this.error) {
288-
modalScope.inspector = $.extend(true, {}, this.inspector);
289-
this.publishAppEvent('show-modal', {
290-
src: 'public/app/features/dashboard/partials/inspector.html',
291-
scope: modalScope
292-
});
293-
} else {
294-
modalScope.html = this.getInfoContent();
295-
this.publishAppEvent('show-modal', {
296-
src: 'public/app/features/dashboard/partials/panel_info.html',
297-
scope: modalScope
298-
});
299-
}
293+
modalScope.inspector = $.extend(true, {}, this.inspector);
294+
this.publishAppEvent('show-modal', {
295+
src: 'public/app/features/dashboard/partials/inspector.html',
296+
scope: modalScope
297+
});
300298
}
301299
}

‎public/app/features/panel/panel_directive.ts

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ var module = angular.module('grafana.directives');
1010
var panelTemplate = `
1111
<div class="panel-container">
1212
<div class="panel-header">
13-
<span class="panel-info-corner" ng-click="ctrl.openInfo()">
13+
<span class="panel-info-corner">
1414
<i class="fa"></i>
1515
<span class="panel-info-corner-inner"></span>
1616
</span>
@@ -65,7 +65,7 @@ module.directive('grafanaPanel', function($rootScope) {
6565
scope: { ctrl: "=" },
6666
link: function(scope, elem) {
6767
var panelContainer = elem.find('.panel-container');
68-
var cornerInfoElem = elem.find('.panel-info-corner')[0];
68+
var cornerInfoElem = elem.find('.panel-info-corner');
6969
var ctrl = scope.ctrl;
7070
var infoDrop;
7171

@@ -144,16 +144,18 @@ module.directive('grafanaPanel', function($rootScope) {
144144

145145
function updatePanelCornerInfo() {
146146
var cornerMode = ctrl.getInfoMode();
147-
cornerInfoElem.className = 'panel-info-corner + panel-info-corner--' + cornerMode;
147+
cornerInfoElem[0].className = 'panel-info-corner + panel-info-corner--' + cornerMode;
148148

149149
if (cornerMode) {
150150
if (infoDrop) {
151151
infoDrop.destroy();
152152
}
153153

154154
infoDrop = new Drop({
155-
target: cornerInfoElem,
156-
content: ctrl.getInfoContent.bind(ctrl),
155+
target: cornerInfoElem[0],
156+
content: function() {
157+
return ctrl.getInfoContent({mode: 'tooltip'});
158+
},
157159
position: 'right middle',
158160
classes: ctrl.error ? 'drop-error' : 'drop-help',
159161
openOn: 'hover',
@@ -165,11 +167,17 @@ module.directive('grafanaPanel', function($rootScope) {
165167
scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], updatePanelCornerInfo);
166168
scope.$watchCollection('ctrl.panel.links', updatePanelCornerInfo);
167169

170+
cornerInfoElem.on('click', function() {
171+
infoDrop.close();
172+
scope.$apply(ctrl.openInspector.bind(ctrl));
173+
});
174+
168175
elem.on('mouseenter', mouseEnter);
169176
elem.on('mouseleave', mouseLeave);
170177

171178
scope.$on('$destroy', function() {
172179
elem.off();
180+
cornerInfoElem.off();
173181

174182
if (infoDrop) {
175183
infoDrop.destroy();

0 commit comments

Comments
 (0)