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

public/app/core/time_series2.ts

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

public/app/features/panel/query_troubleshooter.ts

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

public/app/plugins/panel/graph/graph_tooltip.js

@@ -127,7 +127,7 @@ function ($, core) {
           value: value,
           hoverIndex: hoverIndex,
           color: series.color,
-          label: series.label,
+          label: series.aliasEscaped,
           time: pointTime,
           distance: hoverDistance,
           index: i
@@ -264,7 +264,7 @@ function ($, core) {
       else if (item) {
         series = seriesList[item.seriesIndex];
         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') {
           value = item.datapoint[1] - item.datapoint[2];

public/app/plugins/panel/graph/legend.js

@@ -169,7 +169,7 @@ function (angular, _, $) {
             html += '<i class="fa fa-minus pointer" style="color:' + series.color + '"></i>';
             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) {
               var avg = series.formatValue(series.stats.avg);