mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-03-05 20:59:13 -08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Escape target selector for tooltip on targets page (#6892)

Browse source 
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>
This commit is contained in:
Chris Marchbanks 2020-02-28 12:27:45 -07:00 committed by GitHub
parent d137cddd12
commit 0e78908407
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,7 +25,7 @@ describe('targetLabels', () => {
it('renders a div of series labels', () => { it('renders a div of series labels', () => {
const div = targetLabels.find('div').filterWhere(elem => elem.hasClass('series-labels-container')); const div = targetLabels.find('div').filterWhere(elem => elem.hasClass('series-labels-container'));
expect(div).toHaveLength(1); 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', () => { it('wraps each label in a label badge', () => {

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

@ -20,7 +20,7 @@ const TargetLabels: FC<TargetLabelsProps> = ({ discoveredLabels, labels, idx, sc
const [tooltipOpen, setTooltipOpen] = useState(false); const [tooltipOpen, setTooltipOpen] = useState(false);
const toggle = (): void => setTooltipOpen(!tooltipOpen); const toggle = (): void => setTooltipOpen(!tooltipOpen);
const id = `series-labels-${CSS.escape(scrapePool)}-${idx}`; const id = `series-labels-${scrapePool}-${idx}`;
return ( return (
<> <>
@ -33,7 +33,7 @@ const TargetLabels: FC<TargetLabelsProps> = ({ discoveredLabels, labels, idx, sc
); );
})} })}
</div> </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> <b>Before relabeling:</b>
{formatLabels(discoveredLabels).map((s: string, idx: number) => ( {formatLabels(discoveredLabels).map((s: string, idx: number) => (
<Fragment key={idx}> <Fragment key={idx}>

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

@ -4,7 +4,7 @@ exports[`targetLabels renders discovered labels 1`] = `
<Fragment> <Fragment>
<div <div
className="series-labels-container" className="series-labels-container"
id="series-labels-cortex\\\\/node-exporter_group\\\\/0-1" id="series-labels-cortex/node-exporter_group/0-1"
> >
<Badge <Badge
className="mr-1 instance" className="mr-1 instance"