Prometheus: Fix autocomplete does not work on incomplete input (#29854)

* WIP, works but need to do more testing

* Update solution

* Fix autocomplete with metrics

* Update public/app/plugins/datasource/prometheus/language_provider.ts

* Update public/app/plugins/datasource/prometheus/language_provider.ts

* Change test for new functionality

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

@@ -329,11 +329,11 @@ export default class PromQlLanguageProvider extends LanguageProvider {
     const suffix = line.substr(cursorOffset);
     const suffix = line.substr(cursorOffset);
     const prefix = line.substr(0, cursorOffset);
     const prefix = line.substr(0, cursorOffset);
     const isValueStart = text.match(/^(=|=~|!=|!~)/);
     const isValueStart = text.match(/^(=|=~|!=|!~)/);
-    const isValueEnd = suffix.match(/^"?[,}]/);
-    // detect cursor in front of value, e.g., {key=|"}
+    const isValueEnd = suffix.match(/^"?[,}]|$/);
+    // Detect cursor in front of value, e.g., {key=|"}
     const isPreValue = prefix.match(/(=|=~|!=|!~)$/) && suffix.match(/^"/);
     const isPreValue = prefix.match(/(=|=~|!=|!~)$/) && suffix.match(/^"/);
 
 
-    // Don't suggestq anything at the beginning or inside a value
+    // Don't suggest anything at the beginning or inside a value
     const isValueEmpty = isValueStart && isValueEnd;
     const isValueEmpty = isValueStart && isValueEnd;
     const hasValuePrefix = isValueEnd && !isValueStart;
     const hasValuePrefix = isValueEnd && !isValueStart;
     if ((!isValueEmpty && !hasValuePrefix) || isPreValue) {
     if ((!isValueEmpty && !hasValuePrefix) || isPreValue) {

public/app/plugins/datasource/prometheus/language_utils.test.ts

@@ -9,8 +9,9 @@ describe('parseSelector()', () => {
     expect(parsed.labelKeys).toEqual([]);
     expect(parsed.labelKeys).toEqual([]);
   });
   });
 
 
-  it('throws if selector is broken', () => {
-    expect(() => parseSelector('{foo')).toThrow();
+  it('returns a clean selector from an unclosed selector', () => {
+    const parsed = parseSelector('{foo');
+    expect(parsed.selector).toBe('{}');
   });
   });
 
 
   it('returns the selector sorted by label key', () => {
   it('returns the selector sorted by label key', () => {

public/app/plugins/datasource/prometheus/language_utils.ts

@@ -42,7 +42,7 @@ export function processLabels(labels: Array<{ [key: string]: string }>, withName
 }
 }
 
 
 // const cleanSelectorRegexp = /\{(\w+="[^"\n]*?")(,\w+="[^"\n]*?")*\}/;
 // const cleanSelectorRegexp = /\{(\w+="[^"\n]*?")(,\w+="[^"\n]*?")*\}/;
-export const selectorRegexp = /\{[^}]*?\}/;
+export const selectorRegexp = /\{[^}]*?(\}|$)/;
 export const labelRegexp = /\b(\w+)(!?=~?)("[^"\n]*?")/g;
 export const labelRegexp = /\b(\w+)(!?=~?)("[^"\n]*?")/g;
 export function parseSelector(query: string, cursorOffset = 1): { labelKeys: any[]; selector: string } {
 export function parseSelector(query: string, cursorOffset = 1): { labelKeys: any[]; selector: string } {
   if (!query.match(selectorRegexp)) {
   if (!query.match(selectorRegexp)) {

public/app/plugins/datasource/prometheus/promql.ts

@@ -393,7 +393,7 @@ const tokenizer: Grammar = {
     },
     },
   },
   },
   'context-labels': {
   'context-labels': {
-    pattern: /\{[^}]*(?=})/,
+    pattern: /\{[^}]*(?=}?)/,
     greedy: true,
     greedy: true,
     inside: {
     inside: {
       comment: {
       comment: {