From 0e789084073c0db56562bf26b51704224258eb4f Mon Sep 17 00:00:00 2001
From: Chris Marchbanks <csmarchbanks@gmail.com>
Date: Fri, 28 Feb 2020 12:27:45 -0700
Subject: [PATCH] Escape target selector for tooltip on targets page (#6892)

This fixes an issue where the /new/targets page will not load when there
are jobs with invalid CSS characters in them, such as the
namespace/service/0 form used by the Prometheus Operator.

Signed-off-by: Chris Marchbanks <csmarchbanks@gmail.com>
---
 web/ui/react-app/src/pages/targets/TargetLabels.test.tsx      | 2 +-
 web/ui/react-app/src/pages/targets/TargetLabels.tsx           | 4 ++--
 .../pages/targets/__snapshots__/TargetLabels.test.tsx.snap    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/ui/react-app/src/pages/targets/TargetLabels.test.tsx b/web/ui/react-app/src/pages/targets/TargetLabels.test.tsx
index c25e95d8f..e71d311b9 100644
--- a/web/ui/react-app/src/pages/targets/TargetLabels.test.tsx
+++ b/web/ui/react-app/src/pages/targets/TargetLabels.test.tsx
@@ -25,7 +25,7 @@ describe('targetLabels', () => {
   it('renders a div of series labels', () => {
     const div = targetLabels.find('div').filterWhere(elem => elem.hasClass('series-labels-container'));
     expect(div).toHaveLength(1);
-    expect(div.prop('id')).toEqual('series-labels-cortex\\/node-exporter_group\\/0-1');
+    expect(div.prop('id')).toEqual('series-labels-cortex/node-exporter_group/0-1');
   });
 
   it('wraps each label in a label badge', () => {
diff --git a/web/ui/react-app/src/pages/targets/TargetLabels.tsx b/web/ui/react-app/src/pages/targets/TargetLabels.tsx
index 4fffdcfb2..45376a182 100644
--- a/web/ui/react-app/src/pages/targets/TargetLabels.tsx
+++ b/web/ui/react-app/src/pages/targets/TargetLabels.tsx
@@ -20,7 +20,7 @@ const TargetLabels: FC<TargetLabelsProps> = ({ discoveredLabels, labels, idx, sc
   const [tooltipOpen, setTooltipOpen] = useState(false);
 
   const toggle = (): void => setTooltipOpen(!tooltipOpen);
-  const id = `series-labels-${CSS.escape(scrapePool)}-${idx}`;
+  const id = `series-labels-${scrapePool}-${idx}`;
 
   return (
     <>
@@ -33,7 +33,7 @@ const TargetLabels: FC<TargetLabelsProps> = ({ discoveredLabels, labels, idx, sc
           );
         })}
       </div>
-      <Tooltip isOpen={tooltipOpen} target={id} toggle={toggle} style={{ maxWidth: 'none', textAlign: 'left' }}>
+      <Tooltip isOpen={tooltipOpen} target={CSS.escape(id)} toggle={toggle} style={{ maxWidth: 'none', textAlign: 'left' }}>
         <b>Before relabeling:</b>
         {formatLabels(discoveredLabels).map((s: string, idx: number) => (
           <Fragment key={idx}>
diff --git a/web/ui/react-app/src/pages/targets/__snapshots__/TargetLabels.test.tsx.snap b/web/ui/react-app/src/pages/targets/__snapshots__/TargetLabels.test.tsx.snap
index 1d43e29f5..7613249cb 100644
--- a/web/ui/react-app/src/pages/targets/__snapshots__/TargetLabels.test.tsx.snap
+++ b/web/ui/react-app/src/pages/targets/__snapshots__/TargetLabels.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`targetLabels renders discovered labels 1`] = `
 <Fragment>
   <div
     className="series-labels-container"
-    id="series-labels-cortex\\\\/node-exporter_group\\\\/0-1"
+    id="series-labels-cortex/node-exporter_group/0-1"
   >
     <Badge
       className="mr-1 instance"