Merge pull request #8459 from prometheus/fix-labelname-style-bug

Fix label name leak into class name

web/ui/react-app/src/pages/targets/EndpointLink.test.tsx

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

web/ui/react-app/src/pages/targets/EndpointLink.tsx

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