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

@@ -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);
   });

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>
           );

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}