From b986f744e44d2906360e94d8f2c3d43f428ae577 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 23 Oct 2017 10:15:58 +0200
Subject: [PATCH] fix: escape series name in graph legend, added aliasEscaped
 to time series model to reuse escape, fixes #9615

---
 public/app/core/time_series2.ts                   | 4 ++--
 public/app/features/panel/query_troubleshooter.ts | 7 ++-----
 public/app/plugins/panel/graph/graph_tooltip.js   | 4 ++--
 public/app/plugins/panel/graph/legend.js          | 2 +-
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/public/app/core/time_series2.ts b/public/app/core/time_series2.ts
index 1c4c94da6fb..0f3dcbc1171 100644
--- a/public/app/core/time_series2.ts
+++ b/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 = {};
diff --git a/public/app/features/panel/query_troubleshooter.ts b/public/app/features/panel/query_troubleshooter.ts
index 39c9cb0055b..60baf54c18f 100644
--- a/public/app/features/panel/query_troubleshooter.ts
+++ b/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>
diff --git a/public/app/plugins/panel/graph/graph_tooltip.js b/public/app/plugins/panel/graph/graph_tooltip.js
index ba1458d66d0..89197717e42 100644
--- a/public/app/plugins/panel/graph/graph_tooltip.js
+++ b/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];
diff --git a/public/app/plugins/panel/graph/legend.js b/public/app/plugins/panel/graph/legend.js
index 1a29743b09d..265efa05748 100644
--- a/public/app/plugins/panel/graph/legend.js
+++ b/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);