Loki: Fix label filter expression treating int as string (#62496)

* fix: label filter expression treats int as string

* refactor: labelFilterRenderer

* test: add tests to labelFilterRenderer

* refactor: use backticks based on the operator not the value

* test: labelFilterRenderer uses the correct value type based on the operator

* test: use it.every rather than having multiple repetitive tests

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

@@ -1,6 +1,11 @@
 import { QueryBuilderOperationDef } from '../../prometheus/querybuilder/shared/types';
 
-import { createRangeOperation, createRangeOperationWithGrouping, getLineFilterRenderer } from './operationUtils';
+import {
+  createRangeOperation,
+  createRangeOperationWithGrouping,
+  getLineFilterRenderer,
+  labelFilterRenderer,
+} from './operationUtils';
 import { LokiVisualQueryOperationCategory } from './types';
 
 describe('createRangeOperation', () => {
@@ -156,3 +161,26 @@ describe('getLineFilterRenderer', () => {
     );
   });
 });
+
+describe('labelFilterRenderer', () => {
+  const MOCK_MODEL = { id: '__label_filter', params: ['label', '', 'value'] };
+  const MOCK_DEF = undefined as unknown as QueryBuilderOperationDef;
+  const MOCK_INNER_EXPR = '{job="grafana"}';
+
+  it.each`
+    operator | type        | expected
+    ${'='}   | ${'string'} | ${'`value`'}
+    ${'!='}  | ${'string'} | ${'`value`'}
+    ${'=~'}  | ${'string'} | ${'`value`'}
+    ${'!~'}  | ${'string'} | ${'`value`'}
+    ${'>'}   | ${'number'} | ${'value'}
+    ${'>='}  | ${'number'} | ${'value'}
+    ${'<'}   | ${'number'} | ${'value'}
+    ${'<='}  | ${'number'} | ${'value'}
+  `("value should be of type '$type' when operator is: $operator", ({ operator, expected }) => {
+    MOCK_MODEL.params[1] = operator;
+    expect(labelFilterRenderer(MOCK_MODEL, MOCK_DEF, MOCK_INNER_EXPR)).toBe(
+      `{job="grafana"} | label ${operator} ${expected}`
+    );
+  });
+});

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

@@ -148,7 +148,9 @@ function operationWithRangeVectorRenderer(
 }
 
 export function labelFilterRenderer(model: QueryBuilderOperation, def: QueryBuilderOperationDef, innerExpr: string) {
-  if (model.params[1] === '<' || model.params[1] === '>') {
+  const integerOperators = ['<', '<=', '>', '>='];
+
+  if (integerOperators.includes(String(model.params[1]))) {
     return `${innerExpr} | ${model.params[0]} ${model.params[1]} ${model.params[2]}`;
   }