Prometheus: Fix validate selector in metrics browser (#38921)

* Fix match[] param in loki and prometheus

* Update loki series match param

public/app/plugins/datasource/loki/datasource.ts

@@ -375,7 +375,7 @@ export class LokiDatasource extends DataSourceApi<LokiQuery, LokiOptions> {
     const timeParams = this.getTimeRangeParams();
     const params = {
       ...timeParams,
-      match: expr,
+      'match[]': expr,
     };
     const url = `${LOKI_ENDPOINT}/series`;
     const streams = new Set();

public/app/plugins/datasource/loki/language_provider.test.ts

@@ -87,6 +87,21 @@ describe('Language completion provider', () => {
     });
   });
 
+  describe('fetchSeries', () => {
+    it('should use match[] parameter', () => {
+      const datasource = makeMockLokiDatasource({}, { '{foo="bar"}': [{ label1: 'label_val1' }] });
+      const languageProvider = new LanguageProvider(datasource);
+      const fetchSeries = languageProvider.fetchSeries;
+      const requestSpy = jest.spyOn(languageProvider, 'request');
+      fetchSeries('{job="grafana"}');
+      expect(requestSpy).toHaveBeenCalledWith('/loki/api/v1/series', {
+        end: 1560163909000,
+        'match[]': '{job="grafana"}',
+        start: 1560153109000,
+      });
+    });
+  });
+
   describe('label key suggestions', () => {
     it('returns all label suggestions on empty selector', async () => {
       const datasource = makeMockLokiDatasource({ label1: [], label2: [] });

public/app/plugins/datasource/loki/language_provider.ts

@@ -454,7 +454,7 @@ export default class LokiLanguageProvider extends LanguageProvider {
     if (!value) {
       // Clear value when requesting new one. Empty object being truthy also makes sure we don't request twice.
       this.seriesCache.set(cacheKey, {});
-      const params = { match, start, end };
+      const params = { 'match[]': match, start, end };
       const data = await this.request(url, params);
       const { values } = processLabels(data);
       value = values;
@@ -470,7 +470,7 @@ export default class LokiLanguageProvider extends LanguageProvider {
   fetchSeries = async (match: string): Promise<Array<Record<string, string>>> => {
     const url = '/loki/api/v1/series';
     const { start, end } = this.datasource.getTimeRangeParams();
-    const params = { match, start, end };
+    const params = { 'match[]': match, start, end };
     return await this.request(url, params);
   };
 

public/app/plugins/datasource/loki/mocks.ts

@@ -1,5 +1,5 @@
 import { LokiDatasource, LOKI_ENDPOINT } from './datasource';
-import { AbsoluteTimeRange, DataSourceSettings } from '@grafana/data';
+import { DataSourceSettings } from '@grafana/data';
 import { LokiOptions } from './types';
 import { createDatasourceSettings } from '../../../features/datasources/mocks';
 
@@ -20,9 +20,9 @@ export function makeMockLokiDatasource(labelsAndValues: Labels, series?: SeriesF
   const lokiSeriesEndpointRegex = /^\/loki\/api\/v1\/series/;
 
   const lokiLabelsEndpoint = `${LOKI_ENDPOINT}/label`;
-  const rangeMock: AbsoluteTimeRange = {
+  const rangeMock = {
-    from: 1560153109000,
+    start: 1560153109000,
-    to: 1560163909000,
+    end: 1560163909000,
   };
 
   const labels = Object.keys(labelsAndValues);
@@ -37,7 +37,7 @@ export function makeMockLokiDatasource(labelsAndValues: Labels, series?: SeriesF
         if (labelsMatch) {
           return labelsAndValues[labelsMatch[1]] || [];
         } else if (seriesMatch && series && params) {
-          return series[params.match] || [];
+          return series[params['match[]']] || [];
         } else {
           throw new Error(`Unexpected url error, ${url}`);
         }

public/app/plugins/datasource/prometheus/language_provider.test.ts

@@ -64,6 +64,21 @@ describe('Language completion provider', () => {
     });
   });
 
+  describe('fetchSeries', () => {
+    it('should use match[] parameter', () => {
+      const languageProvider = new LanguageProvider(datasource);
+      const fetchSeries = languageProvider.fetchSeries;
+      const requestSpy = jest.spyOn(languageProvider, 'request');
+      fetchSeries('{job="grafana"}');
+      expect(requestSpy).toHaveBeenCalled();
+      expect(requestSpy).toHaveBeenCalledWith(
+        '/api/v1/series',
+        {},
+        { end: '1', 'match[]': '{job="grafana"}', start: '0' }
+      );
+    });
+  });
+
   describe('empty query suggestions', () => {
     it('returns no suggestions on empty context', async () => {
       const instance = new LanguageProvider(datasource);

public/app/plugins/datasource/prometheus/language_provider.ts

@@ -494,7 +494,7 @@ export default class PromQlLanguageProvider extends LanguageProvider {
   fetchSeries = async (match: string): Promise<Array<Record<string, string>>> => {
     const url = '/api/v1/series';
     const range = this.datasource.getTimeRangeParams();
-    const params = { ...range, match };
+    const params = { ...range, 'match[]': match };
     return await this.request(url, {}, params);
   };