Add autocomplete to LogContext editor

Author: ddelemeny

src/LogContext/LogContextProvider.ts

@@ -126,6 +126,6 @@ export class LogContextProvider {
       runContextQuery?: (() => void),
       origQuery?: ElasticsearchQuery
   ): ReactNode {
-    return ( LogContextUI({row, runContextQuery, origQuery, updateQuery: query=>{this.contextQuery=query}}))
+    return ( LogContextUI({row, runContextQuery, origQuery, updateQuery: query=>{this.contextQuery=query}, datasource:this.datasource}))
   }
 }

src/LogContext/components/LogContextQueryEditor.tsx

@@ -5,13 +5,44 @@ import { useQueryBuilderContext } from 'LogContext/QueryBuilder';
 
 import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import {linter, Diagnostic, lintGutter} from "@codemirror/lint"
+import {autocompletion, CompletionContext, Completion} from "@codemirror/autocomplete"
+import { QuickwitDataSource } from "datasource";
+import { useDatasource } from "components/QueryEditor/ElasticsearchQueryContext";
 
 
+class QueryAutocompleter {
+  datasource: QuickwitDataSource
+  constructor(datasource: QuickwitDataSource){
+    this.datasource = datasource
+  }
+  getFields() {
+    return this.datasource.getTagKeys()
+  }
+  async getSuggestions(word: string): Promise<Completion[]>{
+    let suggestions: Completion[] = [];
+
+
+    const candidateFields = await this.getFields()
+    suggestions = (candidateFields
+      .filter(f=>f.text.startsWith(word))
+      .map(f=>({
+        type: 'text',
+        section: "Fields",
+        label:f.text,
+        detail:`${f.value}`,
+      })));
+
+    return suggestions;
+  }
+}
+
 export function LogContextQueryEditor(){
   const editorRef = useRef<ReactCodeMirrorRef|null>(null)
   const builder = useQueryBuilderContext();
   const {parsedQuery} = builder;
 
+  const autocompleter = new QueryAutocompleter(useDatasource())
+
   const queryLinter =  linter( view => {
     let diagnostics: Diagnostic[] = [];
 
@@ -26,13 +57,30 @@ export function LogContextQueryEditor(){
     }
     return diagnostics
   })
+
+  const autocomplete = autocompletion({
+    override: [async (context: CompletionContext)=>{
+      let word = context.matchBefore(/\S*/);
+
+      if (!word){ return null }
+      const suggestions = await autocompleter.getSuggestions(word?.text);
+
+      return {
+        from: word.from,
+        options: suggestions
+      }
+    }]
+  })
+
+
+
   return (<CodeMirror 
     ref={editorRef}
     className={css`height:100%`} // XXX : need to set height for both wrapper elements
     height="100%"
     theme={'dark'} 
     value={builder.query}
     onChange={(query)=>builder.setQuery(query || '' )}
-    extensions={[queryLinter, lintGutter()]}
+    extensions={[queryLinter, lintGutter(), autocomplete]}
     />);
 }

src/LogContext/components/LogContextUI.tsx

@@ -7,6 +7,8 @@ import { css } from "@emotion/css";
 import { Button } from "@grafana/ui";
 import { useQueryBuilder, QueryBuilderContext } from 'LogContext/QueryBuilder';
 import { LogContextQueryBuilderSidebar } from "./LogContextQueryBuilderSidebar";
+import { DatasourceContext } from "components/QueryEditor/ElasticsearchQueryContext";
+import { QuickwitDataSource } from "datasource";
 
 const logContextUiStyle = css`
   display: flex;
@@ -21,6 +23,7 @@ export interface LogContextProps {
   origQuery?: DataQuery
 }
 export interface LogContextUIProps extends LogContextProps {
+  datasource: QuickwitDataSource,
   updateQuery: (query: string) => void
 }
 
@@ -55,13 +58,15 @@ export function LogContextUI(props: LogContextUIProps ){
 
   return (
     <div className={logContextUiStyle}>
-      <QueryBuilderContext.Provider value={builder}>
-        <LogContextQueryBuilderSidebar {...props} updateQuery={setParsedQuery}/>
-        <div className={css`width:100%; display:flex; flex-direction:column; gap:0.5rem; min-width:0;`}>
-          {ActionBar}
-          <LogContextQueryEditor />
-        </div>
-      </QueryBuilderContext.Provider>
+      <DatasourceContext.Provider value={props.datasource}>
+        <QueryBuilderContext.Provider value={builder}>
+          <LogContextQueryBuilderSidebar {...props} updateQuery={setParsedQuery}/>
+          <div className={css`width:100%; display:flex; flex-direction:column; gap:0.5rem; min-width:0;`}>
+            {ActionBar}
+            <LogContextQueryEditor />
+          </div>
+        </QueryBuilderContext.Provider>
+      </DatasourceContext.Provider>
     </div>
   );
 }

src/components/QueryEditor/ElasticsearchQueryContext.tsx

@@ -11,13 +11,13 @@ import { reducer as metricsReducer } from './MetricAggregationsEditor/state/redu
 import { aliasPatternReducer, queryReducer, initQuery, initExploreQuery } from './state';
 import { getHook } from 'utils/context';
 
-const RangeContext = createContext<TimeRange | undefined>(undefined);
+export const RangeContext = createContext<TimeRange | undefined>(undefined);
 export const useRange = getHook(RangeContext);
 
-const QueryContext = createContext<ElasticsearchQuery | undefined>(undefined);
+export const QueryContext = createContext<ElasticsearchQuery | undefined>(undefined);
 export const useQuery = getHook(QueryContext);
 
-const DatasourceContext = createContext<ElasticDatasource | undefined>(undefined);
+export const DatasourceContext = createContext<ElasticDatasource | undefined>(undefined);
 export const useDatasource = getHook(DatasourceContext);
 
 interface Props {