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

+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');
+  });
+});

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

@@ -4,7 +4,6 @@ import React, { Component } from 'react';
 import { PrometheusDatasource } from '../datasource';
 import { PromQuery } from '../types';
 import { DataQueryRequest, PanelData } from '@grafana/data';
-import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 
 interface Props {
   datasource: PrometheusDatasource;
@@ -29,19 +28,13 @@ export default class PromLink extends Component<Props, State> {
   }
 
   async getExternalLink(panelData: PanelData): Promise<string> {
-    const { query } = this.props;
+    const { query, datasource } = this.props;
     const { request } = panelData;
 
     if (!request) {
       return '';
     }
 
-    const target = request.targets.length > 0 ? request.targets[0] : ({ datasource: null } as any);
-    const datasourceName = target.datasource;
-    const datasource: PrometheusDatasource = datasourceName
-      ? (((await getDatasourceSrv().get(datasourceName)) as any) as PrometheusDatasource)
-      : (this.props.datasource as PrometheusDatasource);
-
     const range = request.range;
     const start = datasource.getPrometheusTime(range.from, false);
     const end = datasource.getPrometheusTime(range.to, true);