Fix label name leak into class name

Similar to https://github.com/prometheus/prometheus/pull/7902, this could lead
to style bugs for label names that correspond to styled CSS class names.

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2021-02-08 22:24:49 +01:00
parent 885674c5c0
commit b6544c9048
2 changed files with 6 additions and 6 deletions

View file

@ -24,10 +24,10 @@ describe('EndpointLink', () => {
expect(anchor.children().text()).toEqual('http://100.99.128.71:9115/probe');
expect(endpointLink.find('br')).toHaveLength(1);
expect(badges).toHaveLength(2);
const moduleLabel = badges.filterWhere(badge => badge.hasClass('module'));
expect(moduleLabel.children().text()).toEqual('module="http_2xx"');
const targetLabel = badges.filterWhere(badge => badge.hasClass('target'));
expect(targetLabel.children().text()).toEqual('target="http://some-service"');
const moduleLabel = badges.filterWhere(badge => badge.children().text() === 'module="http_2xx"');
expect(moduleLabel.length).toEqual(1);
const targetLabel = badges.filterWhere(badge => badge.children().text() === 'target="http://some-service"');
expect(targetLabel.length).toEqual(1);
});
it('renders an alert if url is invalid', () => {
@ -37,7 +37,7 @@ describe('EndpointLink', () => {
});
it('handles params with multiple values correctly', () => {
const consoleSpy = jest.spyOn(console, "warn");
const consoleSpy = jest.spyOn(console, 'warn');
const endpoint = `http://example.com/federate?match[]={__name__="name1"}&match[]={__name__="name2"}&match[]={__name__="name3"}`;
const globalURL = 'http://example.com/federate';
const endpointLink = mount(<EndpointLink endpoint={endpoint} globalUrl={globalURL} />);

View file

@ -27,7 +27,7 @@ const EndpointLink: FC<EndpointLinkProps> = ({ endpoint, globalUrl }) => {
{params.length > 0 ? <br /> : null}
{params.map(([labelName, labelValue]: [string, string]) => {
return (
<Badge color="primary" className={`mr-1 ${labelName}`} key={`${labelName}/${labelValue}`}>
<Badge color="primary" className="mr-1" key={`${labelName}/${labelValue}`}>
{`${labelName}="${labelValue}"`}
</Badge>
);