Datasource/Loki: Fixes issue where cached log values weren't merged when labels were refreshed (#24101)

* Datasource/Loki: Fixes issue where cached log values weren't merged when labels were refreshed

Closes #24087

public/app/plugins/datasource/loki/components/__snapshots__/LokiExploreQueryEditor.test.tsx.snap

@@ -54,6 +54,7 @@ exports[`LokiExploreQueryEditor should render component 1`] = `
   datasource={
     Object {
       "languageProvider": LokiLanguageProvider {
+        "addLabelValuesToOptions": [Function],
         "cleanText": [Function],
         "datasource": [Circular],
         "fetchSeriesLabels": [Function],

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

@@ -144,6 +144,40 @@ describe('Language completion provider', () => {
       ]);
     });
   });
+
+  describe('label values', () => {
+    it('should fetch label values if not cached', async () => {
+      const absoluteRange: AbsoluteTimeRange = {
+        from: 0,
+        to: 5000,
+      };
+
+      const datasource = makeMockLokiDatasource({ testkey: ['label1_val1', 'label1_val2'], label2: [] });
+      const provider = await getLanguageProvider(datasource);
+      const requestSpy = jest.spyOn(provider, 'request');
+      const labelValues = await provider.fetchLabelValues('testkey', absoluteRange);
+      expect(requestSpy).toHaveBeenCalled();
+      expect(labelValues).toEqual(['label1_val1', 'label1_val2']);
+    });
+
+    it('should return cached values', async () => {
+      const absoluteRange: AbsoluteTimeRange = {
+        from: 0,
+        to: 5000,
+      };
+
+      const datasource = makeMockLokiDatasource({ testkey: ['label1_val1', 'label1_val2'], label2: [] });
+      const provider = await getLanguageProvider(datasource);
+      const requestSpy = jest.spyOn(provider, 'request');
+      const labelValues = await provider.fetchLabelValues('testkey', absoluteRange);
+      expect(requestSpy).toHaveBeenCalledTimes(1);
+      expect(labelValues).toEqual(['label1_val1', 'label1_val2']);
+
+      const nextLabelValues = await provider.fetchLabelValues('testkey', absoluteRange);
+      expect(requestSpy).toHaveBeenCalledTimes(1);
+      expect(nextLabelValues).toEqual(['label1_val1', 'label1_val2']);
+    });
+  });
 });
 
 describe('Request URL', () => {

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

@@ -449,6 +449,7 @@ export default class LokiLanguageProvider extends LanguageProvider {
 
     const cacheKey = this.generateCacheKey(url, start, end, key);
     const params = { start, end };
+
     let value = this.labelsCache.get(cacheKey);
     if (!value) {
       try {
@@ -459,20 +460,24 @@ export default class LokiLanguageProvider extends LanguageProvider {
         value = values;
         this.labelsCache.set(cacheKey, value);
 
-        // Add to label options
+        this.logLabelOptions = this.addLabelValuesToOptions(key, values);
-        this.logLabelOptions = this.logLabelOptions.map(keyOption => {
-          if (keyOption.value === key) {
-            return {
-              ...keyOption,
-              children: values.map(value => ({ label: value, value })),
-            };
-          }
-          return keyOption;
-        });
       } catch (e) {
         console.error(e);
       }
+    } else {
+      this.logLabelOptions = this.addLabelValuesToOptions(key, value);
     }
     return value;
   }
+
+  private addLabelValuesToOptions = (labelKey: string, values: string[]) => {
+    return this.logLabelOptions.map(keyOption =>
+      keyOption.value === labelKey
+        ? {
+            ...keyOption,
+            children: values.map(value => ({ label: value, value })),
+          }
+        : keyOption
+    );
+  };
 }