Loki: Fix highlight of logs when using filter expressions with backticks (#36024)

* Add highlight for backticks and queries with parser

* Fix escaping for backticks and quotes

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

@@ -5,18 +5,42 @@ describe('getHighlighterExpressionsFromQuery', () => {
     expect(getHighlighterExpressionsFromQuery('')).toEqual([]);
   });
 
-  it('returns an expression for query with filter', () => {
+  it('returns an expression for query with filter using quotes', () => {
     expect(getHighlighterExpressionsFromQuery('{foo="bar"} |= "x"')).toEqual(['x']);
   });
 
+  it('returns an expression for query with filter using backticks', () => {
+    expect(getHighlighterExpressionsFromQuery('{foo="bar"} |= `x`')).toEqual(['x']);
+  });
+
   it('returns expressions for query with filter chain', () => {
     expect(getHighlighterExpressionsFromQuery('{foo="bar"} |= "x" |~ "y"')).toEqual(['x', 'y']);
   });
 
-  it('returns drops expressions for query with negative filter chain', () => {
+  it('returns expressions for query with filter chain using both backticks and quotes', () => {
+    expect(getHighlighterExpressionsFromQuery('{foo="bar"} |= "x" |~ `y`')).toEqual(['x', 'y']);
+  });
+
+  it('returns expression for query with log parser', () => {
+    expect(getHighlighterExpressionsFromQuery('{foo="bar"} |= "x" | logfmt')).toEqual(['x']);
+  });
+
+  it('returns expressions for query with filter chain folowed by log parser', () => {
+    expect(getHighlighterExpressionsFromQuery('{foo="bar"} |= "x" |~ "y" | logfmt')).toEqual(['x', 'y']);
+  });
+
+  it('returns drops expressions for query with negative filter chain using quotes', () => {
     expect(getHighlighterExpressionsFromQuery('{foo="bar"} |= "x" != "y"')).toEqual(['x']);
   });
 
+  it('returns expressions for query with filter chain using backticks', () => {
+    expect(getHighlighterExpressionsFromQuery('{foo="bar"} |= `x` |~ `y`')).toEqual(['x', 'y']);
+  });
+
+  it('returns expressions for query with filter chain using quotes and backticks', () => {
+    expect(getHighlighterExpressionsFromQuery('{foo="bar"} |= "x" |~ `y`')).toEqual(['x', 'y']);
+  });
+
   it('returns null if filter term is not wrapped in double quotes', () => {
     expect(getHighlighterExpressionsFromQuery('{foo="bar"} |= x')).toEqual([]);
   });
@@ -28,4 +52,12 @@ describe('getHighlighterExpressionsFromQuery', () => {
   it('does not escape filter term if regex filter operator is used', () => {
     expect(getHighlighterExpressionsFromQuery('{foo="bar"} |~ "x[yz].w" |~ "z.+"')).toEqual(['x[yz].w', 'z.+']);
   });
+
+  it('removes extra backslash escaping if regex filter operator and quotes are used', () => {
+    expect(getHighlighterExpressionsFromQuery('{foo="bar"} |~ "\\\\w+"')).toEqual(['\\w+']);
+  });
+
+  it('does not remove backslash escaping if regex filter operator and backticks are used', () => {
+    expect(getHighlighterExpressionsFromQuery('{foo="bar"} |~ `\\w+`')).toEqual(['\\w+']);
+  });
 });

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

@@ -37,15 +37,25 @@ export function getHighlighterExpressionsFromQuery(input: string): string[] {
       expression = expression.substr(filterEnd);
     }
 
-    // Unwrap the filter term by removing quotes
+    const quotedTerm = filterTerm.match(/"(.*?)"/);
-    const quotedTerm = filterTerm.match(/^"((?:[^\\"]|\\")*)"$/);
+    const backtickedTerm = filterTerm.match(/`(.*?)`/);
+    const term = quotedTerm || backtickedTerm;
 
-    if (quotedTerm) {
+    if (term) {
-      const unwrappedFilterTerm = quotedTerm[1];
+      const unwrappedFilterTerm = term[1];
       const regexOperator = filterOperator === '|~';
-      results.push(regexOperator ? unwrappedFilterTerm : escapeRegExp(unwrappedFilterTerm));
+
+      // Only filter expressions with |~ operator are treated as regular expressions
+      if (regexOperator) {
+        // When using backticks, Loki doesn't require to escape special characters and we can just push regular expression to highlights array
+        // When using quotes, we have extra backslash escaping and we need to replace \\ with \
+        results.push(backtickedTerm ? unwrappedFilterTerm : unwrappedFilterTerm.replace(/\\\\/g, '\\'));
+      } else {
+        // We need to escape this string so it is not matched as regular expression
+        results.push(escapeRegExp(unwrappedFilterTerm));
+      }
     } else {
-      return [];
+      return results;
     }
   }