fix: escape series name in graph legend, added aliasEscaped to time series model to reuse escape, fixes #9615

This commit is contained in:
Torkel Ödegaard 2017-10-23 10:15:58 +02:00
parent 9cce5217d0
commit b986f744e4
4 changed files with 7 additions and 10 deletions

View File

@ -1,5 +1,3 @@
///<reference path="../headers/common.d.ts" />
import kbn from 'app/core/utils/kbn'; import kbn from 'app/core/utils/kbn';
import _ from 'lodash'; import _ from 'lodash';
@ -23,6 +21,7 @@ export default class TimeSeries {
id: string; id: string;
label: string; label: string;
alias: string; alias: string;
aliasEscaped: string;
color: string; color: string;
valueFormater: any; valueFormater: any;
stats: any; stats: any;
@ -52,6 +51,7 @@ export default class TimeSeries {
this.label = opts.alias; this.label = opts.alias;
this.id = opts.alias; this.id = opts.alias;
this.alias = opts.alias; this.alias = opts.alias;
this.aliasEscaped = _.escape(opts.alias);
this.color = opts.color; this.color = opts.color;
this.valueFormater = kbn.valueFormats.none; this.valueFormater = kbn.valueFormats.none;
this.stats = {}; this.stats = {};

View File

@ -21,11 +21,8 @@ const template = `
<div class="query-troubleshooter-json"></div> <div class="query-troubleshooter-json"></div>
</div> </div>
<div class="query-troubleshooter__body" ng-show="ctrl.isMocking"> <div class="query-troubleshooter__body" ng-show="ctrl.isMocking">
<div class="gf-form p-l-1"> <div class="gf-form p-l-1 gf-form--v-stretch">
<div class="gf-form gf-form--v-stretch"> <textarea class="gf-form-input" style="width: 95%" rows="10" ng-model="ctrl.mockedResponse" placeholder="JSON"></textarea>
<span class="gf-form-label width-10">Response JSON</span>
<textarea class="gf-form-input width-25" rows="10" ng-model="ctrl.mockedResponse" placeholder="JSON"></textarea>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -127,7 +127,7 @@ function ($, core) {
value: value, value: value,
hoverIndex: hoverIndex, hoverIndex: hoverIndex,
color: series.color, color: series.color,
label: series.label, label: series.aliasEscaped,
time: pointTime, time: pointTime,
distance: hoverDistance, distance: hoverDistance,
index: i index: i
@ -264,7 +264,7 @@ function ($, core) {
else if (item) { else if (item) {
series = seriesList[item.seriesIndex]; series = seriesList[item.seriesIndex];
group = '<div class="graph-tooltip-list-item"><div class="graph-tooltip-series-name">'; group = '<div class="graph-tooltip-list-item"><div class="graph-tooltip-series-name">';
group += '<i class="fa fa-minus" style="color:' + item.series.color +';"></i> ' + series.label + ':</div>'; group += '<i class="fa fa-minus" style="color:' + item.series.color +';"></i> ' + series.aliasEscaped + ':</div>';
if (panel.stack && panel.tooltip.value_type === 'individual') { if (panel.stack && panel.tooltip.value_type === 'individual') {
value = item.datapoint[1] - item.datapoint[2]; value = item.datapoint[1] - item.datapoint[2];

View File

@ -169,7 +169,7 @@ function (angular, _, $) {
html += '<i class="fa fa-minus pointer" style="color:' + series.color + '"></i>'; html += '<i class="fa fa-minus pointer" style="color:' + series.color + '"></i>';
html += '</div>'; html += '</div>';
html += '<a class="graph-legend-alias pointer" title="' + _.escape(series.label) + '">' + _.escape(series.label) + '</a>'; html += '<a class="graph-legend-alias pointer" title="' + series.aliasEscaped + '">' + series.aliasEscaped + '</a>';
if (panel.legend.values) { if (panel.legend.values) {
var avg = series.formatValue(series.stats.avg); var avg = series.formatValue(series.stats.avg);