Loki: Implement decolorize logql operation (#68972)

* Loki: Implement decolorize operation

* Fix tests

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',