fix: quick filters QoL

Generate quoted phrase filters for text values that contain whitespace or
punctuation, matching manually-entered Quickwit queries such as
service_name:"auth-api" and attributes.grpc_message:"...".

Keep unquoted term filters only for simple token values and escape term
values correctly.

Improve filter autocomplete with fuzzy matching for keys and values, and pass
previous complete filters into later value lookups so suggestions narrow
progressively.

Add tests for phrase rendering, punctuated values, term escaping, fuzzy
matching, and prior-filter selection.

Signed-off-by: Patrik Cyvoct <patrik@ptrk.io>

Author: Sh4d1

src/components/QueryEditor/FilterEditor/index.test.tsx

@@ -0,0 +1,50 @@
+import { QueryFilter } from '@/types';
+
+import { getPreviousAdHocFilters } from './index';
+
+describe('FilterEditor helpers', () => {
+  it('returns only complete filters before the current filter', () => {
+    const filters: QueryFilter[] = [
+      {
+        id: 'first',
+        filter: { key: 'service', operator: '=', value: 'frontend' },
+      },
+      {
+        id: 'hidden',
+        hide: true,
+        filter: { key: 'cluster', operator: '=', value: 'prod' },
+      },
+      {
+        id: 'incomplete',
+        filter: { key: 'namespace', operator: '=', value: '' },
+      },
+      {
+        id: 'current',
+        filter: { key: 'attributes.grpc_message', operator: '=', value: '' },
+      },
+      {
+        id: 'later',
+        filter: { key: 'status', operator: '=', value: '500' },
+      },
+    ];
+
+    expect(getPreviousAdHocFilters(filters, 'current')).toEqual([
+      { key: 'service', operator: '=', value: 'frontend' },
+    ]);
+  });
+
+  it('does not include previous term filters with whitespace values', () => {
+    const filters: QueryFilter[] = [
+      {
+        id: 'invalid-term',
+        filter: { key: 'message', operator: 'term', value: 'invalid token' },
+      },
+      {
+        id: 'current',
+        filter: { key: 'status', operator: '=', value: '' },
+      },
+    ];
+
+    expect(getPreviousAdHocFilters(filters, 'current')).toEqual([]);
+  });
+});

src/components/QueryEditor/FilterEditor/index.tsx

@@ -7,7 +7,7 @@ import { QueryEditorRow } from '../QueryEditorRow';
 
 import { QueryFilter } from '@/types';
 import { Icon, InlineSegmentGroup, Segment, SegmentAsync, Tooltip } from '@grafana/ui';
-import { MetricFindValue, SelectableValue } from '@grafana/data';
+import { AdHocVariableFilter, MetricFindValue, SelectableValue } from '@grafana/data';
 import {
   addFilter,
   removeFilter,
@@ -17,10 +17,9 @@ import {
   changeFilterValue,
 } from '@/components/QueryEditor/FilterEditor/state/actions';
 import { segmentStyles } from '@/components/QueryEditor/styles';
-import { useFields } from '@/hooks/useFields';
 import { newFilterId } from '@/utils/uid';
 import { categorizeFieldType, filterOperations, filterOperationsFor } from '@/queryDef';
-import { hasWhiteSpace, isSet } from '@/utils';
+import { fuzzySearchSort, hasWhiteSpace, isSet } from '@/utils';
 
 interface FilterEditorProps {
   onSubmit: () => void;
@@ -48,6 +47,30 @@ function filterErrors(filter: QueryFilter): string[] {
   return errors;
 }
 
+function isFilterComplete(filter: QueryFilter): boolean {
+  return !filter.hide && filterErrors(filter).length === 0;
+}
+
+export function getPreviousAdHocFilters(filters: QueryFilter[] | undefined, currentId: QueryFilter['id']): AdHocVariableFilter[] {
+  const currentIndex = filters?.findIndex((filter) => filter.id === currentId) ?? -1;
+  if (!filters || currentIndex <= 0) {
+    return [];
+  }
+
+  return filters
+    .slice(0, currentIndex)
+    .filter(isFilterComplete)
+    .map((filter) => filter.filter);
+}
+
+function toFuzzyOptions(values: MetricFindValue[], query?: string): Array<SelectableValue<string>> {
+  return fuzzySearchSort(
+    values.map((value) => String(value.text)),
+    (text) => text,
+    query
+  ).map((text) => ({ label: text, value: text }));
+}
+
 export const FilterEditor = ({ onSubmit }: FilterEditorProps) => {
   const dispatch = useDispatch();
   const { filters } = useQuery();
@@ -98,21 +121,27 @@ export const FilterEditorRow = ({ value, onSubmit }: FilterEditorRowProps) => {
   const dispatch = useDispatch();
   const datasource = useDatasource();
   const range = useRange();
-  const getFields = useFields('filters', 'startsWith');
+  const { filters } = useQuery();
+  const previousFilters = getPreviousAdHocFilters(filters, value.id);
 
   const fieldCategory = categorizeFieldType(datasource.getFieldType?.(value.filter.key));
   const visibleOperations = filterOperationsFor(fieldCategory);
 
+  const loadFields = async (query?: string): Promise<Array<SelectableValue<string>>> => {
+    const values = await datasource.getTagKeys({ filters: previousFilters, timeRange: range });
+    return toFuzzyOptions(values as MetricFindValue[], query);
+  };
+
   const loadValues = async (query?: string): Promise<Array<SelectableValue<string>>> => {
     if (!isSet(value.filter.key) || !datasource.getTagValues) {
       return [];
     }
-    const values: MetricFindValue[] = await datasource.getTagValues({ key: value.filter.key, timeRange: range });
-    const q = query?.toLowerCase();
-    return values
-      .map((v) => String(v.text))
-      .filter((text) => !q || text.toLowerCase().includes(q))
-      .map((text) => ({ label: text, value: text }));
+    const values: MetricFindValue[] = await datasource.getTagValues({
+      key: value.filter.key,
+      filters: previousFilters,
+      timeRange: range,
+    });
+    return toFuzzyOptions(values, query);
   };
 
   return (
@@ -121,7 +150,7 @@ export const FilterEditorRow = ({ value, onSubmit }: FilterEditorRowProps) => {
         <SegmentAsync
           allowCustomValue={true}
           className={segmentStyles}
-          loadOptions={getFields}
+          loadOptions={loadFields}
           reloadOptionsOnChange={true}
           onChange={(e) => {
             const newKey = e.value ?? '';

src/datasource/base.test.ts

@@ -1,4 +1,9 @@
-import { formatQuery, luceneEscape } from './base';
+import { AdHocVariableFilter } from '@grafana/data';
+import { from } from 'rxjs';
+
+import { addAddHocFilter } from '../modifyQuery';
+import { ElasticsearchQuery } from '../types';
+import { BaseQuickwitDataSource, formatQuery, luceneEscape } from './base';
 
 describe('BaseQuickwitDataSource', () => {
   describe('luceneEscape', () => {
@@ -171,4 +176,150 @@ describe('BaseQuickwitDataSource', () => {
     });
   });
   });
+
+  describe('quick filters', () => {
+    const addFilterToQuery = (
+      fieldTypes: Record<string, string>,
+      query: ElasticsearchQuery,
+      key: string,
+      value: string,
+      negate = false
+    ) => {
+      return (BaseQuickwitDataSource.prototype as any).addFilterToQuery.call(
+        { fieldTypes },
+        query,
+        key,
+        value,
+        negate
+      ) as ElasticsearchQuery;
+    };
+
+    const renderAdHocFilters = (
+      fieldTypes: Record<string, string>,
+      filters: AdHocVariableFilter[]
+    ) => {
+      return (BaseQuickwitDataSource.prototype as any).addAdHocFilters.call(
+        { fieldTypes },
+        '',
+        filters
+      ) as string;
+    };
+
+    it('adds text filters with whitespace as phrase filters', () => {
+      const query = { refId: 'A', query: '', metrics: [], bucketAggs: [], filters: [] } as any;
+
+      const updatedQuery = addFilterToQuery(
+        { 'attributes.grpc_message': 'text' },
+        query,
+        'attributes.grpc_message',
+        'Error:[(0) invalid token, ]'
+      );
+
+      expect(updatedQuery.filters?.[0].filter).toEqual({
+        key: 'attributes.grpc_message',
+        operator: '=',
+        value: 'Error:[(0) invalid token, ]',
+      });
+    });
+
+    it('renders text phrase filters with quoted Quickwit syntax', () => {
+      const result = renderAdHocFilters(
+        { 'attributes.grpc_message': 'text' },
+        [{
+          key: 'attributes.grpc_message',
+          operator: '=',
+          value: 'Error:[(0) invalid token, ]',
+        }]
+      );
+
+      expect(result).toBe('attributes.grpc_message:"Error:[(0) invalid token, ]"');
+    });
+
+    it('renders negative text phrase filters with quoted Quickwit syntax', () => {
+      const result = renderAdHocFilters(
+        { 'attributes.grpc_message': 'text' },
+        [{
+          key: 'attributes.grpc_message',
+          operator: '!=',
+          value: 'Error:[(0) invalid token, ]',
+        }]
+      );
+
+      expect(result).toBe('-attributes.grpc_message:"Error:[(0) invalid token, ]"');
+    });
+
+    it('keeps simple-token text filters as term filters', () => {
+      const query = { refId: 'A', query: '', metrics: [], bucketAggs: [], filters: [] } as any;
+
+      const updatedQuery = addFilterToQuery(
+        { 'attributes.grpc_message': 'text' },
+        query,
+        'attributes.grpc_message',
+        'unavailable'
+      );
+
+      expect(updatedQuery.filters?.[0].filter.operator).toBe('term');
+    });
+
+    it('keeps punctuated text filters as phrase filters', () => {
+      const query = { refId: 'A', query: '', metrics: [], bucketAggs: [], filters: [] } as any;
+
+      const updatedQuery = addFilterToQuery(
+        { service_name: 'text' },
+        query,
+        'service_name',
+        'auth-api'
+      );
+
+      expect(updatedQuery.filters?.[0].filter).toEqual({
+        key: 'service_name',
+        operator: '=',
+        value: 'auth-api',
+      });
+    });
+
+    it('renders punctuated text filters with quoted Quickwit syntax', () => {
+      const result = renderAdHocFilters(
+        { service_name: 'text' },
+        [{
+          key: 'service_name',
+          operator: '=',
+          value: 'auth-api',
+        }]
+      );
+
+      expect(result).toBe('service_name:"auth-api"');
+    });
+
+    it('escapes special characters in unquoted term filters', () => {
+      const result = addAddHocFilter('', {
+        key: 'attributes.grpc_message',
+        operator: 'term',
+        value: 'error:foo',
+      });
+
+      expect(result).toBe('attributes.grpc_message:error\\:foo');
+    });
+
+    it('applies prior filters when loading tag values', async () => {
+      const getTerms = jest.fn(() => from([[]]));
+
+      await (BaseQuickwitDataSource.prototype as any).getTagValues.call(
+        {
+          fieldTypes: {},
+          addAdHocFilters: BaseQuickwitDataSource.prototype.addAdHocFilters,
+          getTerms,
+        },
+        {
+          key: 'status',
+          filters: [{ key: 'service', operator: '=', value: 'frontend' }],
+        }
+      );
+
+      expect(getTerms).toHaveBeenCalledWith(
+        { field: 'status', query: 'service:"frontend"' },
+        undefined
+      );
+    });
+  });
 });