Loki Query Editor: Update history items with successive queries (#60327)

feat(loki-monaco-autocomplete): add support to update history with successive queries

public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx

@@ -147,7 +147,7 @@ const MonacoQueryField = ({ history, onBlur, onRunQuery, initialValue, datasourc
             }));
             monaco.editor.setModelMarkers(model, 'owner', markers);
           });
-          const dataProvider = new CompletionDataProvider(langProviderRef.current, historyRef.current);
+          const dataProvider = new CompletionDataProvider(langProviderRef.current, historyRef);
           const completionProvider = getCompletionProvider(monaco, dataProvider);
 
           // completion-providers in monaco are not registered directly to editor-instances,

public/app/plugins/datasource/loki/components/monaco-query-field/monaco-completion-provider/CompletionDataProvider.test.ts

@@ -8,7 +8,7 @@ import { LokiQuery } from '../../../types';
 import { CompletionDataProvider } from './CompletionDataProvider';
 import { Label } from './situation';
 
-const history = [
+const history: Array<HistoryItem<LokiQuery>> = [
   {
     ts: 12345678,
     query: {
@@ -34,6 +34,7 @@ const history = [
     ts: 0,
     query: {
       refId: 'test-0',
+      expr: '',
     },
   },
 ];
@@ -55,10 +56,12 @@ const parserAndLabelKeys = {
 
 describe('CompletionDataProvider', () => {
   let completionProvider: CompletionDataProvider, languageProvider: LokiLanguageProvider, datasource: LokiDatasource;
+  let historyRef: { current: Array<HistoryItem<LokiQuery>> } = { current: [] };
   beforeEach(() => {
     datasource = createLokiDatasource();
     languageProvider = new LokiLanguageProvider(datasource);
-    completionProvider = new CompletionDataProvider(languageProvider, history as Array<HistoryItem<LokiQuery>>);
+    historyRef.current = history;
+    completionProvider = new CompletionDataProvider(languageProvider, historyRef);
 
     jest.spyOn(languageProvider, 'getLabelKeys').mockReturnValue(labelKeys);
     jest.spyOn(languageProvider, 'getLabelValues').mockResolvedValue(labelValues);
@@ -70,6 +73,22 @@ describe('CompletionDataProvider', () => {
     expect(completionProvider.getHistory()).toEqual(['{test: unit}', '{unit: test}']);
   });
 
+  test('Processes updates to the current historyRef value', () => {
+    expect(completionProvider.getHistory()).toEqual(['{test: unit}', '{unit: test}']);
+
+    historyRef.current = [
+      {
+        ts: 87654321,
+        query: {
+          refId: 'test-2',
+          expr: '{value="other"}',
+        },
+      },
+    ];
+
+    expect(completionProvider.getHistory()).toEqual(['{value="other"}']);
+  });
+
   test('Returns the expected label names with no other labels', async () => {
     expect(await completionProvider.getLabelNames([])).toEqual(labelKeys);
   });

public/app/plugins/datasource/loki/components/monaco-query-field/monaco-completion-provider/CompletionDataProvider.ts

@@ -8,11 +8,12 @@ import { LokiQuery } from '../../../types';
 
 import { Label } from './situation';
 
+interface HistoryRef {
+  current: Array<HistoryItem<LokiQuery>>;
+}
+
 export class CompletionDataProvider {
-  private history: string[] = [];
-  constructor(private languageProvider: LanguageProvider, history: Array<HistoryItem<LokiQuery>> = []) {
-    this.setHistory(history);
-  }
+  constructor(private languageProvider: LanguageProvider, private historyRef: HistoryRef = { current: [] }) {}
 
   private buildSelector(labels: Label[]): string {
     const allLabelTexts = labels.map(
@@ -22,18 +23,14 @@ export class CompletionDataProvider {
     return `{${allLabelTexts.join(',')}}`;
   }
 
-  setHistory(history: Array<HistoryItem<LokiQuery>> = []) {
-    this.history = chain(history)
+  getHistory() {
+    return chain(this.historyRef.current)
       .map((history: HistoryItem<LokiQuery>) => history.query.expr)
       .filter()
       .uniq()
       .value();
   }
 
-  getHistory() {
-    return this.history;
-  }
-
   async getLabelNames(otherLabels: Label[] = []) {
     if (otherLabels.length === 0) {
       // if there is no filtering, we have to use a special endpoint

public/app/plugins/datasource/loki/components/monaco-query-field/monaco-completion-provider/completions.test.ts

@@ -177,7 +177,9 @@ describe('getCompletions', () => {
   beforeEach(() => {
     datasource = createLokiDatasource();
     languageProvider = new LokiLanguageProvider(datasource);
-    completionProvider = new CompletionDataProvider(languageProvider, history);
+    completionProvider = new CompletionDataProvider(languageProvider, {
+      current: history,
+    });
 
     jest.spyOn(completionProvider, 'getLabelNames').mockResolvedValue(labelNames);
     jest.spyOn(completionProvider, 'getLabelValues').mockResolvedValue(labelValues);