mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-01-12 14:27:27 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix styling bug for target labels with special names (#7902)

Browse source 
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>
This commit is contained in:
Julius Volz 2020-09-06 22:10:25 +02:00 committed by GitHub
parent a399227a9f
commit 01daddeb75
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web/ui/react-app/src/pages/targets/TargetLabels.test.tsx
View file

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

2
web/ui/react-app/src/pages/targets/TargetLabels.tsx
View file

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

6
web/ui/react-app/src/pages/targets/__snapshots__/TargetLabels.test.tsx.snap
View file

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