Line filters: Allow backticks

project-words.txt

@@ -507,3 +507,4 @@ pagedown
 linefilter
 queryfrontend
 timesync
+openmetrics

src/Components/ServiceScene/LineFilter/LineFilterEditor.tsx

@@ -113,7 +113,6 @@ export function LineFilterEditor({
 const getStyles = (theme: GrafanaTheme2) => ({
   inputNoBorderRight: css({
     input: {
-      borderRight: 'none',
       borderTopRightRadius: 0,
       borderBottomRightRadius: 0,
     },
@@ -131,6 +130,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     justifyContent: 'center',
   }),
   includeButton: css({
+    borderLeft: 'none',
     borderRadius: 0,
     borderRight: 'none',
     '&[disabled]': {

src/services/query.test.ts

@@ -153,7 +153,7 @@ describe('renderLogQLFieldFilters', () => {
     );
   });
 });
-describe('renderLogQLLineFilter', () => {
+describe('renderLogQLLineFilter not containing backticks', () => {
   // REGEXP ops
   test('Renders positive case-insensitive regex', () => {
     const filters: AdHocVariableFilter[] = [
@@ -164,7 +164,18 @@ describe('renderLogQLLineFilter', () => {
       },
     ];
 
-    expect(renderLogQLLineFilter(filters)).toEqual('|~ `(?i).(search`');
+    expect(renderLogQLLineFilter(filters)).toEqual('|~ "(?i).(search"');
+  });
+  test('Renders positive case-insensitive regex with newline', () => {
+    const filters: AdHocVariableFilter[] = [
+      {
+        key: LineFilterCaseSensitive.caseInsensitive,
+        operator: LineFilterOp.regex,
+        value: '\nThe "key" field',
+      },
+    ];
+
+    expect(renderLogQLLineFilter(filters)).toEqual('|~ "(?i)\\nThe \\"key\\" field"');
   });
   test('Renders positive case-sensitive regex', () => {
     const filters: AdHocVariableFilter[] = [
@@ -175,7 +186,7 @@ describe('renderLogQLLineFilter', () => {
       },
     ];
 
-    expect(renderLogQLLineFilter(filters)).toEqual('|~ `\\w+`');
+    expect(renderLogQLLineFilter(filters)).toEqual('|~ "\\\\w+"');
   });
   test('Renders negative case-sensitive regex', () => {
     const filters: AdHocVariableFilter[] = [
@@ -186,7 +197,7 @@ describe('renderLogQLLineFilter', () => {
       },
     ];
 
-    expect(renderLogQLLineFilter(filters)).toEqual('!~ `\\w+`');
+    expect(renderLogQLLineFilter(filters)).toEqual('!~ "\\\\w+"');
   });
   test('Renders negative case-insensitive regex', () => {
     const filters: AdHocVariableFilter[] = [
@@ -197,7 +208,7 @@ describe('renderLogQLLineFilter', () => {
       },
     ];
 
-    expect(renderLogQLLineFilter(filters)).toEqual('!~ `(?i)\\w+`');
+    expect(renderLogQLLineFilter(filters)).toEqual('!~ "(?i)\\\\w+"');
   });
 
   // String contains ops
@@ -210,7 +221,7 @@ describe('renderLogQLLineFilter', () => {
       },
     ];
 
-    expect(renderLogQLLineFilter(filters)).toEqual('|~ `(?i)\\.\\(search`');
+    expect(renderLogQLLineFilter(filters)).toEqual('|~ "(?i)\\\\.\\\\(search"');
   });
   test('Renders positive case-sensitive string compare', () => {
     const filters: AdHocVariableFilter[] = [
@@ -221,7 +232,7 @@ describe('renderLogQLLineFilter', () => {
       },
     ];
 
-    expect(renderLogQLLineFilter(filters)).toEqual('|= `.(search`');
+    expect(renderLogQLLineFilter(filters)).toEqual('|= ".(search"');
   });
   test('Renders negative case-insensitive string compare', () => {
     const filters: AdHocVariableFilter[] = [
@@ -232,7 +243,7 @@ describe('renderLogQLLineFilter', () => {
       },
     ];
 
-    expect(renderLogQLLineFilter(filters)).toEqual('!~ `(?i)\\.\\(search`');
+    expect(renderLogQLLineFilter(filters)).toEqual('!~ "(?i)\\\\.\\\\(search"');
   });
   test('Renders negative case-sensitive string compare', () => {
     const filters: AdHocVariableFilter[] = [
@@ -243,10 +254,65 @@ describe('renderLogQLLineFilter', () => {
       },
     ];
 
-    expect(renderLogQLLineFilter(filters)).toEqual('!= `.(search`');
+    expect(renderLogQLLineFilter(filters)).toEqual('!= ".(search"');
+  });
+});
+describe('renderLogQLLineFilter containing backticks', () => {
+  // Keep in mind we see twice as many escape chars in the test code as we do IRL
+  test('Renders positive case-insensitive regex with newline', () => {
+    const filters: AdHocVariableFilter[] = [
+      {
+        key: LineFilterCaseSensitive.caseInsensitive,
+        operator: LineFilterOp.regex,
+        // If a log line contains a newline as a string, they will need to escape the escape char and type "\\n" in the field input, otherwise loki will match actual newlines with regex searches
+        value: '\\\\nThe `key` field', // the user enters: \\nThe `key` field
+      },
+    ];
+    expect(renderLogQLLineFilter(filters)).toEqual('|~ "(?i)\\\\\\\\nThe `key` field"');
+  });
+  test('Renders positive case-sensitive regex with newline', () => {
+    const filters: AdHocVariableFilter[] = [
+      {
+        key: LineFilterCaseSensitive.caseSensitive,
+        operator: LineFilterOp.regex,
+        value: '\\\\nThe `key` field', // the user enters: \\nThe `key` field
+      },
+    ];
+    expect(renderLogQLLineFilter(filters)).toEqual('|~ "\\\\\\\\nThe `key` field"');
+  });
+  test('Renders positive case-insensitive match with newline', () => {
+    const filters: AdHocVariableFilter[] = [
+      {
+        key: LineFilterCaseSensitive.caseInsensitive,
+        operator: LineFilterOp.match,
+        value: '\\nThe `key` field', // the user enters: \nThe `key` field
+      },
+    ];
+    expect(renderLogQLLineFilter(filters)).toEqual(`|~ "(?i)\\\\\\\\nThe \`key\` field"`);
+  });
+  test('Renders positive case-sensitive match with newline', () => {
+    const filters: AdHocVariableFilter[] = [
+      {
+        key: LineFilterCaseSensitive.caseSensitive,
+        operator: LineFilterOp.match,
+        value: '\\nThe `key` field', // the user enters: \nThe `key` field
+      },
+    ];
+    expect(renderLogQLLineFilter(filters)).toEqual('|= "\\\\nThe `key` field"');
+  });
+  test('Renders positive case-insensitive regex', () => {
+    const filters: AdHocVariableFilter[] = [
+      {
+        key: LineFilterCaseSensitive.caseInsensitive,
+        operator: LineFilterOp.regex,
+        value: `^level=[error|warning].+((25[0-5]|(2[0-4]|1\\d|[1-9]|)\\d)\\.?\\b){4}:\\d{5}"$|\``, // the user enters ^level=[error|warning].+((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}:\d{5}"$|`
+      },
+    ];
+    expect(renderLogQLLineFilter(filters)).toEqual(
+      '|~ "(?i)^level=[error|warning].+((25[0-5]|(2[0-4]|1\\\\d|[1-9]|)\\\\d)\\\\.?\\\\b){4}:\\\\d{5}\\"$|`"'
+    );
   });
 });
-
 describe('renderLogQLLabelFilters', () => {
   test('Renders positive filters', () => {
     const filters: AdHocVariableFilter[] = [

src/services/query.ts

@@ -1,7 +1,7 @@
 import { AdHocVariableFilter } from '@grafana/data';
 import { AppliedPattern, numericOperatorArray } from 'Components/IndexScene/IndexScene';
 import { EMPTY_VARIABLE_VALUE, VAR_DATASOURCE_EXPR } from './variables';
-import { escapeRegExp, groupBy, trim } from 'lodash';
+import { groupBy, trim } from 'lodash';
 import { getValueFromFieldsFilter } from './variableGetters';
 import { LokiQuery } from './lokiQuery';
 import { SceneDataQueryResourceRequest, SceneDataQueryResourceRequestOptions } from './datasourceTypes';
@@ -120,34 +120,48 @@ export function renderLogQLFieldFilters(filters: AdHocVariableFilter[]) {
   return `${positiveFilters} ${negativeFilters} ${numericFilters}`.trim();
 }
 
+export function escapeDoubleQuotedLineFilter(filter: AdHocFilterWithLabels) {
+  // Is not regex
+  if (filter.operator === LineFilterOp.match || filter.operator === LineFilterOp.negativeMatch) {
+    if (filter.key === LineFilterCaseSensitive.caseInsensitive) {
+      return escapeLabelValueInRegexSelector(filter.value);
+    } else {
+      return escapeLabelValueInExactSelector(filter.value);
+    }
+  } else {
+    return escapeLabelValueInExactSelector(filter.value);
+  }
+}
+
+function buildLogQlLineFilter(filter: AdHocFilterWithLabels, value: string) {
+  // Change operator if needed and insert caseInsensitive flag
+  if (filter.key === LineFilterCaseSensitive.caseInsensitive) {
+    if (filter.operator === LineFilterOp.negativeRegex || filter.operator === LineFilterOp.negativeMatch) {
+      return `${LineFilterOp.negativeRegex} "(?i)${value}"`;
+    }
+    return `${LineFilterOp.regex} "(?i)${value}"`;
+  }
+
+  return `${filter.operator} "${value}"`;
+}
+
 /**
  * Converts line filter ad-hoc filters to LogQL
  *
  * the filter key is LineFilterCaseSensitive
  * the filter operator is LineFilterOp
- * the value is the user in put
+ * the value is the user input
  */
 export function renderLogQLLineFilter(filters: AdHocFilterWithLabels[]) {
   sortLineFilters(filters);
   return filters
-    .map((f) => {
-      if (f.value === '') {
+    .map((filter) => {
+      if (filter.value === '') {
         return '';
       }
-      const value =
-        (f.operator === LineFilterOp.match || f.operator === LineFilterOp.negativeMatch) &&
-        f.key === LineFilterCaseSensitive.caseInsensitive
-          ? escapeRegExp(f.value)
-          : f.value;
-
-      if (f.key === LineFilterCaseSensitive.caseInsensitive) {
-        if (f.operator === LineFilterOp.negativeRegex || f.operator === LineFilterOp.negativeMatch) {
-          return `${LineFilterOp.negativeRegex} \`(?i)${value}\``;
-        }
-        return `${LineFilterOp.regex} \`(?i)${value}\``;
-      }
 
-      return `${f.operator} \`${value}\``;
+      const value = escapeDoubleQuotedLineFilter(filter);
+      return buildLogQlLineFilter(filter, value);
     })
     .join(' ');
 }
@@ -264,3 +278,25 @@ export function sanitizeStreamSelector(expression: string) {
 
 // default line limit; each data source can define it's own line limit too
 export const LINE_LIMIT = 1000;
+
+// Taken from /grafana/grafana/public/app/plugins/datasource/loki/languageUtils.ts
+
+// based on the openmetrics-documentation, the 3 symbols we have to handle are:
+// - \n ... the newline character
+// - \  ... the backslash character
+// - "  ... the double-quote character
+export function escapeLabelValueInExactSelector(labelValue: string): string {
+  return labelValue.replace(/\\/g, '\\\\').replace(/\n/g, '\\n').replace(/"/g, '\\"');
+}
+
+// Loki regular-expressions use the RE2 syntax (https://github.com/google/re2/wiki/Syntax),
+// so every character that matches something in that list has to be escaped.
+// the list of meta characters is: *+?()|\.[]{}^$
+// we make a javascript regular expression that matches those characters:
+const RE2_METACHARACTERS = /[*+?()|\\.\[\]{}^$]/g;
+function escapeLokiRegexp(value: string): string {
+  return value.replace(RE2_METACHARACTERS, '\\$&');
+}
+export function escapeLabelValueInRegexSelector(labelValue: string): string {
+  return escapeLabelValueInExactSelector(escapeLokiRegexp(labelValue));
+}