azuremonitor: improve autocomplete experence

public/app/plugins/datasource/grafana-azure-monitor-datasource/editor/KustoQueryField.tsx

@@ -65,7 +65,7 @@ export default class KustoQueryField extends QueryField {
     this.fetchSchema();
     this.fetchSchema();
   }
   }
 
 
-  onTypeahead = () => {
+  onTypeahead = (force = false) => {
     const selection = window.getSelection();
     const selection = window.getSelection();
     if (selection.anchorNode) {
     if (selection.anchorNode) {
       const wrapperNode = selection.anchorNode.parentElement;
       const wrapperNode = selection.anchorNode.parentElement;
@@ -140,14 +140,8 @@ export default class KustoQueryField extends QueryField {
         suggestionGroups = this.getTableSuggestions(db);
         suggestionGroups = this.getTableSuggestions(db);
         prefix = prefix.replace('.', '');
         prefix = prefix.replace('.', '');
 
 
-      // built-in
-      } else if (prefix && !wrapperClasses.contains('argument')) {
-        if (modelPrefix.match(/\s$/i)) {
-          prefix = '';
-        }
-        typeaheadContext = 'context-builtin';
-        suggestionGroups = this.getKeywordSuggestions();
-      } else if (Plain.serialize(this.state.value) === '') {
+      // new
+      } else if (normalizeQuery(Plain.serialize(this.state.value)).match(/^\s*\w*$/i)) {
         typeaheadContext = 'context-new';
         typeaheadContext = 'context-new';
         if (this.schema) {
         if (this.schema) {
           suggestionGroups = this.getInitialSuggestions();
           suggestionGroups = this.getInitialSuggestions();
@@ -156,7 +150,15 @@ export default class KustoQueryField extends QueryField {
           setTimeout(this.onTypeahead, 0);
           setTimeout(this.onTypeahead, 0);
           return;
           return;
         }
         }
-      } else {
+
+      // built-in
+      } else if (prefix && !wrapperClasses.contains('argument')) {
+        if (modelPrefix.match(/\s$/i)) {
+          prefix = '';
+        }
+        typeaheadContext = 'context-builtin';
+        suggestionGroups = this.getKeywordSuggestions();
+      } else if (force === true) {
         typeaheadContext = 'context-builtin';
         typeaheadContext = 'context-builtin';
         if (modelPrefix.match(/\s$/i)) {
         if (modelPrefix.match(/\s$/i)) {
           prefix = '';
           prefix = '';
@@ -181,7 +183,7 @@ export default class KustoQueryField extends QueryField {
         .filter(group => group.items.length > 0);
         .filter(group => group.items.length > 0);
 
 
       // console.log('onTypeahead', selection.anchorNode, wrapperClasses, text, offset, prefix, typeaheadContext);
       // console.log('onTypeahead', selection.anchorNode, wrapperClasses, text, offset, prefix, typeaheadContext);
-      console.log('onTypeahead', modelPrefix, prefix, typeaheadContext);
+      // console.log('onTypeahead', prefix, typeaheadContext);
 
 
       this.setState({
       this.setState({
         typeaheadPrefix: prefix,
         typeaheadPrefix: prefix,

public/app/plugins/datasource/grafana-azure-monitor-datasource/editor/query_field.tsx

@@ -104,11 +104,11 @@ class QueryField extends React.Component<any, any> {
     const changed = value.document !== this.state.value.document;
     const changed = value.document !== this.state.value.document;
     this.setState({ value }, () => {
     this.setState({ value }, () => {
       if (changed) {
       if (changed) {
+        // call typeahead only if query changed
+        window.requestAnimationFrame(this.onTypeahead);
         this.onChangeQuery();
         this.onChangeQuery();
       }
       }
     });
     });
-
-    window.requestAnimationFrame(this.onTypeahead);
   };
   };
 
 
   request = (url?) => {
   request = (url?) => {
@@ -143,7 +143,7 @@ class QueryField extends React.Component<any, any> {
       case ' ': {
       case ' ': {
         if (event.ctrlKey) {
         if (event.ctrlKey) {
           event.preventDefault();
           event.preventDefault();
-          this.onTypeahead();
+          this.onTypeahead(true);
           return true;
           return true;
         }
         }
         break;
         break;