Loki: Implement decolorize logql operation (#68972)

* Loki: Implement decolorize operation

* Fix tests

package.json

@@ -258,7 +258,7 @@
     "@grafana/faro-core": "1.0.2",
     "@grafana/faro-web-sdk": "1.0.2",
     "@grafana/google-sdk": "0.1.1",
-    "@grafana/lezer-logql": "0.1.3",
+    "@grafana/lezer-logql": "0.1.5",
     "@grafana/monaco-logql": "^0.0.7",
     "@grafana/runtime": "workspace:*",
     "@grafana/scenes": "^0.7.0",

public/app/plugins/datasource/loki/components/monaco-query-field/monaco-completion-provider/completions.test.ts

@@ -118,6 +118,12 @@ const afterSelectorCompletions = [
     type: 'PIPE_OPERATION',
     documentation: 'Operator docs',
   },
+  {
+    insertText: '| decolorize',
+    label: 'decolorize',
+    type: 'PIPE_OPERATION',
+    documentation: 'Operator docs',
+  },
 ];
 
 function buildAfterSelectorCompletions(

public/app/plugins/datasource/loki/components/monaco-query-field/monaco-completion-provider/completions.ts

@@ -281,6 +281,13 @@ export async function getAfterSelectorCompletions(
     documentation: explainOperator(LokiOperationId.Unwrap),
   });
 
+  completions.push({
+    type: 'PIPE_OPERATION',
+    label: 'decolorize',
+    insertText: `${prefix}decolorize`,
+    documentation: explainOperator(LokiOperationId.Decolorize),
+  });
+
   // Let's show label options only if query has parser
   if (hasQueryParser) {
     extractedLabelKeys.forEach((key) => {

public/app/plugins/datasource/loki/querybuilder/operations.ts

@@ -474,6 +474,18 @@ Example: \`\`error_level=\`level\` \`\`
         }`;
       },
     },
+    {
+      id: LokiOperationId.Decolorize,
+      name: 'Decolorize',
+      params: [],
+      defaultParams: [],
+      alternativesKey: 'format',
+      category: LokiVisualQueryOperationCategory.Formats,
+      orderRank: LokiOperationOrder.PipeOperations,
+      renderer: (op, def, innerExpr) => `${innerExpr} | decolorize`,
+      addOperationHandler: addLokiOperation,
+      explainHandler: () => `This will remove ANSI color codes from log lines.`,
+    },
     ...binaryScalarOperations,
     {
       id: LokiOperationId.NestedQuery,

public/app/plugins/datasource/loki/querybuilder/parsing.test.ts

@@ -304,6 +304,40 @@ describe('buildVisualQueryFromString', () => {
     );
   });
 
+  it('parses query with with only decolorize', () => {
+    expect(buildVisualQueryFromString('{app="frontend"} | decolorize')).toEqual(
+      noErrors({
+        labels: [
+          {
+            op: '=',
+            value: 'frontend',
+            label: 'app',
+          },
+        ],
+        operations: [{ id: LokiOperationId.Decolorize, params: [] }],
+      })
+    );
+  });
+
+  it('parses query with with decolorize and other operations', () => {
+    expect(buildVisualQueryFromString('{app="frontend"} | logfmt | decolorize | __error__="')).toEqual(
+      noErrors({
+        labels: [
+          {
+            op: '=',
+            value: 'frontend',
+            label: 'app',
+          },
+        ],
+        operations: [
+          { id: LokiOperationId.Logfmt, params: [] },
+          { id: LokiOperationId.Decolorize, params: [] },
+          { id: LokiOperationId.LabelFilterNoErrors, params: [] },
+        ],
+      })
+    );
+  });
+
   it('parses metrics query with function', () => {
     expect(buildVisualQueryFromString('rate({app="frontend"} | json [5m])')).toEqual(
       noErrors({

public/app/plugins/datasource/loki/querybuilder/parsing.ts

@@ -7,6 +7,7 @@ import {
   Bool,
   By,
   ConvOp,
+  Decolorize,
   Filter,
   FilterOp,
   Grouping,
@@ -176,6 +177,11 @@ export function handleExpression(expr: string, node: SyntaxNode, context: Contex
       break;
     }
 
+    case Decolorize: {
+      visQuery.operations.push(getDecolorize());
+      break;
+    }
+
     case RangeAggregationExpr: {
       visQuery.operations.push(handleRangeAggregation(expr, node, context));
       break;
@@ -368,6 +374,15 @@ function getLabelFormat(expr: string, node: SyntaxNode): QueryBuilderOperation {
   };
 }
 
+function getDecolorize(): QueryBuilderOperation {
+  const id = LokiOperationId.Decolorize;
+
+  return {
+    id,
+    params: [],
+  };
+}
+
 function handleUnwrapExpr(
   expr: string,
   node: SyntaxNode,

public/app/plugins/datasource/loki/querybuilder/types.ts

@@ -40,6 +40,7 @@ export enum LokiOperationId {
   Unpack = 'unpack',
   LineFormat = 'line_format',
   LabelFormat = 'label_format',
+  Decolorize = 'decolorize',
   Rate = 'rate',
   RateCounter = 'rate_counter',
   CountOverTime = 'count_over_time',

yarn.lock

@@ -3408,12 +3408,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@grafana/lezer-logql@npm:0.1.3":
+"@grafana/lezer-logql@npm:0.1.5":
-  version: 0.1.3
+  version: 0.1.5
-  resolution: "@grafana/lezer-logql@npm:0.1.3"
+  resolution: "@grafana/lezer-logql@npm:0.1.5"
   peerDependencies:
     "@lezer/lr": ^1.0.0
-  checksum: 160e4039ce7dd0cd304d37608c0764c24d61030a84636161161bb7cd5cd2d6f064cd3156e8814ed4cb5b8ddebeb4dbae77120f9a3eaea6afe889d99f6dd23543
+  checksum: ac0a842c06add812b583e35f0cd4a6a0272adc1a34b681ceb94fbde3e63ed93db72ef4ee9f6531a781c380530b98b2a178736160baa251262a240d11f3afb211
   languageName: node
   linkType: hard
 
@@ -18055,7 +18055,7 @@ __metadata:
     "@grafana/faro-core": 1.0.2
     "@grafana/faro-web-sdk": 1.0.2
     "@grafana/google-sdk": 0.1.1
-    "@grafana/lezer-logql": 0.1.3
+    "@grafana/lezer-logql": 0.1.5
     "@grafana/monaco-logql": ^0.0.7
     "@grafana/runtime": "workspace:*"
     "@grafana/scenes": ^0.7.0