Unverified Commit 01daddeb by Julius Volz Committed by GitHub

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: 's avatarJulius Volz <julius.volz@gmail.com>
parent a399227a
......@@ -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);
});
......
......@@ -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>
);
......
......@@ -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}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment