Prometheus: Fix prom links in mixed mode (#26244)

* Prometheus: Fix prom links in mixed mode

* Modify PromLink with code style changes

public/app/plugins/datasource/prometheus/components/PromLink.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import PromLink from './PromLink';
+
+const getPanelData = () => ({
+  request: {
+    targets: [
+      { refId: 'A', datasource: 'prom1' },
+      { refId: 'B', datasource: 'prom2' },
+    ],
+    range: {
+      to: {
+        utc: () => ({
+          format: jest.fn(),
+        }),
+      },
+    },
+  },
+});
+describe('PromLink component', () => {
+  it('should show different link when there are 2 components with the same panel data', async () => {
+    const Comp = () => (
+      <div>
+        <PromLink
+          datasource={
+            { getPrometheusTime: () => 123, createQuery: () => ({ expr: 'up', step: 15 }), directUrl: 'prom1' } as any
+          }
+          panelData={getPanelData() as any}
+          query={{} as any}
+        />
+        <PromLink
+          datasource={
+            { getPrometheusTime: () => 123, createQuery: () => ({ expr: 'up', step: 15 }), directUrl: 'prom2' } as any
+          }
+          panelData={getPanelData() as any}
+          query={{} as any}
+        />
+      </div>
+    );
+    const wrapper = mount(<Comp />);
+    // Trigger componentDidUpdate
+    wrapper.setProps('s');
+    await Promise.resolve();
+
+    expect(
+      wrapper
+        .find('a')
+        .first()
+        .getDOMNode<HTMLAnchorElement>().href
+    ).toMatch('prom1');
+    expect(
+      wrapper
+        .find('a')
+        .last()
+        .getDOMNode<HTMLAnchorElement>().href
+    ).toMatch('prom2');
+  });
+});