From 01daddeb75097e60803ae4919aec62c3db90fd15 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Sun, 6 Sep 2020 22:10:25 +0200
Subject: [PATCH] Fix styling bug for target labels with special names (#7902)

Adding the label name as a CSS class can break styling and other
behavior when the label name has a special meaning in CSS. E.g. the
"container" label was displayed at 100% width because it was interpreted
to be a bootstrap container layout element.

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 web/ui/react-app/src/pages/targets/TargetLabels.test.tsx    | 6 ++++--
 web/ui/react-app/src/pages/targets/TargetLabels.tsx         | 2 +-
 .../pages/targets/__snapshots__/TargetLabels.test.tsx.snap  | 6 +++---
 3 files changed, 8 insertions(+), 6 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 e71d311b9..1f7d56dc4 100644
--- a/web/ui/react-app/src/pages/targets/TargetLabels.test.tsx
+++ b/web/ui/react-app/src/pages/targets/TargetLabels.test.tsx
@@ -31,8 +31,10 @@ describe('targetLabels', () => {
   it('wraps each label in a label badge', () => {
     const l: { [key: string]: string } = defaultProps.labels;
     Object.keys(l).forEach((labelName: string): void => {
-      const badge = targetLabels.find(Badge).filterWhere(badge => badge.hasClass(labelName));
-      expect(badge.children().text()).toEqual(`${labelName}="${l[labelName]}"`);
+      const badge = targetLabels
+        .find(Badge)
+        .filterWhere(badge => badge.children().text() === `${labelName}="${l[labelName]}"`);
+      expect(badge).toHaveLength(1);
     });
     expect(targetLabels.find(Badge)).toHaveLength(3);
   });
diff --git a/web/ui/react-app/src/pages/targets/TargetLabels.tsx b/web/ui/react-app/src/pages/targets/TargetLabels.tsx
index 45376a182..fdc7ae070 100644
--- a/web/ui/react-app/src/pages/targets/TargetLabels.tsx
+++ b/web/ui/react-app/src/pages/targets/TargetLabels.tsx
@@ -27,7 +27,7 @@ const TargetLabels: FC<TargetLabelsProps> = ({ discoveredLabels, labels, idx, sc
       <div id={id} className="series-labels-container">
         {Object.keys(labels).map(labelName => {
           return (
-            <Badge color="primary" className={`mr-1 ${labelName}`} key={labelName}>
+            <Badge color="primary" className="mr-1" key={labelName}>
               {`${labelName}="${labels[labelName]}"`}
             </Badge>
           );
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 7613249cb..76c139feb 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
@@ -7,7 +7,7 @@ exports[`targetLabels renders discovered labels 1`] = `
     id="series-labels-cortex/node-exporter_group/0-1"
   >
     <Badge
-      className="mr-1 instance"
+      className="mr-1"
       color="primary"
       key="instance"
       pill={false}
@@ -16,7 +16,7 @@ exports[`targetLabels renders discovered labels 1`] = `
       instance="localhost:9100"
     </Badge>
     <Badge
-      className="mr-1 job"
+      className="mr-1"
       color="primary"
       key="job"
       pill={false}
@@ -25,7 +25,7 @@ exports[`targetLabels renders discovered labels 1`] = `
       job="node_exporter"
     </Badge>
     <Badge
-      className="mr-1 foo"
+      className="mr-1"
       color="primary"
       key="foo"
       pill={false}