Prometheus: Add custom query parameters when creating PromLink url (#41213)

* Prometheus: Add custom query parameters when creating PromLink url

* Fix variable as suggested and add new test

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

@@ -44,6 +44,18 @@ const getDataSource = (datasourceOverrides?: Partial<PrometheusDatasource>) => {
   return (Object.assign(datasource, datasourceOverrides) as unknown) as PrometheusDatasource;
 };
 
+const getDataSourceWithCustomQueryParameters = (datasourceOverrides?: Partial<PrometheusDatasource>) => {
+  const datasource = {
+    getPrometheusTime: () => 124,
+    createQuery: () => ({ expr: 'up', step: 20 }),
+    directUrl: 'prom3',
+    getRateIntervalScopedVariable: jest.fn(() => ({ __rate_interval: { text: '60s', value: '60s' } })),
+    customQueryParameters: new URLSearchParams('g0.foo=1'),
+  };
+
+  return (Object.assign(datasource, datasourceOverrides) as unknown) as PrometheusDatasource;
+};
+
 describe('PromLink', () => {
   it('should show correct link for 1 component', async () => {
     render(
@@ -85,4 +97,19 @@ describe('PromLink', () => {
     );
     expect(screen.getByText('Prometheus')).toHaveAttribute('href', 'about:blank');
   });
+  it('should add custom query parameters when it is configured', async () => {
+    render(
+      <div>
+        <PromLink
+          datasource={getDataSourceWithCustomQueryParameters()}
+          panelData={getPanelData()}
+          query={{} as PromQuery}
+        />
+      </div>
+    );
+    expect(screen.getByText('Prometheus')).toHaveAttribute(
+      'href',
+      'prom3/graph?g0.foo=1&g0.expr=up&g0.range_input=0s&g0.end_input=undefined&g0.step_input=20&g0.tab=0'
+    );
+  });
 });

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

@@ -44,8 +44,17 @@ const PromLink: FC<Props> = ({ panelData, query, datasource }) => {
           scopedVars: enrichedScopedVars,
         } as DataQueryRequest<PromQuery>;
 
+        const customQueryParameters: { [key: string]: string } = {};
+        if (datasource.customQueryParameters) {
+          for (const [k, v] of datasource.customQueryParameters) {
+            customQueryParameters[k] = v;
+          }
+        }
+
         const queryOptions = datasource.createQuery(query, options, start, end);
+
         const expr = {
+          ...customQueryParameters,
           'g0.expr': queryOptions.expr,
           'g0.range_input': rangeDiff + 's',
           'g0.end_input': endTime,