Loki: Fix uncaught errors if `labelKey` contains special characters (#49887)

* added regex check of labelKeys

- labelKeys should not contain any special characters
- added encoding of labelKeys in the URL
- don't offer autocomplete if label with special characters is detected

* removed additional regex check for labels

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

@@ -248,6 +248,15 @@ describe('Language completion provider', () => {
       expect(requestSpy).toHaveBeenCalledTimes(1);
       expect(nextLabelValues).toEqual(['label1_val1', 'label1_val2']);
     });
+
+    it('should encode special characters', async () => {
+      const datasource = makeMockLokiDatasource({ '`\\"testkey': ['label1_val1', 'label1_val2'], label2: [] });
+      const provider = await getLanguageProvider(datasource);
+      const requestSpy = jest.spyOn(provider, 'request');
+      await provider.fetchLabelValues('`\\"testkey');
+
+      expect(requestSpy).toHaveBeenCalledWith('label/%60%5C%22testkey/values', expect.any(Object));
+    });
   });
 });
 

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

@@ -439,7 +439,8 @@ export default class LokiLanguageProvider extends LanguageProvider {
   }
 
   async fetchLabelValues(key: string): Promise<string[]> {
-    const interpolatedKey = this.datasource.interpolateString(key);
+    const interpolatedKey = encodeURIComponent(this.datasource.interpolateString(key));
+
     const url = `label/${interpolatedKey}/values`;
     const rangeParams = this.datasource.getTimeRangeParams();
     const { start, end } = rangeParams;

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

@@ -18,7 +18,8 @@ interface SeriesForSelector {
 }
 
 export function makeMockLokiDatasource(labelsAndValues: Labels, series?: SeriesForSelector): LokiDatasource {
-  const lokiLabelsAndValuesEndpointRegex = /^label\/(\w*)\/values/;
+  // added % to allow urlencoded labelKeys. Note, that this is not confirm with Loki, as loki does not allow specialcharacters in labelKeys, but needed for tests.
+  const lokiLabelsAndValuesEndpointRegex = /^label\/([%\w]*)\/values/;
   const lokiSeriesEndpointRegex = /^series/;
 
   const lokiLabelsEndpoint = 'labels';